hyperframes 0.8.184 → 0.8.185

package/dist/studio/index.html

@@ -14,7 +14,7 @@
         document.documentElement.dataset.theme = "paper";
       }
     </script>
-    <script type="module" crossorigin src="/assets/index-BABXr78Q.js"></script>
+    <script type="module" crossorigin src="/assets/index-C_6rTpaB.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-CESvLzz0.css">
   </head>
   <body>

package/dist/{studio-api-SAKD3VKC.js → studio-api-TAWB7B23.js}

@@ -22,7 +22,7 @@ import {
   getMimeType,
   stampProjectHfIds,
   thumbnailDeviceScaleFactor
-} from "./chunk-3QVMJ7GX.js";
+} from "./chunk-KQ4JEJLF.js";
 import {
   dedupeClonedCompositionId,
   findTargetElement,
@@ -30,7 +30,7 @@ import {
   patchElementInHtml,
   removeElementFromHtml,
   splitElementInHtml
-} from "./chunk-ZRHO6YMM.js";
+} from "./chunk-SKYPMHQC.js";
 import "./chunk-6JR2XUEE.js";
 import {
   requestSubPath
@@ -69,13 +69,13 @@ import {
 import {
   CACHE_DIR_NAME,
   cleanupProxyCache
-} from "./chunk-SN7KI5JA.js";
+} from "./chunk-6GPR3G3C.js";
 import {
   STUDIO_MOTION_PATH,
   createStudioMotionRenderBodyScript,
   walkDir
 } from "./chunk-ALVXFXUG.js";
-import "./chunk-5CS4T6C6.js";
+import "./chunk-7L37AB57.js";
 import "./chunk-EOVYQ3IG.js";
 import "./chunk-KLIKCX6Q.js";
 import {
@@ -85,30 +85,30 @@ import {
 } from "./chunk-EVMY7IPL.js";
 import "./chunk-7FMUTGOH.js";
 import "./chunk-IZCW2NKT.js";
-import "./chunk-J3QM7AHP.js";
+import "./chunk-KROXPHXX.js";
 import "./chunk-RQVDTPGD.js";
-import "./chunk-YALM6XN4.js";
-import "./chunk-R2SQBPMH.js";
+import "./chunk-Q47FAYYK.js";
+import "./chunk-3NPOFC43.js";
 import "./chunk-VC76R6W2.js";
 import "./chunk-UJKQWGFF.js";
-import "./chunk-YMS5FOMC.js";
+import "./chunk-B2A56S5C.js";
 import {
   isSafePath
 } from "./chunk-OFQWTKPW.js";
 import "./chunk-DPVXBVLL.js";
 import "./chunk-634HSJ3J.js";
 import "./chunk-FXMKHHPO.js";
-import "./chunk-ADDHW2FS.js";
+import "./chunk-Q447CX26.js";
 import "./chunk-VAS6HQX3.js";
 import "./chunk-6BNTGNGD.js";
-import "./chunk-OYLO6TYK.js";
+import "./chunk-RUOG4VB7.js";
 import "./chunk-MMQ52NIZ.js";
 import {
   decodeWellFormedEscapes
 } from "./chunk-BSQ7XANM.js";
 import "./chunk-SDYDNHEE.js";
 import "./chunk-IXLUTE6N.js";
-import "./chunk-TYXH3EKP.js";
+import "./chunk-I5JRXMCV.js";
 import "./chunk-M2WBOQ2Q.js";
 export {
   DEFAULT_HISTORY_ROOT,

package/dist/{studioServer-IRI7EVOM.js → studioServer-HRQGJTBU.js}

@@ -8,22 +8,22 @@ import {
   renderJobObservabilityTelemetryPayload,
   renderObservabilityTelemetryPayload,
   startRenderCpuSampler
-} from "./chunk-CXABAXB3.js";
+} from "./chunk-ESBMUZXZ.js";
 import {
   HANDOFF_READY,
   desktopDownloadUrl,
   desktopInstalled,
   openInDesktop
-} from "./chunk-HR23IKLZ.js";
+} from "./chunk-HHSJJFVM.js";
 import "./chunk-DCAI5DBR.js";
 import {
   resolveRenderBrowser
-} from "./chunk-E32ZQ2WO.js";
+} from "./chunk-6RIZY7OP.js";
 import {
   loadSharpInBackground
 } from "./chunk-QH3T4WI2.js";
 import "./chunk-6BEFEWFB.js";
