npm - cozyclay - Versions diffs - 1.1.0 → 1.3.0 - Mend

cozyclay 1.1.0 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (138) hide show

package/CHANGELOG.md +85 -0
package/README.md +91 -25
package/THIRD_PARTY_NOTICES.md +68 -1
package/bin/cozyclay.mjs +71 -8
package/dist/CNAME +1 -0
package/dist/ai-camera-control/index.html +406 -0
package/dist/app/index.html +57 -0
package/dist/assets/app-B3U5aut1.js +4811 -0
package/dist/assets/app-BrRF0wso.css +1 -0
package/dist/assets/vision_bundle-jFkh-fIS.js +41 -0
package/dist/favicon.ico +0 -0
package/dist/fonts/InstrumentSerif-OFL.txt +93 -0
package/dist/fonts/Inter-OFL.txt +92 -0
package/dist/fonts/README.md +15 -0
package/dist/icons/apple-touch-icon.png +0 -0
package/dist/icons/icon-192.png +0 -0
package/dist/icons/icon-32.png +0 -0
package/dist/icons/icon-512.png +0 -0
package/dist/icons/icon-maskable-512.png +0 -0
package/dist/index.html +450 -5
package/dist/manifest.webmanifest +42 -0
package/dist/media/cozyclay-demo-poster.jpg +0 -0
package/dist/media/cozyclay-logo.png +0 -0
package/dist/robots.txt +4 -0
package/dist/sitemap.xml +15 -0
package/dist/sw.js +127 -0
package/mcp/LIVE-PROTOCOL.md +63 -0
package/mcp/README.md +142 -0
package/mcp/ardy-prompts.mjs +170 -0
package/mcp/live-hub.mjs +105 -0
package/mcp/package.json +24 -0
package/mcp/server.mjs +1394 -0
package/package.json +122 -78
package/src/App.jsx +4235 -1047
package/src/ardy/client.js +5 -4
package/src/ardy/cskel27.js +7 -2
package/src/ardy/ik.js +25 -15
package/src/ardy/mp4-duration.js +102 -0
package/src/ardy/npz.js +64 -3
package/src/ardy/playback.js +31 -1
package/src/ardy/prompt-clips.js +7 -2
package/src/ardy/retime.js +211 -0
package/src/ardy/timeline-coordinates.js +24 -0
package/src/ardy/timeline.jsx +650 -70
package/src/ardy/to-cskel27.js +34 -12
package/src/ardy/trim.js +33 -0
package/src/ardy/waypoints.js +14 -9
package/src/asset-pane.jsx +36 -0
package/src/camera-block.js +60 -0
package/src/camera-follow.js +49 -10
package/src/camera-rail-schedule.js +176 -0
package/src/controls.jsx +16 -2
package/src/cuts.js +184 -0
package/src/dualview.jsx +14 -8
package/src/generation/client.js +56 -0
package/src/generation/session.js +47 -0
package/src/generation/shot-spec.js +40 -0
package/src/generation/use-generation.js +55 -0
package/src/hierarchy-model.js +104 -30
package/src/hierarchy-panel.jsx +306 -26
package/src/live-control.js +122 -0
package/src/locale-toggle.jsx +18 -0
package/src/locale.js +34 -0
package/src/main.jsx +5 -0
package/src/matte-editor.js +543 -0
package/src/matte.js +503 -0
package/src/multimodel-ingest.js +344 -0
package/src/object-catalog.jsx +32 -3
package/src/object-gizmo.jsx +43 -15
package/src/planview.jsx +208 -89
package/src/pose-extract/browser.js +42 -0
package/src/pose-extract/detector.js +75 -0
package/src/pose-extract/fit.js +194 -0
package/src/pose-extract/index.js +56 -0
package/src/pose-extract/keyframes.js +74 -0
package/src/pose-extract/landmarks.js +162 -0
package/src/pose-extract/take.js +87 -0
package/src/pose-extract/video-frames.js +91 -0
package/src/pose-thumbs.js +152 -0
package/src/poses.js +114 -0
package/src/posestudio.jsx +434 -22
package/src/project-browser.jsx +135 -0
package/src/project.js +289 -0
package/src/props.jsx +69 -3
package/src/pwa.js +42 -0
package/src/result-modal.jsx +124 -0
package/src/room.jsx +14 -35
package/src/scene-asset-cache.js +125 -0
package/src/scene-assets.js +288 -0
package/src/scene-objects.js +245 -7
package/src/scenes.js +404 -0
package/src/shot-authoring.js +246 -77
package/src/shot.js +8 -4
package/src/styles.css +2151 -183
package/src/ui.jsx +54 -5
package/tools/ardy/BRIDGE.md +73 -6
package/tools/ardy/README.md +64 -5
package/tools/ardy/bridge.mjs +146 -390
package/tools/ardy/bvh-cskel27.mjs +1209 -0
package/tools/ardy/cclay_constrained_generate.py +561 -0
package/tools/ardy/cclay_motion_edit.py +74 -9
package/tools/ardy/cclay_sequence_generate.py +117 -7
package/tools/ardy/cclay_worker.py +304 -0
package/tools/ardy/extract.mjs +367 -0
package/tools/ardy/footage.mjs +462 -0
package/tools/ardy/merge-text-encoder.py +160 -0
package/tools/ardy/npz.mjs +74 -9
package/tools/ardy/run-local.mjs +233 -0
package/tools/ardy/run-on-box.sh +25 -0
package/tools/ardy/run-sequence-on-box.sh +15 -0
package/tools/ardy/runners/index.mjs +23 -0
package/tools/ardy/runners/local.mjs +452 -0
package/tools/ardy/runners/proc.mjs +125 -0
package/tools/ardy/runners/remote.mjs +252 -0
package/tools/ardy/setup-local.mjs +189 -0
package/tools/ardy/setup-text-encoder-on-box.sh +93 -0
package/tools/ardy/setup-text-encoder.py +296 -0
package/tools/generation/README.md +29 -0
package/tools/generation/bridge.mjs +149 -0
package/tools/generation/job-store.mjs +51 -0
package/tools/generation/providers/kling.mjs +76 -0
package/tools/generation/providers/runway.mjs +101 -0
package/tools/generation/providers/seedance.mjs +87 -0
package/tools/generation/providers/shared.mjs +49 -0
package/tools/generation/providers/veo.mjs +84 -0
package/tools/metrics/archive-traffic.mjs +138 -0
package/dist/assets/index-BW_S1YRy.js +0 -4395
package/dist/assets/index-nRmmJgap.css +0 -1
package/tools/ardy/__pycache__/cclay_sequence_generate.cpython-313.pyc +0 -0
package/tools/ardy/out/gen-1786443326924-c6019e-generated.npz +0 -0
package/tools/ardy/out/gen-1786443609325-0053db-generated.npz +0 -0
package/tools/ardy/out/gen-1786443835628-749ed1-generated.npz +0 -0
package/tools/ardy/out/gen-1786462605247-03cb19-generated.npz +0 -0
package/tools/qa-browser.mjs +0 -84
package/tools/qa-crop3.mjs +0 -22
package/tools/qa-playview.mjs +0 -49
package/tools/qa-screenshot.mjs +0 -24
package/tools/qa-visual.mjs +0 -51

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

