From 077a87bfead30f1add30988eed12835dfc5bc563 Mon Sep 17 00:00:00 2001
From: Long Nguyen <18nguyenl@gmail.com>
Date: Wed, 6 Sep 2023 17:35:50 -0500
Subject: [PATCH] Ryuuart/issue203 (#225)

* Enable more sandpack customization

* Clean up

* Polish

* Start on Getting Started documentation

* Structure first pass of documentation

* Write design principles

* Change where sandpack source files are stored

* Add css support

* Draft CSS docs

* Polish styles

* Polish

* Polish

* Document initialization

* Document nesting

* Add docs for nesting and reusing

* Use local manawave build

* Change CTA

* Polish

* Draft

* Document

* Document

* Document
---
 web/astro.config.mjs                          | 17 +++-
 .../components/docs/sandpack/Sandpack.astro   | 15 ++-
 web/src/components/docs/sandpack/Sandpack.tsx | 47 ++++++---
 .../components/docs/sandpack/src/index.html   | 12 ++-
 web/src/components/docs/sandpack/src/index.js |  1 +
 .../components/docs/sandpack/src/js/index.js  |  2 -
 .../components/docs/sandpack/src/style.css    | 27 ++++++
 .../docs/sandpack/src/styles/style.css        |  4 -
 web/src/components/home/hero/Hero.astro       |  2 +-
 .../docs/guides/_src/css/content/index.html   | 47 +++++++++
 .../docs/guides/_src/css/content/style.css    | 56 +++++++++++
 .../docs/guides/_src/css/marquee/index.html   | 46 +++++++++
 .../docs/guides/_src/css/marquee/style.css    | 34 +++++++
 .../guides/_src/initialization/dom/index.html | 22 +++++
 .../guides/_src/initialization/dom/index.js   |  6 ++
 .../docs/docs/guides/_src/nesting/index.html  | 23 +++++
 .../docs/docs/guides/_src/reusing/index.html  | 20 ++++
 .../docs/docs/guides/_src/reusing/index.js    |  7 ++
 web/src/content/docs/docs/guides/css.mdx      | 53 +++++++++++
 .../docs/docs/guides/initialization.mdx       | 30 ++++++
 web/src/content/docs/docs/guides/inputs.mdx   | 51 ++++++++++
 web/src/content/docs/docs/guides/nesting.mdx  | 22 +++++
 .../content/docs/docs/guides/overrides.mdx    | 71 ++++++++++++++
 web/src/content/docs/docs/guides/reusing.mdx  | 37 ++++++++
 web/src/content/docs/docs/index.mdx           | 10 --
 .../getting-started/webcomponent/index.html   | 22 +++++
 .../docs/docs/quickstart/getting-started.mdx  | 95 +++++++++++++++++++
 .../content/docs/docs/quickstart/index.mdx    | 24 +++++
 .../docs/docs/quickstart/principles.mdx       | 89 +++++++++++++++++
 .../docs/docs/reference/attributes.mdx        | 68 +++++++++++++
 .../content/docs/docs/reference/behavior.mdx  | 58 +++++++++++
 .../content/docs/docs/reference/instance.mdx  | 10 ++
 .../content/docs/docs/reference/limits.mdx    | 25 +++++
 .../content/docs/docs/reference/overrides.mdx | 22 +++++
 34 files changed, 1034 insertions(+), 41 deletions(-)
 create mode 100644 web/src/components/docs/sandpack/src/index.js
 delete mode 100644 web/src/components/docs/sandpack/src/js/index.js
 create mode 100644 web/src/components/docs/sandpack/src/style.css
 delete mode 100644 web/src/components/docs/sandpack/src/styles/style.css
 create mode 100644 web/src/content/docs/docs/guides/_src/css/content/index.html
 create mode 100644 web/src/content/docs/docs/guides/_src/css/content/style.css
 create mode 100644 web/src/content/docs/docs/guides/_src/css/marquee/index.html
 create mode 100644 web/src/content/docs/docs/guides/_src/css/marquee/style.css
 create mode 100644 web/src/content/docs/docs/guides/_src/initialization/dom/index.html
 create mode 100644 web/src/content/docs/docs/guides/_src/initialization/dom/index.js
 create mode 100644 web/src/content/docs/docs/guides/_src/nesting/index.html
 create mode 100644 web/src/content/docs/docs/guides/_src/reusing/index.html
 create mode 100644 web/src/content/docs/docs/guides/_src/reusing/index.js
 create mode 100644 web/src/content/docs/docs/guides/css.mdx
 create mode 100644 web/src/content/docs/docs/guides/initialization.mdx
 create mode 100644 web/src/content/docs/docs/guides/inputs.mdx
 create mode 100644 web/src/content/docs/docs/guides/nesting.mdx
 create mode 100644 web/src/content/docs/docs/guides/overrides.mdx
 create mode 100644 web/src/content/docs/docs/guides/reusing.mdx
 delete mode 100644 web/src/content/docs/docs/index.mdx
 create mode 100644 web/src/content/docs/docs/quickstart/_src/getting-started/webcomponent/index.html
 create mode 100644 web/src/content/docs/docs/quickstart/getting-started.mdx
 create mode 100644 web/src/content/docs/docs/quickstart/index.mdx
 create mode 100644 web/src/content/docs/docs/quickstart/principles.mdx
 create mode 100644 web/src/content/docs/docs/reference/attributes.mdx
 create mode 100644 web/src/content/docs/docs/reference/behavior.mdx
 create mode 100644 web/src/content/docs/docs/reference/instance.mdx
 create mode 100644 web/src/content/docs/docs/reference/limits.mdx
 create mode 100644 web/src/content/docs/docs/reference/overrides.mdx

diff --git a/web/astro.config.mjs b/web/astro.config.mjs
index 7dc6c6a..191707a 100644
--- a/web/astro.config.mjs
+++ b/web/astro.config.mjs
@@ -10,7 +10,22 @@ export default defineConfig({
     },
     head: [{
       tag: 'script',
-      content: `window.addEventListener('load', () => document.querySelector('.site-title').href += 'docs')`
+      content: `window.addEventListener('load', () => document.querySelector('.site-title').href += 'docs/quickstart')`
     }],
+    sidebar: [
+      { label: "Home", link: "/" },
+      {
+        label: "Start Here",
+        autogenerate: { directory: 'docs/quickstart' }
+      },
+      {
+        label: "Guides",
+        autogenerate: { directory: 'docs/guides' }
+      },
+      {
+        label: "Reference",
+        autogenerate: { directory: 'docs/reference' }
+      }
+    ]
   }), react()]
 });
