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/index.html CHANGED Viewed

@@ -2,12 +2,457 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Cozy Clay</title>
-    <script type="module" crossorigin src="./assets/index-BW_S1YRy.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-nRmmJgap.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <meta name="description" content="Free, open source previs software that runs in the browser. Block a scene, pose characters, and author camera moves and cuts, then hand the same shots to an AI video model. No Blender, no Unity, no install." />
+    <meta name="theme-color" content="#232323" />
+    <meta name="apple-mobile-web-app-title" content="CozyClay" />
+    <link rel="canonical" href="https://cozyclay.org/" />
+    <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 — open source 3D previs software, in your browser" />
+    <meta property="og:description" content="Block a scene, pose characters, author camera moves and cuts, and preview generated motion. Open source, runs in your browser." />
+    <meta property="og:url" content="https://cozyclay.org/" />
+    <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 property="og:image:alt" content="A CozyClay shot mid-wipe: the greybox previs on one half, the generated result on the other." />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="CozyClay — open source 3D previs software, in your browser" />
+    <meta name="twitter:description" content="Block a scene, pose characters, author camera moves and cuts, and preview generated motion. Open source, runs in your browser." />
+    <meta name="twitter:image" content="https://cozyclay.org/media/cozyclay-demo-poster.jpg" />
+    <title>CozyClay — open source 3D previs software, in your browser</title>
+    <meta property="og:video" content="https://cozyclay.org/media/cozyclay-demo.mp4" />
+    <meta property="og:video:type" content="video/mp4" />
+    <meta property="og:video:width" content="1920" />
+    <meta property="og:video:height" content="1080" />
+    <!-- Cloudflare Web Analytics. Cookie-less, so no consent banner. Installed by
+         hand because cozyclay.org resolves straight to GitHub Pages (DNS-only),
+         so Cloudflare never proxies the response and cannot inject the beacon. -->
+    <script defer src="https://static.cloudflareinsights.com/beacon.min.js" data-cf-beacon='{"token": "6a4384d1375d4ffc8a30a6346a8ad1a0"}'></script>
+    <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "SoftwareApplication",
+        "name": "CozyClay",
+        "url": "https://cozyclay.org/",
+        "applicationCategory": "DesignApplication",
+        "applicationSubCategory": "3D previsualization",
+        "operatingSystem": "Any (Chromium-based browser)",
+        "description": "CozyClay is an open-source, browser-based 3D staging studio. Block a scene, pose characters, sequence motion prompts on a timeline, and preview generated motion in one local workspace that handles like the Unity Editor.",
+        "image": "https://cozyclay.org/media/cozyclay-demo-poster.jpg",
+        "screenshot": "https://cozyclay.org/media/cozyclay-demo-poster.jpg",
+        "logo": "https://cozyclay.org/media/cozyclay-logo.png",
+        "license": "https://github.com/HaD0Yun/CozyClay/blob/main/LICENSE",
+        "codeRepository": "https://github.com/HaD0Yun/CozyClay",
+        "programmingLanguage": ["JavaScript", "TypeScript"],
+        "offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" }
+      }
+    </script>
+    <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "FAQPage",
+        "mainEntity": [
+          {
+            "@type": "Question",
+            "name": "What is CozyClay?",
+            "acceptedAnswer": {
+              "@type": "Answer",
+              "text": "CozyClay is open source previs software that runs in a browser. You block a scene with primitives and set pieces, pose characters, draw root paths, author camera moves and cuts on a timeline, and preview generated motion."
+            }
+          },
+          {
+            "@type": "Question",
+            "name": "What is previs, and is it spelled previz?",
+            "acceptedAnswer": {
+              "@type": "Answer",
+              "text": "Previs is short for previsualization: the rough 3D pass where a shot gets blocked — camera position, lens, character movement, cut points — before anyone commits to final assets or render budget. It is written both previs and previz; the industry mostly writes previs, and both mean the same thing."
+            }
+          },
+          {
+            "@type": "Question",
+            "name": "Is there free previs software?",
+            "acceptedAnswer": {
+              "@type": "Answer",
+              "text": "CozyClay is free and open source under GPL-3.0, and it runs in the browser, so there is no licence and no install between you and a blocked shot. Run it locally with npx cozyclay and nothing leaves your machine."
+            }
+          },
+          {
+            "@type": "Question",
+            "name": "Do I need Blender or Unity to use CozyClay?",
+            "acceptedAnswer": {
+              "@type": "Answer",
+              "text": "No. CozyClay runs entirely in a Chromium-based browser using Three.js and React Three Fiber. The camera and gizmo controls deliberately follow Unity Editor conventions, so the handling is familiar, but no desktop DCC install is required."
+            }
+          },
+          {
+            "@type": "Question",
+            "name": "How does motion generation work?",
+            "acceptedAnswer": {
+              "@type": "Answer",
+              "text": "You sequence multi-phase motion as Prompt Blocks on the timeline and send them to NVIDIA ARDY through a local bridge, then play the result back with sparse IK correction. ARDY is a separate third-party project maintained by NVIDIA; it is not bundled with CozyClay. Staging, root paths, cameras and playback all work without it, and the build ships a pre-generated clip so the timeline has real motion on it from the first run."
+            }
+          },
+          {
+            "@type": "Question",
+            "name": "Is CozyClay free and open source?",
+            "acceptedAnswer": {
+              "@type": "Answer",
+              "text": "Yes. CozyClay is free and open source on GitHub, and it can be run locally with a single command: npx cozyclay."
+            }
+          },
+          {
+            "@type": "Question",
+            "name": "Can I run CozyClay offline?",
+            "acceptedAnswer": {
+              "@type": "Answer",
+              "text": "Yes. CozyClay runs entirely on your own machine with npx cozyclay or from a clone. Nothing is uploaded, and the studio keeps working without a network connection once it is running."
+            }
+          }
+        ]
+      }
+    </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>
-    <div id="root"></div>
+    <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="#controls">Controls</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">
+        <figure class="mark">
+          <img src="/media/cozyclay-logo.png" width="880" height="714" alt="CozyClay" />
+        </figure>
+        <h1>Block the shot before you pay to render it</h1>
+        <p class="lede">
+          CozyClay is free, open source previs software that runs in your browser. Block a
+          scene, pose characters, and author camera moves and cuts — then hand the same
+          shots to an AI video model. No Blender, no Unity, no install.
+        </p>
+        <div class="reel">
+          <video
+            src="/media/cozyclay-demo.mp4"
+            poster="/media/cozyclay-demo-poster.jpg"
+            width="1920" height="1080"
+            autoplay muted loop playsinline controls preload="metadata"
+          ></video>
+        </div>
+        <p class="reel-note">
+          Thirty seconds: greybox previs on the left of the wipe, the generated result on the
+          right. Every cut came out of the same camera setup you see being built — more on
+          <a href="/ai-camera-control/">camera control for AI video</a>.
+        </p>
+        <div class="cta">
+          <a class="btn primary" href="https://github.com/HaD0Yun/CozyClay">View on GitHub</a>
+          <a class="btn ghost" href="#start">Run it locally</a>
+        </div>
+        <p class="note">
+          Free and open source. Built with Three.js and React Three Fiber.
+          <a href="https://github.com/HaD0Yun/CozyClay/issues">Report anything broken</a>.
+        </p>
+      </div>
+      <section id="what">
+        <h2>What you can do</h2>
+        <p class="sub">
+          Previs is the part of animation where you decide what happens before anyone commits
+          to final assets. CozyClay keeps that whole loop in one page.
+        </p>
+        <div class="grid">
+          <div class="card">
+            <h3>Stage a scene</h3>
+            <p>
+              Create primitives and set pieces, then move, rotate, and scale them with a
+              W/E/R gizmo. Grid snapping is a preference, not a law — hold Ctrl during a drag
+              to invert it. A bird's-eye plan view drives 2D root waypoints for character paths.
+            </p>
+          </div>
+          <div class="card">
+            <h3>Edit like Unity</h3>
+            <p>
+              Right-drag flies the camera, WASD walks, Q/E cranes, middle-drag pans,
+              Alt+drag orbits the selection, F frames it. The rule set follows Unity's manual
+              on purpose, so muscle memory carries over.
+            </p>
+          </div>
+          <div class="card">
+            <h3>Undo anything</h3>
+            <p>
+              Every scene mutation goes through a single history store: one interaction —
+              a drag, a scrub, an inspector edit — is exactly one undo entry. Esc cancels
+              an in-flight drag and restores the pre-drag transform.
+            </p>
+          </div>
+          <div class="card">
+            <h3>Generate motion</h3>
+            <p>
+              Pose characters, sequence multi-phase motion as Prompt Blocks on a resizable
+              timeline, send them to NVIDIA ARDY, then play the result back with sparse IK
+              correction where the generated motion needs fixing.
+            </p>
+          </div>
+        </div>
+      </section>
+      <section id="start">
+        <h2>Quick start</h2>
+        <p class="sub">
+          CozyClay runs on your machine. One command is enough — there is nothing to compile
+          and no dependency tree to install.
+        </p>
+        <pre><code>npx cozyclay</code></pre>
+        <p class="sub">Or clone and run the source:</p>
+        <pre><code>git clone https://github.com/HaD0Yun/CozyClay.git
+cd CozyClay
+npm install
+npm run dev</code></pre>
+        <p class="note">
+          Requires Node.js 22 or newer and a Chromium-based browser.
+          <code>npm run dev</code> starts the studio together with its local ARDY bridge;
+          <code>npm run dev:ui</code> starts the browser UI alone, without motion generation.
+        </p>
+      </section>
+      <section id="controls">
+        <h2>Controls</h2>
+        <p class="sub">Unity Editor conventions, with the divergences documented in the repo.</p>
+        <div class="scroller">
+          <table>
+            <thead><tr><th>Input</th><th>Action</th></tr></thead>
+            <tbody>
+              <tr><td>Right-drag</td><td>Look around (fly)</td></tr>
+              <tr><td>RMB + WASD</td><td>Walk while flying</td></tr>
+              <tr><td>RMB + Q/E</td><td>Crane down / up</td></tr>
+              <tr><td>Middle-drag</td><td>Pan</td></tr>
+              <tr><td>Alt + drag</td><td>Orbit the selection</td></tr>
+              <tr><td>Scroll</td><td>Dolly</td></tr>
+              <tr><td>Click</td><td>Select; empty space clears</td></tr>
+              <tr><td>W / E / R</td><td>Move / rotate / scale tool</td></tr>
+              <tr><td>Ctrl (during drag)</td><td>Invert grid snapping</td></tr>
+              <tr><td>Ctrl/Cmd+Z, Ctrl/Cmd+Shift+Z</td><td>Undo / redo</td></tr>
+              <tr><td>Esc</td><td>Cancel the in-flight drag</td></tr>
+              <tr><td>End</td><td>Drop the selection to the surface</td></tr>
+              <tr><td>Ctrl/Cmd+D</td><td>Duplicate the selection</td></tr>
+              <tr><td>F</td><td>Frame the selection</td></tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+      <section id="faq">
+        <h2>FAQ</h2>
+        <details open>
+          <summary>What is CozyClay?</summary>
+          <p>
+            CozyClay is open source previs software that runs in a browser. You block a scene
+            with primitives and set pieces, pose characters, draw root paths, author camera
+            moves and cuts on a timeline, and preview generated motion.
+          </p>
+        </details>
+        <details>
+          <summary>What is previs, and is it spelled previz?</summary>
+          <p>
+            Previs is short for previsualization: the rough 3D pass where a shot gets blocked —
+            camera position, lens, character movement, cut points — before anyone commits to
+            final assets or render budget. It is written both <strong>previs</strong> and
+            <strong>previz</strong>; the industry mostly writes previs, and both mean the same
+            thing.
+          </p>
+        </details>
+        <details>
+          <summary>Is there free previs software?</summary>
+          <p>
+            CozyClay is free and open source under GPL-3.0, and it runs in the browser, so there
+            is no licence and no install between you and a blocked shot. Run it locally with
+            <code>npx cozyclay</code> and nothing leaves your machine.
+          </p>
+        </details>
+        <details>
+          <summary>Can I use it for camera control in AI video?</summary>
+          <p>
+            That is the reason it exists. Block the shot in 3D — angle, lens, dolly, the frame
+            the cut lands on — then take those camera moves to a video model instead of
+            describing them in a prompt and hoping. See
+            <a href="/ai-camera-control/">camera control for AI video</a>.
+          </p>
+        </details>
+        <details>
+          <summary>Do I need Blender or Unity?</summary>
+          <p>
+            No. CozyClay runs entirely in a Chromium-based browser using Three.js and React
+            Three Fiber. The camera and gizmo controls deliberately follow Unity Editor
+            conventions, so the handling is familiar, but no desktop DCC install is required.
+          </p>
+        </details>
+        <details>
+          <summary>How does motion generation work?</summary>
+          <p>
+            You sequence multi-phase motion as Prompt Blocks on the timeline and send them to
+            <a href="https://github.com/nv-tlabs/ardy">NVIDIA ARDY</a> through a local bridge,
+            then play the result back with sparse IK correction. ARDY is a separate third-party
+            project owned and maintained by NVIDIA; it is not bundled here, and CozyClay is not
+            affiliated with or endorsed by NVIDIA. Staging, root paths, cameras and playback all
+            work without it, and the build ships a pre-generated clip so the timeline has real
+            motion on it from the first run.
+          </p>
+        </details>
+        <details>
+          <summary>Is it free and open source?</summary>
+          <p>
+            Yes. The source lives on
+            <a href="https://github.com/HaD0Yun/CozyClay">GitHub</a> and the studio can be run
+            locally with <code>npx cozyclay</code>.
+          </p>
+        </details>
+        <details>
+          <summary>Can I run it offline?</summary>
+          <p>
+            Yes. CozyClay runs entirely on your own machine with <code>npx cozyclay</code> or from
+            a clone. Nothing is uploaded, and the studio keeps working without a network
+            connection once it is running.
+          </p>
+        </details>
+      </section>
+    </main>
+    <footer class="site">
+      <div class="wrap">
+        <p>
+          <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 or Unity Technologies.
+        </p>
+      </div>
+    </footer>
   </body>
 </html>