@@ -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>

package/dist/app/index.html ADDED Viewed

@@ -0,0 +1,57 @@
+<!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="CozyClay studio: block a 3D scene, pose characters, author camera moves, and preview generated motion in your browser." />
+    <meta name="theme-color" content="#232323" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <meta name="apple-mobile-web-app-title" content="CozyClay" />
+    <!-- Unlinked on purpose: the studio is no longer promoted as a hosted demo.
+         It stays reachable so existing PWA installs keep working, but it should
+         not collect search traffic. -->
+    <meta name="robots" content="noindex, follow" />
+    <link rel="canonical" href="https://cozyclay.org/app/" />
+    <link rel="manifest" href="/manifest.webmanifest" />
+    <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="website" />
+    <meta property="og:site_name" content="CozyClay" />
+    <meta property="og:title" content="CozyClay Studio — 3D staging and previs in the browser" />
+    <meta property="og:description" content="Block a scene, pose characters, author camera moves, and preview generated motion. No install, no Blender, no Unity." />
+    <meta property="og:url" content="https://cozyclay.org/app/" />
+    <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="CozyClay Studio — 3D staging and previs in the browser" />
+    <meta name="twitter:description" content="Block a scene, pose characters, author camera moves, and preview generated motion. No install, no Blender, no Unity." />
+    <meta name="twitter:image" content="https://cozyclay.org/media/cozyclay-demo-poster.jpg" />
+    <title>CozyClay Studio — 3D staging and previs in your browser</title>
+    <script defer src="https://static.cloudflareinsights.com/beacon.min.js" data-cf-beacon='{"token": "6a4384d1375d4ffc8a30a6346a8ad1a0"}'></script>
+    <script type="module" crossorigin src="/assets/app-B3U5aut1.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/app-BrRF0wso.css">
+  </head>
+  <body>
+    <div id="root">
+      <noscript>
+        <h1>CozyClay Studio</h1>
+        <p>
+          CozyClay is a browser-based 3D staging studio. Block a scene, pose characters,
+          author camera moves and cuts, sequence motion prompts on a timeline, and preview
+          generated motion — in one local workspace that handles like the Unity Editor.
+        </p>
+        <p>
+          The studio needs JavaScript and WebGL. Enable JavaScript to load it, or read
+          <a href="/">what CozyClay does</a> first.
+        </p>
+      </noscript>
+    </div>
+  </body>
+</html>