\ No newline at end of file
diff --git a/web/src/components/docs/sandpack/Sandpack.astro b/web/src/components/docs/sandpack/Sandpack.astro
index d80b682..2627312 100644
--- a/web/src/components/docs/sandpack/Sandpack.astro
+++ b/web/src/components/docs/sandpack/Sandpack.astro
@@ -2,15 +2,24 @@
 import SandpackReactComponent from "./Sandpack.jsx";
 
 interface Props {
-  code?: string;
+  js?: string;
   html?: string;
+  css?: string;
+  activeFile?: string;
 }
 
-const { code, html } = Astro.props;
+const { js, html, css, activeFile } = Astro.props;
 ---
 
 <div class="container-sandpack not-content">
-  <SandpackReactComponent client:load client:only code={code} html={html} />
+  <SandpackReactComponent
+    client:load
+    client:only
+    js={js}
+    html={html}
+    css={css}
+    activeFile={activeFile}
+  />
 </div>
 
 <style>
diff --git a/web/src/components/docs/sandpack/Sandpack.tsx b/web/src/components/docs/sandpack/Sandpack.tsx
index ffb5f74..b1b4af8 100644
--- a/web/src/components/docs/sandpack/Sandpack.tsx
+++ b/web/src/components/docs/sandpack/Sandpack.tsx
@@ -1,16 +1,23 @@
 import { useEffect, useState } from "react";
-import { Sandpack, SandpackThemeProp } from "@codesandbox/sandpack-react";
+import {
+  Sandpack,
+  SandpackInternalOptions,
+  SandpackThemeProp,
+} from "@codesandbox/sandpack-react";
 
 import defaultHTML from "./src/index.html?raw";
-import defaultJS from "./src/js/index?raw";
-import css from "./src/styles/style.css?raw";
+import defaultJS from "./src/index?raw";
+import defaultCSS from "./src/style.css?raw";
+import manawaveRaw from "../../../../node_modules/manawave/dist/manawave.js?raw";
 
 interface Props {
-  code?: string;
+  js?: string;
   html?: string;
+  css?: string;
+  activeFile?: string;
 }
 