package/dist/manifest.webmanifest ADDED Viewed

@@ -0,0 +1,42 @@
+{
+	"id": "/app/",
+	"name": "Cozy Clay",
+	"short_name": "Cozy Clay",
+	"description": "Browser-based 3D staging studio: block a scene, pose characters, and author camera moves.",
+	"lang": "en",
+	"start_url": "/app/",
+	"scope": "/app/",
+	"display": "standalone",
+	"display_override": [
+		"standalone",
+		"minimal-ui"
+	],
+	"orientation": "landscape-primary",
+	"background_color": "#1e1e1e",
+	"theme_color": "#232323",
+	"categories": [
+		"graphics-design",
+		"photo",
+		"video"
+	],
+	"icons": [
+		{
+			"src": "./icons/icon-192.png",
+			"sizes": "192x192",
+			"type": "image/png",
+			"purpose": "any"
+		},
+		{
+			"src": "./icons/icon-512.png",
+			"sizes": "512x512",
+			"type": "image/png",
+			"purpose": "any"
+		},
+		{
+			"src": "./icons/icon-maskable-512.png",
+			"sizes": "512x512",
+			"type": "image/png",
+			"purpose": "maskable"
+		}
+	]
+}

package/dist/media/cozyclay-demo-poster.jpg ADDED Viewed