-import "./chunk-7HJALUIO.js";
+import "./chunk-K2ZKXTVL.js";
 import {
   PREVIEW_BUNDLE_OPTIONS,
   affectsPreview,
@@ -36,8 +36,8 @@ import {
   getMimeType,
   stampProjectHfIds,
   thumbnailDeviceScaleFactor
-} from "./chunk-3QVMJ7GX.js";
-import "./chunk-ZRHO6YMM.js";
+} from "./chunk-KQ4JEJLF.js";
+import "./chunk-SKYPMHQC.js";
 import "./chunk-6JR2XUEE.js";
 import "./chunk-TTVHYD5R.js";
 import {
@@ -53,17 +53,17 @@ import {
   identifyFileWrite,
   openProjectHistory
 } from "./chunk-U6RXZNZE.js";
-import "./chunk-SN7KI5JA.js";
+import "./chunk-6GPR3G3C.js";
 import "./chunk-ALVXFXUG.js";
 import {
   seekCompositionTimeline
-} from "./chunk-ICJEAFPD.js";
+} from "./chunk-IDFNKFPL.js";
 import "./chunk-FH7WODJH.js";
-import "./chunk-KN46TGHV.js";
+import "./chunk-TOI35GN2.js";
 import "./chunk-MOEGCMKI.js";
-import "./chunk-ES426XRJ.js";
+import "./chunk-SQVRXHOW.js";
 import "./chunk-DKPNNYBZ.js";
-import "./chunk-PSKEKWVU.js";
+import "./chunk-G2UANIDX.js";
 import "./chunk-K2FLNJVB.js";
 import "./chunk-442JNXRM.js";
 import "./chunk-EHSBBBR2.js";
@@ -71,21 +71,21 @@ import {
   resolveCaptureBrowserGpuMode,
   resolveLocalBrowserGpuMode,
   resolveLocalWebGpu
-} from "./chunk-UNNXFKVG.js";
+} from "./chunk-EMSDWBG3.js";
 import {
   resolveAutoProxy
-} from "./chunk-PFYWVUHA.js";
+} from "./chunk-HDIRZGK4.js";
 import "./chunk-XT7X6QCP.js";
 import "./chunk-4YYJOFKS.js";
 import "./chunk-HVW7ABXD.js";
-import "./chunk-ZOCHDXDG.js";
+import "./chunk-RTBSA3EA.js";
 import "./chunk-JHOCK3DG.js";
-import "./chunk-LLC4CS6I.js";
-import "./chunk-7MB2ZAQF.js";
+import "./chunk-HXUTX5GR.js";
+import "./chunk-PMMQRJDE.js";
 import "./chunk-AWDFDFI3.js";
 import "./chunk-P6LJ4Y32.js";
 import "./chunk-GMECXFAN.js";
-import "./chunk-5CS4T6C6.js";
+import "./chunk-7L37AB57.js";
 import {
   isAtomicTempPath,
   replaceFileAtomically
@@ -93,12 +93,12 @@ import {
 import {
   trackRenderComplete,
   trackRenderError
-} from "./chunk-JIUTXKWA.js";
+} from "./chunk-WQLKDL35.js";
 import {
   canaryDecisionsForStudio,
   resetTelemetryPostureCache,
   shouldTrack
-} from "./chunk-UKOTVJFV.js";
+} from "./chunk-H5SM5PJI.js";
 import "./chunk-VWG7OQKU.js";
 import "./chunk-54HJ63Q2.js";
 import "./chunk-JVBRJMOP.js";
@@ -112,17 +112,17 @@ import "./chunk-7FMUTGOH.js";
 import {
   assertWebGpuAdapterAvailable,
   compositionRequiresWebGpu
-} from "./chunk-RGXVEYHI.js";
+} from "./chunk-I3IH5MV5.js";
 import "./chunk-IZCW2NKT.js";
 import {
   fpsToNumber
-} from "./chunk-J3QM7AHP.js";
+} from "./chunk-KROXPHXX.js";
 import "./chunk-RQVDTPGD.js";
-import "./chunk-YALM6XN4.js";
-import "./chunk-R2SQBPMH.js";
+import "./chunk-Q47FAYYK.js";
+import "./chunk-3NPOFC43.js";
 import "./chunk-VC76R6W2.js";
 import "./chunk-UJKQWGFF.js";
