cozyclay 1.2.0 → 1.5.0

package/bin/update-check.mjs

@@ -0,0 +1,158 @@
+/**
+ * The "a newer version exists" line, and the command that acts on it.
+ *
+ * Two rules keep this from becoming the thing people disable: it never blocks
+ * the launch (fire it, print later, drop it on any error) and it never talks
+ * unless there is actually something newer. No dependencies, same as the
+ * launcher it serves.
+ */
+import { spawn } from "node:child_process";
+import { mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+
+const REGISTRY_URL = "https://registry.npmjs.org/cozyclay/latest";
+const FETCH_TIMEOUT_MS = 2000;
+const CACHE_TTL_MS = 24 * 60 * 60 * 1000;
+
+// Numeric dotted compare, prereleases lose to their own release. Enough to
+// answer "is the registry ahead of us"; anything more is a semver dependency.
+export function compareVersions(a, b) {
+	const parse = (v) => {
+		const s = String(v).trim();
+		const i = s.indexOf("-");
+		// split("-", 2) would *drop* everything after the second hyphen, so
+		// "1.4.0-next-rc" would compare as "next". Keep the whole tag.
+		const core = i === -1 ? s : s.slice(0, i);
+		const pre = i === -1 ? "" : s.slice(i + 1);
+		return { parts: core.split(".").map((n) => Number.parseInt(n, 10) || 0), pre };
+	};
+	const left = parse(a);
+	const right = parse(b);
+	for (let i = 0; i < Math.max(left.parts.length, right.parts.length); i += 1) {
+		const diff = (left.parts[i] ?? 0) - (right.parts[i] ?? 0);
+		if (diff !== 0) return diff < 0 ? -1 : 1;
+	}
+	if (left.pre === right.pre) return 0;
+	if (!left.pre) return 1;
+	if (!right.pre) return -1;
+	// Prerelease tags are dot-separated identifiers; numeric ones order
+	// numerically, or beta.10 would look older than beta.2.
+	const lp = left.pre.split(".");
+	const rp = right.pre.split(".");
+	for (let i = 0; i < Math.max(lp.length, rp.length); i += 1) {
+		const x = lp[i];
+		const y = rp[i];
+		if (x === undefined) return -1;
+		if (y === undefined) return 1;
+		if (/^\d+$/.test(x) && /^\d+$/.test(y)) {
+			const diff = Number(x) - Number(y);
+			if (diff !== 0) return diff < 0 ? -1 : 1;
+		} else if (x !== y) return x < y ? -1 : 1;
+	}
+	return 0;
+}
+
+function readCache(cacheFile) {
+	try {
+		return JSON.parse(readFileSync(cacheFile, "utf8"));
+	} catch {
+		return null;
+	}
+}
+
+function writeCache(cacheFile, cacheDir, latest) {
+	try {
+		mkdirSync(cacheDir, { recursive: true });
+		writeFileSync(cacheFile, JSON.stringify({ latest, checkedAt: Date.now() }, null, "\t"));
+	} catch {
+		/* a read-only home is not a reason to fail a local dev server */
+	}
+}
+
+// Returns null on any failure rather than throwing: a network error must not
+// unwind past the cache fallback in checkForUpdate.
+async function fetchLatest() {
+	let body;
+	try {
+		const res = await fetch(process.env.COZYCLAY_REGISTRY_URL || REGISTRY_URL, {
+			headers: { accept: "application/json" },
+			signal: AbortSignal.timeout(FETCH_TIMEOUT_MS),
+		});
+		if (!res.ok) return null;
+		body = await res.json();
+	} catch {
+		return null;
+	}
+	if (typeof body?.version !== "string") return null;
+	// COZYCLAY_REGISTRY_URL can point anywhere, and a junk string parses as
+	// zeros further down, which reads as a downgrade. Only trust x.y.z.
+	const version = body.version.trim().replace(/^v/, "");
+	return /^\d+\.\d+\.\d+/.test(version) ? version : null;
+}
+
+/**
+ * Resolves to the newer version string, or null. Never rejects: offline,
+ * proxied, rate-limited and "npm is down" all mean "say nothing".
+ */
+export async function checkForUpdate(currentVersion, stateDir) {
+	try {
+		const cacheFile = join(stateDir, "update-check.json");
+		const cached = readCache(cacheFile);
+		let latest = cached?.latest ?? null;
+		const age = Date.now() - cached?.checkedAt;
+		// A future checkedAt (clock skew, edited cache) would otherwise look
+		// fresh forever, and the check would never run again.
+		const fresh = Number.isFinite(age) && age >= 0 && age <= CACHE_TTL_MS;
+		if (!fresh) {
+			const fetched = await fetchLatest();
+			// A dead registry must not erase a known-good cached version, or the
+			// notice silently stops working offline once the TTL lapses.
+			if (fetched) {
+				latest = fetched;
+				writeCache(cacheFile, stateDir, fetched);
+			}
+		}
+		if (!latest) return null;
+		return compareVersions(latest, currentVersion) > 0 ? latest : null;
+	} catch {
+		return null;
+	}
+}
+
+// npx/bunx runs from a temp dir, so there is no local install to upgrade in
+// place; `npm install -g` is the one command that is right either way.
+export function runUpdate() {
+	const npm = process.platform === "win32" ? "npm.cmd" : "npm";
+	const child = spawn(npm, ["install", "-g", "cozyclay@latest"], { stdio: "inherit", shell: process.platform === "win32" });
+	child.on("error", (err) => {
+		console.error(`cozyclay: could not run npm: ${err.message}`);
+		process.exit(1);
+	});
+	child.on("exit", (code, signal) => {
+		if (signal || code !== 0) {
+			process.exit(code ?? 1);
+			return;
+		}
+		// Report what is on disk now, not what the registry says: those differ
+		// the moment a publish lands mid-update.
+		const installed = spawn(npm, ["ls", "-g", "--depth=0", "--json", "cozyclay"], {
+			stdio: ["ignore", "pipe", "ignore"],
+			shell: process.platform === "win32",
+		});
+		let out = "";
+		installed.stdout.on("data", (chunk) => {
+			out += chunk;
+		});
+		installed.on("error", () => process.exit(0));
+		installed.on("exit", () => {
+			let version = "";
+			try {
+				version = JSON.parse(out)?.dependencies?.cozyclay?.version ?? "";
+			} catch {
+				/* an unparseable `npm ls` only costs us the version in the message */
+			}
+			console.log(version ? `cozyclay ${version} installed.` : "cozyclay updated.");
+			process.exit(0);
+		});
+	});
+}

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>

package/dist/app/index.html

@@ -21,22 +21,22 @@
 
     <meta property="og:type" content="website" />
     <meta property="og:site_name" content="CozyClay" />
-    <meta property="og:title" content="CozyClay Studio — 3D staging and previz in the browser" />
+    <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 previz in the browser" />
+    <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 previz in your browser</title>
+    <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-Cgpk2hwX.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/app-DgZvaAE1.css">
+    <script type="module" crossorigin src="/assets/app-zu633VCI.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/app-CqOk49Bk.css">
   </head>
   <body>
     <div id="root">