-export default ({ code, html }: Props) => {
+export default ({ js: code, html, css, activeFile }: Props) => {
   const [theme, setTheme] = useState<SandpackThemeProp>(
     (window.document.documentElement.dataset.theme as SandpackThemeProp) ??
       "auto"
@@ -39,24 +46,34 @@ export default ({ code, html }: Props) => {
 
   return (
     <Sandpack
+      template="vite"
       customSetup={{
-        environment: "parcel",
-        devDependencies: {
-          "@babel/core": "7.2.0",
-        },
-        dependencies: {
-          manawave: "^0.11.0",
-        },
         entry: "index.html",
       }}
       files={{
+        "node_modules/manawave/package.json": {
+          code: JSON.stringify({
+            name: "manawave",
+            main: "./index.js",
+            type: "module",
+          }),
+          hidden: true,
+        },
+        "node_modules/manawave/index.js": {
+          code: manawaveRaw,
+          hidden: true,
+        },
         "/index.html": { code: html ?? defaultHTML },
-        "/styles/style.css": { code: css, hidden: true },
-        "/js/index.js": {
+        "/style.css": { code: css ?? defaultCSS },
+        "/index.js": {
           code: code ?? defaultJS,
-          active: true,
         },
       }}
+      options={{
+        //@ts-ignore
+        activeFile: activeFile ?? "/index.js",
+        showConsoleButton: true,
+      }}
       theme={theme}
     />
   );
diff --git a/web/src/components/docs/sandpack/src/index.html b/web/src/components/docs/sandpack/src/index.html
index 080290f..7fe80d4 100644
--- a/web/src/components/docs/sandpack/src/index.html
+++ b/web/src/components/docs/sandpack/src/index.html
@@ -4,14 +4,16 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="./styles/style.css">
+    <link rel="stylesheet" href="./style.css">
+    <script type="module" src="./index.js"></script>
 </head>
 
 <body>
-    <manawave-marquee>
-        <div class="text-manawave">manawave</div>
-    </manawave-marquee>
-    <script type="module" src="./js/index.js"></script>
+    <main>
+        <manawave-marquee class="resize--parent" autoplay direction="15" speed="1.5">
+            <div class="text-manawave">manawave</div>
+        </manawave-marquee>
+    </main>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/web/src/components/docs/sandpack/src/index.js b/web/src/components/docs/sandpack/src/index.js
new file mode 100644
index 0000000..17e1cd1
--- /dev/null
+++ b/web/src/components/docs/sandpack/src/index.js
@@ -0,0 +1 @@
+import "manawave";
\ No newline at end of file
diff --git a/web/src/components/docs/sandpack/src/js/index.js b/web/src/components/docs/sandpack/src/js/index.js
deleted file mode 100644
index c483cbf..0000000
--- a/web/src/components/docs/sandpack/src/js/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import { MW } from "manawave";
-MW;
\ No newline at end of file
diff --git a/web/src/components/docs/sandpack/src/style.css b/web/src/components/docs/sandpack/src/style.css
new file mode 100644
index 0000000..4f71941
--- /dev/null
+++ b/web/src/components/docs/sandpack/src/style.css
@@ -0,0 +1,27 @@
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+body > main {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+}
+
+main {
+  padding: 0.5rem;
+}
+
+.text-manawave {
+  font-family: sans-serif;
+  font-size: 3rem;
+}
+
+.resize--parent {
+  widdth: 100%;
+  height: 100%;
+}
diff --git a/web/src/components/docs/sandpack/src/styles/style.css b/web/src/components/docs/sandpack/src/styles/style.css
deleted file mode 100644
index a1998d5..0000000
--- a/web/src/components/docs/sandpack/src/styles/style.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.text-manawave {
-  font-family: sans-serif;
-  font-size: 3rem;
-}
diff --git a/web/src/components/home/hero/Hero.astro b/web/src/components/home/hero/Hero.astro
index 2afbda1..94c8424 100644
--- a/web/src/components/home/hero/Hero.astro
+++ b/web/src/components/home/hero/Hero.astro
@@ -15,7 +15,7 @@ import Primordia from "./Primordia.astro";
     </p>
   </div>
   <div class="cta">
-    <div><a href="/docs">Get Started</a></div>
+    <div><a href="/docs/quickstart">Learn more</a></div>
     <div><a href="https://github.com/ryuuart/manawave">Github</a></div>
   </div>
   <Primordia class="primordia" />
diff --git a/web/src/content/docs/docs/guides/_src/css/content/index.html b/web/src/content/docs/docs/guides/_src/css/content/index.html
new file mode 100644
index 0000000..e69f965
--- /dev/null
+++ b/web/src/content/docs/docs/guides/_src/css/content/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./style.css">
+    <script type="module" src="./index.js"></script>
+</head>
+
+<body>
+    <main>
+        <h1>Styling your marquee content</h1>
+        <h2>Applying CSS</h2>
+        <h3>Using different selectors</h3>
+        <manawave-marquee>
+            <div class="content">content</div>
+            <div id="special" class="content">content</div>
+            <div id="special" class="content" style="color: hotpink">content</div>
+        </manawave-marquee>
+        <h2>Different layouts</h2>
+        <h3>Grid</h3>
+        <manawave-marquee>
+            <div class="grid grid-col--2 grid-row--2">
+                <div class="content">1</div>
+                <div class="content">2</div>
+                <div class="content">3</div>
+                <div class="content">4</div>
+            </div>
+        </manawave-marquee>
+        <h3>Inline block wrapping</h3>
+        <p>If you have a really big monitor and browser window, you can still see this by resizing your browser around.
+        </p>
+        <manawave-marquee autoplay>
+            <div class="inline-block border bg--pink w--50 h--50 m--small"></div>
+            <div class="inline-block border bg--pink w--50 h--50 m--small"></div>
+            <div class="inline-block border bg--pink w--50 h--50 m--small"></div>
+            <div class="inline-block border bg--pink w--50 h--50 m--small"></div>
+            <div class="inline-block border bg--pink w--50 h--50 m--small"></div>
+            <div class="inline-block border bg--pink w--50 h--50 m--small"></div>
+            <div class="inline-block border bg--pink w--50 h--50 m--small"></div>
+            <div class="inline-block border bg--pink w--50 h--50 m--small"></div>
+        </manawave-marquee>
+    </main>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/web/src/content/docs/docs/guides/_src/css/content/style.css b/web/src/content/docs/docs/guides/_src/css/content/style.css
new file mode 100644
index 0000000..1159ab0
--- /dev/null
+++ b/web/src/content/docs/docs/guides/_src/css/content/style.css
@@ -0,0 +1,56 @@
+* {
+  box-sizing: border-box;
+}
+
+h1 {
+  font-size: 0.75rem;
+  font-weight: normal;
+  text-transform: uppercase;
+}
+
+.content {
+  font-family: sans-serif;
+  font-weight: bold;
+
+  margin: 0.5rem;
+}
+
+.inline-block {
+  display: inline-block;
+}
+
+.grid {
+  display: grid;
+}
+
+.grid-col--2 {
+  grid-template-columns: auto auto;
+}
+
+.grid-row--2 {
+  grid-template-rows: auto auto;
+}
+
+.border {
+  border: 1px solid black;
+}
+
+.bg--pink {
+  background: pink;
+}
+
+.w--50 {
+  width: 50px;
+}
+
+.h--50 {
+  height: 50px;
+}
+
+.m--small {
+  margin: 0.5rem;
+}
+
+#special {
+  color: blue;
+}
diff --git a/web/src/content/docs/docs/guides/_src/css/marquee/index.html b/web/src/content/docs/docs/guides/_src/css/marquee/index.html
new file mode 100644
index 0000000..17385ba
--- /dev/null
+++ b/web/src/content/docs/docs/guides/_src/css/marquee/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./style.css">
+    <script type="module" src="./index.js"></script>
+</head>
+
+<body>
+    <main>
+        <h1>Styling your marquee container</h1>
+        <h2>Applying CSS</h2>
+        <h3>Using element selectors</h3>
+        <manawave-marquee>
+            <div>styling the marquee</div>
+        </manawave-marquee>
+        <h3>With generic classes</h3>
+        <manawave-marquee class="marquee">
+            <div>styling the marquee</div>
+        </manawave-marquee>
+        <manawave-marquee class="marquee">
+            <div>styling the marquee</div>
+        </manawave-marquee>
+        <h3>With an ID</h3>
+        <manawave-marquee id="selected" class="marquee">
+            <div>styling the marquee</div>
+        </manawave-marquee>
+        <h3>Using inline styles</h3>
+        <manawave-marquee style="color: blue" class="marquee">
+            <div>styling the marquee</div>
+        </manawave-marquee>
+        <h2>Resizing</h2>
+        <h3>Limited marquee</h3>
+        <manawave-marquee class="marquee marquee--small">
+            <div>styling the marquee</div>
+        </manawave-marquee>
+        <h3>Large, filling marquee</h3>
+        <manawave-marquee class="marquee marquee--fill">
+            <div>styling the marquee</div>
+        </manawave-marquee>
+    </main>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/web/src/content/docs/docs/guides/_src/css/marquee/style.css b/web/src/content/docs/docs/guides/_src/css/marquee/style.css
new file mode 100644
index 0000000..4fc16f8
--- /dev/null
+++ b/web/src/content/docs/docs/guides/_src/css/marquee/style.css
@@ -0,0 +1,34 @@
+* {
+  box-sizing: border-box;
+}
+
+h1 {
+  font-size: 0.75rem;
+  font-weight: normal;
+  text-transform: uppercase;
+}
+
+manawave-marquee {
+  font-family: sans-serif;
+}
+
+.marquee {
+  padding: 1rem;
+  margin: 1rem;
+
+  border: 1px solid black;
+}
+
+.marquee--small {
+  width: 100px;
+  height: 100px;
+}
+
+.marquee--fill {
+  height: 200px;
+}
+
+#selected {
+  border-radius: 1rem;
+  background: bisque;
+}
diff --git a/web/src/content/docs/docs/guides/_src/initialization/dom/index.html b/web/src/content/docs/docs/guides/_src/initialization/dom/index.html
new file mode 100644
index 0000000..45d3df0
--- /dev/null
+++ b/web/src/content/docs/docs/guides/_src/initialization/dom/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./style.css">
+    <script type="module" src="./index.js"></script>
+</head>
+
+<body>
+    <main>
+        <div id="manawave-marquee-selector">
+            <div class="text-manawave">SELECTOR •&nbsp;</div>
+        </div>
+        <div id="manawave-marquee-dom">
+            <div class="text-manawave">ELEMENT •&nbsp;</div>
+        </div>
+    </main>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/web/src/content/docs/docs/guides/_src/initialization/dom/index.js b/web/src/content/docs/docs/guides/_src/initialization/dom/index.js
new file mode 100644
index 0000000..599bb44
--- /dev/null
+++ b/web/src/content/docs/docs/guides/_src/initialization/dom/index.js
@@ -0,0 +1,6 @@
+import { MW } from "manawave";
+
+const MWSelector = new MW("#manawave-marquee-selector");
+
+const marqueeDomElement = document.getElementById("manawave-marquee-dom");
+const MWDOM = new MW(marqueeDomElement);
diff --git a/web/src/content/docs/docs/guides/_src/nesting/index.html b/web/src/content/docs/docs/guides/_src/nesting/index.html
new file mode 100644
index 0000000..1d6d2d5
--- /dev/null
+++ b/web/src/content/docs/docs/guides/_src/nesting/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./style.css">
+    <script type="module" src="./index.js"></script>
+</head>
+
+<body>
+    <main>
+        <manawave-marquee autoplay>
+            <div class="text-manawave">NEST → &nbsp;</div>
+            <manawave-marquee autoplay direction="up">
+                <div class="text-manawave">SUB ↑&nbsp;</div>
+            </manawave-marquee>
+        </manawave-marquee>
+    </main>
+</body>
+
+
+</html>
\ No newline at end of file
diff --git a/web/src/content/docs/docs/guides/_src/reusing/index.html b/web/src/content/docs/docs/guides/_src/reusing/index.html
new file mode 100644
index 0000000..10ae6b8
--- /dev/null
+++ b/web/src/content/docs/docs/guides/_src/reusing/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./style.css">
+    <script type="module" src="./index.js"></script>
+</head>
+
+<body>
+    <main>
+        <manawave-marquee id="manawave-marquee">
+            <div class="text-manawave">REUSING&nbsp;</div>
+        </manawave-marquee>
+    </main>
+</body>
+
+
+</html>
\ No newline at end of file
diff --git a/web/src/content/docs/docs/guides/_src/reusing/index.js b/web/src/content/docs/docs/guides/_src/reusing/index.js
new file mode 100644
index 0000000..30be97f
--- /dev/null
+++ b/web/src/content/docs/docs/guides/_src/reusing/index.js
@@ -0,0 +1,7 @@
+import { getMW } from "manawave";
+
+const marqueeElement = document.getElementById("manawave-marquee");
+const mw = getMW(marqueeElement);
+
+mw.direction = 200;
+mw.play();
\ No newline at end of file
diff --git a/web/src/content/docs/docs/guides/css.mdx b/web/src/content/docs/docs/guides/css.mdx
new file mode 100644
index 0000000..bb4fdbf
--- /dev/null
+++ b/web/src/content/docs/docs/guides/css.mdx
@@ -0,0 +1,53 @@
+---
+title: CSS & Styling
+description: Learn how to style a MANAWAVE marquee
+---
+
+import Sandpack from "@components/sandpack";
+import marqueeHTML from "./_src/css/marquee/index.html?raw";
+import marqueeCSS from "./_src/css/marquee/style.css?raw";
+import contentHTML from "./_src/css/content/index.html?raw";
+import contentCSS from "./_src/css/content/style.css?raw";
+
+Styling MANAWAVE should be the same experience styling HTML regularly.
+
+## Styling the marquee
+
+You can style the marquee in any way you're familiar with it. Just make sure you
+apply any relevant attributes (`class`, `id`, or `style`) to the marquee element itself.
+If you use web components, you can style the marquee by using `manawave-marquee` as the selector.
+
+Here are some basic examples of things you could do to style the marquee container.
+{/* TODO: include link to page with more complicated examples */}
+
+<Sandpack activeFile="style.css" html={marqueeHTML} css={marqueeCSS} />
+
+:::danger[flex, grid, and inline display types don't work on marquees]
+By design, MANAWAVE doesn't interfere with your page's layout. It takes whatever is inside a designated space
+and repeats it across a space.
+
+If you want this functionality, you should make the [layout a child element of the marquee](#styling-content).
+:::
+
+## <a id="styling-content"></a>Styling the content
+
+Like styling the marquee container, you don't have to adjust how you regularly apply CSS to elements on a page.
+Also, content that would be responsive without the marquee
+_is still responsive_. You can think of anything that appears inside a marquee, even if content wraps, to repeat across that space.
+
+It's easier to show by example, so here is one. All of what CSS would normally do still applies.
+
+<Sandpack activeFile="style.css" html={contentHTML} css={contentCSS} />
+
+:::tip[Do you use Flexbox or CSS Grid?]
+If you plan on styling grids or flexboxes, you should make a wrapper element.
+:::
+
+### Caveats
+
+One thing you'll have to consider is that [margin collapsing](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing) between repeated content **doesn't happen**.
+[This is by design](/docs/reference/behavior) to give you more control while balancing with [technical limitations](/docs/reference/limits).
+
+Also, MANAWAVE measures content by its explicit dimensions ([box](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model)) including `padding` and `margin`.
+Because of this, `display: block` won't have the rest of its width if there's extra. Content will, however, still break onto the next line.
+To see how MANAWAVE does this more specifically, you should read on MANAWAVE's [behavior](/docs/reference/behavior).
diff --git a/web/src/content/docs/docs/guides/initialization.mdx b/web/src/content/docs/docs/guides/initialization.mdx
new file mode 100644
index 0000000..378f254
--- /dev/null
+++ b/web/src/content/docs/docs/guides/initialization.mdx
@@ -0,0 +1,30 @@
+---
+title: Initializing marquees
+description: Learn how to initialize a MANAWAVE marquee to use
+---
+
+import Sandpack from "@components/sandpack";
+import domHTML from "./_src/initialization/dom/index.html?raw";
+import domJS from "./_src/initialization/dom/index.js?raw";
+
+There are two main ways to initialize and use MANAWAVE: using the `<manawave-marquee>` web component or `MW` [object](#dom).
+
+Generally for both approaches, MANAWAVE will take whatever is in the element (the children) and repeat them across its allocated space.
+
+## Web Component
+
+You can use the `<manawave-marquee>` web component to initialize MANAWAVE without writing any explicit JavaScript.
+
+```html
+<manawave-marquee> Content </manawave-marquee>
+```
+
+<Sandpack activeFile="index.html" />
+
+## Classic DOM Element
+
+<a id="dom"></a>
+
+You can also initialize MANAWAVE using an existing element. You can pass in an element or CSS selector query to initialize.
+
+<Sandpack html={domHTML} js={domJS} />
diff --git a/web/src/content/docs/docs/guides/inputs.mdx b/web/src/content/docs/docs/guides/inputs.mdx
new file mode 100644
index 0000000..5d6d829
--- /dev/null
+++ b/web/src/content/docs/docs/guides/inputs.mdx
@@ -0,0 +1,51 @@
+---
+title: Using User Input
+description: Learn how to have MANAWAVE marquee respond to user input
+---
+
+import Sandpack from "@components/sandpack";
+
+MANAWAVE can take advantage of user inputs by applying browser events. This builds on [overriding default behaviors](/docs/guides/overrides),
+so if you want to find out more, read there. A more artistic example can be found visiting the [HYPERPINK Realm](/realms/hyperpink).
+
+## Controlling direction with keyboard
+
+For this example, you're going to use your keys to control the direction of the marquee.
+It should feel like eight-direction movement in old-school JRPGs.
+
+### Step 1: Setup
+
+Generally, if you're going to start working with more customized behavior, you should
+initialize a [DOM element marquee](/docs/guides/initialization/#dom). It should have some
+[attributes](/docs/reference/attributes) to define the initial state.
+
+<Sandpack />
+
+### Step 2: Listen
+
+Now, you need to gather data for the `MW` instance. `MW` is just a controller for the MANAWAVE marquee.
+It just needs data to act upon. For our example, we'll go with keyboard data.
+
+<Sandpack />
+
+### Step 3: Apply
+
+Now you can perform changes to `MW` given data. This will let you create a marquee that reacts with
+what users do interactively.
+
+<Sandpack />
+
+:::tip[What's lerp?]
+The `lerp` function is the [linear interpolation](https://en.wikipedia.org/wiki/Linear_interpolation) function. It's commonly used in anything animated.
+:::
+
+## Controlling direction with mouse
+
+Here's another completed example, but for mouse movements.
+
+<Sandpack />
+
+:::tip[What's atan2?]
+`atan2` is a two-parameter [arctangent function](https://en.wikipedia.org/wiki/Atan2). It's used in this example to accurately
+get the angle or direction of a coordinate.
+:::
diff --git a/web/src/content/docs/docs/guides/nesting.mdx b/web/src/content/docs/docs/guides/nesting.mdx
new file mode 100644
index 0000000..ecb5b93
--- /dev/null
+++ b/web/src/content/docs/docs/guides/nesting.mdx
@@ -0,0 +1,22 @@
+---
+title: Nesting Marquees
+description: Learn how to work with nested marquees
+---
+
+import Sandpack from "@components/sandpack";
+import nestingHTML from "./_src/nesting/index.html?raw";
+
+You can nest a marquee within each other and it will work the same.
+
+:::danger[Don't overdo it]
+Nesting is a _very expensive thing to do_.
+Nesting can expontentially increase the amount of DOM nodes on the document. It also deepens the
+DOM depth too. High DOM size with deep DOM depth could have _very_ [negative performance impact](https://developer.chrome.com/en/docs/lighthouse/performance/dom-size/).
+
+> I've even tested around 15,000 to 20,000 DOM nodes generated. You won't even be able to select text 😅.
+>
+> — Ryuuart
+
+:::
+
+<Sandpack activeFile="index.html" html={nestingHTML} />
diff --git a/web/src/content/docs/docs/guides/overrides.mdx b/web/src/content/docs/docs/guides/overrides.mdx
new file mode 100644
index 0000000..bfe9d53
--- /dev/null
+++ b/web/src/content/docs/docs/guides/overrides.mdx
@@ -0,0 +1,71 @@
+---
+title: Overriding Default Behavior
+description: Learn how to override default marquee behavior
+---
+
+import Sandpack from "@components/sandpack";
+
+:::caution
+Overriding is intended for folks more familiar with angles, javascript, and MANAWAVE
+:::
+
+If you would like to create highly customized motion in MANAWAVE, you can override the defaults.
+Overrides are here to give you control to pretty much all of MANAWAVE (or as much as what's sensible).
+A good example of this is the realm, [Senbonzakura](/realms/senbonzakura).
+
+This guide is more of a general introduction or starter to using overrides. If you want deeper understanding, you should read the [overrides reference page](/docs/reference/overrides).
+
+## Overriding Overall Marquee
+
+### onLayout
+
+Invoked each time the marquee has to lay its entire grid of repeated content out again.
+This usually happens when the marquee is initialized, and when the viewport is substantially resized.
+
+<Sandpack />
+
+### onMove
+
+Invoked each time all the marquee content move.
+
+<Sandpack />
+
+### onLoop
+
+Invoked each time marquee content moves from one end of the marquee to the other.
+
+<Sandpack />
+
+## Overriding Content Lifecycle
+
+These methods give you direct access to each rendered DOM element of all marquee content.
+
+:::danger[Never assume marquee elements last long]
+These elements get _created and destroyed frequently_, so if you plan on keeping any references to it,
+be very careful of memory leakage. These lifecycle hooks are here for you to _safely_ setup or destroy any
+customized behavior.
+:::
+
+### onElementCreated
+
+Invoked when an element is created. This happens when a layout occurs (marquee initialized or website resized).
+
+<Sandpack />
+
+### onElementDraw
+
+Invoked when an element is rendered or updated. This happens when the element moves.
+
+<Sandpack />
+
+### onElementDestroyed
+
+Invoked when an element is destroyed. This happens when a layout occurs (marquee initialized or website resized).
+You'll notice this is exactly what happens in `onElementCreated`. Basically, when a layout occurs,
+all the old elements are destroyed and replaced by completely new ones.
+
+<Sandpack />
+
+:::tip[These methods could be overriden during runtime]
+This means you can swap out what happens (the implementation) for these methods dynamically.
+:::
diff --git a/web/src/content/docs/docs/guides/reusing.mdx b/web/src/content/docs/docs/guides/reusing.mdx
new file mode 100644
index 0000000..ac3168a
--- /dev/null
+++ b/web/src/content/docs/docs/guides/reusing.mdx
@@ -0,0 +1,37 @@
+---
+title: Reusing Marquees
+description: Learn how to configure existing marquees
+---
+
+import Sandpack from "@components/sandpack";
+import reusingHTML from "./_src/reusing/index.html?raw";
+import reusingJS from "./_src/reusing/index.js?raw";
+
+MANAWAVE lets you take an existing marquee and control it in JavaScript.
+If you need to get an existing MANAWAVE marquee, you should use `getMW()`.
+`getMW` takes an existing [initialized marquee](/docs/guides/initialization) and gives you the attached `MW` instance.
+
+:::tip[This is a good way extend a MANAWAVE web component]
+`getMW` is designed for folks who want to extend the provided web component, `<manawave-marquee>`.
+If you plan on doing any [override](/docs/guides/overrides), you should [avoid using the web component](/docs/guides/initialization/#dom)
+and do everything in javascript. It has to do with [FOUC issues](#fouc).
+:::
+
+For this example, notice how there's no `autoplay` nor `direction` [attribute](/docs/reference/attributes), but we set it anyways.
+That's because we fetched the `MW` instance and applied these attributes there.
+
+<Sandpack html={reusingHTML} js={reusingJS} />
+
+:::caution[You might get FOUC if you use overrides]
+
+<a id="fouc"></a>
+
+If you use [overrides](/docs/reference/overrides), you might get
+[FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content). That's because
+first, the document (web page content) has to load, then the marquees you
+initialized. After the marquee initializes (repeats content across space), you
+can finally use `getMW()`. This multi-load step gives a lot of opportunity for
+content to flash in and out as they're getting laid out across the page.
+Overrides makes this very visible.
+
+:::
diff --git a/web/src/content/docs/docs/index.mdx b/web/src/content/docs/docs/index.mdx
deleted file mode 100644
index b7c48ce..0000000
--- a/web/src/content/docs/docs/index.mdx
+++ /dev/null
@@ -1,10 +0,0 @@
----
-title: My docs
-description: Learn more about my project in this docs site built with Starlight.
----
-
-import Sandpack from "@components/sandpack";
- 
-Welcome to my project!
-
-<Sandpack />
diff --git a/web/src/content/docs/docs/quickstart/_src/getting-started/webcomponent/index.html b/web/src/content/docs/docs/quickstart/_src/getting-started/webcomponent/index.html
new file mode 100644
index 0000000..9555b36
--- /dev/null
+++ b/web/src/content/docs/docs/quickstart/_src/getting-started/webcomponent/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./style.css">
+    <script type="module" src="./index.js"></script>
+</head>
+
+<body>
+    <main>
+        <manawave-marquee>
+            <div class="text-manawave">web</div>
+        </manawave-marquee>
+        <manawave-marquee>
+            <div class="text-manawave">component</div>
+        </manawave-marquee>
+    </main>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/web/src/content/docs/docs/quickstart/getting-started.mdx b/web/src/content/docs/docs/quickstart/getting-started.mdx
new file mode 100644
index 0000000..dbf37d5
--- /dev/null
+++ b/web/src/content/docs/docs/quickstart/getting-started.mdx
@@ -0,0 +1,95 @@
+---
+title: Getting Started
+description: Learn how to get manawave on your website
+---
+
+import { Tabs, TabItem } from "@astrojs/starlight/components";
+import Sandpack from "@components/sandpack";
+import webcomponentHTML from "./_src/getting-started/webcomponent/index.html?raw";
+
+## Installing MANAWAVE
+
+You can install MANAWAVE by a CDN `<script>` tag or with any `npm` utility.
+
+<Tabs>
+<TabItem label="npm">
+
+```sh
+# you can use `yarn` or `pnpm` too if you want
+npm install manawave
+```
+
+</TabItem>
+<TabItem label="cdn">
+
+**Classic Script (IIFE)**
+
+```html
+<!-- Add this to your HTML head  -->
+<script
+  defer
+  src="https://cdn.jsdelivr.net/npm/manawave@0.11.1/dist/manawave.min.js"
+></script>
+```
+
+**Module Script (ESM)**
+
+```html
+<!-- Add this to your HTML head -->
+<script
+  type="module"
+  src="https://unpkg.com/manawave@0.11.1/dist/manawave.js"
+></script>
+```
+
+:::note
+If you would like to use a different version, change the
+version after the `@`. You can see the available versions on
+[Github Releases](https://github.com/ryuuart/manawave/releases).
+:::
+
+:::tip[See an example]
+You can see an example on [Glitch](https://glitch.com/edit/#!/manawave-cdn-example)
+:::
+
+</TabItem>
+</Tabs>
+
+## Basic Usage
+
+You can get a basic marquee with just MANAWAVE's web component: `<manawave-marquee>`.
+There are more ways to [initialize MANAWAVE](/docs/guides/initialization).
+
+```html
+<manawave-marquee>
+  <div class="text-manawave">web</div>
+</manawave-marquee>
+```
+
+<Sandpack activeFile="index.html" html={webcomponentHTML} />
+
+## Basic Customization
+
+You can configure these marquees by supplying different [attributes](/docs/reference/attributes/).
+For web components, there are three: `autoplay`, `speed`, and `direction`. There are a [limited set of allowed values](/docs/reference/attributes/) for these attributes, but
+they enable the basic configurable and omnidirectional elements of MANAWAVE.
+
+:::caution
+[There are caveats](/docs/reference/attributes) for attributes if you don't use the `<manawave-marquee>` web component.
+:::
+
+<Sandpack activeFile="index.html" />
+
+:::note
+MANAWAVE has a [design principle of using minimal JavaScript](/docs/quickstart/principles#customizable) if customization is basic. You only import the library or include the script tag and that's it. That's why the web component (`<manawave-marquee>`) was included.
+:::
+
+## Next Steps
+
+While MANAWAVE's basic features should be sufficient for most _basic_ use cases, you can configure it more deeply.
+To see what's possible, you should look into the [Realms](/#realms).
+
+A good place to start understanding MANAWAVE is by looking through the guides.
+You can start by learning how to more deeply [initialize marquees](/docs/guides/initialization) or configure [an existing marquee](/docs/guides/reusing).
+
+It may also be a good idea to see what MANAWAVE [won't be able to do](/docs/reference/limits) for you.
diff --git a/web/src/content/docs/docs/quickstart/index.mdx b/web/src/content/docs/docs/quickstart/index.mdx
new file mode 100644
index 0000000..42b9df2
--- /dev/null
+++ b/web/src/content/docs/docs/quickstart/index.mdx
@@ -0,0 +1,24 @@
+---
+title: Enter MANAWAVE
+description: Get started using MANAWAVE
+---
+
+import Sandpack from "@components/sandpack";
+ 
+[MANAWAVE](/) is a zero-dependency, customizable, and omnidirectional [marquee](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee) for vanilla JS.
+
+Ideally, for a basic marquee, you would only need to use the
+included web component. Customizing behavior is done through JavaScript.
+
+Here's a marquee for you to start playing with:
+
+<Sandpack activeFile="index.html" />
+
+## Examples
+
+You can find a bunch of examples covering different possibilities by visiting the [Realms](/#realms).
+
+## Troubleshooting
+
+Most functionality should be documented here, but if you have any questions,
+feel free to [create an issue on Github](https://github.com/ryuuart/manawave/issues/new).
diff --git a/web/src/content/docs/docs/quickstart/principles.mdx b/web/src/content/docs/docs/quickstart/principles.mdx
new file mode 100644
index 0000000..4ad6735
--- /dev/null
+++ b/web/src/content/docs/docs/quickstart/principles.mdx
@@ -0,0 +1,89 @@
+---
+title: Design Principles
+description: Principles that define the advantages of using MANAWAVE
+---
+
+Generally, all design principles really boil down to MANAWAVE marquee behaving like a
+native HTML element.
+
+## Familiar
+
+MANAWAVE is familiar for anyone who codes in HTML or CSS, even beginners. Remember the [marquee](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee) element?
+It's very easy to get a basic marquee working.
+
+```html
+<marquee>content</marquee>
+```
+
+<marquee scrollamount="2">content</marquee>
+
+A marquee would work on anything that would be looped across the screen.
+
+<marquee direction="up" scrollamount="2">
+  <pre>This will loop even though it's not just text</pre>
+</marquee>
+
+The reason why a traditional `<marquee>` is used as example is because
+using MANAWAVE should be as easy as using a `<marquee>`. You only
+need to put content in the tag and it should work. If you want to
+configure its behavior, you can pass in [attributes](/docs/reference/attributes).
+
+:::caution[MANAWAVE is not a \<marquee\>]
+You'll notice that MANAWAVE does not share attributes and behavior with `<marquee>` 1-to-1.
+This is intentional to align MANAWAVE towards simpler and more common usages of marquees.
+Reading about [MANAWAVE's behavior](/docs/reference/behavior) will point out to you these differences.
+:::
+
+## Standard
+
+To put it shortly, using HTML & CSS in MANAWAVE just works. You don't have to account for
+weirdness on MANAWAVE's end [most of the time](/docs/reference/limits).
+
+Using MANAWAVE should feel like authoring HTML & CSS content regularly.
+Special cases or exceptions are minimal. There's nothing special about
+using MANAWAVE. It's just a marquee. It does everything you expect should happen.
+
+This means any existing style or content you have can be used in MANAWAVE without too much hassle.
+If the content is responsive, MANAWAVE accomodates for that too.
+
+## <a id="customizable"></a> Customizable
+
+As a start, MANAWAVE can be decently customized through its attributes.
+This makes it low-friction for simple use cases, and even more smooth for web dev beginners.
+MANAWAVE doesn't need that much JavaScript configuration to do stuff any marquee should do.
+
+For more advanced developers, MANAWAVE considers wacky use cases beyond what's expected for a traditional marquee. You can see a bunch of these in the [Realms](/#realms).
+
+Because a marquee shouldn't just move things across a screen and could be interactive,
+customizability is something baked in. You can [override default behaviors](/docs/guides/overrides)
+to make MANAWAVE fit more to what you think a marquee should do.
+
+:::tip[From Ryuuart]
+Personally, I even think it's not customizable enough. When I set out to make MANAWAVE,
+I envisioned a marquee being more than a marquee. It should move in circles, dance across space,
+express any infinite motion across a space. I kinda realized that it's not a marquee anymore —
+that's like some wacky DOM particle system. This is something I wish for MANAWAVE in some future.
+
+I envision really wild use cases for "marquees", like masonry grids that pull in data
+and load different, dynamic formats over time. Or if you want to completely shift layouts.
+Or if you want elements flying across a given space, even in 3D (with z-coordinate) in random motion paths.
+
+MANAWAVE can't do what I mentioned perfectly, but it should give you a taste of it.
+:::
+
+## Performant
+
+MANAWAVE should be like using a `<marquee>`. A `<marquee>` loads everything near
+instantaneously and you don't even have to think about loading states. It doesn't
+intrude on your website. It shouldn't overwhelm nor break your website (for [regular cases](/docs/reference/limits)). When the viewport resizes,
+it doesn't nuke the website. A MANAWAVE marquee should feel invisible and a natural part of a website.
+
+## Isolated
+
+Using MANAWAVE should not leak any effects onto other HTML elements or CSS styles.
+Anything relating to a given MANAWAVE marquee only affects its children. This makes
+MANAWAVE a [progressive enhancement](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement) on vanilla HTML & CSS websites.
+Your existing content does not need to adapt for MANAWAVE. You can wrap it on existing content and it'll work out fine.
+
+If you choose to [not use MANAWAVE](/docs/reference/limits), removing it will not break your website.
+Removing MANAWAVE will [gracefully degrade](https://developer.mozilla.org/en-US/docs/Glossary/Graceful_degradation) and you'll just have your marquee children.
diff --git a/web/src/content/docs/docs/reference/attributes.mdx b/web/src/content/docs/docs/reference/attributes.mdx
new file mode 100644
index 0000000..9af3c01
--- /dev/null
+++ b/web/src/content/docs/docs/reference/attributes.mdx
@@ -0,0 +1,68 @@
+---
+title: Attributes
+description: A list of available attributes to customize or configure
+---
+
+import { Tabs, TabItem } from "@astrojs/starlight/components";
+
+MANAWAVE **attributes** are similar to [HTML attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes).
+They are descriptions to give you control over behaviors in the MANAWAVE marquee.
+
+There are three and they look like this:
+
+<Tabs>
+  <TabItem label="Web Component">
+
+    ```html
+    <manawave-marquee direction="122.5" speed="2" autoplay>content</manawave-marquee>
+    <manawave-marquee direction="up" speed="0.5">content</manawave-marquee>
+    ```
+
+  </TabItem>
+  <TabItem label="DOM Element">
+
+    ```html
+    <div data-direction="122.5" data-speed="2" data-autoplay>content</div>
+    <article data-direction="up" data-speed="0.5">content</article>
+    ```
+
+  </TabItem>
+</Tabs>
+
+:::note
+The attribute names between classic HTML elements and web components (custom elements) are different to [comply with web standards](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes)
+:::
+
+## Values
+
+Possible values for each attribute.
+
+| Attribute                    | Type                      | Example                 |
+| ---------------------------- | ------------------------- | ----------------------- |
+| `direction`,`data-direction` | `number` or a `Direction` | 10, 123.5, 534, -10.382 |
+| `speed`, `data-speed`        | `number`                  | 10, 12.127              |
+| `autoplay`, `data-autoplay`  | `boolean`                 | true, false             |
+
+:::note
+Like in HTML, [boolean attributes](https://developer.mozilla.org/en-US/docs/Glossary/Boolean/HTML) can denote `true` by presence.
+:::
+
+:::danger[Speed has some caveats]
+Speed **cannot** be less than 0. Also, there is a [bug in Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=739176) with subpixel rendering and animation.
+You will basically get a stutter for low speed values on Firefox. You can [see it for yourself](https://jsfiddle.net/r4qrnL0z/4/) and in the realm, [Senbonzakura](/realms/senbonzakura).
+:::
+
+## Types
+
+For any named value that should map to a more literal value.
+
+### Direction
+
+Used in directional attributes
+
+| Direction | Value |
+| --------- | ----- |
+| up        | 90    |
+| right     | 0     |
+| down      | 270   |
+| left      | 180   |
diff --git a/web/src/content/docs/docs/reference/behavior.mdx b/web/src/content/docs/docs/reference/behavior.mdx
new file mode 100644
index 0000000..e06004d
--- /dev/null
+++ b/web/src/content/docs/docs/reference/behavior.mdx
@@ -0,0 +1,58 @@
+---
+title: Behavior
+description: A description of how MANAWAVE works under the hood
+---
+
+import Sandpack from "@components/sandpack";
+
+This will give you a more detailed look at how MANAWAVE works. It's mostly for you to more
+predictably use MANAWAVE.
+
+## Items
+
+Each piece of repeatable content in MANAWAVE is called an **item**.
+The most important aspect of an **item** is its _measurement_.
+
+<Sandpack />
+
+### Measurements
+
+A _measurement_ is the _width_ and _height_ of an **item**. Measurements are calculated on layout.
+
+The way an item is measured is by boxing the DOM content into an `inline-block` wrapper.
+This creates a new [block formatting context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context), which
+allows us to capture the total [margin](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) + content of the content.
+
+This means measurements respect the [new line behavior](https://developer.mozilla.org/en-US/docs/Glossary/Block/CSS) of block elements.
+It **does not respect** block elements stretching their width.
+
+### Grid
+
+Items are laid out across a grid sized according to the marquee container width and height. This means
+there are a limited set of items that depend on the size of the marquee.
+
+## Pipeline
+
+MANAWAVE has two pipelines split into multiple phases to get all marquee functionality working.
+The phases written here are **ordered from start to finish**.
+
+### Marquee Pipeline
+
+This pipeline controls how _all_ items
+
+#### 1. Layout
+
+#### 2. Movement
+
+#### 3. Loop
+
+### DOM Pipeline
+
+You can basically treat this pipeline as a "lifecycle" structure. Each item in the marquee is represented in the DOM
+that gets destroyed and created over time.
+
+#### 1. Element Created
+
+#### 2. Element Drawn
+
+#### 3. Element Destroyed
diff --git a/web/src/content/docs/docs/reference/instance.mdx b/web/src/content/docs/docs/reference/instance.mdx
new file mode 100644
index 0000000..acd3752
--- /dev/null
+++ b/web/src/content/docs/docs/reference/instance.mdx
@@ -0,0 +1,10 @@
+---
+title: Instance
+description: Reference on the MW object or getMW function
+---
+
+There are two ways you receive a MANAWAVE instance to work with.
+
+## MW
+
+## getMW
diff --git a/web/src/content/docs/docs/reference/limits.mdx b/web/src/content/docs/docs/reference/limits.mdx
new file mode 100644
index 0000000..a8ecb6e
--- /dev/null
+++ b/web/src/content/docs/docs/reference/limits.mdx
@@ -0,0 +1,25 @@
+---
+title: Limitations
+description: A list of limitations for MANAWAVE
+---
+
+While MANAWAVE can be customized thoroughly, there are a couple things that may be deal-breakers.
+
+## No frameworks
+
+MANAWAVE is NOT associated with any web framework (React, Vue, Svelte, etc.) nor is there an API for it.
+This is because MANAWAVE is part challenge to create something that should work out-of-box for **any** HTML & CSS website.
+
+## No de-initialization nor destruction
+
+MANAWAVE is not destructable. It stays in memory the moment it's initialized.
+
+## Does not keep track its position
+
+When a resize or relayout occurs, MANAWAVE does not keep track of its current "position" or where items should be synced to.
+It instead, layouts everything again, fresh.
+
+## Not fully behaving like native HTML & CSS
+
+Margin collapsing between [items](/docs/reference/behavior) do not happen.
+[Blocks](https://developer.mozilla.org/en-US/docs/Glossary/Block/CSS) do not span the width of its parent container.
diff --git a/web/src/content/docs/docs/reference/overrides.mdx b/web/src/content/docs/docs/reference/overrides.mdx
new file mode 100644
index 0000000..6b67474
--- /dev/null
+++ b/web/src/content/docs/docs/reference/overrides.mdx
@@ -0,0 +1,22 @@
+---
+title: Overrides
+description: A list of available override hooks to override and customize MANAWAVE motion and defaults
+---
+
+This is a reference for each [override](/docs/guides/overrides). Overrides are split by [pipeline](/docs/reference/behavior).
+
+## Marquee Pipeline
+
+### Layout
+
+### Movement
+
+### Loop
+
+## DOM Pipeline
+
+### Element Created
+
+### Element Drawn
+
+### Element Destroyed