Binary file

package/dist/media/cozyclay-logo.png ADDED Viewed

Binary file

package/dist/robots.txt ADDED Viewed

@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+Sitemap: https://cozyclay.org/sitemap.xml

package/dist/sitemap.xml ADDED Viewed

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://cozyclay.org/</loc>
+    <lastmod>2026-08-15</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>1.0</priority>
+  </url>
+  <url>
+    <loc>https://cozyclay.org/ai-camera-control/</loc>
+    <lastmod>2026-08-15</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.8</priority>
+  </url>
+</urlset>

package/dist/sw.js ADDED Viewed

@@ -0,0 +1,127 @@
+const CACHE_PREFIX = "cozyclay-pwa-";
+// Bump on any change to what CORE_ASSETS resolves to. The icons are cached
+// here, so a client on an older cache keeps serving the previous favicon from
+// disk no matter what the server sends.
+// v3: app shell moved from "/" to "/app/".
+// v4: icons redrawn from the CozyClay mark.
+// v5: tab icons cut to a circle so they stop reading as a sticker.
+const CACHE_NAME = `${CACHE_PREFIX}v5`;
+// The installable app is the studio, not the landing page.
+const APP_SHELL = "/app/";
+const CORE_ASSETS = [
+	APP_SHELL,
+	"/app/index.html",
+	"./manifest.webmanifest",
+	"./icons/icon-32.png",
+	"./icons/icon-192.png",
+	"./icons/icon-512.png",
+	"./icons/icon-maskable-512.png",
+	"./icons/apple-touch-icon.png",
+	"./favicon.ico",
+	"./fonts/inter-latin.woff2",
+	"./demo/walk-then-stop.npz",
+	"./models/x-bot-tpose.fbx",
+	"./models/y-bot-tpose.fbx",
+];
+async function cacheResponse(cache, request, response) {
+	if (!response.ok || response.type === "opaque") {
+		throw new Error(`Required offline asset failed: ${request}`);
+	}
+	await cache.put(request, response.clone());
+	return response;
+}
+async function cacheBuiltAssets(cache) {
+	const response = await fetch(APP_SHELL, { cache: "reload" });
+	if (!response.ok) throw new Error("Required offline app shell failed");
+	await cache.put(APP_SHELL, response.clone());
+	const html = await response.text();
+	const assetUrls = [...html.matchAll(/(?:src|href)="([^"]+)"/g)]
+		.map((match) => new URL(match[1], self.location.href))
+		.filter((url) => url.origin === self.location.origin)
+		.map((url) => url.href);
+	await Promise.all(assetUrls.map(async (url) => {
+		const asset = await fetch(url, { cache: "reload" });
+		await cacheResponse(cache, url, asset);
+	}));
+}
+self.addEventListener("install", (event) => {
+	event.waitUntil((async () => {
+		const cache = await caches.open(CACHE_NAME);
+		await Promise.all(CORE_ASSETS.map(async (url) => {
+			const response = await fetch(url, { cache: "reload" });
+			await cacheResponse(cache, url, response);
+		}));
+		await cacheBuiltAssets(cache);
+	})());
+});
+self.addEventListener("activate", (event) => {
+	event.waitUntil((async () => {
+		const names = await caches.keys();
+		await Promise.all(names
+			.filter((name) => name.startsWith(CACHE_PREFIX) && name !== CACHE_NAME)
+			.map((name) => caches.delete(name)));
+		await self.clients.claim();
+	})());
+});
+self.addEventListener("message", (event) => {
+	if (event.data?.type === "SKIP_WAITING") self.skipWaiting();
+});
+self.addEventListener("fetch", (event) => {
+	const { request } = event;
+	if (request.method !== "GET") return;
+	const url = new URL(request.url);
+	if (url.origin !== self.location.origin || url.pathname.includes("/ardy/")) return;
+	if (request.headers.has("range")) {
+		event.respondWith((async () => {
+			try {
+				return await fetch(request);
+			} catch {
+				const cached = await caches.match(url.href);
+				if (!cached) return new Response(null, { status: 504 });
+				const bytes = await cached.arrayBuffer();
+				const range = request.headers.get("range")?.match(/bytes=(\d+)-(\d*)/);
+				if (!range) return cached;
+				const start = Number(range[1]);
+				const end = range[2] ? Number(range[2]) : bytes.byteLength - 1;
+				const chunk = bytes.slice(start, end + 1);
+				return new Response(chunk, {
+					status: 206,
+					headers: {
+						"accept-ranges": "bytes",
+						"content-length": String(chunk.byteLength),
+						"content-range": `bytes ${start}-${end}/${bytes.byteLength}`,
+						"content-type": cached.headers.get("content-type") || "application/octet-stream",
+					},
+				});
+			}
+		})());
+		return;
+	}
+	if (request.mode === "navigate") {
+		event.respondWith((async () => {
+			const cache = await caches.open(CACHE_NAME);
+			try {
+				const response = await fetch(request);
+				return cacheResponse(cache, request, response);
+			} catch {
+				return (await cache.match(request)) || (await cache.match(APP_SHELL)) || (await cache.match("/app/index.html"));
+			}
+		})());
+		return;
+	}
+	event.respondWith((async () => {
+		const cached = await caches.match(request);
+		if (cached) return cached;
+		const cache = await caches.open(CACHE_NAME);
+		const response = await fetch(request);
+		return cacheResponse(cache, request, response);
+	})());
+});