-import "./chunk-YMS5FOMC.js";
+import "./chunk-B2A56S5C.js";
 import {
   realpath
 } from "./chunk-OFQWTKPW.js";
@@ -140,17 +140,17 @@ import {
 } from "./chunk-T6AGUTZJ.js";
 import "./chunk-XT6MXC7A.js";
 import "./chunk-4UMPIPCQ.js";
-import "./chunk-ADDHW2FS.js";
+import "./chunk-Q447CX26.js";
 import "./chunk-VAS6HQX3.js";
 import {
   isWithinProjectRoot
 } from "./chunk-6BNTGNGD.js";
-import "./chunk-OYLO6TYK.js";
+import "./chunk-RUOG4VB7.js";
 import "./chunk-MMQ52NIZ.js";
 import "./chunk-BSQ7XANM.js";
 import "./chunk-SDYDNHEE.js";
 import "./chunk-IXLUTE6N.js";
-import "./chunk-TYXH3EKP.js";
+import "./chunk-I5JRXMCV.js";
 import "./chunk-W2LGJSEN.js";
 import "./chunk-K4WIOZFP.js";
 import {
@@ -163,7 +163,7 @@ import {
 } from "./chunk-ISN5GRYI.js";
 import {
   VERSION
-} from "./chunk-4N4P3ZWL.js";
+} from "./chunk-I7QMXZSB.js";
 import "./chunk-KNU5COPB.js";
 import "./chunk-KGPLIH7B.js";
 import "./chunk-M2WBOQ2Q.js";
