cozyclay 1.2.0 → 1.3.0

package/CHANGELOG.md

@@ -0,0 +1,85 @@
+# Changelog
+
+## 1.3.0
+
+The release where the studio stops being something only a person can drive.
+
+### Direct it with an AI
+
+CozyClay now ships an [MCP](https://modelcontextprotocol.io) server. Point Claude, Cursor, or any
+MCP client at it and ask for a shot in plain language — it places the cast, frames "a low wide
+profile", generates multi-phase motion, and **the viewport moves while you watch**.
+
+```json
+{ "mcpServers": { "cozyclay": { "command": "npx", "args": ["-y", "cozyclay", "mcp"] } } }
+```
+
+It computes nothing of its own. Every answer comes from the modules the studio already renders
+with — `shot.js` for film vocabulary, `scenes.js` for the stage, `camera-move.js` for moves — so
+the server and the UI cannot disagree about what a 35 mm medium shot is.
+
+- **Live or headless.** With a studio tab open, tool calls drive the real viewport over a local
+  socket. With no tab, the same tools run headless: block scenes, derive framing, render prompts,
+  and write `.cclayproject` files the studio opens.
+- **Motion from plain beats.** `generate_motion` takes ordinary sentences, rewrites them into the
+  shape ARDY was trained to read, splits compound beats, drops language a body cannot perform, and
+  lands each phase as a Prompt Block on the timeline.
+- **21 tools**, all documented in [`mcp/README.md`](mcp/README.md).
+
+### Cut a photograph out and stand it up
+
+Drop an image on Props — or straight onto the shot — and it becomes a card you can place, turn and
+block against. The background editor lives in the card's own inspector: paint or erase the
+selection, zoom and pan with the wheel, and the picture sits on a stage rather than being framed
+by one. Assets are stored once by content hash, so the same picture imported twice costs one copy.
+
+### An open stage
+
+The two-walled room corner is gone. The set is a 500 m open deck — far enough that no ordinary
+blocking meets its edge — with a two-tier grid (quiet 1 m cells, assertive 10 m lines) and a
+distance falloff that dissolves the floor into the background instead of ending at a horizon.
+Movement clamps moved from ±11 m to ±240 m, so a run or a chase finally has room.
+
+### Group props and move them as one
+
+Scene objects now carry a parent. Build a rocket from ten primitives, group them, and the whole
+thing drags as one body — through the gizmo, the inspector and the MCP tools alike. Deleting a
+parent promotes its children rather than taking them with it.
+
+### Everything else
+
+- **Gizmo** — the cast rides the same gizmo as scene objects, with rotate and scale; an XZ pad for
+  free ground drags; pick targets balanced so the pad no longer swallows every press.
+- **Mocap** — a video capture panel, takes assigned to cast members, and take trimming.
+- **Timeline** — authoring runs on a 24 fps production clock while ARDY is still spoken to at
+  20 fps, and exports record at true motion speed.
+- **Multi-character** — an unbounded cast with per-character motion layers.
+
+### Fixes
+
+- Props reported `1x1x1` regardless of how they were built: scale never crossed the live protocol,
+  and the server reset whatever did arrive. Sizes are now real, and per-axis scale is exposed.
+- A 6 m ceiling survived the walls it belonged to, silently decapitating anything tall.
+- Generating four Prompt Blocks produced one. IK keys from a discarded take made a fresh run look
+  like a local edit, and that path ships no schedule. Replacing a take now clears the corrections
+  authored against it.
+- A stale service worker served yesterday's bundle to the dev server, so edits appeared to do
+  nothing. Dev now serves a self-destructing worker.
+- Prompt blocks are capped at 4 s everywhere, not just in the UI — longer beats chain instead of
+  being authored into something the timeline would refuse.
+
+### Packaging
+
+- `mcp/` ships with the package, so `npx cozyclay mcp` works without a clone.
+- `exports` makes `cozyclay/src/*` a public contract instead of an accident.
+- `three` is declared as an optional peer: the studio bundles its own copy, but anything importing
+  `cozyclay/src/*` needs it, and now npm says so.
+
+## 1.2.0
+
+- `npx cozyclay` opens the studio again.
+- Stopped shipping 26 MB of scratch files.
+
+## 0.1.0
+
+First public release.

package/README.md

@@ -17,6 +17,7 @@
   <a href="https://cozyclay.org/">Demo reel</a> ·
   <a href="#quick-start">Quick start</a> ·
   <a href="#what-you-can-do">Features</a> ·
+  <a href="#ai-control-mcp">AI control</a> ·
   <a href="#controls">Controls</a> ·
   <a href="https://github.com/HaD0Yun/CozyClay/issues">Issues</a>
 </p>
@@ -43,6 +44,7 @@ https://github.com/user-attachments/assets/1d0113e5-6922-443d-affc-1bdabc666247
 | **Fly the camera** | Right-drag flies (WASD walks, Q/E cranes), middle-drag pans, Alt+drag orbits the selection, click selects, `F` frames — the muscle memory you already have from a 3D editor. |
 | **Undo anything** | Every scene mutation goes through one history store: a drag, a scrub, an inspector edit is exactly one undo entry. `Esc` cancels an in-flight drag and restores the pre-drag transform. |
 | **Generate motion** | Pose characters and export poses, sequence multi-phase motion as Prompt Blocks on a resizable timeline, send them to ARDY, then play the result back with sparse IK correction where the generated motion needs fixing. |
+| **Direct it with an AI** | Connect Claude — or any MCP client — and ask for a shot in plain language. It places the cast, frames “a low wide profile”, generates multi-phase motion, and the viewport moves in front of you. See [AI control](#ai-control-mcp). |
 
 ## Requirements
 
@@ -69,6 +71,33 @@ CCLAY_ARDY_HOST=user@your-gpu-box npx cozyclay
 
 Everything else — staging through camera work and playback — runs without it.
 
+## AI control (MCP)
+
+The studio ships an [MCP](https://modelcontextprotocol.io) server, so an AI assistant can drive it — the same scene, the same viewport, live:
+
+> “Put a detective and a courier in an alley, give me a low wide profile shot,
+> then make her stand up from the chair, sprint, and trip.”
+
+```json
+{
+  "mcpServers": {
+    "cozyclay": {
+      "command": "npx",
+      "args": ["-y", "cozyclay", "mcp"]
+    }
+  }
+}
+```
+
+Drop that into `claude_desktop_config.json` (or any MCP client config) and restart the client. The
+first run prints one `npm install` line: the MCP SDK is a 95-package tree, and opening the studio
+should never wait on it, so those dependencies are fetched only when you actually want the server.
+
+- **Editor open?** Tool calls move the visible viewport — camera, cast, set, generated motion, prompt blocks on the timeline.
+- **No editor?** The same tools run headless: block scenes, derive film vocabulary (“wide shot · right profile · knee level · 24mm”), render AI video prompts, and write `.cclayproject` files the studio opens.
+
+Tools, transports and the live-control protocol are documented in [`mcp/README.md`](mcp/README.md).
+
 ### From a clone
 
 ```bash
@@ -123,6 +152,8 @@ See [`tools/ardy/README.md`](tools/ardy/README.md) for details. This workflow is
 | `npm run test:theme` / `test:appearance` / `test:layout` | UI theme, appearance, layout |
 | `npm run test:lifecycle` | Dev-server process lifecycle |
 | `npm run test:ardy` | ARDY conversion, playback, and IK pipeline |
+| `cd mcp && npm run verify` | MCP server over real stdio — all 420 framing combinations |
+| `cd mcp && npm run verify:live` | Live-control protocol against a fake editor |
 | `npm run build` | Production build |
 
 Ad-hoc browser QA, while a dev server is available:

package/THIRD_PARTY_NOTICES.md

@@ -55,6 +55,42 @@ bundled.
 - Source: https://github.com/McGill-NLP/llm2vec
 - License text: https://github.com/McGill-NLP/llm2vec/blob/main/LICENSE
 
+## Fonts
+
+CozyClay bundles subsets of two typefaces. Both are licensed under the SIL Open
+Font License 1.1, which allows them to be redistributed with software as long as
+the copyright notice and the licence travel with the files. The licence texts are
+in `public/fonts/` next to the fonts themselves.
+
+### Inter
+
+- Copyright (c) 2016 The Inter Project Authors
+- License: SIL Open Font License 1.1
+- Source: https://github.com/rsms/inter
+- License text: `public/fonts/Inter-OFL.txt`
+
+### Instrument Serif
+
+- Copyright 2022 The Instrument Serif Project Authors
+- License: SIL Open Font License 1.1
+- Source: https://github.com/Instrument/instrument-serif
+- License text: `public/fonts/InstrumentSerif-OFL.txt`
+
+## Character models
+
+The rigs in `public/models/` are Mixamo characters from Adobe. Adobe permits
+their use in projects but not the distribution of the raw character files, which
+is what shipping them in this repository, the npm package and the hosted site
+amounts to. They are also outside the scope of this repository's GPL-3.0 grant:
+nothing here relicenses them, and a fork does not acquire the right to
+redistribute them.
+
+They are being replaced with a CC0 rig. Until that lands, treat these two files
+as third-party content that this licence does not cover.
+
+- `x-bot-tpose.fbx`, `y-bot-tpose.fbx` — Adobe Mixamo
+- Terms: https://www.adobe.com/legal/terms.html
+
 ## CozyClay license scope
 
-The CozyClay source code in this repository is licensed under GPL-3.0-or-later. That license does not replace or relicense Three.js, ARDY, ARDY model checkpoints, or any other third-party component.
+The CozyClay source code in this repository is licensed under GPL-3.0-or-later. That license does not replace or relicense Three.js, ARDY, ARDY model checkpoints, the bundled fonts, the character rigs, or any other third-party component.

package/bin/cozyclay.mjs

@@ -79,6 +79,7 @@ const STAR_AFTER_MS = Number(process.env.COZYCLAY_STAR_AFTER_MS ?? 60_000);
 const HELP = `cozyclay - browser-based 3D staging studio
 
   npx cozyclay              start the studio and open it
+  npx cozyclay mcp          run the MCP server (for Claude, Cursor, any MCP client)
   npx cozyclay --port 5200  serve on another port
   npx cozyclay --no-ardy    skip the optional motion-generation sidecar
   npx cozyclay --no-open    do not open a browser
@@ -189,7 +190,50 @@ function openBrowser(url) {
 	child.unref();
 }
 
-const opts = parseArgs(process.argv.slice(2));
+/**
+ * `cozyclay mcp` hands over to the MCP server.
+ *
+ * Its dependencies are NOT the launcher's: the studio path stays dependency
+ * free on purpose, and the MCP SDK is a 95-package tree nobody who only wants
+ * a viewport should download. So the server ships with the package, its deps
+ * are installed on demand, and a missing one produces an exact instruction
+ * rather than a stack trace.
+ */
+async function runMcp(rest) {
+	const server = join(PKG_ROOT, "mcp", "server.mjs");
+	if (!existsSync(server)) {
+		console.error("cozyclay: this build does not include the MCP server.");
+		process.exit(1);
+	}
+	// The deps must land in the PACKAGE root, not in mcp/: server.mjs imports
+	// ../src/*.js, and those files resolve `three` from cozyclay/ itself.
+	try {
+		await import("@modelcontextprotocol/sdk/server/mcp.js");
+		await import("three");
+	} catch {
+		console.error(
+			[
+				"cozyclay: the MCP server needs four packages the studio does not.",
+				"",
+				`  npm install --prefix ${JSON.stringify(PKG_ROOT)} \\`,
+				"    @modelcontextprotocol/sdk ws zod three",
+				"",
+				"Then run `npx cozyclay mcp` again. They are kept out of the default",
+				"install so opening the studio never waits on a 95-package tree.",
+			].join("\n"),
+		);
+		process.exit(1);
+	}
+	const child = spawn(process.execPath, [server, ...rest], { stdio: "inherit" });
+	child.on("exit", (code, signal) => process.exit(signal ? 1 : (code ?? 0)));
+}
+
+const argv = process.argv.slice(2);
+if (argv[0] === "mcp") {
+	await runMcp(argv.slice(1));
+} else {
+
+const opts = parseArgs(argv);
 if (opts.help) {
 	console.log(HELP);
 	process.exit(0);
@@ -219,7 +263,10 @@ if (opts.ardy && ardyHost && existsSync(BRIDGE)) {
 
 const server = createServer((req, res) => {
 	const url = new URL(req.url ?? "/", "http://localhost");
-	if (url.pathname.startsWith("/ardy/")) {
+	// Only the routes the bridge actually owns: /ardy/ is ALSO a public asset
+	// directory (cskel27-rest.json), and those files live in dist/, not behind
+	// the sidecar. Same rule as the Vite dev proxy bypass.
+	if (/^\/ardy\/(health|bases|generate|footage|extract|motions)(\/|$)/.test(url.pathname)) {
 		proxyToBridge(req, res);
 		return;
 	}
@@ -286,3 +333,5 @@ server.listen(opts.port, opts.host, () => {
 		);
 	if (opts.open) openBrowser(url);
 });
+
+}

package/dist/ai-camera-control/index.html

@@ -0,0 +1,406 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <meta name="description" content="Camera control for AI video: why prompting an angle keeps drifting, what Seedance, Veo and Kling actually accept, and how blocking the shot in 3D first gives you the same camera on every take." />
+    <meta name="theme-color" content="#232323" />
+    <link rel="canonical" href="https://cozyclay.org/ai-camera-control/" />
+    <link rel="icon" href="/favicon.ico" sizes="any" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/icons/icon-32.png" />
+    <link rel="icon" type="image/png" sizes="192x192" href="/icons/icon-192.png" />
+    <link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" />
+
+    <meta property="og:type" content="article" />
+    <meta property="og:site_name" content="CozyClay" />
+    <meta property="og:title" content="Camera control for AI video: block the shot instead of describing it" />
+    <meta property="og:description" content="Why camera prompts drift between takes, and how blocking the angle, lens and dolly in 3D first gets you the same shot every time." />
+    <meta property="og:url" content="https://cozyclay.org/ai-camera-control/" />
+    <meta property="og:image" content="https://cozyclay.org/media/cozyclay-demo-poster.jpg" />
+    <meta property="og:image:width" content="1920" />
+    <meta property="og:image:height" content="1080" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="Camera control for AI video: block the shot instead of describing it" />
+    <meta name="twitter:description" content="Why camera prompts drift between takes, and how blocking the angle, lens and dolly in 3D first gets you the same shot every time." />
+    <meta name="twitter:image" content="https://cozyclay.org/media/cozyclay-demo-poster.jpg" />
+
+    <title>Camera control for AI video — block the shot, don't describe it</title>
+
+
+    <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "Article",
+        "headline": "Camera control for AI video: block the shot instead of describing it",
+        "description": "Why camera prompts drift between takes, and how blocking the angle, lens and dolly in 3D first gets you the same shot every time.",
+        "image": "https://cozyclay.org/media/cozyclay-demo-poster.jpg",
+        "mainEntityOfPage": "https://cozyclay.org/ai-camera-control/",
+        "author": {
+          "@type": "Organization",
+          "name": "CozyClay",
+          "url": "https://cozyclay.org/"
+        },
+        "publisher": {
+          "@type": "Organization",
+          "name": "CozyClay",
+          "logo": {
+            "@type": "ImageObject",
+            "url": "https://cozyclay.org/media/cozyclay-logo.png"
+          }
+        }
+      }
+    </script>
+    <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "FAQPage",
+        "mainEntity": [
+          {
+            "@type": "Question",
+            "name": "Why does my camera angle change between takes?",
+            "acceptedAnswer": {
+              "@type": "Answer",
+              "text": "Because the prompt never fixed it. Words like low angle or close up carry no height, distance or focal length, so the model fills those in and fills them in differently on each run. Pinning composition needs something with numbers behind it - a starting frame, or a camera that exists in a scene."
+            }
+          },
+          {
+            "@type": "Question",
+            "name": "Do camera movement prompts work at all?",
+            "acceptedAnswer": {
+              "@type": "Answer",
+              "text": "They work as a nudge. Slow dolly in reliably gets you a push rather than a pan. What it will not do is get you the same push twice, or a push that matches the one in the shot you are cutting to."
+            }
+          },
+          {
+            "@type": "Question",
+            "name": "What is the highest-leverage thing I can control in AI video?",
+            "acceptedAnswer": {
+              "@type": "Answer",
+              "text": "The first frame. Composition, lens compression and eyeline are all decided the moment that image exists, and the generation inherits them instead of guessing. This is what blocking a shot in 3D gives you."
+            }
+          },
+          {
+            "@type": "Question",
+            "name": "Do I need Blender or Unreal to block a shot?",
+            "acceptedAnswer": {
+              "@type": "Answer",
+              "text": "No. Both will do it, and both ask you to learn a full DCC to move one camera. CozyClay does the blocking part in a browser tab with Unity-style controls."
+            }
+          }
+        ]
+      }
+    </script>
+
+    <script defer src="https://static.cloudflareinsights.com/beacon.min.js" data-cf-beacon='{"token": "6a4384d1375d4ffc8a30a6346a8ad1a0"}'></script>
+    <style>
+      :root {
+        --bg: #1b1b1b;
+        --panel: #232323;
+        --line: #343434;
+        --ink: #ece7de;
+        --muted: #a9a29a;
+        --clay: #f2eee6;
+        --accent: #d9a066;
+      }
+      * { box-sizing: border-box; }
+      html { scroll-behavior: smooth; }
+      body {
+        margin: 0;
+        background: var(--bg);
+        color: var(--ink);
+        font: 16px/1.65 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+        -webkit-font-smoothing: antialiased;
+      }
+      a { color: var(--accent); }
+      .wrap { max-width: 980px; margin: 0 auto; padding: 0 20px; }
+      header.site {
+        border-bottom: 1px solid var(--line);
+        position: sticky; top: 0; background: rgba(27,27,27,.9);
+        backdrop-filter: blur(8px); z-index: 10;
+      }
+      header.site .wrap {
+        display: flex; align-items: center; gap: 16px;
+        min-height: 60px; flex-wrap: wrap;
+      }
+      .brand { font-weight: 700; letter-spacing: -.01em; color: var(--clay); text-decoration: none; font-size: 18px; }
+      header.site nav { margin-left: auto; display: flex; gap: 18px; flex-wrap: wrap; }
+      header.site nav a { color: var(--muted); text-decoration: none; font-size: 14px; }
+      header.site nav a:hover { color: var(--ink); }
+
+      .hero { padding: 64px 0 40px; }
+      h1 { font-size: clamp(30px, 5.2vw, 46px); line-height: 1.12; margin: 0 0 18px; letter-spacing: -.02em; color: var(--clay); }
+      .lede { font-size: clamp(17px, 2.2vw, 20px); color: var(--muted); margin: 0 0 28px; max-width: 44em; }
+      .cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
+      .btn {
+        display: inline-block; padding: 12px 20px; border-radius: 8px;
+        text-decoration: none; font-weight: 600; font-size: 15px; border: 1px solid var(--line);
+      }
+      .btn.primary { background: var(--clay); color: #1b1b1b; border-color: var(--clay); }
+      .btn.ghost { color: var(--ink); }
+      .note { color: var(--muted); font-size: 14px; margin: 0; }
+
+      figure { margin: 40px 0; }
+      figure img { width: 100%; height: auto; display: block; border: 1px solid var(--line); border-radius: 10px; }
+      figcaption { color: var(--muted); font-size: 13px; margin-top: 10px; }
+
+      /* The mark is blue on white and the eyes are knocked out of the fill, so
+         it sits on a light plate rather than straight on the dark page. */
+      .mark { margin: 0 0 26px; max-width: 190px; }
+      .mark img {
+        border: 0;
+        border-radius: 14px;
+        background: var(--clay);
+        padding: 14px 12px;
+      }
+
+      .reel {
+        margin: 0 0 30px;
+        border: 1px solid var(--line);
+        border-radius: 12px;
+        overflow: hidden;
+        background: #000;
+        box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
+      }
+      .reel video { display: block; width: 100%; height: auto; }
+      .reel-note { color: var(--muted); font-size: 13px; margin: 12px 0 0; }
+
+      section { padding: 40px 0; border-top: 1px solid var(--line); }
+      h2 { font-size: clamp(22px, 3.2vw, 28px); margin: 0 0 8px; color: var(--clay); letter-spacing: -.01em; }
+      h3 { font-size: 17px; margin: 0 0 6px; color: var(--clay); }
+      .sub { color: var(--muted); margin: 0 0 26px; max-width: 48em; }
+
+      .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
+      .card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 20px; }
+      .card p { margin: 0; color: var(--muted); font-size: 15px; }
+
+      pre {
+        background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
+        padding: 16px 18px; overflow-x: auto; font-size: 14px; line-height: 1.7;
+      }
+      code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
+
+      table { width: 100%; border-collapse: collapse; font-size: 15px; }
+      th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
+      th { color: var(--clay); font-weight: 600; white-space: nowrap; }
+      td { color: var(--muted); }
+      .scroller { overflow-x: auto; }
+
+      details { border-bottom: 1px solid var(--line); padding: 16px 0; }
+      details summary { cursor: pointer; font-weight: 600; color: var(--clay); font-size: 16px; }
+      details p { color: var(--muted); margin: 12px 0 0; }
+
+      footer.site { border-top: 1px solid var(--line); padding: 32px 0 56px; color: var(--muted); font-size: 14px; }
+      footer.site a { color: var(--muted); }
+
+      @media (max-width: 620px) {
+        .hero { padding: 40px 0 28px; }
+        .btn { width: 100%; text-align: center; }
+        header.site nav { gap: 14px; width: 100%; margin-left: 0; padding-bottom: 10px; }
+      }
+    </style>
+  </head>
+  <body>
+    <header class="site">
+      <div class="wrap">
+        <a class="brand" href="/">CozyClay</a>
+        <nav>
+          <a href="/#what">What it does</a>
+          <a href="/#start">Quick start</a>
+          <a href="/ai-camera-control/">AI camera control</a>
+          <a href="https://github.com/HaD0Yun/CozyClay">GitHub</a>
+        </nav>
+      </div>
+    </header>
+
+    <main class="wrap">
+      <div class="hero">
+        <h1>Camera control for AI video</h1>
+        <p class="lede">
+          Video models will happily give you a low angle. They will not give you
+          <em>the same</em> low angle twice. Here is why the prompt keeps drifting, and what
+          to do about it.
+        </p>
+      </div>
+
+      <section>
+        <h2>The part nobody warns you about</h2>
+        <p class="sub">
+          A prompt describes a camera in words, and words have no units. "Low angle, close on
+          her face, slow push in" is four decisions with no numbers attached: how low, how
+          close, what focal length, how far the push travels. The model picks values you never
+          specified, and it picks different ones on the next run.
+        </p>
+        <p class="sub">
+          That is fine for a single hero shot. It falls apart the moment you need two shots to
+          belong to the same scene. Cut between two takes that each invented their own lens and
+          eyeline and the geometry does not agree — the room changes shape across the cut, and
+          the audience feels it even when they cannot name it.
+        </p>
+        <p class="sub">
+          The usual response is to write a longer prompt. More adjectives, a reference image,
+          a list of shot-type vocabulary. It narrows the spread. It does not close it, because
+          the thing being specified was never language in the first place.
+        </p>
+      </section>
+
+      <section>
+        <h2>What the models actually take</h2>
+        <p class="sub">
+          The current generation of video models accepts camera intent through some mix of
+          three channels, and it is worth knowing which one you are using:
+        </p>
+        <div class="grid">
+          <div class="card">
+            <h3>Words</h3>
+            <p>
+              Shot-type vocabulary in the prompt — wide, medium, close, dolly, crane, 35mm.
+              Universally supported, and the loosest. The model interprets; you do not specify.
+            </p>
+          </div>
+          <div class="card">
+            <h3>A first frame</h3>
+            <p>
+              An image the generation starts from. This pins composition hard, because framing,
+              lens compression and eyeline are already baked into the pixels. It is the highest
+              leverage input most people underuse.
+            </p>
+          </div>
+          <div class="card">
+            <h3>A path or reference clip</h3>
+            <p>
+              Some models take an explicit camera path, or a video whose motion is transferred
+              onto a new scene. Strongest control, narrowest support, and it needs the move to
+              exist somewhere before you can hand it over.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section>
+        <h2>Block the shot, then generate</h2>
+        <p class="sub">
+          Film production solved this before any of these models existed, and the answer was
+          previs: build the scene rough in 3D, put a camera in it, and settle the shot while
+          it is still cheap to change. The blocking is the specification. Everything downstream
+          inherits it.
+        </p>
+        <p class="sub">
+          The same move works here. Put the geometry somewhere real first — a boxed-out set, a
+          character on a path, a camera with an actual position and an actual focal length —
+          and the questions the prompt was leaving open are already answered. You are no longer
+          asking for a low angle. You have one, and you can hand over the frame it produces.
+        </p>
+        <p class="sub">
+          Three things change once the camera lives in a scene instead of a sentence:
+        </p>
+        <div class="grid">
+          <div class="card">
+            <h3>Shots agree with each other</h3>
+            <p>
+              Two angles on one blocked set share a floor plan, so a cut between them holds.
+              Two prompts do not share anything.
+            </p>
+          </div>
+          <div class="card">
+            <h3>The move is reproducible</h3>
+            <p>
+              A dolly you drew is the same dolly tomorrow. Regenerate, change the subject, keep
+              the camera. Nothing about that survives a reroll of a text prompt.
+            </p>
+          </div>
+          <div class="card">
+            <h3>You fail cheaply</h3>
+            <p>
+              Finding out the angle was wrong costs a drag in a viewport, not a paid generation
+              and the wait attached to it.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section>
+        <h2>Doing it in the browser</h2>
+        <p class="sub">
+          CozyClay is the previs half of that loop, built to be opened rather than installed.
+          Block a set out of primitives, drop a character and draw the path they walk, place
+          the camera and set its lens, cut between shots on a timeline, and scrub until the
+          timing is right. Then take those frames and those camera moves to whichever model you
+          are generating with.
+        </p>
+
+        <div class="reel">
+          <video
+            src="/media/cozyclay-demo.mp4"
+            poster="/media/cozyclay-demo-poster.jpg"
+            width="1920" height="1080"
+            muted loop playsinline controls preload="none"
+          ></video>
+        </div>
+        <p class="reel-note">
+          Left of the wipe is the generated result. Right of it is the blocking that produced
+          the camera.
+        </p>
+
+        <div class="cta">
+          <a class="btn primary" href="/">What CozyClay does</a>
+          <a class="btn ghost" href="https://github.com/HaD0Yun/CozyClay">View on GitHub</a>
+        </div>
+        <p class="note">
+          Free and open source. Runs locally with <code>npx cozyclay</code>.
+        </p>
+      </section>
+
+      <section id="faq">
+        <h2>FAQ</h2>
+        <details open>
+          <summary>Why does my camera angle change between takes?</summary>
+          <p>
+            Because the prompt never fixed it. Words like "low angle" or "close up" carry no
+            height, distance or focal length, so the model fills those in and fills them in
+            differently on each run. Pinning composition needs something with numbers behind it
+            — a starting frame, or a camera that exists in a scene.
+          </p>
+        </details>
+        <details>
+          <summary>Do camera movement prompts work at all?</summary>
+          <p>
+            They work as a nudge. "Slow dolly in" reliably gets you a push rather than a pan.
+            What it will not do is get you the same push twice, or a push that matches the one
+            in the shot you are cutting to. Use the vocabulary, but do not expect it to carry
+            continuity.
+          </p>
+        </details>
+        <details>
+          <summary>What is the highest-leverage thing I can control?</summary>
+          <p>
+            The first frame. Composition, lens compression and eyeline are all decided the
+            moment that image exists, and the generation inherits them instead of guessing.
+            This is exactly what blocking a shot in 3D gives you.
+          </p>
+        </details>
+        <details>
+          <summary>Do I need Blender or Unreal to block a shot?</summary>
+          <p>
+            No. Both will do it, and both ask you to learn a full DCC to move one camera.
+            CozyClay does the blocking part in a browser tab with Unity-style controls —
+            see <a href="/">what it does</a>.
+          </p>
+        </details>
+      </section>
+    </main>
+
+    <footer class="site">
+      <div class="wrap">
+        <p>
+          <a href="/">CozyClay</a> ·
+          <a href="https://github.com/HaD0Yun/CozyClay">GitHub</a> ·
+          <a href="https://www.npmjs.com/package/cozyclay">npm</a>
+        </p>
+        <p>
+          CozyClay is not affiliated with or endorsed by NVIDIA, Unity Technologies, ByteDance,
+          Google or Kuaishou. Product names are used only to describe interoperability.
+        </p>
+      </div>
+    </footer>
+  </body>
+</html>