@@ -354,7 +354,7 @@ var ENTRY_TS = resolve(__dirname, "..", "..", "..", "core", "src", "runtime", "e
 async function buildFromSource() {
   if (!existsSync(ENTRY_TS)) return null;
   try {
-    const mod = await import("./dist-DYS24AMA.js");
+    const mod = await import("./dist-ULGTPSU4.js");
     if (typeof mod.loadHyperframeRuntimeSource === "function") {
       const source = mod.loadHyperframeRuntimeSource();
       if (source) return source;
@@ -365,7 +365,7 @@ async function buildFromSource() {
 }
 async function getInlinedRuntime() {
   try {
-    const mod = await import("./dist-DYS24AMA.js");
+    const mod = await import("./dist-ULGTPSU4.js");
     if (typeof mod.getHyperframeRuntimeScript === "function") {
       return mod.getHyperframeRuntimeScript() ?? null;
     }
@@ -720,13 +720,13 @@ var RENDER_SHUTDOWN_WAIT_MS = 2e3;
 var IMMUTABLE_CACHE_CONTROL = "public, max-age=31536000, immutable";
 var REMOTE_GIF_IMG_SRC_RE = /<img\b[^>]*?\bsrc\s*=\s*["'](https?:\/\/[^"']+\.gif(?:[?#][^"']*)?)["'][^>]*>/gi;
 async function loadStudioProducer() {
-  if (!isDevMode()) return await import("./src-6MSC62U2.js");
+  if (!isDevMode()) return await import("./src-NPR2JZOJ.js");
   if (!process.versions.bun) {
     throw new Error(
       "Studio dev-mode rendering requires bun (the producer is loaded from TypeScript source, which Node cannot resolve). Restart the studio with `bun run studio`."
     );
   }
-  return await import("./src-6MSC62U2.js");
+  return await import("./src-NPR2JZOJ.js");
 }
 function resolveDistDir() {
   return resolveStudioBundle().dir;
@@ -841,7 +841,7 @@ async function getThumbnailBrowser(requestedGpuMode, isShuttingDown) {
     try {
       if (isShuttingDown()) return null;
       const { ensureBrowser } = await import("./manager-UHWEKPXC.js");
-      const { acquireBrowser, buildChromeArgs } = await import("./src-4UYM2K3S.js");
+      const { acquireBrowser, buildChromeArgs } = await import("./src-RZ574OKP.js");
       let executablePath;
       try {
         const b = await ensureBrowser({ preferManagedChrome: true });
@@ -1007,7 +1007,7 @@ function createStudioServer(options) {
     resolveProject: (id) => id === projectId ? project : null,
     async bundle(dir, options2) {
       try {
-        const { bundleToSingleHtml } = await import("./compiler-Q3N6QXMT.js");
+        const { bundleToSingleHtml } = await import("./compiler-KPHYGFXL.js");
         let html = await bundleToSingleHtml(dir, { ...PREVIEW_BUNDLE_OPTIONS, ...options2 });
         html = html.replace(
           'data-hyperframes-preview-runtime="1" src=""',
@@ -1020,9 +1020,9 @@ function createStudioServer(options) {
       }
     },
     async transformPreviewHtml({ html, project: project2 }) {
-      const { injectDeterministicFontFaces } = await import("./deterministicFonts-VQ5UBMXY.js");
-      const { prepareAnimatedGifInputs } = await import("./animatedGifPrep-AGASIWVA.js");
-      const { downloadToTemp, writeUrlDownloadTelemetry } = await import("./urlDownloader-OHLLP45A.js");
+      const { injectDeterministicFontFaces } = await import("./deterministicFonts-EGAAE7QL.js");
+      const { prepareAnimatedGifInputs } = await import("./animatedGifPrep-PEP5GWOJ.js");
+      const { downloadToTemp, writeUrlDownloadTelemetry } = await import("./urlDownloader-6CXL4CL7.js");
       const gifOutputDir = join2(project2.dir, ".hyperframes", "prepared-assets", "gif");
       const gifDownloadDir = join2(project2.dir, ".hyperframes", "prepared-assets", "downloads");
       const prepared = await prepareAnimatedGifInputs(html, {
@@ -1046,7 +1046,7 @@ function createStudioServer(options) {
       if (resolve2(dir) === resolve2(projectDir)) cachedProjectSignature = null;
     },
     async lint(html, opts) {
-      const { lintHyperframeHtml } = await import("./dist-SENYPQGW.js");
+      const { lintHyperframeHtml } = await import("./dist-LM7AVHOU.js");
       return await lintHyperframeHtml(html, { ...opts, host: "studio" });
     },
     // Out of process: linting a large composition is seconds of synchronous parsing, and on
@@ -1178,7 +1178,7 @@ function createStudioServer(options) {
     startBackgroundRemoval(opts) {
       return createBackgroundRemovalJob(opts, async (renderOpts) => {
         const sourcePipelinePath = "../background-removal/pipeline.ts";
-        const pipeline = await import("./pipeline-6ML3LUVK.js").catch(
+        const pipeline = await import("./pipeline-I2M22M24.js").catch(
           () => import(sourcePipelinePath)
         );
         return pipeline.render(renderOpts);
@@ -1263,8 +1263,8 @@ function createStudioServer(options) {
       }
     },
     async listRegistryCatalog() {
-      const { listRegistryItems, loadAllItems } = await import("./resolver-RUBGFXPC.js");
-      const { loadProjectConfig } = await import("./projectConfig-TBU2VWZX.js");
+      const { listRegistryItems, loadAllItems } = await import("./resolver-BUC2GFZQ.js");
+      const { loadProjectConfig } = await import("./projectConfig-4A76VYUP.js");
       const registry = { baseUrl: loadProjectConfig(projectDir).registry };
       const entries = await listRegistryItems(void 0, registry);
       const blockAndComponentEntries = entries.filter(
@@ -1273,9 +1273,9 @@ function createStudioServer(options) {
       return loadAllItems(blockAndComponentEntries, registry);
     },
     async installRegistryBlock(opts) {
-      const { addToProject, primaryInstalledTarget } = await import("./add-5ZTD3MUZ.js");
-      const { recordRewrittenInstall } = await import("./installer-CWOJVK5K.js");
-      const { registryTargetPath } = await import("./publication-CWWUJYJ5.js");
+      const { addToProject, primaryInstalledTarget } = await import("./add-ODTNPRGG.js");
+      const { recordRewrittenInstall } = await import("./installer-ZP2LQZUQ.js");
+      const { registryTargetPath } = await import("./publication-SQPMC2W3.js");
       const { result, item } = await addToProject({
         name: opts.blockName,
         projectDir: opts.project.dir,
@@ -1376,8 +1376,8 @@ function createStudioServer(options) {
   app.get("/api/environment/ffmpeg", async (c) => {
     if (ffmpegReady) return c.json({ ok: true });
     const [{ runEnvironmentChecks }, { getFFmpegInstallCommand }] = await Promise.all([
-      import("./preflight-R3DEFMLA.js"),
-      import("./ffmpeg-BYHON577.js")
+      import("./preflight-FZ24NCHH.js"),
+      import("./ffmpeg-JLH3Z7G7.js")
     ]);
     const { outcomes } = await runEnvironmentChecks();
     const failed = outcomes.find((outcome) => !outcome.ok);
@@ -1396,7 +1396,7 @@ function createStudioServer(options) {
   mountDesktopRoutes(app, projectDir);
   let cachedFFmpegPath;
   app.post("/api/projects/:id/render", async (c, next) => {
-    const { findFFmpeg, getFFmpegInstallHint } = await import("./ffmpeg-BYHON577.js");
+    const { findFFmpeg, getFFmpegInstallHint } = await import("./ffmpeg-JLH3Z7G7.js");
     if (!cachedFFmpegPath) {
       cachedFFmpegPath = findFFmpeg();
     }
@@ -1512,7 +1512,7 @@ function createStudioServer(options) {
     });
     const renders = [...inFlightRenders];
     for (const [abortController] of renders) abortController.abort();
-    const { killTrackedProcesses, closeBrowserPool } = await import("./src-4UYM2K3S.js");
+    const { killTrackedProcesses, closeBrowserPool } = await import("./src-RZ574OKP.js");
     killTrackedProcesses();
     const closeBrowsers = Promise.allSettled([
       closeThumbnailBrowser().catch(() => {

package/dist/{telemetry-F4XADVAF.js → telemetry-QZ6HJF4W.js}

@@ -17,14 +17,14 @@ import {
   trackInitTemplate,
   trackRenderComplete,
   trackRenderError
-} from "./chunk-JIUTXKWA.js";
+} from "./chunk-WQLKDL35.js";
 import {
   flush,
   flushSync,
   shouldTrack,
   showTelemetryNotice,
   trackEvent
-} from "./chunk-UKOTVJFV.js";
+} from "./chunk-H5SM5PJI.js";
 import "./chunk-VWG7OQKU.js";
 import "./chunk-54HJ63Q2.js";
 import "./chunk-JVBRJMOP.js";
@@ -48,7 +48,7 @@ import {
 } from "./chunk-XUXGIA7H.js";
 import "./chunk-WERLJGIC.js";
 import "./chunk-ISN5GRYI.js";
-import "./chunk-4N4P3ZWL.js";
+import "./chunk-I7QMXZSB.js";
 import "./chunk-KNU5COPB.js";
 import "./chunk-M2WBOQ2Q.js";
 export {

package/dist/templates/_shared/AGENTS.md

@@ -1,36 +1,29 @@
 # HyperFrames Composition Project
 
-## Skills — USE THESE FIRST
+## Skills — read these first
 
-**Always invoke the relevant skill before writing or modifying compositions.** Skills encode framework-specific patterns (e.g., `window.__timelines` registration, `data-*` attribute semantics, shader-compatible CSS rules) that are NOT in generic web docs. Skipping them produces broken compositions.
+**Invoke the relevant skill before writing or modifying compositions.** Skills encode framework-specific patterns (e.g., `window.__timelines` registration, `data-*` attribute semantics, shader-compatible CSS rules) that generic web docs don't cover, so compositions written without them break.
 
-**Doing anything with HyperFrames?** Start at `/hyperframes` — it tells you what HyperFrames can do and which skill or workflow handles your intent (make a video, TTS / BGM, prep footage, author / animate, render, install blocks), confirms your brief up front (the intent layer), and routes every "make me a…" request (a video, a deck, a composition port) to the right workflow. Read it first, especially when there's no project context to orient you. The workflows it routes to:
+**Doing anything with HyperFrames?** Start at `/hyperframes`. Make any video by asking for it; the `/hyperframes` skill carries the contract and the references (each kind of film, story, motion, look, sound, review, captions, overlays). Read it first, especially when there's no project context to orient you.
 
-- `/product-launch-video` — any **website** URL or brief / script → a product launch / SaaS / promo video, or a site tour / showcase featuring the site's own captured visuals.
-- `/faceless-explainer` — arbitrary text (topic / article / notes), **no URL, no website capture** → 60-90s faceless explainer.
-- `/embedded-captions` — an existing talking-head video (MP4) → the same footage with captions / subtitles added (rail + embed, or pure-cinematic embed); the footage itself is untouched.
-- `/talking-head-recut` — an existing talking-head / interview / podcast video (MP4) → the same footage **packaged with designed graphic overlays** (kinetic titles, lower-thirds, data callouts, pull-quotes, side panels, pip) synced to the transcript; the clip plays unchanged underneath. (Plain captions/subtitles → `/embedded-captions`.)
-- `/pr-to-video` — a GitHub PR (URL / `owner/repo#N` / "this PR") → 30-90s code-change explainer (changelog / feature reveal / fix / refactor).
-- `/motion-graphics` — a short (typically under 10s) design-led **motion graphic**, motion-is-the-message, no narration: kinetic type, a stat / number count-up, a chart, a logo sting, a lower-third / overlay, or an animated tweet / headline / captured-page highlight; rendered to MP4 or a transparent overlay. Longer / narrated / custom → `/general-video`.
-- `/music-to-video` — a **music track** (audio file, video to pull audio from, or one generated from a mood brief) → beat-synced video (lyric / slideshow / kinetic promo). Music drives pacing; user-supplied images / videos are cut onto the same beat grid.
-- `/slideshow` — a **presentation / pitch deck / interactive deck** — discrete slides, fragment reveals, branching, hotspot navigation, presenter mode. Output is a navigable deck, not a rendered video.
-- `/general-video` — fallback for any other video (title card, longer brand / sizzle reel, multi-scene montage, static loop, custom composition) and the home of **companion mode** — co-create with the full HyperFrames toolbox; the original hyperframes authoring flow, any length.
-
-**Porting an existing composition?** `/remotion-to-hyperframes` translates a Remotion (React) composition into HyperFrames HTML — a source migration, separate from the creation workflows above.
-
-The domain skills (`/hyperframes-core`, `/hyperframes-animation`, `/hyperframes-keyframes`, `/hyperframes-creative`, `/hyperframes-cli`, `/media-use`, `/hyperframes-audio`, `/hyperframes-registry`, `/figma`) and the full capability map live inside `/hyperframes` — it is the single source of truth for which skill handles which intent.
+- `/hyperframes` — read first for any request to make, edit, animate or render a video, motion graphic, captions or overlays. Holds the render contract and the work loop.
+- `/hyperframes-cli` — the CLI by job: scaffold, check, look at frames, edit the timeline, preview, render, publish, project history.
+- `/hyperframes-registry` — ready-made blocks and components installed as editable source. Search it before hand-building any named visual.
+- `/media-use` — get or make any media (music, sound effects, images, voiceover, avatar and generated video, transcripts, cutouts, colour grades) and mix placed audio.
+- `/figma` — bring a Figma design, frame, logo or brand into a video.
+- `/slideshow` — a presentation or pitch deck. Output is a navigable deck, not a rendered MP4.
+- `/remotion-to-hyperframes` — bring existing video code or footage into HyperFrames (Remotion first; also Motion Canvas, Lottie, Three.js, canvas, or renders from other tools) and verify it frame by frame against the original.
 
 **Changing how real footage or images look or reveal?** Load `/media-use` and read its `references/media-treatments.md` before editing, even when the request only says dark, flat, boring, retro, private, or “make the reveal cooler.” It governs how footage is treated, never whether media may be used. Use canonical media treatments and seek-safe motion; do not improvise equivalent CSS/SVG filters or overlays.
 
-> **Tailwind v4 projects** (`hyperframes init --tailwind`): see `/hyperframes-core` → `references/tailwind.md`.
+> **Tailwind v4 projects** (`hyperframes init --tailwind`): see `hyperframes-cli/references/init-and-scaffold.md` (Tailwind).
 
 > **Using a HyperFrames plugin?** Load skills from that installed bundle and follow
 > its `hyperframes/references/plugin-installation.md` execution rules. Update via
 > the plugin manager, not the standalone commands below.
 >
 > **Standalone skill missing or stale?** Run `npx hyperframes skills update <name>` to install/refresh
-> the specific skill you need (the `/hyperframes` router does this automatically before
-> entering a workflow), or bare `npx hyperframes skills update` to refresh the core set plus
+> the specific skill you need, or bare `npx hyperframes skills update` to refresh the core set plus
 > everything already installed — neither pulls the full set. Restart the agent session so
 > newly installed skills load.
 
@@ -92,6 +85,8 @@ npm run check
 
 Fix all errors before presenting the result. Warnings should be reviewed before rendering.
 
+Then look at what you changed: `npx hyperframes snapshot --at <seconds>` (or `--range START,END`, `--composition <id>`) at the moments you edited, and read the frames before you reply. A passing check does not show how it looks.
+
 ## Key Rules
 
 1. Every timed element needs `data-start` and a duration. `data-start` is what marks it as timed; `data-track-index` is an optional Studio display lane the render never reads

package/dist/templates/_shared/CLAUDE.md

@@ -1,36 +1,29 @@
 # HyperFrames Composition Project
 
-## Skills — USE THESE FIRST
+## Skills — read these first
 
-**Always invoke the relevant skill before writing or modifying compositions.** Skills encode framework-specific patterns (e.g., `window.__timelines` registration, `data-*` attribute semantics, shader-compatible CSS rules) that are NOT in generic web docs. Skipping them produces broken compositions.
+**Invoke the relevant skill before writing or modifying compositions.** Skills encode framework-specific patterns (e.g., `window.__timelines` registration, `data-*` attribute semantics, shader-compatible CSS rules) that generic web docs don't cover, so compositions written without them break.
 
-**Doing anything with HyperFrames?** Start at `/hyperframes` — it tells you what HyperFrames can do and which skill or workflow handles your intent (make a video, TTS / BGM, prep footage, author / animate, render, install blocks), confirms your brief up front (the intent layer), and routes every "make me a…" request (a video, a deck, a composition port) to the right workflow. Read it first, especially when there's no project context to orient you. The workflows it routes to:
+**Doing anything with HyperFrames?** Start at `/hyperframes`. Make any video by asking for it; the `/hyperframes` skill carries the contract and the references (each kind of film, story, motion, look, sound, review, captions, overlays). Read it first, especially when there's no project context to orient you.
 
-- `/product-launch-video` — any **website** URL or brief / script → a product launch / SaaS / promo video, or a site tour / showcase featuring the site's own captured visuals.
-- `/faceless-explainer` — arbitrary text (topic / article / notes), **no URL, no website capture** → 60-90s faceless explainer.
-- `/embedded-captions` — an existing talking-head video (MP4) → the same footage with captions / subtitles added (rail + embed, or pure-cinematic embed); the footage itself is untouched.
-- `/talking-head-recut` — an existing talking-head / interview / podcast video (MP4) → the same footage **packaged with designed graphic overlays** (kinetic titles, lower-thirds, data callouts, pull-quotes, side panels, pip) synced to the transcript; the clip plays unchanged underneath. (Plain captions/subtitles → `/embedded-captions`.)
-- `/pr-to-video` — a GitHub PR (URL / `owner/repo#N` / "this PR") → 30-90s code-change explainer (changelog / feature reveal / fix / refactor).
-- `/motion-graphics` — a short (typically under 10s) design-led **motion graphic**, motion-is-the-message, no narration: kinetic type, a stat / number count-up, a chart, a logo sting, a lower-third / overlay, or an animated tweet / headline / captured-page highlight; rendered to MP4 or a transparent overlay. Longer / narrated / custom → `/general-video`.
-- `/music-to-video` — a **music track** (audio file, video to pull audio from, or one generated from a mood brief) → beat-synced video (lyric / slideshow / kinetic promo). Music drives pacing; user-supplied images / videos are cut onto the same beat grid.
-- `/slideshow` — a **presentation / pitch deck / interactive deck** — discrete slides, fragment reveals, branching, hotspot navigation, presenter mode. Output is a navigable deck, not a rendered video.
-- `/general-video` — fallback for any other video (title card, longer brand / sizzle reel, multi-scene montage, static loop, custom composition) and the home of **companion mode** — co-create with the full HyperFrames toolbox; the original hyperframes authoring flow, any length.
-
-**Porting an existing composition?** `/remotion-to-hyperframes` translates a Remotion (React) composition into HyperFrames HTML — a source migration, separate from the creation workflows above.
-
-The domain skills (`/hyperframes-core`, `/hyperframes-animation`, `/hyperframes-keyframes`, `/hyperframes-creative`, `/hyperframes-cli`, `/media-use`, `/hyperframes-audio`, `/hyperframes-registry`, `/figma`) and the full capability map live inside `/hyperframes` — it is the single source of truth for which skill handles which intent.
+- `/hyperframes` — read first for any request to make, edit, animate or render a video, motion graphic, captions or overlays. Holds the render contract and the work loop.
+- `/hyperframes-cli` — the CLI by job: scaffold, check, look at frames, edit the timeline, preview, render, publish, project history.
+- `/hyperframes-registry` — ready-made blocks and components installed as editable source. Search it before hand-building any named visual.
+- `/media-use` — get or make any media (music, sound effects, images, voiceover, avatar and generated video, transcripts, cutouts, colour grades) and mix placed audio.
+- `/figma` — bring a Figma design, frame, logo or brand into a video.
+- `/slideshow` — a presentation or pitch deck. Output is a navigable deck, not a rendered MP4.
+- `/remotion-to-hyperframes` — bring existing video code or footage into HyperFrames (Remotion first; also Motion Canvas, Lottie, Three.js, canvas, or renders from other tools) and verify it frame by frame against the original.
 
 **Changing how real footage or images look or reveal?** Load `/media-use` and read its `references/media-treatments.md` before editing, even when the request only says dark, flat, boring, retro, private, or “make the reveal cooler.” It governs how footage is treated, never whether media may be used. Use canonical media treatments and seek-safe motion; do not improvise equivalent CSS/SVG filters or overlays.
 
-> **Tailwind v4 projects** (`hyperframes init --tailwind`): see `/hyperframes-core` → `references/tailwind.md`.
+> **Tailwind v4 projects** (`hyperframes init --tailwind`): see `hyperframes-cli/references/init-and-scaffold.md` (Tailwind).
 
 > **Using a HyperFrames plugin?** Load skills from that installed bundle and follow
 > its `hyperframes/references/plugin-installation.md` execution rules. Update via
 > the plugin manager, not the standalone commands below.
 >
 > **Standalone skill missing or stale?** Run `npx hyperframes skills update <name>` to install/refresh
-> the specific skill you need (the `/hyperframes` router does this automatically before
-> entering a workflow), or bare `npx hyperframes skills update` to refresh the core set plus
+> the specific skill you need, or bare `npx hyperframes skills update` to refresh the core set plus
 > everything already installed — neither pulls the full set. Restart the agent session so
 > newly installed skills load.
 
@@ -92,6 +85,8 @@ npm run check
 
 Fix all errors before presenting the result. Warnings should be reviewed before rendering.
 
+Then look at what you changed: `npx hyperframes snapshot --at <seconds>` (or `--range START,END`, `--composition <id>`) at the moments you edited, and read the frames before you reply. A passing check does not show how it looks.
+
 ## Key Rules
 
 1. Every timed element needs `data-start` and a duration. `data-start` is what marks it as timed; `data-track-index` is an optional Studio display lane the render never reads

package/dist/templates/blank/index.html

@@ -5,6 +5,12 @@
     <meta name="viewport" content="width=1920, height=1080" />
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
     <style>
+      /* Placeholders: replace all three with the film's own palette and display face. */
+      :root {
+        --ground: #6b6b6b;
+        --ink: #ffffff;
+        --font-display: sans-serif;
+      }
       * {
         margin: 0;
         padding: 0;
@@ -16,7 +22,7 @@
         width: 1920px;
         height: 1080px;
         overflow: hidden;
-        background: #0a0a0a;
+        background: var(--ground);
       }
       #root {
         width: 100%;
@@ -24,10 +30,10 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        font-family: Inter, ui-sans-serif, system-ui, sans-serif;
+        font-family: var(--font-display);
       }
       #title {
-        color: #f4f4f5;
+        color: var(--ink);
         font-size: 72px;
         font-weight: 600;
         letter-spacing: -0.03em;
@@ -47,7 +53,7 @@
     </div>
     <script>
       const tl = gsap.timeline({ paused: true });
-      // Example: tl.fromTo("#title", { opacity: 0, y: 24 }, { opacity: 1, y: 0, duration: 0.6 }, 0);
+      // Example: tl.fromTo("#title", { opacity: 0, filter: "blur(8px)" }, { opacity: 1, filter: "blur(0px)", duration: 0.18, ease: "power4.out" }, 0);
       window.__timelines["main"] = tl;
       tl.seek(0);
     </script>