From c573614bfd61514a7ac125486faa338c4ae38dee Mon Sep 17 00:00:00 2001
From: ukimsanov <ular.kimsanov@heygen.com>
Date: Mon, 3 Aug 2026 16:35:04 -0700
Subject: [PATCH 01/11] docs: add the shared page components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds the six React snippets the rebuilt documentation pages compose against,
plus the styles they need. Nothing imports them yet, so this lands with no
user-visible change and no navigation churn.

- DocsVideo / ShowcaseWall — the film player and the Showcase grid
- LiveReferenceProject — embeds the Reference Project via <hyperframes-player>
- WorkflowChooser, AgentAction, and the two grid snippets

The scrub indicator is a timecode bubble rather than a thumbnail. Mounting a
second <video> with the same src to drive a preview frame made every page
carrying a film download the whole file twice, which is not worth a thumbnail.
---
 docs/custom.css                               | 1044 ++++++++++++++++-
 docs/snippets/advanced-path-grid.jsx          |  122 ++
 docs/snippets/agent-action.jsx                |   55 +
 docs/snippets/docs-video.jsx                  |  552 +++++++++
 docs/snippets/live-reference-project.jsx      |  200 ++++
 .../snippets/quickstart-continuation-grid.jsx |   79 ++
 docs/snippets/workflow-chooser.jsx            |  108 ++
 7 files changed, 2125 insertions(+), 35 deletions(-)
 create mode 100644 docs/snippets/advanced-path-grid.jsx
 create mode 100644 docs/snippets/agent-action.jsx
 create mode 100644 docs/snippets/docs-video.jsx
 create mode 100644 docs/snippets/live-reference-project.jsx
 create mode 100644 docs/snippets/quickstart-continuation-grid.jsx
 create mode 100644 docs/snippets/workflow-chooser.jsx

diff --git a/docs/custom.css b/docs/custom.css
index b4cb460fa4..8fca43d812 100644
--- a/docs/custom.css
+++ b/docs/custom.css
@@ -1,36 +1,38 @@
 /* HyperFrames Design System — Mintlify Theme Overrides */
 
-@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');
-
-/* ── TT Norms Pro (matches hyperframes.heygen.com) ── */
+@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap");
 
 @font-face {
-  font-family: 'TT Norms Pro';
-  src: url('https://www-static-assets.heygen.com/fonts/tt-norms/TT_Norms_Pro_Normal.woff2') format('woff2');
+  font-family: "TT Norms Pro";
+  src: url("https://www-static-assets.heygen.com/fonts/tt-norms/TT_Norms_Pro_Normal.woff2")
+    format("woff2");
   font-weight: 400;
   font-style: normal;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'TT Norms Pro';
-  src: url('https://www-static-assets.heygen.com/fonts/tt-norms/TT_Norms_Pro_Medium.woff2') format('woff2');
+  font-family: "TT Norms Pro";
+  src: url("https://www-static-assets.heygen.com/fonts/tt-norms/TT_Norms_Pro_Medium.woff2")
+    format("woff2");
   font-weight: 500;
   font-style: normal;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'TT Norms Pro';
-  src: url('https://www-static-assets.heygen.com/fonts/tt-norms/TT_Norms_Pro_DemiBold.woff2') format('woff2');
+  font-family: "TT Norms Pro";
+  src: url("https://www-static-assets.heygen.com/fonts/tt-norms/TT_Norms_Pro_DemiBold.woff2")
+    format("woff2");
   font-weight: 600;
   font-style: normal;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'TT Norms Pro';
-  src: url('https://www-static-assets.heygen.com/fonts/tt-norms/TT_Norms_Pro_Bold.woff2') format('woff2');
+  font-family: "TT Norms Pro";
+  src: url("https://www-static-assets.heygen.com/fonts/tt-norms/TT_Norms_Pro_Bold.woff2")
+    format("woff2");
   font-weight: 700;
   font-style: normal;
   font-display: swap;
@@ -57,6 +59,14 @@
   --hf-text-tertiary: #999999;
   --hf-heading: #0a0a0a;
   --hf-code-bg: #ffffff;
+  --hf-ui-border: #eeeeee;
+  --hf-sidebar-rail: #eeeeee;
+  --hf-sidebar-text: #707070;
+  --hf-floating-input-shadow: 0 8px 28px rgba(10, 10, 10, 0.08), 0 1px 4px rgba(10, 10, 10, 0.08);
+  --mintlify-slot-header-height: 3rem;
+  --hf-brand: #16785b;
+  --hf-brand-soft: rgba(22, 120, 91, 0.1);
+  --hf-video-accent: #3ce6ac;
 
   --hf-accent-green: #1a7a0a;
   --hf-accent-green-light: rgba(26, 122, 10, 0.07);
@@ -85,6 +95,12 @@
   --hf-text-tertiary: #666666;
   --hf-heading: #f5f5f5;
   --hf-code-bg: #141414;
+  --hf-ui-border: #2a2a2a;
+  --hf-sidebar-rail: #2a2a2a;
+  --hf-sidebar-text: #a0a0a0;
+  --hf-floating-input-shadow: 0 8px 28px rgba(0, 0, 0, 0.4), 0 1px 4px rgba(0, 0, 0, 0.4);
+  --hf-brand: #3ce6ac;
+  --hf-brand-soft: rgba(60, 230, 172, 0.12);
 
   --hf-accent-green: #22c55e;
   --hf-accent-green-light: rgba(34, 197, 94, 0.1);
@@ -102,14 +118,32 @@
 /* ── Typography ── */
 
 body {
-  font-family: 'TT Norms Pro', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-family:
+    "TT Norms Pro",
+    "Inter",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif;
 }
 
-h1, h2, h3, h4, h5, h6 {
-  font-family: 'TT Norms Pro', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family:
+    "TT Norms Pro",
+    "Inter",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif;
 }
 
-h1, h2 {
+h1,
+h2 {
   letter-spacing: -0.02em;
 }
 
@@ -117,19 +151,76 @@ h3 {
   letter-spacing: -0.01em;
 }
 
-/* Code font — IBM Plex Mono (loaded via Google Fonts above) */
-code, pre, pre code, kbd,
-[class*="code"],
-[class*="Code"] {
-  font-family: 'IBM Plex Mono', 'SF Mono', 'Fira Code', monospace;
+/* ── Workflow routing ── */
+.hf-workflow-routes {
+  margin: 1.5rem 0;
+  border-top: 1px solid var(--hf-border-color);
+}
+
+.hf-workflow-route {
+  display: grid;
+  grid-template-columns: 11rem minmax(0, 1fr);
+  gap: 1rem;
+  align-items: center;
+  padding: 1rem 0;
+  border-bottom: 1px solid var(--hf-border-color);
+  color: inherit;
+  text-decoration: none;
+}
+
+.hf-workflow-route:hover .hf-workflow-route-title {
+  color: var(--hf-accent-green);
+}
+
+.hf-workflow-route video {
+  display: block;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  margin: 0;
+  border-radius: 0.5rem;
+  background: #000;
+  object-fit: cover;
+  pointer-events: none;
+}
+
+.hf-workflow-route-title {
+  display: block;
+  color: var(--hf-heading);
+  font-weight: 650;
+  line-height: 1.35;
+  transition: color 120ms ease;
+}
+
+.hf-workflow-route-copy {
+  display: block;
+  margin-top: 0.3rem;
+  color: var(--hf-text-secondary);
+  font-size: 0.9rem;
+  line-height: 1.5;
 }
 
-/* ── Code blocks ── */
+@media (max-width: 639px) {
+  .hf-workflow-route {
+    grid-template-columns: 7rem minmax(0, 1fr);
+    gap: 0.8rem;
+  }
+}
 
-pre {
-  background: var(--hf-code-bg) !important;
-  border: 1px solid var(--hf-border-color) !important;
-  border-radius: 8px !important;
+/* Code font — IBM Plex Mono (loaded via Google Fonts above).
+ *
+ * Deliberately scoped to real code elements. The previous rule also matched
+ * [class*="code"] / [class*="Code"], which caught any element whose class
+ * merely contained that substring — including every Accordion, whose wrapper
+ * carries the Tailwind utility `dark:bg-codeblock`. That set the whole
+ * accordion (and, by inheritance, its title and prose) in monospace, so plain
+ * sentences rendered like terminal output. Syntax tokens inside `pre` inherit
+ * from `pre`, so they do not need a selector of their own. */
+code,
+pre,
+pre code,
+kbd,
+samp {
+  font-family: "IBM Plex Mono", "SF Mono", "Fira Code", monospace;
 }
 
 /* ── Selection ── */
@@ -140,12 +231,245 @@ pre {
 
 /* ── Links ── */
 
-a:not([class]) {
-  color: var(--hf-accent-blue);
+#content-area :where(p, li, td, blockquote) a:not([class]) {
+  border-bottom: 1px solid color-mix(in srgb, var(--hf-brand) 72%, transparent);
+  color: inherit;
+  text-decoration: none;
+}
+
+#content-area :where(p, li, td, blockquote) a:not([class]):hover {
+  border-bottom-color: var(--hf-brand);
+  color: var(--hf-brand);
+}
+
+/* ── Documentation navigation ── */
+
+/*
+ * Keep Aspen's full-width header, but place its desktop controls on one row:
+ * logo → section tabs → search → actions. Mobile keeps Mintlify's layout.
+ */
+@media (min-width: 1024px) {
+  #navbar {
+    height: 3rem;
+  }
+
+  #navbar > div:has(.nav-tabs) {
+    display: grid;
+    grid-template-columns: max-content max-content minmax(10.25rem, 1fr) max-content;
+    column-gap: 1rem;
+    align-items: center;
+    height: 3rem;
+  }
+
+  #navbar > div:has(.nav-tabs) > .relative,
+  #navbar > div:has(.nav-tabs) > .relative > div:first-child,
+  #navbar > div:has(.nav-tabs) > .relative > div:first-child > div:first-child {
+    display: contents;
+  }
+
+  #navbar > div:has(.nav-tabs) > .relative > div:first-child > div:first-child > div:first-child {
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  #navbar div:has(> .nav-tabs) {
+    grid-column: 2;
+    grid-row: 1;
+    height: 3rem;
+    padding: 0;
+  }
+
+  #navbar .nav-tabs {
+    align-items: center;
+    gap: 0.25rem;
+    height: 3rem;
+  }
+
+  /* Use the same quiet pill treatment as Mintlify's own documentation. */
+  #navbar .nav-tabs-item {
+    height: 2.25rem !important;
+    padding: 0 0.8rem;
+    border-radius: 999px;
+    color: var(--hf-text);
+    transition:
+      background-color 140ms ease,
+      color 140ms ease;
+  }
+
+  #navbar .nav-tabs-item:hover {
+    background: color-mix(in srgb, var(--hf-heading) 6%, transparent);
+    color: var(--hf-heading);
+  }
+
+  #navbar .nav-tabs-item.text-primary {
+    background: color-mix(in srgb, var(--hf-heading) 9%, transparent);
+    color: var(--hf-heading) !important;
+  }
+
+  #navbar .nav-tabs-item > .absolute.bottom-0 {
+    display: none;
+  }
+
+  #navbar div:has(> #search-bar-entry) {
+    grid-column: 3;
+    grid-row: 1;
+    min-width: 0;
+  }
+
+  #navbar .topbar-right-container {
+    grid-column: 4;
+    grid-row: 1;
+  }
+
+  #sidebar-content {
+    top: 3rem !important;
+    height: calc(100vh - 3rem) !important;
+  }
+
+  /* Keep the repository compact, but retain its useful live star count. */
+  #navbar a[title="heygen-com/hyperframes"] {
+    width: 7.5rem;
+    min-width: 7.5rem;
+    height: 2.25rem;
+    padding: 0 0.75rem;
+    justify-content: center;
+  }
+
+  #navbar a[title="heygen-com/hyperframes"] > span.truncate {
+    display: none;
+  }
+
+  #navbar a[title="heygen-com/hyperframes"] > span:not(.truncate) {
+    display: flex !important;
+    color: var(--hf-heading);
+    font-variant-numeric: tabular-nums;
+  }
+
+  /*
+   * Mintlify removes the live count for roughly one animation frame during
+   * client-side navigation. Keep a truthful placeholder in its place so the
+   * control does not collapse while the live count reloads.
+   */
+  #navbar a[title="heygen-com/hyperframes"]:not(:has(> span:not(.truncate)))::after {
+    color: var(--hf-heading);
+    content: "★";
+    font-variant-numeric: tabular-nums;
+  }
+}
+
+/* The native gutter was almost 15px wide. Keep the rail quiet and compact. */
+#navigation-items {
+  scrollbar-color: color-mix(in srgb, var(--hf-text) 30%, transparent) transparent;
+  scrollbar-gutter: auto !important;
+  scrollbar-width: thin;
+}
+
+#navigation-items::-webkit-scrollbar {
+  width: 5px;
+}
+
+#navigation-items::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+#navigation-items::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--hf-text) 30%, transparent);
+}
+
+#navigation-items::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in srgb, var(--hf-text) 46%, transparent);
+}
+
+/* Preserve a useful search field on smaller desktop widths. */
+@media (min-width: 1024px) and (max-width: 1199px) {
+  #navbar #assistant-entry {
+    display: none;
+  }
+}
+
+/* Use main's quieter structural border color across Aspen surfaces. */
+#body-content [class*="border-gray-200"],
+#body-content [class*="border-gray-100"] {
+  border-color: var(--hf-ui-border) !important;
+}
+
+/* Keep the floating agent input noticeable against the page background. */
+#body-content .chat-assistant-floating-input > div > div {
+  border-color: var(--hf-border-color-light) !important;
+  background-color: var(--hf-background-light) !important;
+  box-shadow: var(--hf-floating-input-shadow);
+}
+
+/*
+ * Match the navigation rhythm and active-page rail used on the main docs.
+ * Each link owns one rail segment, so the current page can highlight only
+ * its segment. These rules are visual only; groups remain non-collapsible.
+ */
+#navigation-items .sidebar-group-header {
+  color: var(--hf-text);
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+}
+
+#navigation-items .sidebar-group {
+  padding-left: 0;
+}
+
+#navigation-items .sidebar-group::before {
+  content: none;
+}
+
+#navigation-items .sidebar-group > li {
+  margin-bottom: 0;
+}
+
+#navigation-items .sidebar-group > li + li {
+  margin-top: 0 !important;
+}
+
+#navigation-items .sidebar-group > li > a {
+  width: calc(100% - 1rem);
+  margin-left: 1rem;
+  padding: 0.375rem 0.75rem 0.375rem 1rem;
+  border-left: 1px solid var(--hf-sidebar-rail);
+  border-radius: 0;
+  background: transparent !important;
+  color: var(--hf-sidebar-text);
+}
+
+#navigation-items .sidebar-group > li > a:hover {
+  background: transparent !important;
+  color: var(--hf-heading);
+}
+
+#navigation-items .sidebar-group > li[data-active="true"] > a,
+#navigation-items .sidebar-group > li[data-active-nav-item="true"] > a,
+#navigation-items .sidebar-group > li > a[aria-current="page"] {
+  border-left-color: currentColor;
+  color: var(--hf-heading);
+}
+
+/* Aspen inserts horizontal separators; main uses the same space without a rule. */
+#navigation-items div:has(> .sidebar-group) + div {
+  height: 2rem;
+  padding: 0;
 }
 
-a:not([class]):hover {
-  opacity: 0.85;
+#navigation-items div:has(> .sidebar-group) + div > * {
+  display: none;
+}
+
+/*
+ * Aspen assumes a 96px header and fades scrolled navigation before it reaches
+ * that boundary. Our header is 48px; align the sticky sidebar to it and let
+ * links clip exactly at the header instead of disappearing early.
+ */
+#navigation-items,
+#navigation-items [data-id] {
+  -webkit-mask-image: none !important;
+  mask-image: none !important;
 }
 
 /* Catalog texture examples */
@@ -181,7 +505,7 @@ a:not([class]):hover {
 
 .hf-texture-preview-word {
   color: #fff;
-  font-family: Impact, 'Arial Black', sans-serif;
+  font-family: Impact, "Arial Black", sans-serif;
   font-size: 42px;
   line-height: 0.9;
   letter-spacing: 0;
@@ -203,9 +527,7 @@ a:not([class]):hover {
   border-radius: 8px;
   padding: 22px;
   margin: 20px 0 24px;
-  background:
-    linear-gradient(90deg, rgba(255, 255, 255, 0.54) 1px, transparent 1px),
-    #f1f1f1;
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0.54) 1px, transparent 1px), #f1f1f1;
   background-size: 44px 100%;
 }
 
@@ -244,7 +566,7 @@ a:not([class]):hover {
 
 .hf-texture-animate-word {
   color: #181818;
-  font-family: Impact, 'Arial Black', sans-serif;
+  font-family: Impact, "Arial Black", sans-serif;
   font-size: 92px;
   line-height: 0.9;
   letter-spacing: 0;
@@ -280,6 +602,11 @@ a:not([class]):hover {
   margin: 20px 0 40px;
 }
 
+.hf-texture-example-groups > div,
+.hf-texture-example-card {
+  min-width: 0;
+}
+
 .hf-texture-example-title {
   margin: 0 0 10px;
   font-size: 14px;
@@ -337,7 +664,7 @@ a:not([class]):hover {
 
 .hf-texture-example-word {
   color: #181818;
-  font-family: Impact, 'Arial Black', sans-serif;
+  font-family: Impact, "Arial Black", sans-serif;
   font-size: 54px;
   line-height: 0.9;
   letter-spacing: 0;
@@ -376,6 +703,646 @@ a:not([class]):hover {
   overflow-wrap: anywhere;
 }
 
+/* Portrait proof clips should read as examples inside the page, not become the
+ * page. Landscape films keep the full content width; only explicitly marked
+ * portrait media gets this compact, centered treatment. */
+.hf-portrait-video {
+  display: block;
+  width: auto;
+  max-width: min(100%, 18rem);
+  max-height: min(32rem, 68vh);
+  margin: 0.75rem auto 0;
+  border-radius: 0.5rem;
+  background: #111;
+}
+
+/* Full narrated films use a quiet custom control layer over the native video
+ * engine. Preview loops remain plain muted videos. */
+.hf-docs-video-block {
+  width: 100%;
+}
+
+.hf-docs-video-block[data-portrait="true"] {
+  width: min(100%, 18rem);
+  margin: 0.75rem auto 0;
+}
+
+.hf-docs-video-block[data-portrait="true"] .hf-docs-video {
+  aspect-ratio: 9 / 16;
+  max-height: min(32rem, 68vh);
+}
+
+/*
+ * Mintlify loads custom React snippets after the page shell. Reserve the
+ * film's real shape so the unloaded component never flashes as a thin Frame
+ * rail, then let the hydrated player and chapter guide size themselves.
+ */
+.hf-docs-video-frame {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  border-radius: 0.75rem;
+  background: #070707;
+}
+
+.hf-docs-video-frame:has(.hf-docs-video-block) {
+  aspect-ratio: auto;
+  overflow: visible;
+  border-radius: 0;
+  background: transparent;
+}
+
+.hf-docs-video {
+  position: relative;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  border-radius: 0.75rem;
+  background: #070707;
+  color: #fff;
+  isolation: isolate;
+  outline: none;
+}
+
+.hf-agent-action {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1.25rem;
+  margin: 2rem 0 1.5rem;
+  padding: 1rem 1.05rem;
+  border: 1px solid rgba(128, 128, 128, 0.26);
+  border-radius: 0.7rem;
+  background: rgba(128, 128, 128, 0.05);
+}
+
+.hf-agent-action > div {
+  display: grid;
+  gap: 0.16rem;
+}
+
+.hf-agent-action strong {
+  font-size: 0.86rem;
+  font-weight: 650;
+}
+
+.hf-agent-action span {
+  opacity: 0.64;
+  font-size: 0.76rem;
+}
+
+.hf-agent-action button {
+  flex: 0 0 auto;
+  padding: 0.52rem 0.78rem;
+  border: 1px solid rgba(128, 128, 128, 0.38);
+  border-radius: 0.48rem;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 0.76rem;
+  font-weight: 620;
+  cursor: pointer;
+}
+
+.hf-agent-action button:hover,
+.hf-agent-action button:focus-visible {
+  border-color: var(--hf-brand);
+  background: var(--hf-brand-soft);
+}
+
+.hf-live-reference-start {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 0.8rem;
+  margin: 1rem 0 2rem;
+  padding: 1rem;
+  border: 1px solid rgba(128, 128, 128, 0.28);
+  border-radius: 0.75rem;
+  background: rgba(128, 128, 128, 0.05);
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.hf-live-reference-start > span:first-child {
+  display: grid;
+  width: 2.4rem;
+  height: 2.4rem;
+  flex: 0 0 auto;
+  place-items: center;
+  border-radius: 50%;
+  background: var(--hf-brand);
+  color: #071008;
+  font-size: 0.78rem;
+}
+
+.hf-live-reference-start > span:last-child {
+  display: grid;
+  gap: 0.14rem;
+}
+
+.hf-live-reference-start strong {
+  font-size: 0.86rem;
+}
+
+.hf-live-reference-start small {
+  opacity: 0.65;
+  font-size: 0.75rem;
+}
+
+.hf-live-reference-start:hover,
+.hf-live-reference-start:focus-visible {
+  border-color: var(--hf-brand);
+  background: var(--hf-brand-soft);
+}
+
+.hf-live-reference {
+  margin: 1rem 0 2rem;
+  overflow: hidden;
+  border: 1px solid rgba(128, 128, 128, 0.28);
+  border-radius: 0.75rem;
+}
+
+.hf-live-reference-stage {
+  position: relative;
+  display: grid;
+  min-height: 18rem;
+  place-items: center;
+  aspect-ratio: 16 / 9;
+  background: #080808;
+}
+
+.hf-live-reference-preview {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  overflow: hidden;
+  place-items: center;
+  border: 0;
+  background-color: #e9e9e7;
+  background-position: center;
+  background-size: cover;
+  cursor: pointer;
+  z-index: 4;
+}
+
+.hf-live-reference-preview span {
+  position: relative;
+  display: grid;
+  width: 3.5rem;
+  height: 3.5rem;
+  place-items: center;
+  border: 1px solid rgba(255, 255, 255, 0.68);
+  border-radius: 999px;
+  background: rgba(10, 10, 10, 0.84);
+  color: #fff;
+  font-size: 1rem;
+  line-height: 1;
+  box-shadow: 0 0.75rem 2rem rgba(10, 10, 10, 0.2);
+  transform: translateZ(0);
+}
+
+.hf-live-reference-preview:hover span,
+.hf-live-reference-preview:focus-visible span {
+  transform: scale(1.05);
+}
+
+.hf-live-reference-player-host,
+.hf-live-reference-player-host > * {
+  display: block;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+}
+
+.hf-live-reference-loading {
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 0.78rem;
+}
+
+.hf-live-reference-controls {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) auto auto;
+  gap: 0.65rem;
+  align-items: end;
+  padding: 0.85rem;
+  background: rgba(128, 128, 128, 0.055);
+}
+
+.hf-live-reference-controls label,
+.hf-live-reference-controls fieldset {
+  display: grid;
+  min-width: 0;
+  gap: 0.3rem;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.hf-live-reference-controls label > span,
+.hf-live-reference-controls legend {
+  padding: 0;
+  opacity: 0.62;
+  font-size: 0.68rem;
+  font-weight: 600;
+}
+
+.hf-live-reference-controls input {
+  width: 100%;
+  min-width: 0;
+  height: 2.15rem;
+  padding: 0 0.58rem;
+  border: 1px solid rgba(128, 128, 128, 0.3);
+  border-radius: 0.42rem;
+  background: rgba(128, 128, 128, 0.06);
+  color: inherit;
+  font: inherit;
+  font-size: 0.72rem;
+}
+
+.hf-live-reference-controls fieldset > div {
+  display: flex;
+  height: 2.15rem;
+  align-items: center;
+  gap: 0.28rem;
+}
+
+.hf-live-reference-controls fieldset button {
+  width: 1.35rem;
+  height: 1.35rem;
+  padding: 0;
+  border: 2px solid transparent;
+  border-radius: 50%;
+  background: var(--hf-live-accent);
+  box-shadow: 0 0 0 1px rgba(128, 128, 128, 0.34);
+  cursor: pointer;
+}
+
+.hf-live-reference-controls fieldset button[aria-pressed="true"] {
+  border-color: currentColor;
+  box-shadow: 0 0 0 2px rgba(107, 168, 100, 0.4);
+}
+
+.hf-live-reference-reset {
+  height: 2.15rem;
+  padding: 0 0.65rem;
+  border: 1px solid rgba(128, 128, 128, 0.3);
+  border-radius: 0.42rem;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 0.7rem;
+  cursor: pointer;
+}
+
+@media (max-width: 720px) {
+  .hf-live-reference-controls {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .hf-live-reference-controls label:nth-child(2) {
+    grid-column: 1 / -1;
+    grid-row: 2;
+  }
+}
+
+@media (max-width: 520px) {
+  .hf-agent-action {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .hf-agent-action button {
+    width: 100%;
+  }
+
+  .hf-live-reference-stage {
+    min-height: 0;
+  }
+
+  .hf-live-reference-controls {
+    grid-template-columns: 1fr;
+  }
+
+  .hf-live-reference-controls label:nth-child(2) {
+    grid-column: auto;
+    grid-row: auto;
+  }
+}
+
+.hf-docs-video:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hf-video-accent) 78%, transparent);
+}
+
+.hf-docs-video video {
+  display: block;
+  width: 100%;
+  height: 100%;
+  margin: 0 !important;
+  background: #070707;
+  object-fit: contain;
+  cursor: pointer;
+}
+
+.hf-docs-video-hero-play {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 3.35rem;
+  height: 3.35rem;
+  padding: 0;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  border-radius: 50%;
+  background: rgba(8, 8, 8, 0.56);
+  color: #fff;
+  font: inherit;
+  cursor: pointer;
+  transform: translate(-50%, -50%);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
+  z-index: 3;
+}
+
+.hf-docs-video-hero-play:hover {
+  border-color: var(--hf-video-accent);
+  background: rgba(8, 8, 8, 0.78);
+}
+
+.hf-docs-video-hero-play:focus-visible,
+.hf-docs-video-control:focus-visible,
+.hf-docs-video-rate:focus-visible,
+.hf-docs-video-progress:focus-visible {
+  outline: 2px solid var(--hf-video-accent);
+  outline-offset: 2px;
+}
+
+.hf-docs-video-hero-icon {
+  display: grid;
+  width: 2rem;
+  height: 2rem;
+  flex: 0 0 auto;
+  place-items: center;
+  border-radius: 0;
+  background: transparent;
+  color: #fff;
+}
+
+.hf-docs-video-hero-icon svg {
+  width: 1.25rem;
+  height: 1.25rem;
+  margin-left: 0.1rem;
+  fill: currentColor;
+}
+
+.hf-docs-video-controls {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: grid;
+  gap: 0.45rem;
+  padding: 3.75rem 1rem 0.78rem;
+  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.84));
+  opacity: 1;
+  transform: translateY(0);
+  visibility: visible;
+  transition:
+    opacity 160ms ease,
+    transform 160ms ease,
+    visibility 0s linear;
+  z-index: 2;
+}
+
+.hf-docs-video-controls[data-visible="false"] {
+  pointer-events: none;
+  opacity: 0;
+  transform: translateY(0.4rem);
+  visibility: hidden;
+  transition:
+    opacity 160ms ease,
+    transform 160ms ease,
+    visibility 0s linear 160ms;
+}
+
+.hf-docs-video-progress {
+  width: 100%;
+  height: 1rem;
+  margin: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+/* Timecode bubble that tracks the pointer along the progress bar. It is a label,
+   not a thumbnail: rendering a second <video> here made every page with a film
+   download the whole file twice. */
+.hf-docs-video-scrub-preview {
+  position: absolute;
+  bottom: 3.6rem;
+  left: clamp(2rem, var(--hf-video-preview-x), calc(100% - 2rem));
+  border-radius: 0.35rem;
+  background: rgba(0, 0, 0, 0.82);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.38);
+  pointer-events: none;
+  opacity: 1;
+  transform: translate(-50%, 0);
+  transition:
+    opacity 120ms ease,
+    transform 120ms ease;
+  z-index: 4;
+}
+
+.hf-docs-video-scrub-preview[data-visible="false"] {
+  visibility: hidden;
+  opacity: 0;
+  transform: translate(-50%, 0.3rem);
+}
+
+.hf-docs-video-scrub-preview span {
+  display: block;
+  padding: 0.16rem 0.4rem;
+  color: #fff;
+  font-variant-numeric: tabular-nums;
+  font-size: 0.7rem;
+  line-height: 1.2;
+}
+
+.hf-docs-video-progress::-webkit-slider-runnable-track {
+  height: 0.22rem;
+  border-radius: 999px;
+  background: linear-gradient(
+    to right,
+    var(--hf-video-accent) 0,
+    var(--hf-video-accent) var(--hf-video-progress),
+    rgba(255, 255, 255, 0.34) var(--hf-video-progress),
+    rgba(255, 255, 255, 0.34) 100%
+  );
+}
+
+.hf-docs-video-progress::-moz-range-track {
+  height: 0.22rem;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.34);
+}
+
+.hf-docs-video-progress::-moz-range-progress {
+  height: 0.22rem;
+  border-radius: 999px;
+  background: var(--hf-video-accent);
+}
+
+.hf-docs-video-progress::-webkit-slider-thumb {
+  width: 0.85rem;
+  height: 0.85rem;
+  margin-top: -0.315rem;
+  border: 2px solid #121212;
+  border-radius: 50%;
+  background: var(--hf-video-accent);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+.hf-docs-video-progress::-moz-range-thumb {
+  width: 0.85rem;
+  height: 0.85rem;
+  border: 2px solid #121212;
+  border-radius: 50%;
+  background: var(--hf-video-accent);
+}
+
+.hf-docs-video-control-row {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  min-width: 0;
+}
+
+.hf-docs-video-control,
+.hf-docs-video-rate {
+  display: grid;
+  height: 2rem;
+  min-width: 2rem;
+  padding: 0;
+  place-items: center;
+  border: 0;
+  border-radius: 0.45rem;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.92);
+  font: inherit;
+  cursor: pointer;
+}
+
+.hf-docs-video-control:hover,
+.hf-docs-video-rate:hover {
+  background: rgba(255, 255, 255, 0.13);
+  color: #fff;
+}
+
+.hf-docs-video-control svg {
+  width: 1.2rem;
+  height: 1.2rem;
+  fill: currentColor;
+}
+
+.hf-docs-video-rate {
+  min-width: 2.75rem;
+  padding: 0 0.45rem;
+  font-size: 0.75rem;
+  font-weight: 650;
+}
+
+.hf-docs-video-time {
+  margin-left: 0.2rem;
+  color: rgba(255, 255, 255, 0.82);
+  font-variant-numeric: tabular-nums;
+  font-size: 0.74rem;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.hf-docs-video-time span {
+  color: rgba(255, 255, 255, 0.46);
+}
+
+.hf-docs-video-spacer {
+  flex: 1 1 auto;
+}
+
+.hf-docs-video-spinner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 2rem;
+  height: 2rem;
+  margin: -1rem 0 0 -1rem;
+  border: 2px solid rgba(255, 255, 255, 0.28);
+  border-top-color: var(--hf-video-accent);
+  border-radius: 50%;
+  animation: hf-docs-video-spin 700ms linear infinite;
+  z-index: 3;
+}
+
+@keyframes hf-docs-video-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (max-width: 520px) {
+  .hf-docs-video-hero-play {
+    width: 3rem;
+    height: 3rem;
+  }
+
+  .hf-docs-video-hero-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+
+  .hf-docs-video-controls {
+    gap: 0.25rem;
+    padding: 2.75rem 0.6rem 0.42rem;
+  }
+
+  .hf-docs-video-scrub-preview {
+    bottom: 3.2rem;
+  }
+
+  .hf-docs-video-time {
+    margin-left: 0;
+    font-size: 0.67rem;
+  }
+
+  .hf-docs-video-rate {
+    min-width: 2.45rem;
+    padding: 0 0.25rem;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hf-docs-video-controls {
+    transition: none;
+  }
+
+  .hf-docs-video-spinner {
+    animation: none;
+  }
+
+  .hf-docs-video-scrub-preview {
+    transition: none;
+  }
+}
+
 @media (max-width: 860px) {
   .hf-texture-preview-panel {
     grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -410,3 +1377,10 @@ a:not([class]):hover {
     animation: none;
   }
 }
+
+/* Hide the section/group label ("Start here", etc.) that the theme renders
+ * above every page title. It repeats the sidebar grouping and adds noise on
+ * every page; each page leads with its own H1 instead. */
+.eyebrow {
+  display: none;
+}
diff --git a/docs/snippets/advanced-path-grid.jsx b/docs/snippets/advanced-path-grid.jsx
new file mode 100644
index 0000000000..97d2c41bf7
--- /dev/null
+++ b/docs/snippets/advanced-path-grid.jsx
@@ -0,0 +1,122 @@
+/**
+ * Four always-visible next steps for people who already have a project.
+ *
+ * The videos are proof, not controls: every destination remains a normal link.
+ */
+export const AdvancedPathGrid = () => {
+  const CDN = "https://static.heygen.ai/hyperframes-oss/docs/images/showcase";
+  const paths = [
+    {
+      title: "Direct the agent better",
+      detail: "Change the story, source material, or several scenes with one clear revision.",
+      action: "Give better direction",
+      href: "/prompting/overview",
+      video: "https://static.heygen.ai/hyperframes-oss/docs/images/showcase/go-further-agent-revision-loop-v1.mp4",
+      poster: "https://static.heygen.ai/hyperframes-oss/docs/images/showcase/go-further-agent-revision-loop-v1.jpg",
+    },
+    {
+      title: "Edit in Studio",
+      detail: "Change visible design, text, media, timing, and animation in the live project.",
+      action: "Open the Studio guide",
+      href: "/studio",
+      video: `${CDN}/studio-direct-edit-loop-v2.mp4`,
+      poster: `${CDN}/studio-direct-edit-loop-v2.jpg`,
+    },
+    {
+      title: "Build richer compositions",
+      detail: "Add project media and reusable Catalog scenes before adapting them to your work.",
+      action: "Use Assets and Catalog",
+      href: "/studio/assets-and-blocks",
+      video: "https://static.heygen.ai/hyperframes-oss/docs/images/showcase/studio-assets-catalog-loop-v1.mp4",
+      poster: "https://static.heygen.ai/hyperframes-oss/docs/images/showcase/studio-assets-catalog-loop-v1.jpg",
+    },
+    {
+      title: "Check, render, and share",
+      detail:
+        "Validate the project, render through Studio, an agent, or the CLI, and review the file.",
+      action: "Finish the project",
+      href: "/guides/export-and-share",
+      video: `${CDN}/studio-check-render-loop-v2.mp4`,
+      poster: `${CDN}/studio-check-render-loop-v2.jpg`,
+    },
+  ];
+  const [reducedMotion, setReducedMotion] = useState(false);
+
+  useEffect(() => {
+    const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setReducedMotion(query.matches);
+    const onChange = (event) => setReducedMotion(event.matches);
+    query.addEventListener("change", onChange);
+    return () => query.removeEventListener("change", onChange);
+  }, []);
+
+  return (
+    <div
+      style={{
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 260px), 1fr))",
+        gap: "1rem",
+        margin: "1.5rem 0",
+      }}
+    >
+      {paths.map((path) => (
+        <article
+          key={path.href}
+          style={{
+            overflow: "hidden",
+            border: "1px solid var(--border-color, rgba(128, 128, 128, 0.22))",
+            borderRadius: "12px",
+          }}
+        >
+          <video
+            src={reducedMotion ? undefined : path.video}
+            poster={path.poster}
+            autoPlay={!reducedMotion}
+            muted
+            loop={!reducedMotion}
+            playsInline
+            preload="metadata"
+            aria-hidden="true"
+            style={{
+              display: "block",
+              width: "100%",
+              aspectRatio: "16 / 9",
+              objectFit: "cover",
+              background: "#000",
+              margin: 0,
+            }}
+          />
+          <div style={{ padding: "0.9rem 1rem 1rem" }}>
+            <strong style={{ display: "block", fontSize: "1rem", lineHeight: 1.35 }}>
+              {path.title}
+            </strong>
+            <span
+              style={{
+                display: "block",
+                marginTop: "0.35rem",
+                fontSize: "0.875rem",
+                lineHeight: 1.5,
+                opacity: 0.72,
+              }}
+            >
+              {path.detail}
+            </span>
+            <a
+              href={path.href}
+              style={{
+                display: "inline-block",
+                marginTop: "0.75rem",
+                fontSize: "0.875rem",
+                fontWeight: 600,
+                color: "inherit",
+                textDecoration: "none",
+              }}
+            >
+              {path.action} →
+            </a>
+          </div>
+        </article>
+      ))}
+    </div>
+  );
+};
diff --git a/docs/snippets/agent-action.jsx b/docs/snippets/agent-action.jsx
new file mode 100644
index 0000000000..ddad5a1cb6
--- /dev/null
+++ b/docs/snippets/agent-action.jsx
@@ -0,0 +1,55 @@
+export const AgentAction = ({ request }) => {
+  const [copied, setCopied] = useState(false);
+  const resetTimerRef = useRef(null);
+
+  const writeClipboard = async (text) => {
+    try {
+      if (navigator.clipboard?.writeText) {
+        await navigator.clipboard.writeText(text);
+        return true;
+      }
+    } catch {
+      // Fall through to the browser's older synchronous copy path.
+    }
+
+    const field = document.createElement("textarea");
+    field.value = text;
+    field.setAttribute("readonly", "");
+    field.style.position = "fixed";
+    field.style.opacity = "0";
+    document.body.appendChild(field);
+    field.select();
+    const copied = document.execCommand("copy");
+    field.remove();
+    return copied;
+  };
+
+  const copyRequest = async () => {
+    if (await writeClipboard(request)) {
+      setCopied(true);
+      if (resetTimerRef.current) window.clearTimeout(resetTimerRef.current);
+      resetTimerRef.current = window.setTimeout(() => setCopied(false), 1800);
+    } else {
+      setCopied(false);
+    }
+  };
+
+  useEffect(
+    () => () => {
+      if (resetTimerRef.current) window.clearTimeout(resetTimerRef.current);
+    },
+    [],
+  );
+
+  return (
+    <div className="hf-agent-action">
+      <div>
+        <strong>Use this with your agent</strong>
+        <span>Replace the URL with the page you want to show.</span>
+      </div>
+      <button type="button" onClick={copyRequest}>
+        {copied ? "Copied" : "Copy request"}
+      </button>
+    </div>
+  );
+};
diff --git a/docs/snippets/docs-video.jsx b/docs/snippets/docs-video.jsx
new file mode 100644
index 0000000000..13177ebaf7
--- /dev/null
+++ b/docs/snippets/docs-video.jsx
@@ -0,0 +1,552 @@
+export const DocsVideo = ({
+  src,
+  poster,
+  title,
+  autoPlay = false,
+  loop = false,
+  portrait = false,
+}) => {
+  const videoRef = useRef(null);
+  const playerRef = useRef(null);
+  const hideTimerRef = useRef(null);
+  const progressFrameRef = useRef(null);
+  const [enhanced, setEnhanced] = useState(false);
+  const [playing, setPlaying] = useState(false);
+  const [waiting, setWaiting] = useState(false);
+  const [muted, setMuted] = useState(false);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState(0);
+  const [playbackRate, setPlaybackRate] = useState(1);
+  const [controlsVisible, setControlsVisible] = useState(false);
+  const [fullscreen, setFullscreen] = useState(false);
+  const [fullscreenSupported, setFullscreenSupported] = useState(false);
+  const [previewing, setPreviewing] = useState(false);
+  const [scrubbing, setScrubbing] = useState(false);
+  const [previewTime, setPreviewTime] = useState(0);
+  const [previewPosition, setPreviewPosition] = useState(0);
+
+  const formatTime = (seconds) => {
+    if (!Number.isFinite(seconds) || seconds < 0) return "0:00";
+    const minutes = Math.floor(seconds / 60);
+    const remaining = Math.floor(seconds % 60);
+    return `${minutes}:${String(remaining).padStart(2, "0")}`;
+  };
+
+  const clearHideTimer = () => {
+    if (hideTimerRef.current) {
+      window.clearTimeout(hideTimerRef.current);
+      hideTimerRef.current = null;
+    }
+  };
+
+  const revealControls = () => {
+    setControlsVisible(true);
+    clearHideTimer();
+    hideTimerRef.current = window.setTimeout(() => setControlsVisible(false), 2200);
+  };
+
+  const togglePlayback = async () => {
+    const video = videoRef.current;
+    if (!video) return;
+    if (video.paused || video.ended) {
+      if (video.ended) video.currentTime = 0;
+      setWaiting(true);
+      try {
+        await video.play();
+      } catch {
+        setWaiting(false);
+        setPlaying(false);
+      }
+    } else {
+      video.pause();
+      setControlsVisible(true);
+    }
+  };
+
+  const toggleMute = () => {
+    const video = videoRef.current;
+    if (!video) return;
+    if (video.muted && video.volume === 0) video.volume = 0.8;
+    video.muted = !video.muted;
+    setMuted(video.muted);
+  };
+
+  const seek = (event) => {
+    const video = videoRef.current;
+    if (!video) return;
+    const nextTime = Number(event.target.value);
+    video.currentTime = nextTime;
+    setCurrentTime(nextTime);
+  };
+
+  const updateScrubPreview = (event, seekMainVideo = false) => {
+    if (!duration) return;
+    const rect = event.currentTarget.getBoundingClientRect();
+    const ratio = Math.min(1, Math.max(0, (event.clientX - rect.left) / rect.width));
+    const nextTime = ratio * duration;
+    setPreviewing(true);
+    setPreviewTime(nextTime);
+    setPreviewPosition(ratio * 100);
+
+    if (seekMainVideo) {
+      const video = videoRef.current;
+      if (video) {
+        video.currentTime = nextTime;
+        setCurrentTime(nextTime);
+      }
+    }
+  };
+
+  const cyclePlaybackRate = () => {
+    const video = videoRef.current;
+    if (!video) return;
+    const rates = [1, 1.25, 1.5, 2];
+    const currentIndex = rates.indexOf(video.playbackRate);
+    const nextRate = rates[(currentIndex + 1) % rates.length];
+    video.playbackRate = nextRate;
+    setPlaybackRate(nextRate);
+  };
+
+  const toggleFullscreen = async () => {
+    const player = playerRef.current;
+    const video = videoRef.current;
+    if (!player || typeof document === "undefined") return;
+    try {
+      if (document.fullscreenElement) {
+        await document.exitFullscreen();
+      } else if (player.requestFullscreen) {
+        await player.requestFullscreen();
+      } else if (video?.webkitEnterFullscreen) {
+        video.webkitEnterFullscreen();
+      }
+    } catch {
+      // The normal inline player remains fully usable when fullscreen is blocked.
+    }
+  };
+
+  const handleKeyboard = (event) => {
+    if (event.target !== event.currentTarget) return;
+    const video = videoRef.current;
+    if (!video) return;
+    if (event.key === " " || event.key === "Enter") {
+      event.preventDefault();
+      togglePlayback();
+    } else if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      video.currentTime = Math.max(0, video.currentTime - 5);
+    } else if (event.key === "ArrowRight") {
+      event.preventDefault();
+      video.currentTime = Math.min(duration || video.duration || 0, video.currentTime + 5);
+    } else if (event.key.toLowerCase() === "m") {
+      event.preventDefault();
+      toggleMute();
+    } else if (event.key.toLowerCase() === "f") {
+      event.preventDefault();
+      toggleFullscreen();
+    }
+  };
+
+  useEffect(() => {
+    setEnhanced(true);
+    setFullscreenSupported(
+      Boolean(playerRef.current?.requestFullscreen || videoRef.current?.webkitEnterFullscreen),
+    );
+    return () => {
+      clearHideTimer();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (typeof document === "undefined") return undefined;
+    const syncFullscreen = () => setFullscreen(document.fullscreenElement === playerRef.current);
+    document.addEventListener("fullscreenchange", syncFullscreen);
+    return () => document.removeEventListener("fullscreenchange", syncFullscreen);
+  }, []);
+
+  useEffect(() => {
+    clearHideTimer();
+    if (!playing) return undefined;
+    hideTimerRef.current = window.setTimeout(() => setControlsVisible(false), 2200);
+    return clearHideTimer;
+  }, [playing]);
+
+  useEffect(() => {
+    if (!playing) return undefined;
+    const updateProgress = () => {
+      const video = videoRef.current;
+      if (video && !video.paused) setCurrentTime(video.currentTime);
+      progressFrameRef.current = window.requestAnimationFrame(updateProgress);
+    };
+    progressFrameRef.current = window.requestAnimationFrame(updateProgress);
+    return () => {
+      if (progressFrameRef.current) window.cancelAnimationFrame(progressFrameRef.current);
+      progressFrameRef.current = null;
+    };
+  }, [playing]);
+
+  const progress = duration > 0 ? (currentTime / duration) * 100 : 0;
+  const replaying = duration > 0 && currentTime >= duration - 0.15;
+  return (
+    <div className="hf-docs-video-block" data-portrait={portrait ? "true" : "false"}>
+      <div
+        ref={playerRef}
+        className="hf-docs-video"
+        role="region"
+        aria-label={title}
+        tabIndex={0}
+        onKeyDown={handleKeyboard}
+        onPointerMove={revealControls}
+        onPointerLeave={() => setControlsVisible(false)}
+        onFocus={revealControls}
+        onBlur={(event) => {
+          if (!event.currentTarget.contains(event.relatedTarget)) setControlsVisible(false);
+        }}
+      >
+        <video
+          ref={videoRef}
+          aria-label={title}
+          src={src}
+          poster={poster}
+          autoPlay={autoPlay}
+          loop={loop}
+          playsInline
+          preload="metadata"
+          controls={!enhanced}
+          onClick={togglePlayback}
+          onDoubleClick={toggleFullscreen}
+          onLoadedMetadata={(event) => {
+            const nextDuration = event.currentTarget.duration || 0;
+            setDuration(nextDuration);
+            setMuted(event.currentTarget.muted);
+          }}
+          onDurationChange={(event) => setDuration(event.currentTarget.duration || 0)}
+          onTimeUpdate={(event) => setCurrentTime(event.currentTarget.currentTime)}
+          onPlay={() => setPlaying(true)}
+          onPause={() => setPlaying(false)}
+          onPlaying={() => setWaiting(false)}
+          onWaiting={() => setWaiting(true)}
+          onCanPlay={() => setWaiting(false)}
+          onEnded={() => {
+            setPlaying(false);
+            setControlsVisible(true);
+          }}
+          onVolumeChange={(event) => setMuted(event.currentTarget.muted)}
+        />
+
+        {enhanced && (
+          <>
+            {!playing && (currentTime <= 0.2 || replaying) && (
+              <button
+                type="button"
+                className="hf-docs-video-hero-play"
+                onClick={togglePlayback}
+                aria-label={replaying ? "Replay video" : "Play video"}
+              >
+                <span className="hf-docs-video-hero-icon" aria-hidden="true">
+                  <svg viewBox="0 0 24 24">
+                    <path d="M8 5.5v13l10-6.5z" />
+                  </svg>
+                </span>
+              </button>
+            )}
+
+            {waiting && playing && <span className="hf-docs-video-spinner" aria-label="Loading" />}
+
+            <div
+              className="hf-docs-video-controls"
+              data-visible={controlsVisible ? "true" : "false"}
+            >
+              <div
+                className="hf-docs-video-scrub-preview"
+                data-visible={previewing ? "true" : "false"}
+                style={{ "--hf-video-preview-x": `${previewPosition}%` }}
+                aria-hidden="true"
+              >
+                <span>{formatTime(previewTime)}</span>
+              </div>
+
+              <input
+                className="hf-docs-video-progress"
+                type="range"
+                min="0"
+                max={duration || 0}
+                step="0.01"
+                value={Math.min(currentTime, duration || 0)}
+                aria-label="Video progress"
+                aria-valuetext={`${formatTime(currentTime)} of ${formatTime(duration)}`}
+                onChange={seek}
+                onPointerEnter={updateScrubPreview}
+                onPointerMove={(event) =>
+                  updateScrubPreview(event, scrubbing || event.buttons === 1)
+                }
+                onPointerDown={(event) => {
+                  setScrubbing(true);
+                  event.currentTarget.setPointerCapture?.(event.pointerId);
+                  updateScrubPreview(event, true);
+                }}
+                onPointerUp={(event) => {
+                  setScrubbing(false);
+                  if (event.pointerType !== "mouse") setPreviewing(false);
+                }}
+                onPointerCancel={() => {
+                  setScrubbing(false);
+                  setPreviewing(false);
+                }}
+                onPointerLeave={() => {
+                  if (!scrubbing) setPreviewing(false);
+                }}
+                style={{ "--hf-video-progress": `${progress}%` }}
+              />
+
+              <div className="hf-docs-video-control-row">
+                <button
+                  type="button"
+                  className="hf-docs-video-control"
+                  onClick={togglePlayback}
+                  aria-label={playing ? "Pause video" : "Play video"}
+                >
+                  {playing ? (
+                    <svg viewBox="0 0 24 24" aria-hidden="true">
+                      <path d="M7 5h4v14H7zm6 0h4v14h-4z" />
+                    </svg>
+                  ) : (
+                    <svg viewBox="0 0 24 24" aria-hidden="true">
+                      <path d="M8 5.5v13l10-6.5z" />
+                    </svg>
+                  )}
+                </button>
+
+                <button
+                  type="button"
+                  className="hf-docs-video-control"
+                  onClick={toggleMute}
+                  aria-label={muted ? "Unmute video" : "Mute video"}
+                >
+                  {muted ? (
+                    <svg viewBox="0 0 24 24" aria-hidden="true">
+                      <path d="M4 9v6h4l5 4V5L8 9zm11.5 1.1 1.4-1.4 1.6 1.6 1.6-1.6 1.4 1.4-1.6 1.6 1.6 1.6-1.4 1.4-1.6-1.6-1.6 1.6-1.4-1.4 1.6-1.6z" />
+                    </svg>
+                  ) : (
+                    <svg viewBox="0 0 24 24" aria-hidden="true">
+                      <path d="M4 9v6h4l5 4V5L8 9zm11 1.2v3.6c1-.5 1.7-1.5 1.7-2.8S16 10.7 15 10.2zm0-4v2.1c2.2.6 3.7 2.5 3.7 4.7s-1.5 4.1-3.7 4.7v2.1c3.3-.7 5.7-3.5 5.7-6.8S18.3 6.9 15 6.2z" />
+                    </svg>
+                  )}
+                </button>
+
+                <span className="hf-docs-video-time" aria-hidden="true">
+                  {formatTime(currentTime)} <span>/</span> {formatTime(duration)}
+                </span>
+
+                <span className="hf-docs-video-spacer" />
+
+                <button
+                  type="button"
+                  className="hf-docs-video-rate"
+                  onClick={cyclePlaybackRate}
+                  aria-label={`Playback speed ${playbackRate} times`}
+                >
+                  {playbackRate}×
+                </button>
+
+                {fullscreenSupported && (
+                  <button
+                    type="button"
+                    className="hf-docs-video-control"
+                    onClick={toggleFullscreen}
+                    aria-label={fullscreen ? "Exit fullscreen" : "Enter fullscreen"}
+                  >
+                    {fullscreen ? (
+                      <svg viewBox="0 0 24 24" aria-hidden="true">
+                        <path d="M8 3H6v3H3v2h5zm8 0v5h5V6h-3V3zM3 16v2h3v3h2v-5zm13 0v5h2v-3h3v-2z" />
+                      </svg>
+                    ) : (
+                      <svg viewBox="0 0 24 24" aria-hidden="true">
+                        <path d="M3 8h2V5h3V3H3zm13-5v2h3v3h2V3zM5 16H3v5h5v-2H5zm14 3h-3v2h5v-5h-2z" />
+                      </svg>
+                    )}
+                  </button>
+                )}
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+
+    </div>
+  );
+};
+
+export const ShowcaseWall = () => {
+  const CDN = "https://static.heygen.ai/hyperframes-oss/docs/images/showcase";
+  const films = [
+    {
+      id: "grading",
+      tile: "tile-grading-v2",
+      full: "full-grading-4k-v2",
+      title: "Colour grading and media effects",
+      note: "Real footage graded with LUTs, curves, and scopes — inside Studio.",
+      length: "48s",
+    },
+    {
+      id: "variables",
+      title: "One shoot, many cuts",
+      note: "The same footage rendered as several vertical videos from one project.",
+      length: "44s",
+    },
+    {
+      id: "music",
+      title: "Cut to the music",
+      note: "A track analysed for beats and sections, then everything snapped to that grid.",
+      length: "90s",
+    },
+    {
+      id: "prvideo",
+      title: "A pull request, explained",
+      note: "A code change turned into a review anyone on the team can watch.",
+      length: "32s",
+    },
+    {
+      id: "timeline",
+      title: "Editing on a timeline",
+      note: "Trimming, splitting, and retiming a project by hand.",
+      length: "34s",
+    },
+    {
+      id: "hypecard",
+      title: "A year in review",
+      note: "Personal data turned into a shareable card, generated per person.",
+      length: "27s",
+    },
+  ];
+  const [openId, setOpenId] = useState(null);
+  const [reduced, setReduced] = useState(false);
+
+  useEffect(() => {
+    const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setReduced(query.matches);
+    const onChange = (event) => setReduced(event.matches);
+    query.addEventListener("change", onChange);
+    return () => query.removeEventListener("change", onChange);
+  }, []);
+
+  const open = films.find((film) => film.id === openId) || null;
+
+  if (open) {
+    return (
+      <div style={{ margin: "1.5rem 0" }}>
+        <DocsVideo
+          key={open.id}
+          title={open.title}
+          src={`${CDN}/${open.full || `full-${open.id}`}.mp4`}
+          poster={`${CDN}/${open.tile || `tile-${open.id}`}.jpg`}
+          autoPlay
+        />
+        <div
+          style={{
+            display: "flex",
+            alignItems: "baseline",
+            justifyContent: "space-between",
+            gap: "1rem",
+            marginTop: "0.6rem",
+            flexWrap: "wrap",
+          }}
+        >
+          <span style={{ fontSize: "0.875rem", opacity: 0.75 }}>
+            <strong>{open.title}</strong> · {open.length} · made with HyperFrames
+          </span>
+          <button
+            type="button"
+            onClick={() => setOpenId(null)}
+            style={{
+              fontSize: "0.8125rem",
+              padding: "0.35rem 0.7rem",
+              borderRadius: "7px",
+              border: "1px solid currentColor",
+              background: "transparent",
+              color: "inherit",
+              opacity: 0.7,
+              cursor: "pointer",
+            }}
+          >
+            ← Back to all films
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      style={{
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))",
+        gap: "0.85rem",
+        margin: "1.5rem 0",
+      }}
+    >
+      {films.map((film) => (
+        <button
+          key={film.id}
+          type="button"
+          onClick={() => setOpenId(film.id)}
+          aria-label={`Play ${film.title}, ${film.length}`}
+          style={{
+            display: "block",
+            width: "100%",
+            padding: 0,
+            border: "1px solid rgba(128,128,128,0.28)",
+            borderRadius: "11px",
+            overflow: "hidden",
+            background: "transparent",
+            color: "inherit",
+            textAlign: "left",
+            cursor: "pointer",
+          }}
+        >
+          <video
+            src={reduced ? undefined : `${CDN}/${film.tile || `tile-${film.id}`}.mp4`}
+            poster={`${CDN}/${film.tile || `tile-${film.id}`}.jpg`}
+            autoPlay={!reduced}
+            muted
+            loop={!reduced}
+            playsInline
+            preload="metadata"
+            style={{
+              width: "100%",
+              aspectRatio: "16 / 9",
+              objectFit: "cover",
+              display: "block",
+              background: "#000",
+              margin: 0,
+            }}
+          />
+          <span style={{ display: "block", padding: "0.7rem 0.85rem 0.85rem" }}>
+            <span style={{ display: "block", fontWeight: 600, fontSize: "0.9375rem" }}>
+              {film.title}
+            </span>
+            <span
+              style={{
+                display: "block",
+                fontSize: "0.8125rem",
+                opacity: 0.7,
+                marginTop: "0.15rem",
+              }}
+            >
+              {film.note}
+            </span>
+            <span
+              style={{
+                display: "block",
+                fontSize: "0.75rem",
+                opacity: 0.55,
+                marginTop: "0.35rem",
+              }}
+            >
+              ▶ Play · {film.length}
+            </span>
+          </span>
+        </button>
+      ))}
+    </div>
+  );
+};
diff --git a/docs/snippets/live-reference-project.jsx b/docs/snippets/live-reference-project.jsx
new file mode 100644
index 0000000000..8bb9805a7b
--- /dev/null
+++ b/docs/snippets/live-reference-project.jsx
@@ -0,0 +1,200 @@
+export const LiveReferenceProject = ({ src, poster }) => {
+  const playerRef = useRef(null);
+  const playerHostRef = useRef(null);
+  const [mounted, setMounted] = useState(false);
+  const [playerReady, setPlayerReady] = useState(false);
+  const [compositionSrc, setCompositionSrc] = useState(null);
+  const [previewVisible, setPreviewVisible] = useState(true);
+  const [loadFailed, setLoadFailed] = useState(false);
+  const [title, setTitle] = useState("Example Domain");
+  const [supportingLine, setSupportingLine] = useState(
+    "For use in documentation examples without needing permission.",
+  );
+  const [accent, setAccent] = useState("#334488");
+
+  useEffect(() => {
+    if (!mounted || typeof window === "undefined") return undefined;
+
+    let cancelled = false;
+    const markReady = () => {
+      if (!cancelled) setPlayerReady(true);
+    };
+
+    if (window.customElements?.get("hyperframes-player")) {
+      markReady();
+      return () => {
+        cancelled = true;
+      };
+    }
+
+    let script = document.querySelector("script[data-hf-docs-player]");
+    if (!script) {
+      script = document.createElement("script");
+      script.type = "module";
+      script.src = "https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7.90";
+      script.dataset.hfDocsPlayer = "true";
+      script.addEventListener("error", () => !cancelled && setLoadFailed(true), { once: true });
+      document.head.appendChild(script);
+    }
+
+    window.customElements
+      ?.whenDefined("hyperframes-player")
+      .then(markReady)
+      .catch(() => !cancelled && setLoadFailed(true));
+
+    return () => {
+      cancelled = true;
+    };
+  }, [mounted]);
+
+  useEffect(() => {
+    if (!playerReady || typeof window === "undefined") return undefined;
+
+    const controller = new AbortController();
+    let objectUrl;
+
+    fetch(src, { signal: controller.signal })
+      .then((response) => {
+        if (!response.ok) throw new Error(`Composition request failed: ${response.status}`);
+        return response.text();
+      })
+      .then((html) => {
+        const assetBase = new URL("../", src).toString();
+        const preparedHtml = html.includes('<base href="../">')
+          ? html.replace('<base href="../">', `<base href="${assetBase}">`)
+          : html.replace("<head>", `<head><base href="${assetBase}">`);
+        objectUrl = URL.createObjectURL(new Blob([preparedHtml], { type: "text/html" }));
+        setCompositionSrc(objectUrl);
+      })
+      .catch((error) => {
+        if (error.name !== "AbortError") setLoadFailed(true);
+      });
+
+    return () => {
+      controller.abort();
+      if (objectUrl) URL.revokeObjectURL(objectUrl);
+    };
+  }, [playerReady, src]);
+
+  useEffect(() => {
+    if (!playerReady || !compositionSrc || !playerHostRef.current) return undefined;
+    const player = document.createElement("hyperframes-player");
+    player.setAttribute("src", compositionSrc);
+    player.setAttribute("controls", "");
+    player.setAttribute("width", "1920");
+    player.setAttribute("height", "1080");
+    playerHostRef.current.replaceChildren(player);
+    playerRef.current = player;
+
+    return () => {
+      playerRef.current = null;
+      player.remove();
+    };
+  }, [compositionSrc, playerReady]);
+
+  useEffect(() => {
+    if (!playerReady) return undefined;
+    const player = playerRef.current;
+    if (!player) return undefined;
+
+    const sendVariables = () => {
+      player.iframeElement?.contentWindow?.postMessage(
+        {
+          type: "hyperframes-docs:variables",
+          variables: { title, supportingLine, accent },
+        },
+        "*",
+      );
+    };
+
+    player.addEventListener("ready", sendVariables);
+    sendVariables();
+    return () => player.removeEventListener("ready", sendVariables);
+  }, [playerReady, title, supportingLine, accent]);
+
+  const reset = () => {
+    setTitle("Example Domain");
+    setSupportingLine("For use in documentation examples without needing permission.");
+    setAccent("#334488");
+  };
+
+  const playFromStart = () => {
+    const player = playerRef.current;
+    if (!player) return;
+    setPreviewVisible(false);
+    player.seek(0);
+    player.play();
+  };
+
+  if (!mounted) {
+    return (
+      <button type="button" className="hf-live-reference-start" onClick={() => setMounted(true)}>
+        <span aria-hidden="true">▶</span>
+        <span>
+          <strong>Load the live composition</strong>
+          <small>Runs the actual editable HTML project in this page.</small>
+        </span>
+      </button>
+    );
+  }
+
+  return (
+    <div className="hf-live-reference">
+      <div className="hf-live-reference-stage">
+        {playerReady && compositionSrc ? (
+          <>
+            <div ref={playerHostRef} className="hf-live-reference-player-host" />
+            {poster && previewVisible && (
+              <button
+                type="button"
+                className="hf-live-reference-preview"
+                onClick={playFromStart}
+                aria-label="Play the live Reference Project"
+                style={{ backgroundImage: `url(${poster})` }}
+              >
+                <span aria-hidden="true">▶</span>
+              </button>
+            )}
+          </>
+        ) : (
+          <div className="hf-live-reference-loading" role="status">
+            {loadFailed ? "The live project could not load." : "Loading the composition…"}
+          </div>
+        )}
+      </div>
+
+      <div className="hf-live-reference-controls" aria-label="Change the live composition">
+        <label>
+          <span>Headline</span>
+          <input value={title} onChange={(event) => setTitle(event.target.value)} maxLength={42} />
+        </label>
+        <label>
+          <span>Supporting line</span>
+          <input
+            value={supportingLine}
+            onChange={(event) => setSupportingLine(event.target.value)}
+            maxLength={74}
+          />
+        </label>
+        <fieldset>
+          <legend>Accent</legend>
+          <div>
+            {["#334488", "#2f7d4f", "#a44b35", "#6b4fa1"].map((color) => (
+              <button
+                type="button"
+                key={color}
+                aria-label={`Use accent ${color}`}
+                aria-pressed={accent === color}
+                onClick={() => setAccent(color)}
+                style={{ "--hf-live-accent": color }}
+              />
+            ))}
+          </div>
+        </fieldset>
+        <button type="button" className="hf-live-reference-reset" onClick={reset}>
+          Reset
+        </button>
+      </div>
+    </div>
+  );
+};
diff --git a/docs/snippets/quickstart-continuation-grid.jsx b/docs/snippets/quickstart-continuation-grid.jsx
new file mode 100644
index 0000000000..becbb9a588
--- /dev/null
+++ b/docs/snippets/quickstart-continuation-grid.jsx
@@ -0,0 +1,79 @@
+/**
+ * Three equally valid ways to continue from the first playable version.
+ *
+ * The choices are intentionally not links: discovery happens only at the end
+ * of the page.
+ */
+export const QuickstartContinuationGrid = () => {
+  const paths = [
+    {
+      title: "Ask the agent",
+      detail: "Revise the project or render it in the same chat.",
+      instruction: "Make the title larger, then render another version.",
+    },
+    {
+      title: "Open Studio",
+      detail: "Point at the same project and make a visible edit.",
+      instruction: "npx hyperframes preview",
+    },
+    {
+      title: "Use the CLI",
+      detail: "Preview or render directly from the project folder.",
+      instruction: "npx hyperframes render --output video.mp4",
+    },
+  ];
+
+  return (
+    <div style={{ margin: "1.5rem 0" }}>
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 190px), 1fr))",
+          gap: "0.75rem",
+        }}
+      >
+        {paths.map((path) => (
+          <article
+            key={path.title}
+            style={{
+              padding: "0.8rem 0.85rem 0.9rem",
+              border: "1px solid var(--border-color, rgba(128, 128, 128, 0.22))",
+              borderRadius: "10px",
+            }}
+          >
+            <strong style={{ display: "block", fontSize: "0.95rem", lineHeight: 1.35 }}>
+              {path.title}
+            </strong>
+            <span
+              style={{
+                display: "block",
+                marginTop: "0.3rem",
+                minHeight: "2.7em",
+                fontSize: "0.825rem",
+                lineHeight: 1.45,
+                opacity: 0.72,
+              }}
+            >
+              {path.detail}
+            </span>
+            <code
+              style={{
+                display: "block",
+                marginTop: "0.65rem",
+                padding: "0.55rem 0.65rem",
+                overflowWrap: "anywhere",
+                whiteSpace: "normal",
+                fontSize: "0.72rem",
+                lineHeight: 1.45,
+                borderRadius: "8px",
+                background: "var(--code-block-background, rgba(128, 128, 128, 0.1))",
+              }}
+            >
+              {path.instruction}
+            </code>
+          </article>
+        ))}
+      </div>
+    </div>
+  );
+};
diff --git a/docs/snippets/workflow-chooser.jsx b/docs/snippets/workflow-chooser.jsx
new file mode 100644
index 0000000000..04746e33fc
--- /dev/null
+++ b/docs/snippets/workflow-chooser.jsx
@@ -0,0 +1,108 @@
+/**
+ * The human workflow router.
+ *
+ * Every route begins with source material a person already recognizes. The
+ * compact loops prove the kind of result before the click; the destination
+ * guide carries the complete example and instructions.
+ */
+export const WorkflowChooser = () => {
+  // Keep data inside the component. Mintlify compiles only the named export and
+  // drops module-level constants from snippet files.
+  const CDN = "https://static.heygen.ai/hyperframes-oss/docs/images/showcase";
+  const routes = [
+    {
+      title: "Show a product or website",
+      bring: "Bring a URL, launch brief, or product story.",
+      href: "/guides/product-launch-video",
+      video: `${CDN}/wfv2-product-launch.mp4`,
+      poster: `${CDN}/wfv2-product-launch.jpg`,
+    },
+    {
+      title: "Explain an idea",
+      bring: "Bring notes, an article, a script, or one rough thought.",
+      href: "/guides/faceless-explainer",
+      video: `${CDN}/wfv2-explainer.mp4`,
+      poster: `${CDN}/wfv2-explainer.jpg`,
+    },
+    {
+      title: "Work with existing footage",
+      bring: "Bring a talking-head, interview, or podcast clip.",
+      href: "/guides/captions-and-recuts",
+      video: `${CDN}/wfv2-captions.mp4`,
+      poster: `${CDN}/wfv2-captions.jpg`,
+    },
+    {
+      title: "Explain a pull request",
+      bring: "Bring a GitHub pull request link.",
+      href: "/guides/pr-to-video",
+      video: `${CDN}/wfv2-pr.mp4`,
+      poster: `${CDN}/wfv2-pr.jpg`,
+    },
+    {
+      title: "Make a short motion graphic",
+      bring: "Bring a message, number, quote, chart, or logo.",
+      href: "/guides/motion-graphics",
+      video: `${CDN}/wfv2-motion.mp4`,
+      poster: `${CDN}/wfv2-motion.jpg`,
+    },
+    {
+      title: "Cut to music",
+      bring: "Bring a track and any photos or video you want to use.",
+      href: "/guides/music-to-video",
+      video: `${CDN}/wfv2-music.mp4`,
+      poster: `${CDN}/wfv2-music.jpg`,
+    },
+    {
+      title: "Build a presentation",
+      bring: "Bring an outline, pitch, report, or existing deck.",
+      href: "/guides/slideshow",
+      video: "https://static.heygen.ai/hyperframes-oss/docs/images/showcase/wfv2-slideshow.mp4",
+      poster: "https://static.heygen.ai/hyperframes-oss/docs/images/showcase/wfv2-slideshow.jpg",
+    },
+    {
+      title: "Direct a custom video",
+      bring: "Bring the outcome you want and whatever source material you have.",
+      href: "/guides/general-video",
+      video: `${CDN}/wfv2-general.mp4`,
+      poster: `${CDN}/wfv2-general.jpg`,
+    },
+  ];
+
+  const [reducedMotion, setReducedMotion] = useState(false);
+
+  useEffect(() => {
+    const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setReducedMotion(query.matches);
+    const onChange = (event) => setReducedMotion(event.matches);
+    query.addEventListener("change", onChange);
+    return () => query.removeEventListener("change", onChange);
+  }, []);
+
+  return (
+    <div className="hf-workflow-routes">
+      {routes.map((route) => (
+        <a
+          key={route.href}
+          href={route.href}
+          aria-label={`${route.title}. ${route.bring}`}
+          className="hf-workflow-route"
+        >
+          <video
+            src={reducedMotion ? undefined : route.video}
+            poster={route.poster}
+            autoPlay={!reducedMotion}
+            muted
+            loop={!reducedMotion}
+            playsInline
+            preload="metadata"
+            aria-hidden="true"
+          />
+          <span>
+            <span className="hf-workflow-route-title">{route.title}</span>
+            <span className="hf-workflow-route-copy">{route.bring}</span>
+          </span>
+        </a>
+      ))}
+    </div>
+  );
+};

From 492952eb89ea29a1289eb173b033f8ca100d77ae Mon Sep 17 00:00:00 2001
From: ukimsanov <ular.kimsanov@heygen.com>
Date: Mon, 3 Aug 2026 16:38:06 -0700
Subject: [PATCH 02/11] docs: add the Reference Project example
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

One real 10-second project the documentation can point at instead of describing
a hypothetical one: a live capture of example.com, synthesised narration, and
caption timings measured from that narration. It passes its own gates —
`hyperframes lint` clean, `hyperframes check` passed, 28/28 text checks WCAG AA.

No page imports it yet, so this lands without touching navigation.

Only the two WAV masters exceed the repository's 500 KB non-LFS limit, so only
those go through LFS. The MP3 stings and the capture PNG stay plain, which keeps
the example usable after a clone without `git lfs pull`.

`bun run docs:bundle-reference` regenerates the single-file embed the
Introduction page loads from the CDN.
---
 .gitattributes                                |   6 +
 .gitignore                                    |   2 +
 examples/docs-reference-project/.gitignore    |   8 +
 examples/docs-reference-project/BRIEF.md      |  88 +++++
 examples/docs-reference-project/README.md     | 171 ++++++++
 examples/docs-reference-project/SCRIPT.md     |  70 ++++
 examples/docs-reference-project/STORYBOARD.md |  89 +++++
 .../docs-reference-project/assets/bgm.wav     |   3 +
 .../assets/example-com.png                    | Bin 0 -> 21297 bytes
 .../assets/narration.wav                      |   3 +
 .../assets/sfx-tick.mp3                       | Bin 0 -> 11702 bytes
 .../assets/sfx-whoosh.mp3                     | Bin 0 -> 18390 bytes
 .../compositions/captions.html                | 241 ++++++++++++
 examples/docs-reference-project/frame.md      | 101 +++++
 .../docs-reference-project/hyperframes.json   |  13 +
 examples/docs-reference-project/index.html    | 370 ++++++++++++++++++
 examples/docs-reference-project/meta.json     |   5 +
 examples/docs-reference-project/package.json  |  11 +
 .../docs-reference-project/transcript.json    |  87 ++++
 package.json                                  |   1 +
 scripts/docs/bundle-live-reference.mjs        |  24 ++
 21 files changed, 1293 insertions(+)
 create mode 100644 examples/docs-reference-project/.gitignore
 create mode 100644 examples/docs-reference-project/BRIEF.md
 create mode 100644 examples/docs-reference-project/README.md
 create mode 100644 examples/docs-reference-project/SCRIPT.md
 create mode 100644 examples/docs-reference-project/STORYBOARD.md
 create mode 100644 examples/docs-reference-project/assets/bgm.wav
 create mode 100644 examples/docs-reference-project/assets/example-com.png
 create mode 100644 examples/docs-reference-project/assets/narration.wav
 create mode 100644 examples/docs-reference-project/assets/sfx-tick.mp3
 create mode 100644 examples/docs-reference-project/assets/sfx-whoosh.mp3
 create mode 100644 examples/docs-reference-project/compositions/captions.html
 create mode 100644 examples/docs-reference-project/frame.md
 create mode 100644 examples/docs-reference-project/hyperframes.json
 create mode 100644 examples/docs-reference-project/index.html
 create mode 100644 examples/docs-reference-project/meta.json
 create mode 100644 examples/docs-reference-project/package.json
 create mode 100644 examples/docs-reference-project/transcript.json
 create mode 100644 scripts/docs/bundle-live-reference.mjs

diff --git a/.gitattributes b/.gitattributes
index 4c9ff87e51..996061dd9a 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -47,3 +47,9 @@ registry/**/*.html linguist-vendored
 .claude/skills/**/*.mp3 filter=lfs diff=lfs merge=lfs -text
 .agents/skills/**/*.mp4 filter=lfs diff=lfs merge=lfs -text
 .agents/skills/**/*.mp3 filter=lfs diff=lfs merge=lfs -text
+
+# The documentation Reference Project ships real voice and music. Only the WAV
+# masters exceed the repository's 500 KB non-LFS limit, so only those are routed
+# through LFS — the small MP3 stings stay plain so the example still clones and
+# renders without `git lfs pull`.
+examples/docs-reference-project/**/*.wav filter=lfs diff=lfs merge=lfs -text
diff --git a/.gitignore b/.gitignore
index 52719ff212..3952fa8bac 100644
--- a/.gitignore
+++ b/.gitignore
@@ -97,6 +97,8 @@ examples/*
 !examples/k8s-jobs/**
 !examples/gcp-cloud-run
 !examples/gcp-cloud-run/**
+!examples/docs-reference-project
+!examples/docs-reference-project/**
 # …but never the local smoke run's build/render artifacts.
 examples/gcp-cloud-run/scripts/gcp-smoke-artifacts/
 packages/studio/data/
diff --git a/examples/docs-reference-project/.gitignore b/examples/docs-reference-project/.gitignore
new file mode 100644
index 0000000000..c41ed53646
--- /dev/null
+++ b/examples/docs-reference-project/.gitignore
@@ -0,0 +1,8 @@
+.work/
+.hyperframes/
+.transcode-cache/
+node_modules/
+renders/
+capture/
+live/
+snapshots/
diff --git a/examples/docs-reference-project/BRIEF.md b/examples/docs-reference-project/BRIEF.md
new file mode 100644
index 0000000000..844c7ce79b
--- /dev/null
+++ b/examples/docs-reference-project/BRIEF.md
@@ -0,0 +1,88 @@
+---
+workflow: product-launch-video
+flow: automation
+storyboard: no
+message: "example.com is the domain you are allowed to use in documentation examples."
+audience: "Someone meeting the domain for the first time — usually a developer writing docs."
+destination: "Docs page hero — embedded, 16:9"
+aspect: "16:9"
+format: 1920x1080
+length: "10s"
+language: en
+angle: "Show it as it is. The real captured page is the proof; the copy is the page's own language."
+voice: "River (ElevenLabs, SAz9YHcvj6GT2YYXdXww) — calm, unhurried, low-key confidence"
+music: "gentle warm piano bed, quiet under the narration"
+captions: "phrase-level, fixed lower band, one group at a time"
+style_preset: "derived from the live capture (no preset remix — the site's own three tokens are the palette)"
+---
+
+# Brief — a 10-second product intro for example.com
+
+## Intent
+
+One request: _Using `/hyperframes`, make a 10-second product intro for
+`https://example.com`._
+
+The intent layer confirmed source, length and aspect, then asked the only thing the
+request did not settle — **sell it, or show it as it is.** Answer: show it. So the
+site's own captured page is the hero asset, and every word on screen is the page's own
+language rather than marketing written over it.
+
+## The factual source
+
+`https://example.com` is a two-sentence page. Captured 2026-08-03 with
+`npx hyperframes capture`:
+
+| Element | Verbatim text                                                                                         |
+| ------- | ----------------------------------------------------------------------------------------------------- |
+| `<h1>`  | Example Domain                                                                                        |
+| `<p>`   | This domain is for use in documentation examples without needing permission. Avoid use in operations. |
+| `<a>`   | Learn more → `https://iana.org/domains/example`                                                       |
+
+Brand tokens read off the live page, not invented:
+canvas `#EEEEEE`, ink `#000000` at `opacity: .8`, link/accent `#334488`, type
+`system-ui, sans-serif`.
+
+## Structure — one scene, 10.0s
+
+Narration is the spine; every reveal is cued to a spoken phrase. Timings below are the
+**measured** word timings from the narration, not estimates.
+
+| t           | beat                                                                   |
+| ----------- | ---------------------------------------------------------------------- |
+| 0.10 → 1.00 | the accent rule draws; the frame asserts itself                        |
+| 1.00 → 1.68 | "Example Domain" rises out of a mask — VO: _"This is…"_                |
+| 1.55 → 2.33 | brand rule draws, then the address in mono — VO: _"…example.com."_     |
+| 2.66 → 3.51 | the real captured page travels in at exactly 1:1 — VO: _"The domain…"_ |
+| 4.55 → 5.15 | an accent marker draws down the page's own words — VO: _"…examples."_  |
+| 5.15 → 6.42 | held read — the composition reads still while the VO carries           |
+| 6.42 → 7.10 | the supporting line lands — VO: _"…no permission needed."_             |
+| 8.03 → 10.0 | captions clear; the frame holds as a clean, still end card             |
+
+## Assets
+
+| Asset                    | Provenance                                                                     |
+| ------------------------ | ------------------------------------------------------------------------------ |
+| `assets/example-com.png` | `npx hyperframes capture https://example.com`                                  |
+| `assets/narration.wav`   | ElevenLabs **River** `SAz9YHcvj6GT2YYXdXww`, via `/media-use`                  |
+| `assets/bgm.wav`         | HeyGen audio catalog, 10.0s bed, ingested from the v1 project via `/media-use` |
+| `assets/sfx-whoosh.mp3`  | `/media-use` bundled library — `whoosh-short`, 0.57s                           |
+| `assets/sfx-tick.mp3`    | `/media-use` bundled library — `click-soft`, 0.37s                             |
+
+## Design truth
+
+- The page is `#EEEEEE`. The composition canvas is one step down (`#E9E9E7`) so the
+  captured plate reads as a **lifted surface** instead of dissolving into the ground.
+  That is the one derived value; everything else is the page's own.
+- Inter 900 / 400 for the lockup, IBM Plex Mono 400 for the address. Both are in the
+  renderer's embedded bundle at exactly those weights, so type is byte-identical in
+  preview and render.
+- The plate never scales and never rotates. A 1x capture has no headroom above 1:1;
+  it travels on `x` only, so the page's own 16px type renders pixel-exact.
+
+## Deliberately not in this video
+
+- No CTA button. The page's one action is a plain text link that says "Learn more";
+  drawing it as a pill with an arrow would be invented UI.
+- No sheen, no bloom, no drifting camera, no texture overlays. One accent device
+  (the rule / bar / marker family) carries the whole graphic language.
diff --git a/examples/docs-reference-project/README.md b/examples/docs-reference-project/README.md
new file mode 100644
index 0000000000..3426d79213
--- /dev/null
+++ b/examples/docs-reference-project/README.md
@@ -0,0 +1,171 @@
+# example.com — 10-second product intro
+
+The HyperFrames docs **Reference Project**. One real project, built end to end from one
+real request:
+
+> Using `/hyperframes`, make a 10-second product intro for `https://example.com`.
+
+**1920×1080 · 10.000s · 30 fps · 300 frames · one scene · one caption overlay.**
+
+Everything in here is real: the plate is a live capture of `example.com`, the copy is
+the page's own wording, the narration is synthesised speech, and the caption timings are
+measured word timings from that narration. Nothing is mocked, and no command output in
+these files is invented.
+
+---
+
+## Run it
+
+```bash
+bun run dev      # Studio preview (long-running — keep it in the background)
+bun run check    # lint + runtime + layout + motion + contrast, one command
+bun run render   # → renders/video.mp4
+```
+
+The scripts pin an exact CLI version so this project re-renders identically over time.
+To move the pin up: `npx hyperframes@latest upgrade --project . --check`, then drop
+`--check` to apply, then re-run `bun run check`.
+
+## Files
+
+| File                         | What it is                                                                        |
+| ---------------------------- | --------------------------------------------------------------------------------- |
+| `index.html`                 | the composition — root timeline, the whole scene, all four audio tracks           |
+| `compositions/captions.html` | the caption overlay, wired as a sub-composition on track 2                        |
+| `BRIEF.md`                   | the confirmed intent the workflow was handed                                      |
+| `frame.md`                   | the design spec — palette, type, the plate rule, the caption skin                 |
+| `STORYBOARD.md`              | the plan: `## Video direction` plus one time-coded shot sequence                  |
+| `SCRIPT.md`                  | locked narration, the voice, and the exact commands that regenerate it            |
+| `VERIFICATION.md`            | what passed, what changed from v1, and the two framework bugs found on the way    |
+| `transcript.json`            | Whisper word timings for `assets/narration.wav` — the source of every caption cue |
+
+## The five variables
+
+Declared on `<html>` as `data-composition-variables`, so the same composition can front
+another site without touching the HTML:
+
+| id               | type   | default                                                         |
+| ---------------- | ------ | --------------------------------------------------------------- |
+| `title`          | string | `Example Domain`                                                |
+| `accent`         | color  | `#334488`                                                       |
+| `supportingLine` | string | `For use in documentation examples without needing permission.` |
+| `siteUrl`        | string | `example.com`                                                   |
+| `pageImage`      | string | `assets/example-com.png`                                        |
+
+They are wired **declaratively** — no `getVariables()` call anywhere in this project:
+
+```html
+<h1 data-var-text="title">Example Domain</h1>
+<!-- text substitution -->
+<img data-var-src="pageImage" src="assets/example-com.png" />
+<!-- src substitution -->
+```
+
+```css
+background: var(--accent, #334488); /* the runtime publishes every scalar variable
+                                      as a --<id> custom property on the root */
+```
+
+Override at render time:
+
+```bash
+npx hyperframes render --variables '{"title":"Acme Docs","accent":"#0f766e"}'
+npx hyperframes render --variables-file rows.json --strict-variables
+```
+
+Two gotchas worth knowing, both learned here:
+
+1. **Keep the `data-composition-variables` JSON pure ASCII.** It sits on `<html>`, which
+   is consumed before `<meta charset>` takes effect, so a literal em dash in a `default`
+   renders as `â€"`. Use the JSON escape `\u2014` instead — verified by snapshot. Body text
+   and sub-composition text are unaffected.
+2. **Put `data-var-src` before `src`.** `lint`'s `missing_local_asset` scan matches the
+   last `src=` in the tag, and `data-var-src` also ends in `src`, so the reverse order
+   makes it read the variable id as a filename and fail.
+
+## Audio
+
+Four tracks, each a plain `<audio>` element — the framework owns playback, so this
+project never calls `play()`, `pause()` or seeks.
+
+| Track | Element       | Asset            | Baseline | Notes                                      |
+| ----- | ------------- | ---------------- | -------- | ------------------------------------------ |
+| 8     | `#bgm`        | `bgm.wav`        | `0.34`   | ducked / recovered / faded on the timeline |
+| 9     | `#vo`         | `narration.wav`  | `1.0`    | starts at `1.00s`, runs `6.97s`            |
+| 10    | `#sfx-plate`  | `sfx-whoosh.mp3` | `0.20`   | at `2.62s`, under the plate's travel       |
+| 11    | `#sfx-marker` | `sfx-tick.mp3`   | `0.16`   | at `4.54s`, on the marker draw             |
+
+The bed is not a static level. Volume is **keyframed on the timeline**, which the runtime
+probes and applies identically in preview and render:
+
+```js
+tl.to("#bgm", { volume: 0.13, duration: 0.6 }, 0.7); // duck under the voice
+tl.to("#bgm", { volume: 0.3, duration: 0.9 }, 7.7); // recover after the last word
+tl.to("#bgm", { volume: 0, duration: 1.0 }, 9.0); // out under the end card
+```
+
+`data-volume` is only the baseline for elements no tween touches.
+
+## Captions
+
+`compositions/captions.html`, mounted on track 2 for the full 10s. It follows the
+captions overlay doctrine literally, and the discipline is worth copying:
+
+- **Three groups for three spoken sentences.** Phrase-level, not word-level churn.
+- **Fixed position, always.** One full-width absolute container, `text-align: center`,
+  `bottom: 64px`. No `left: 50% + translateX(-50%)` (it clips at canvas edges), no
+  per-group placement, no random offsets.
+- **A structurally reserved band.** `index.html`'s stage ends at `bottom: var(--band)`
+  (`184px` = 17%), so nothing in the artwork can ever collide with a caption. Verified
+  with `check --caption-zone "x0=0;y0=.83;x1=1;y1=1;severity=error;…"`.
+- **One group visible at a time, provably.** Group _n_'s hard kill sits at the exact time
+  group _n+1_ starts, so before that instant only _n_ can be non-zero and after it _n_ is
+  killed outright.
+- **Emphasis by luminance only.** Each word lights `#9a9a9a → #ffffff` on its own
+  measured onset and stays lit, so the phrase fills in with the voice. No scale pop, no
+  colour flash, no scatter exit, no marker effects, no labels.
+- **`fitTextFontSize` as the overflow guard**, so an edited or translated phrase shrinks
+  instead of wrapping up out of the band.
+
+## Media provenance
+
+The project keeps only the assets used by the composition:
+
+| Shipped asset            | Source                                                      |
+| ------------------------ | ----------------------------------------------------------- |
+| `assets/example-com.png` | `npx hyperframes capture https://example.com`               |
+| `assets/narration.wav`   | ElevenLabs **River**, `eleven_multilingual_v2`              |
+| `assets/bgm.wav`         | HeyGen audio catalog, 10.0-second bed                       |
+| `assets/sfx-whoosh.mp3`  | `/media-use` bundled library — `whoosh-short`, 0.57 seconds |
+| `assets/sfx-tick.mp3`    | `/media-use` bundled library — `click-soft`, 0.37 seconds   |
+
+Generated capture folders, frame dumps, contact sheets, and compiled docs embeds are not
+committed. The docs copy of the verified render is served from the HyperFrames media CDN.
+
+### Rebuilding the docs embed
+
+The Introduction page embeds this project live. That embed is a single self-contained
+HTML file produced from this directory and uploaded to the CDN — regenerate it from the
+repository root whenever the composition changes:
+
+```bash
+bun run docs:bundle-reference
+```
+
+It writes `examples/docs-reference-project/live/index.html` (git-ignored). Upload that
+file to `docs/reference-project/live/` on the media CDN under a new version suffix, then
+point `LiveReferenceProject` in `docs/introduction.mdx` at the new name.
+
+## Learning path through the composition
+
+Read `index.html` top to bottom; it is ordered deliberately:
+
+1. `data-composition-variables` on `<html>` — the parameters.
+2. `#root` custom properties — the palette, and the `--band` reservation.
+3. Track 0 `#bg` — why a full-bleed fill rides on a clip layer and never on `#root`.
+4. Track 1 `#stage` — a two-column flex stage that stops above the caption band.
+5. `.page` — `object-fit: none` + `object-position`, the 1:1 plate rule.
+6. Track 2 — the sub-composition host, and the three ids that must match exactly.
+7. The `<audio>` elements — one per track, `<video>`-free, framework-owned.
+8. The timeline — load states first, then one tween per narration cue, with the two
+   deliberate holds left visibly empty.
diff --git a/examples/docs-reference-project/SCRIPT.md b/examples/docs-reference-project/SCRIPT.md
new file mode 100644
index 0000000000..6c9a6100ce
--- /dev/null
+++ b/examples/docs-reference-project/SCRIPT.md
@@ -0,0 +1,70 @@
+# SCRIPT — example.com intro
+
+**Voice:** River — ElevenLabs, voice id `SAz9YHcvj6GT2YYXdXww`
+**Model:** `eleven_multilingual_v2` · `mp3_44100_128` → 44.1 kHz mono WAV
+**Voice direction:** Calm and unhurried. Low-key confidence, no sell. Read it the way
+you would read a footnote you happen to find interesting.
+
+The whole script is **one** synthesis call so the sentence-to-sentence prosody is real
+rather than three clips butted together. The `**Time:**` values below are not
+estimates — they are the measured word timings from
+`npx hyperframes transcribe assets/narration.wav --model small.en`, offset by the
+narration clip's `data-start` of `1.00s`.
+
+---
+
+## Line 1 — Name it (Frame 1)
+
+**Time:** 1.10 – 2.81s
+**Delivery:** Flat, factual. The period is real; let it land.
+
+    This is example dot com.
+
+## Line 2 — What it is for (Frame 1)
+
+**Time:** 2.81 – 5.38s
+**Delivery:** Slightly warmer. "Reserved" carries the sentence.
+
+    The domain reserved for documentation examples.
+
+## Line 3 — The payoff (Frame 1)
+
+**Time:** 5.48 – 7.68s
+**Delivery:** The lift of the piece, but quiet. Space before "no permission needed."
+
+    Use it in your docs — no permission needed.
+
+---
+
+## Spoken vs. captioned
+
+One deliberate divergence: the TTS text says **"example dot com"** because that is how
+the string is pronounced; the caption reads **"example.com"** because that is how the
+string is written. Whisper transcribed the spoken form back as `example.com,`, which is
+why the caption group's word timing for it spans a full 1.27s.
+
+## Regenerating
+
+```bash
+# 1 — synthesize (ElevenLabs, via the /media-use audio engine)
+node -e '
+  import("'"$HOME"'/.claude/skills/media-use/audio/scripts/lib/tts.mjs").then(m =>
+    m.synthesizeOne({
+      provider: "elevenlabs",
+      voiceId: "SAz9YHcvj6GT2YYXdXww",
+      text: "This is example dot com. The domain reserved for documentation examples. Use it in your docs — no permission needed.",
+      wavAbs: process.cwd() + "/.work/narration.raw",
+      hyperframesDir: process.cwd(),
+    }).then(r => console.log(r)))'
+
+# 2 — normalize to 44.1k mono PCM
+ffmpeg -y -i .work/narration.raw -ac 1 -ar 44100 -c:a pcm_s16le assets/narration.wav
+
+# 3 — word timings for the caption groups
+npx hyperframes transcribe assets/narration.wav --model small.en
+```
+
+Step 3 rewrites `.work/transcript.json`. If the timings move, the caption group
+boundaries in `compositions/captions.html` and the `WORDS` table in this file's
+consumer must move with them — they are hand-committed on purpose so the composition
+has no build step.
diff --git a/examples/docs-reference-project/STORYBOARD.md b/examples/docs-reference-project/STORYBOARD.md
new file mode 100644
index 0000000000..96dd73115b
--- /dev/null
+++ b/examples/docs-reference-project/STORYBOARD.md
@@ -0,0 +1,89 @@
+---
+format: 1920x1080
+duration: 10s
+message: "example.com is the domain you are allowed to use in documentation examples."
+arc: Name → Purpose → Proof → Permission
+audience: "A developer writing documentation who needs a safe example domain"
+mode: autonomous
+music: "gentle warm piano bed, quiet under the narration"
+captions: "phrase-level, fixed lower band"
+---
+
+## Video direction
+
+**Palette system** — from `frame.md`. Canvas `#E9E9E7`; the captured plate keeps the
+page's own `#EEEEEE`; ink `#1B1B1B`; supporting copy `#5A5C63`; one accent `#334488`
+used _only_ for the three rule instances (top rule · brand bar · page marker) and the
+address. No fourth accent use.
+
+**Motion grammar + reveal model** — every reveal is cued to a measured word timing from
+`assets/narration.wav`. Long-tail eases only: `power4.out` for the two structural
+reveals (title, plate), `power3.out` for copy, `expo.out` for rules drawing. Nothing
+front-loads: at t=0 the frame holds one 6px rule and nothing else, and the last reveal
+lands at 7.10s — inside the final 30%.
+
+**Rhythm / held-frame allocation** — two deliberate holds. `5.15 → 6.42` is a mid-film
+breather: everything visible has resolved and the narration carries alone. `8.03 → 10.0`
+is the end card: the caption band clears and the frame goes completely still. Neither
+hold drifts, breathes, or pans. A held read beats bad motion, and the still tail
+doubles as the poster frame for docs embeds.
+
+**Negative list** — no CTA button (the page's action is a text link, not a pill); no
+sheen sweep; no ambient bloom; no grid or paper texture; no gradient mesh; no drifting
+or breathing camera; no plate scale or 3D rotation of any kind (a 1x capture has no
+headroom above 1:1); no per-word caption scale-pop, colour flashing, or scatter exit;
+no label that repeats something already on screen. Both failure modes are banned by
+name: **slideshow** (front-load then freeze) and **screensaver** (everything floating
+independently).
+
+---
+
+## Frame 1 — example.com, as it is
+
+- scene: The name in heavy type beside the real captured page, at 1:1
+- duration: 10s
+- poster: 9s
+- transition_in: cut
+- status: animated
+- voiceover: "This is example dot com. The domain reserved for documentation examples. Use it in your docs — no permission needed."
+- src: index.html
+- blueprint: device-surface-showcase (Adapt)
+- focal: assets/example-com.png
+- roles: example-com.png = supporting surface (the evidence) · type lockup = primary
+- sfx: whoosh-short @2.62 (plate travels in) · click-soft @4.54 (marker draws)
+
+**Adapt:** keep device-surface-showcase's signature move — _the captured surface itself
+is the proof, delivered as a lifted plate_ — but drop the blueprint's push-in entirely.
+The blueprint assumes a surface with zoom headroom; this one is a 1x screenshot, so the
+push-in is replaced by a translate-only entrance and the plate is then read _in place_
+by the accent marker. The film moves the eye, not the camera.
+
+Scene 1 (0.00–1.00s): canvas and one soft upper-left light wash. A 6px accent rule
+draws left→right across the top edge in 0.9s and that is the only thing on screen.
+Full-bleed, one depth layer. Nothing else exists yet — the narration has not started.
+
+Scene 2 (1.00–2.33s): as the VO says _"This is…"_, "Example Domain" rises out of a
+mask (two lines, 132px/900) in the left column. The 200×8 brand bar draws under it at
+1.55s, and the mono address rises at 1.78s exactly as the VO reaches _"…example.com."_
+Asymmetric 60/40, content in the left 640px, three depth layers (wash · type · rule).
+
+Scene 3 (2.33–3.51s): on _"The domain…"_ the captured page travels in from the right on
+`x` only (140px → 0) and lands at exactly 1:1, 1000×400, right-aligned and
+vertically centred against the lockup. `whoosh-short` sits under the travel. The plate
+lifts off the canvas on a single soft shadow; it does not tilt and it does not scale.
+
+Scene 4 (3.51–5.15s): held while the VO reads _"…reserved for documentation…"_, then on
+_"…examples."_ a 5px accent marker draws top→bottom beside the page's own paragraph,
+inside the plate. `click-soft` on the draw. This is the film's argument — the words
+being quoted are the page's, not ours. Nothing else changes.
+
+Scene 5 (5.15–6.42s): **held read.** Everything on screen has resolved. The VO carries
+_"Use it in your docs…"_ alone. No motion at all.
+
+Scene 6 (6.42–7.10s): on _"…no permission needed."_ the supporting line rises into the
+left column under the address, in muted ink at 38px. Final reveal, final 30% of the
+shot.
+
+Scene 7 (7.10–10.00s): the last caption group plays out and clears at 8.03s. From 8.03
+the frame is a completely still end card — lockup, plate, marker, no captions. This is
+the frame every docs page will screenshot.
diff --git a/examples/docs-reference-project/assets/bgm.wav b/examples/docs-reference-project/assets/bgm.wav
new file mode 100644
index 0000000000..1e84467a0e
--- /dev/null
+++ b/examples/docs-reference-project/assets/bgm.wav
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8935eb87c960b062ad9c42bce3f4e12408f389dfb82acba986999e62db76fe5b
+size 1920078
diff --git a/examples/docs-reference-project/assets/example-com.png b/examples/docs-reference-project/assets/example-com.png
new file mode 100644
index 0000000000000000000000000000000000000000..1d17d46b2985f1a52a6bc3bd44992d05403206a0
GIT binary patch
literal 21297
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
P`)zH*TNO7S{Qds{<;IGL

literal 0
HcmV?d00001

diff --git a/examples/docs-reference-project/assets/narration.wav b/examples/docs-reference-project/assets/narration.wav
new file mode 100644
index 0000000000..3b3c135118
--- /dev/null
+++ b/examples/docs-reference-project/assets/narration.wav
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4fca03080a6626474df0deda3f6b1b679321a4b6c813ec2876ac8baae476fd49
+size 614478
diff --git a/examples/docs-reference-project/assets/sfx-tick.mp3 b/examples/docs-reference-project/assets/sfx-tick.mp3
new file mode 100644
index 0000000000000000000000000000000000000000..2706b1d2ea64721d1888d15fee2fcc98f0609570
GIT binary patch
literal 11702
zcmeHtXH-*L*X~XTAwU92XrTxRy%VZ{2%&dGItUU%k)nctidd3RLz7+==~WaE5v=qM
z3Id`Y6;VLI0*D1rvTr=^ckliA{rKK7?s)Gwb7!nQldLtz+Rw9}x#rpl_-ir%064TM
zLK*6Bfr$DjLUjv(-z*q@F%Li`YYR+OA^-?b#0Mo`u#{^)`k>niixfOP{|iJJhUDHl
z<2^<{E(d$N;%HZ=@-A3}Hp5xoiH@(x5grZ}fzx4vJz4~=H0L)z{f$PRm%z)lp>MtS
zDU6*vz-O$5?$Khk1a1ypOUN)5(%nK$i?QsrfOf+GG=z4EnA7@^5b*XYFX;|vc_@t7
zqMc<NL16D8Z7GLtktW6IE3Dvrq|4B9hzAe>A^S_OLROR!El!XuX(&z=hF^(|$}(Od
zuy?Pxnb9_R-RmBo3P)_~^&b=;Y|aG#Wjpsp#2q-w6NK0*atI9|9dJY=am*--4AJwN
zf7|Khpzs!%6pCkY$@h=rJ>_U9FlmNGazaTgMC^DO%i%38w%GnQklfwl|8cI_ms;7Q
zY>OSACocqD#VJR*7nd>L1pOa7#={A`;-qhiG1=ld000jI=m5BfTZ`WpGfv$azb2RA
z<8JhGI!T~U-bR8MJSV?|lpFH}!A{|@gq_<q$;G1ye<r>$q1%j1<=W_(X||glZU#YS
z&E<0?!Q({<=_3sJgezF_&GeQrDhPgX%J~@`TppR^HPA%47a0^ux#wr-HE3#bpB3fz
zGl^@LY(xh0tFF0<^@;U7)+toxQ|9Z?>_D-Gf?!9I$a)m0b>o14h<~R>uUH>LtC{#0
z${!UmS45mc#iM9*f4YIpk6Y^?XfX7dZTynu%B1ck6kC>V(<P#kMB(cp5u-TB?%&=1
zZ==2~k@-b%^)t9*yfgj5zy4L^_Yz=x8OZMHE_%b4^mIXQH*kwO2ZujK!$<j0SH*PB
zK9%L{l|2dPuXpaI)MP>7Bt%1bP)Es2enl!sBq6<9BYP=J^t1w1Z=`q5r|z*fq5Zo8
zudUM3RU<esOt|ItWdcTwGz?1pMrLk`QNgXHu5j?XhD1F3=-7w&x4hpjrR;IVBk(i?
z+7FKJcEs@`IiPXGuQDFeF)f{#yaONiY}5HUpP$$xFPAF>RVshJ@o=%H{gdd~lhxp_
zrvaiggjV3xr7%2@q@-XlJ`PAWq<QW<1h}N68>qxd;2?k4w`IMPza4z#%O6)C<u%Ec
zoN|(V{O((}=OWRr-^}g1KRZk+y}$o)?EX6i(_ep1?B=?+sj;gXdSxa6<Vv{sAYW`%
zgZ28G#WUWWVpeS-<Om=T=t&&oIK*yyjQRQA`B?g@MDmwwj?dmrF4WT?q&1Xa&p>TE
znlnnd<C66OzQ;>fwvRT$%tDq<e;%G6yIsKBl+lw8KzeQ`TvrApb)Vt3ysdw4t$zT)
zalP$}X=1z24qWT7_SbjNZddj}e>$-nDGaR+MW~4;?b|b>l>;y|9smHS;VQHc&L13e
ziL@h4lX2viD<E0ypD|#UKY7pNG+dJ(hq|gASo6N7TeY<lN658b3^5={s$fn<F;ow6
z{_aGjb6BXF2uj8&V8RP*FX7AMu1UtJ#&MrkNt6{b!%3jLlqB@2JJa*M3$P<#;S=zQ
z1i0xc5d9bU`_sVKL#_KWA{Bi0(hwNU-=hDxf2AZ*yXjOzLVr@$$q+oul<rjFNT89{
z;`dvMh{F)Y*((XausU~<Fi)JO2#nZzS<ufk!;>!ATdr}+D<l_oBB&(7MuQ+vq1|W$
z*o$>to|?Hs*#H434qD*0@-kL6a8~VV{*uc;D!Xpbbyd2@m~uj^fBhQhJl;(#`L#H9
z=h;<hb+eqe{S@^h&u6HOf2}h;Wr;YaXKp*snr^;$IhFS&!P)8N3$`?&y(p1wd*6u+
zUd}6_s$9rc8f{=rB_a8*yv7_Kg*+dNpd;s(!>D@?l%|d-kGVw@#K-;C6xtl|wpBke
zr+QS9TRDE-#>*`bcj;<94^J0(<Y(sIiGeh1(<X-NCV*gZ!!o4aBl3@w{My?q7(P^h
zVwQrs75h<fbO3~@uQF#kr6Gs?#GjODbZwf4T*lR_<04S$<dIvT94mfAGJ5lA<=XTW
z{)q{@CxyJcervAcHKl4J8atp`j`^3Iv8G@$Jr4C)VqeXAg)g%$$|hrebc`!CZnm53
zo)7+RKS`8E!y!-tgp5WY%A?Hmi^+jiuy|u+fSB$OPLE*WEE-A~NJ*9m=b-)3kRX6?
z4s<>lhKDjZclV8J0TLORYNa;-D7vo3`Sv7G(Fi{_DcxJ4UWw}$%X(wuhcl1=)UoPk
z-*>pj{`s_TG^J^KD_}5~AvlT`@Uu-f2&)qHZa8{gTH0Sogz*ENvJ#<)iL?Z0l+RM@
z7K>p#M{WzbH|d6)LB29!<r#L>Gci5*ZIutIad}d^q59abpNt)*_i!a=J@|bQ^K!v~
zjstq3aMK`EPja=C<Vj`1+jG|%g~zn39P+x5QGL3qqTy8nZrY5#h;U&qV!;Vlfm8_1
zM+9Y4Gu26OdasFk@h1gdHa}4Ki2BEqrjb7y{_<k!4P2tC*W6-*0wfX{4}$@C2uINP
z)W)4Dr6zHQ3z5|7`=bM1VRp7xVS9|PL9L?sg~~EDrm%?f7)TQXMk7cQK4E%RuCkS@
zKn8{QKA6UFOBPYYZ#r>znvZXO;iN}pamXJy^1b@(w~JO59D8!C+)pLUd!Nrs#={(u
zQTS_u{tGzOzSoirpFsM|pW6nCY0|1pf8IL>xm+wAXA;+x%dmQ{C#WjPBdHuol6{W1
z?oT~t29)CBlNPfxaH)f@IekrG<Exd*lITh;@=FpC;vuwG7f;tLcdA^Hk6*4-5aE)X
zg~5LJu(@P7zpU`X#KE(>R;3jQTNj+n&5T}*Lii0Gs$be#Ir&Q4RNu_CmRK%&;T~pB
z^_{1d{kR5#UCkeVKP`!}rWQsy<fzW=?H#}6>$Cp;*w61waF>?_VtM81U?%agzYz$2
zQ!kPGYIWZ|?3e7fn?Cc>AxtJ~_%3sV)eU4WX|Ge?wJQA#Xq9g}&9Gj-kh^|Slls--
z^F^<20PyEBbx5^=WJoq<BoK}%Xao-9ijAQmZw{$iN0J`#<*dG|oR6E4TBznsf(>i;
zk@)a)C`h#yL>;BeCxIeVCDCM!o0I5bQe7a(crGqgSIC`g%OZLEqi{mlW>F9(%fP}<
zG`+7rozdN|hJ26Tj!TBbJW%H;#gzSMn|;QG1^`G1z|CzCj!0pjfaJp99AcU^<5JU#
zX5u(AU`UflpeOdEu*DV2n+MOz3o|gqx2_#8PW_`HvE;KQlwm2)3zG%Mb-#t7ObDgP
zf&vc#sCp{}+C~KA6>Th28*|KSbv)Ptyqx`V`V9BUN7T?}b>p<{{1O+OF`f<>Z~2fS
zvMIqC<0|c9=8_#C{M1sDX3d4q3AwW)pW<gZv2~dDm|Ec@^AYfZ^_2dHo*(<Va&w}w
zRqMG`pJWWC__j#X9P-sAvW%B@wbRi2>5zo(7yP+aPem1O7K{3R>ph`8I7)tM&(tvj
zGYV?kLvJs94q8=rSK4<UY*%72^lN9?)GKiP!==sjl5<_u#r$_A=f;}Q0K|EsM|2Vj
zNS}1(N!Fl^J}!R6kw>Qq@VzHV<8L#*95q@BOgswFg>|<hHVN$2mT!5hkcvqwz3|Dt
z2ruK1x9!l`cLsvlcxf|Q7S=$p#mg-7efgS{RQ&{toA>4EjN!-n)b3CE{zlv5Qil5e
z#PlJn)&Ai6^Zw5}GAU16V>*;oz|sDu^MX{BF@so}p}SR?BITaNaGX`nQCv4YHKnM#
zA@Ld_{mBlnqL;CP9E95;bpv$AQjiET^wsJehzJIC07kdAE6H`TBKjpGg@|>=@rCCu
z6`nr^5moDj+5WgsV*@PA(o;mRI=+E#eDe^9Bpu2x;EImxn=1U&d$=81jxc<<P!<`<
zH#;K2g@To-dg!Y4v>dC?IWJ$5u4g2hGZN5P3<hK_UbFw|z60jQrt~~oM8-$v`M-S<
z|Elw#+1nM(S9J;pX99Dr%SJQ_J4(Bt;#qL9`TY(k9h&*=%HnvA_3C#x*z?6HMZPbW
z!<boVy|ucsXuQI~V&_L=gLLLEmmiJHuJn{#>z5rP7jvoL$l_Oj!L1iF#>#LhIL>8-
zSAPiE-3@!YXB)gCbUtWf*dR@iSrW6~P7Tl2x!+8bq0zDccTX}wZEGOzN-lCsqPD#s
z=u$Veu=V*Vj`?QKWGF7UdV2$#{u!J8o3dpf*gG^RCqxNj%>ZPoQiQ;?qDw;fbDO`t
zE4q>kkx9aU_jUkrD~rA)L_B9Y;^D6)qX8IeX||pG;#Sg)M~RNc-U+LOXQ>O^RNj~c
z;ILq%pz_+_{+R<M(Ft0Kc3R|2X~y5R9Dra1*)xv;K%(Ms!h{__2q`?Wa}|K%<;wdG
zI0EH1<=8k*lO9>GLiIi?8x2WJ)PPl+U>c6dsptC0472|sW~M>_gF*KpTKr5qZ;BKl
z(rFNXT)MO?%xhdtZna663ytFe)IO?uem=P7G=vT1Jm>XM)#H=u%Wp}1^wQhAva(F2
z<h|Wf@57_Uf6iPA!QUZ7g~i%zwlzpw6EA%<JiQMg;_<7|oUv;WR5k~-H{z+&x9-eS
z6&u%Us;&5GPY%ev`S75@dyh+Ech2nH9C-wS>pQ=e!LG<Om19(Wqc0bi#XrAEKOde>
ztY3b;b7J2dk0lG%74|>59{^^NL{4M~)Ku=oPM1N5N`?l|alHObjTKK$19)0O^4stB
z5%0yc?w)K`4QG_%L8;GQK%0)5pj)GOL0lP6f=_&cipMg~DP`H;QI=YH8Jjr}gfRB8
zx)k5Y@hB=oQ59s!t0oBHSfsKH7xzgyMos;Uy7}{dA%8Sw`JldOo3LIL&gGOA;u#eC
z^Qtc|g+~Ej0Vwl$_OR!R2(ZhL1`3hrh=6W2Y)t}Nkyp*vXJ{cPP=95`>6Ul4BZ(*N
z8#U!Yum!&StGIyR@!Uei?v~eEm^l1v%F`h+oM-gRqidx5$fV=rV%wGDyzDc1x8~qZ
zjkDyC&RNkVVb^n59X#eJwI{!!-qjs+YVZ;GCN0ah_)LLvxys{0QIvWq)pzcU`ia1P
zzvqh8H#M03@<J~M?O>3Br4)}5k1J<^YaM=f4PK5?eG23kM|ZxK)zpBy;ci+NPDvxh
z#eKN!lkb0l)hefczTdynrAh4llKkF9V}7)FFVpkG{v#@&-h;JQJm8)zCqtIAU>Tc`
z<XSrDDHvparS?c7e5$_o>`>BKSR&`<*T#jCMbG5&)#L@v%&LW4KTa9}K|G9f!j<Ek
z`}pCC@c=+Z!*D`ycG`esmd?2Vr~?oRA(`1=u=EsIImK8Rr-!&q8j{LV<P^p}6H|jj
z7toGGp}(2=uO^<K>wY)EiuD`-AR6=7#n7hq(M^JouLOl4`?$ULohFn_Tv_qEEM2U@
z`3^3O{@=Bn@6>WQ31A>&B_@UeiBf;Uz6lzXT}|peYaJ491mfB3vJh4+qgb`cNlk-j
zq7@G6SCU|APO>7&pxVDHoVJA0a}&5pr$SJ9ZzFPZXu6IY{mX7!FtOo8)3ZC#b_g4(
zNlrAao|d3d^;Bposcj3#S#oPvVGEJhqD*Ycj%^l9w)h%)`)W)q7yjKf0iM<@^b7eS
z4X+B_`*xt>vxfVB*_FMCo?#qN5jK=o-T$by_SRi@jm@x*aGyPYFCVRbMaPN3nyeq^
zmyc(Bn*UV;GM}#=03T4nJ<?Rg>^jJFeYvPEeXY`Dz&05KC)yOkJ|fzNLa)Si)_1cO
zaVWsr-|GUv33Hf~u&hmQp_fCQdCC4(45H#hVPu^K)>Ijbhevug+oy9FYYa}=p`l7p
zqsUDxQCA)Ulj+8?C0@0p<Vh}iKZ?aO+L6woA+2Q~v+Q52>`d!0D;1&3sBETQ4|_7X
z?CVZ1btimGdW!qt*Pq$d1VenK3Jn0b2DNzb0xb*1+2kM;k1%4*?WnHeFv(Q=idDZP
zx-t4Mvo=CrdaaXs5u=9-)#dTm(~Jk`=_I@1@t4T%L79XtVF#^m@7lCp5FJg~VM+=b
z32ipE8aeU88k(9?hj5zeansatN76_VyvVO13tmJHNrLYx3bJ7wyZh7atex9U`LIfC
zM7%m6QmYIR1p0wce2!Y~+e*n^Sv2;suh78eG09#d4r6d5EH8DEa$S!|{Vh@z+}Nbl
zepY_`%1f8xy%76r_RLEAgL^)=f`+G!z!fRGFBwzmQ}?3nUdFTFV6x!<m+d(i{g<O-
z&q`#tDsMO-eMCXz!h@P7HuAXu^rR_VzE=L)6+^nWC<pu8cB4Q<U*fYQaUpN*2p$|R
z2~MChPPvFYP{o<U9L@V(%ym;4<!K=JSo{F^;WG6@*Wcma(fI*#mVzUqT%&?c1>Z*#
ziRDQvWD*zSH9vyv$i*O&7c$mlSTj(6JLQMxJ6FLK513VVCzdbg?gMm|Bm5h3>f;g;
z5lDLd<Onhk9};uB+rz01j~`hoCgT@u|7d7m^3NrTMc=s#j+euR(P4S=gzOX^o-oC@
zeK+SJqxR*T)nUtAW@wUP6+#^v7=jDY4r;_B^iKgnXusY@x8{x5s|Dr)-pLB^!>$(j
z9wz9B3GWtcEwNX(7oFgSPS9zZwTDgW<#J}XD1=nMsO51sb7Ge-6|<R=6kVHhn3$ja
zfPHYXUG(E{aMQ=(aNnb*lLOzGj~*lw=5M!OFUenf7j#j~V(sDe9~~C&ZWmu_UYn)d
z{~7u;V)nI!!@b+@zLY%Xi&+4FwEJzotj_->tUxTgzE8cV^ysWs)6K4PlIpKS!lkZM
zB|TVSzx&0>KPaW4M9vW|oY3vYv7gUiRIyE6&7O!;E>5D?WYcS`-@Y<H-X;58z!mn&
zw4{(Vmf~dI_HLw-v>NasSbDW>uYz%27q~%2lK}=V6T=4f;-Prz-*j!HkXc8BAK8xz
zZkqvS2qF@R02lxf0J>@MXcIgzNrM9#BK1&RSr`Y>4$cdKB1zoDDdbB>O-|ed$rLEO
zjLXGFjLhs;f=C)u(tyjkQb8!EYv&-I_L+jlI*I(&T9-pJe4KHI5vIC*P9~PPz8bsy
zwoG`w;$Q-r0((0jS>EsB%+PIOXpg9TRT5l<a&<S^^jC#yE$Jz0ujn)xE|!n)TkBuy
z**Gr2p=ZRQ$7W^R5(@J!i_8o0C?0$J*v0tkF||0WM`~%yJC81H%f4j%T3D4{?0Ia`
zSpQd+Cr+O?9zP^E>oXjGwaiT-Qmi>1oaenzJhr%FDE`=2=QQ|fReBz~_z3xNZ}WmJ
zOtV8_IPwzj;X1Y13<2_z|F%9)Jbp!=2mGnvir>PJGT;=VW5nP)zg}9d?jR#xrV^QI
zu5DBP?y%-T@iDeOJ6StC2991xM(X;NKR=LQLiU3ir)`^4ds>2Zc!6{A2)Gj@ue_HW
zptc~+b|4`Z`9Vmo-vuqL%FlCw+xoXK5MZ1YFZElP2PrRX{WegZSoVi3CXyj0iAk4|
zVEGB>S!p!FxDQqAx6+E+Ku6RoXyq}+tkV;UNR8yW#87;%DX*aV6y=s9S<eHLU4bCw
z6A!C;%wRlL@-F|;kT@Go&#(7-%ms4lb@%U~xnANmiNFntdaq+s*=&<NQQ74#&@Ndm
z?kONbqRpg5)3yCoo?b0j@W^&`)>rY2x_82}@!qLA<1sfGS62_Be4?J40437pB+BQ8
zcAZfpNvwx(JO53-%E2@704S=$PJ6C1RDUhe@y1ad>y-@N!-iZ{;boS?)=zR5ujW=p
zJM?*!mYFT?q9UV3KFk?r#+@CRlQY;gWb@cI-1+KoC@$gx-=hl>cohk`Ct5LOvbhG+
ze0_E&QZ1L0?Q5rfGpei(Q9tzP$_2bHvmE)kv*B=8Pfl)X<05tE+XVyy__(1}0RsTK
zNdnTEEmnG=_n<C^yKvS3?QK5<jUJ8RhVvcTP^T>9!4;BRkj40|g(Yq&A)=&w0Fj+6
z>o{B8kyBN=&<A%w^`eI03p}_$qhthBZrcn;1pGMQY~8&QOiZT+xG_KpmN5y&H6tBm
zD_w9^DUOs(7F(`NjE6cEM7%;kmJ;mrZ(T<4nIY~BB3t{&!9#43d`=|Jhxj^zixofI
zMIL{zn_}n{t{I@C7)=KR-Ou^O$=0f0eG{bT8TUaMrxO_CT-he8SPIvDRC!S66rUrW
zu7xNtor|S3yeL{oM+SSZov91GsQ&N}T<=h=QPP2FVTaN2I_s3BV|EdDr!fw!{ep9i
zzQKY+E>8KhL0w?H?Ed~n*@{#){*3`bs#z2J9bC1#Bc*)cuo90DvOX|kAsL}-oF9J*
z?j~%fk+r~f%DA&4m34VdQvFXcJ*lK4Ns4?{`JDA7oHwDbY~lsrioLp$MsOUlCz*+X
zU|~RXuxOCqw6jY>t`;$A!i0~UFhJjbuo}<bd5UBA5cr-h&RwwdTlmwWmo*MyTacPM
z#8KIpamo|&4pK$i^h*K-vfTw};&^dgUNkC4<em`sLPSMGrK%882(_KI$<Gwxf|e{?
zr=q+>T96b0-%SDT#C{L+O@8hqjJG*-0b~kszEkOUGzT%K1ToZY9TebJ&AJ!nWbr($
z+3bn@(*5M==<Y!))4T_Dnf?lf0XOq(mtMGSKWao)+vu1@Di8y0euON#+AF8r<qJxG
z6B5MIkQttqui$5Di;O`xjLU2LeYh#G@9G+S;a=QWs|b73G-5T^!m|13$bp%jJ3q`u
zstoqlWJGp$wOw{x_TI0S9a_$Ie)I6W^pl!m0iyzIi4x5nkQopSKABRhTQ8$d9SV$P
z6t7>($X`FF^?E(~XD)N++Z*e$b3tVz29JCf&(BjAL2w>IqO(><OmVc}U9Zqgh3Erm
zijnhqQ_k*g+VVaw>+P|V-2F>VJ(K+6H7<p7)hUiw%&G$HALV!+w#Z#Qti~5^6t>@b
zq<7WphP(DXcct0Jp^Havx?fuLZr*RNaH0A9>hhM&u4naUo7vFz>5dZ)vt9Q<aJRj|
zd!2d1{eYWN{(SqrGtX{(DS55*7=wsF^=;tryu6Ukc%HrlLN9`cp&Pf4he3S@h_TaD
zHc+2{gNOyJ67-BxcdGzhU!X@nE}C<)Vf!ZMjGI8*Q`NMJV4=ztuNXN}>BZ~XXX+dB
zHELbvKl?Z#%w}g5tG_!mxGL6!-tfGx9aP_tX2X#ZVr#p???sswEQbC`lG}o$c6u1J
zThNd_OC?4S+yGX9Xl{}RzzcA63X<5$A(MZ9;>c=a00TgLLxt2z58qI}0O+%`q`IL@
z4`oj^Pd#Q+Ov(23RjPKkWknrbJx3|N8*$QG;O>4N`@WnGagRukQ%lM4rJ?-kulFo%
zihU#p)U;AA+)${tiPb7GON_O}3d-oo=mqEnY!x`?_-+-LvQAESc|5tXVz&fF-4(_N
zBMROvhNZ@(M!$updk;qZaUrFKm=(+#$8__ygad2M&U7>^H92Tps;gOt_{R2edO@5n
zPJ7&G+04YOzI{v=?}DFZU9)B*JkBmd^Visg8X3#$S3al+kE)4MW1cckF4%s5U8Y3+
zonw}xV?QCO^$iOz_kKEaSQmH?)Y#qgIx!evdiBJ^i`4LsX%cmIa*3%ZtmS#xt&`KP
zUfIZ+uCWjFCW|5EH+Gs*wbqR6#up3dU)2$&SZAxAtA!2Z&VoA$q%7z_NoU1C2e_mL
zf`bG{OTgkj_CcGO?{{WFplGMH>hHB*u$(rr#ZZ6m8LKNY4fU@c*W4*dmdyI2p(8+l
z=&`DnCx?oPk!F&@ncuL1<q@XpKF|pD46DNH&*iQB3(opScC8<z?MB8pr4{g-luU%-
zv+Ud?Zg98x*g2?pg=u>K?wGjK0dKJ3e{G|ul6KO>`1*Bn<B&})H{-KQ!LuL*=5vZt
z;@wn@PEgxU=E#RhPi}!5rH1!co=`si1*QctYINZ?XQTF?zQ5Za`rw`G8>@wWn`g?>
ziy6|nV<Xn0U0V^0)j1ZG5zb3gJ=b5)Mp;;QbME&%sDv1|xFhMjsd`ifZ8=@_@y6*M
zcGK4(#ViXR)v6mg<d)CqFEkSJUV0G}$M5S|{ABj8Aw{atMVry<A5;~k?<^?l-%x|R
z>(n{GR+r>^Wq_1tFQLHAS{)L#-pqsLO{jsP>h79okGY1#LtJ$R^D@?M=J}8A)t_=9
znpZ22=;Q_l-PB^VRti}$W}HT3pSYrwO%!CvDR<oddIH{PkCfrOlRF`sZXwl<)OgsT
zn6MWR707&c@0`oav1Z?Ja4!D(VKbjY*jJ|sqnk1zF{f2M`904IG@YzM$@&)`pE@ml
zJp8v#sY+;(%(oG9A=%&oNT(&dKxepYZ>YiyVTzr#GqyL^R8=PuUH`HF7YO{R<pACd
z00?32saQX4q42DS<g8aU>n+RGq5%NxACCSTX8r-_zX9m~@2~&S(7%D-e>C)O0P#OJ
o#6KGPH*oilhW-s8{^y1O|NQ0jpIYvJMBqOX`X9mfpFa410SX=as{jB1

literal 0
HcmV?d00001

diff --git a/examples/docs-reference-project/assets/sfx-whoosh.mp3 b/examples/docs-reference-project/assets/sfx-whoosh.mp3
new file mode 100644
index 0000000000000000000000000000000000000000..e23e513d273009fbf48e8bcd44f65953e38bc3b0
GIT binary patch
literal 18390
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

literal 0
HcmV?d00001

diff --git a/examples/docs-reference-project/compositions/captions.html b/examples/docs-reference-project/compositions/captions.html
new file mode 100644
index 0000000000..8c1541cf1b
--- /dev/null
+++ b/examples/docs-reference-project/compositions/captions.html
@@ -0,0 +1,241 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>captions — example.com intro</title>
+    <!-- This head is metadata for the source file only. The runtime clones ONLY
+         the <template> contents, so every style, node and script that has to
+         exist at render time lives inside it. GSAP is deliberately not
+         re-imported here: the host page already provides the global, and a
+         second <script src> would be a render-time network fetch. -->
+  </head>
+  <body>
+    <template>
+      <style>
+        /* Root is styled by #root, never by a class: the compiler scopes each
+           sub-composition's CSS to its data-composition-id, which would turn a
+           root class selector into a descendant selector that cannot match. */
+        #root {
+          position: absolute;
+          inset: 0;
+          width: 1920px;
+          height: 1080px;
+          pointer-events: none;
+        }
+
+        /* Fixed lower band. Full-width absolute + text-align, NOT
+           left:50% + translateX(-50%) — the latter clips at canvas edges.
+           bottom:64px puts the pill at y 934–1016, inside the 184px band the
+           main composition reserves, so a caption can never cover the artwork. */
+        .group {
+          position: absolute;
+          left: 0;
+          right: 0;
+          bottom: 64px;
+          text-align: center;
+          /* the root is click-through so the artwork underneath stays
+             selectable in Studio; the pills themselves are not */
+          pointer-events: auto;
+          opacity: 0;
+          visibility: hidden;
+        }
+        .pill {
+          display: inline-block;
+          max-width: 1304px;
+          padding: 16px 32px;
+          border-radius: 12px;
+          background: #1b1b1b;
+          font-family: "Inter", sans-serif;
+          font-weight: 700; /* bundled weight */
+          font-size: 42px;
+          line-height: 1.2;
+          letter-spacing: -0.005em;
+          text-align: center;
+        }
+        /* Emphasis by luminance only. A word starts read-pending and stays lit
+           once spoken — no scale pop, no colour flash, no scatter exit. Both
+           states clear WCAG AA against #1b1b1b (6.1:1 idle, 17.2:1 lit). */
+        .w {
+          color: #9a9a9a;
+        }
+      </style>
+
+      <div
+        id="root"
+        data-composition-id="captions"
+        data-start="0"
+        data-duration="10"
+        data-width="1920"
+        data-height="1080"
+        data-layout-allow-caption-zone
+      ></div>
+
+      <script>
+        (function () {
+          // Phrase groups. start/end/s/e are absolute composition seconds, taken
+          // from `npx hyperframes transcribe assets/narration.wav --model small.en`
+          // plus the narration clip's data-start of 1.00s. Three groups for three
+          // spoken sentences: stable, one visible at a time, never re-grouped.
+          var GROUPS = [
+            {
+              start: 1.1,
+              end: 2.81,
+              words: [
+                { t: "This", s: 1.1, e: 1.36 },
+                { t: "is", s: 1.36, e: 1.54 },
+                // spoken "example dot com"; written as the string it is
+                { t: "example.com.", s: 1.54, e: 2.81 },
+              ],
+            },
+            {
+              start: 2.81,
+              end: 5.48,
+              words: [
+                { t: "The", s: 2.81, e: 2.95 },
+                { t: "domain", s: 2.95, e: 3.24 },
+                { t: "reserved", s: 3.24, e: 3.56 },
+                { t: "for", s: 3.74, e: 3.81 },
+                { t: "documentation", s: 3.88, e: 4.62 },
+                { t: "examples.", s: 4.74, e: 5.38 },
+              ],
+            },
+            {
+              start: 5.48,
+              end: 8.03,
+              words: [
+                { t: "Use", s: 5.48, e: 5.55 },
+                { t: "it", s: 5.62, e: 5.68 },
+                { t: "in", s: 5.68, e: 5.8 },
+                { t: "your", s: 5.8, e: 6.03 },
+                { t: "docs —", s: 6.09, e: 6.36 },
+                { t: "no", s: 6.48, e: 6.54 },
+                { t: "permission", s: 6.54, e: 6.77 },
+                { t: "needed.", s: 7.17, e: 7.68 },
+              ],
+            },
+          ];
+
+          var IDLE = "#9a9a9a";
+          var LIT = "#ffffff";
+          // Back-to-back phrases: the narration has no pause between sentences
+          // (group 0 ends the exact instant group 1 begins), so the handoff is a
+          // quick fade-down / fade-up rather than a crossfade. Keeping them
+          // short holds the dip at a sentence boundary under ~0.2s while still
+          // guaranteeing only one group is ever drawn on a given frame.
+          var ENTER = 0.18;
+          var EXIT = 0.1;
+
+          var root = document.getElementById("root");
+          var api = window.__hyperframes;
+
+          // Build the DOM synchronously — one group element, one span per word.
+          GROUPS.forEach(function (group, gi) {
+            var groupEl = document.createElement("div");
+            groupEl.id = "cg-" + gi;
+            groupEl.className = "group";
+
+            var pill = document.createElement("div");
+            pill.className = "pill";
+
+            var text = group.words
+              .map(function (w) {
+                return w.t;
+              })
+              .join(" ");
+
+            // Overflow guard: shrink the phrase until it fits one line rather
+            // than letting it wrap up out of the caption band.
+            if (api && typeof api.fitTextFontSize === "function") {
+              var fit = api.fitTextFontSize(text, {
+                fontFamily: "Inter",
+                fontWeight: 700,
+                maxWidth: 1240,
+                baseFontSize: 42,
+                minFontSize: 30,
+                step: 2,
+              });
+              if (fit && fit.fontSize) pill.style.fontSize = fit.fontSize + "px";
+            }
+
+            group.words.forEach(function (w, wi) {
+              if (wi > 0) pill.appendChild(document.createTextNode(" "));
+              var span = document.createElement("span");
+              span.id = "cw-" + gi + "-" + wi;
+              span.className = "w";
+              span.textContent = w.t;
+              pill.appendChild(span);
+            });
+
+            groupEl.appendChild(pill);
+            root.appendChild(groupEl);
+          });
+
+          window.__timelines = window.__timelines || {};
+          var tl = gsap.timeline({ paused: true });
+
+          GROUPS.forEach(function (group, gi) {
+            var groupEl = document.getElementById("cg-" + gi);
+
+            // enter — fromTo, not from: the host re-seeks this sub-composition
+            // every time its slot becomes visible, and from() can desync.
+            tl.fromTo(
+              groupEl,
+              { autoAlpha: 0, y: 14 },
+              { autoAlpha: 1, y: 0, duration: ENTER, ease: "power3.out" },
+              group.start,
+            );
+
+            // progressive fill — each word lights on its own measured onset and
+            // stays lit, so the phrase completes with the voice.
+            group.words.forEach(function (w, wi) {
+              tl.fromTo(
+                "#cw-" + gi + "-" + wi,
+                { color: IDLE },
+                { color: LIT, duration: 0.14, ease: "none" },
+                w.s,
+              );
+            });
+
+            // exit, then the mandatory hard kill exactly at group.end so no group
+            // can bleed into the next one or into the end card.
+            tl.to(
+              groupEl,
+              { autoAlpha: 0, y: -8, duration: EXIT, ease: "power2.in" },
+              group.end - EXIT,
+            );
+            tl.set(groupEl, { opacity: 0, visibility: "hidden" }, group.end);
+          });
+
+          // Self-lint: prove every group is really gone after its own end.
+          //
+          // Call getComputedStyle BARE, not as window.getComputedStyle(el).
+          // Inside a sub-composition the runtime evaluates this script with a
+          // `window` wrapper object (window !== globalThis, though property
+          // reads/writes proxy through to the real window). Retrieving the
+          // native function through the wrapper and calling it as a method
+          // makes the wrapper the receiver, so it throws
+          // `TypeError: Illegal invocation`, the timeline is never registered,
+          // and the render ships whatever DOM state the throw left behind.
+          GROUPS.forEach(function (group, gi) {
+            var el = document.getElementById("cg-" + gi);
+            if (!el) return;
+            tl.seek(group.end + 0.01);
+            var computed = getComputedStyle(el);
+            if (computed.opacity !== "0" && computed.visibility !== "hidden") {
+              console.warn(
+                "[caption-lint] group " +
+                  gi +
+                  " still visible at t=" +
+                  (group.end + 0.01).toFixed(2) +
+                  "s",
+              );
+            }
+          });
+          tl.seek(0);
+
+          window.__timelines["captions"] = tl;
+        })();
+      </script>
+    </template>
+  </body>
+</html>
diff --git a/examples/docs-reference-project/frame.md b/examples/docs-reference-project/frame.md
new file mode 100644
index 0000000000..99cfa04793
--- /dev/null
+++ b/examples/docs-reference-project/frame.md
@@ -0,0 +1,101 @@
+---
+name: example-com-intro
+source: https://example.com (live capture, 2026-08-03)
+format: 1920x1080
+colors:
+  canvas: "#E9E9E7" # the page's #EEEEEE stepped down ~3% so the plate lifts off it
+  surface: "#EEEEEE" # the captured page's own background — the plate
+  ink: "#1B1B1B" # the page's #000 at .8 opacity, resolved
+  ink_muted: "#5A5C63" # supporting copy
+  accent: "#334488" # the page's own link colour
+  hairline: "#D6D6D6" # plate edge
+  caption_bg: "#1B1B1B"
+  caption_idle: "#9A9A9A"
+  caption_active: "#FFFFFF"
+fonts:
+  display: "Inter" # 900 only
+  body: "Inter" # 400 only
+  mono: "IBM Plex Mono" # 400 only
+type_ramp:
+  title: "132px / 1.02 / -0.035em / 900"
+  address: "42px / 1 / 0 / 400 mono"
+  support: "38px / 1.45 / -0.005em / 400"
+  caption: "42px / 1.2 / -0.005em / 700"
+radius: "10px"
+motion:
+  ease: "power4.out for reveals, power3.out for copy, expo.out for rules"
+  reveal: "cued to the narration's measured word timings — never front-loaded"
+  idle: "none; the film holds still rather than drifting"
+---
+
+# frame.md — example.com intro
+
+## Where the palette comes from
+
+Nothing here is chosen by taste. `capture/extracted/tokens.json` reports three colours
+on the live page — `#EEEEEE`, `#000000`, `#334488` — and its CSS resolves them:
+
+```css
+body {
+  background: #eee;
+  font-family: system-ui, sans-serif;
+}
+div {
+  opacity: 0.8;
+} /* so #000 ink actually reads as ~#333 */
+a {
+  color: #348;
+} /* → #334488 */
+```
+
+One value is **derived, not read**: the composition canvas. If the frame were also
+`#EEEEEE`, the captured plate would have the same fill as the ground and only its
+border would separate them. Stepping the canvas down to `#E9E9E7` gives the plate
+somewhere to lift from, which is why its shadow reads at all.
+
+## Type
+
+Only weights the renderer actually embeds:
+
+| Role    | Family        | Weight | Why                                                  |
+| ------- | ------------- | ------ | ---------------------------------------------------- |
+| Title   | Inter         | 900    | bundled; the lockup's whole job is mass              |
+| Body    | Inter         | 400    | bundled                                              |
+| Address | IBM Plex Mono | 400    | bundled; mono says "this is a literal string"        |
+| Caption | Inter         | 700    | bundled; the heaviest weight that is not the title's |
+
+Weights 500 and 600 are **not** in the embedded bundle. Asking for them means the
+render machine synthesises or substitutes, and preview stops matching output. Snap to
+400 / 700 / 900.
+
+## The one graphic device
+
+A single accent family, three instances, each with a job:
+
+1. **Top rule** — 6px, full bleed. The frame asserting itself at t=0.1.
+2. **Brand bar** — 200×8px under the title. Separates the name from the address.
+3. **Page marker** — 5px vertical, inside the plate, beside the page's own content block.
+   This is the film's argument: _those are the page's words, not ours._
+
+Anything that is not one of those three is not in this composition. No sheen, no
+ambient bloom, no grid or paper texture, no gradient mesh, no drifting camera.
+
+## The plate rule
+
+The capture is a 1x, 1920×1080 screenshot. It is displayed through a 1000×400 window
+with `object-fit: none`, so the page renders at exactly 1:1 and its real 16px body
+text is as crisp as it is in a browser.
+
+Consequences, and they are hard rules:
+
+- **Never scale the plate.** Any zoom past 1:1 resamples a 1x capture into mush.
+- **Never rotate the plate.** A 3D tilt does the same thing more expensively.
+- Entrance is `x` translate + opacity only.
+
+## Caption skin
+
+Fixed lower band, `184px` tall (17% of the canvas), reserved structurally — the stage
+ends where the band begins, so nothing can ever collide with it. Dark pill, centred,
+one phrase group visible at a time, per-word emphasis by luminance only
+(`#9A9A9A → #FFFFFF`). No colour flashing, no scale popping, no scatter exits, no
+random placement.
diff --git a/examples/docs-reference-project/hyperframes.json b/examples/docs-reference-project/hyperframes.json
new file mode 100644
index 0000000000..ec2e3c2efd
--- /dev/null
+++ b/examples/docs-reference-project/hyperframes.json
@@ -0,0 +1,13 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/hyperframes.json",
+  "registry": "https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry",
+  "paths": {
+    "blocks": "compositions",
+    "components": "compositions/components",
+    "assets": "assets"
+  },
+  "media": {
+    "autoProxy": true
+  },
+  "authoringSkill": "product-launch-video"
+}
diff --git a/examples/docs-reference-project/index.html b/examples/docs-reference-project/index.html
new file mode 100644
index 0000000000..07e7e0e679
--- /dev/null
+++ b/examples/docs-reference-project/index.html
@@ -0,0 +1,370 @@
+<!doctype html>
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "title",          "type": "string", "label": "Title",              "default": "Example Domain",                                                    "placeholder": "the page heading, verbatim", "maxLength": 26 },
+    { "id": "accent",         "type": "color",  "label": "Accent",             "default": "#334488" },
+    { "id": "supportingLine", "type": "string", "label": "Supporting line",    "default": "For use in documentation examples without needing permission.", "placeholder": "one sentence, verbatim from the page", "maxLength": 90 },
+    { "id": "siteUrl",        "type": "string", "label": "Address",            "default": "example.com",                                                       "placeholder": "bare domain, no scheme", "maxLength": 32 },
+    { "id": "pageImage",      "type": "string", "label": "Captured page (1x)", "default": "assets/example-com.png",                                            "placeholder": "a 1920x1080 1x capture" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>example.com — 10s intro</title>
+    <!-- Keep `data-composition-variables` (on <html>, above) pure ASCII.
+         The <html> element's attributes are consumed before this <meta charset>
+         is in effect, so a literal em dash in a `default` renders as mojibake
+         (â€"). Use a JSON escape instead: \u2014 survives, verified by
+         snapshot. Text in the document body and inside a sub-composition's
+         <template> is unaffected; both decode as UTF-8 normally. -->
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #e9e9e7;
+      }
+
+      /* ------------------------------------------------------------------
+         Palette. Every value is read off the live capture except --canvas,
+         which is example.com's own #EEEEEE stepped down ~3% so the captured
+         plate has something to lift off. See frame.md.
+
+         --accent is not declared here: the runtime publishes every scalar
+         variable as a --<id> custom property on the composition root, so
+         `var(--accent, #334488)` follows the declared default and any
+         --variables override, with the literal as a plain-HTML fallback.
+         ------------------------------------------------------------------ */
+      #root {
+        --canvas: #e9e9e7;
+        --surface: #eeeeee;
+        --ink: #1b1b1b;
+        --ink-muted: #5a5c63;
+        --hairline: #d6d6d6;
+        /* the caption band, reserved structurally rather than by eye */
+        --band: 184px;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        font-family: "Inter", sans-serif;
+        color: var(--ink);
+        -webkit-font-smoothing: antialiased;
+      }
+
+      /* ---------- track 0 · ground ---------- */
+      .ground {
+        position: absolute;
+        inset: 0;
+        background: var(--canvas);
+      }
+      .wash {
+        position: absolute;
+        left: -260px;
+        top: -320px;
+        width: 1500px;
+        height: 1200px;
+        border-radius: 50%;
+        background: radial-gradient(
+          closest-side,
+          rgba(255, 255, 255, 0.82),
+          rgba(255, 255, 255, 0)
+        );
+      }
+      .top-rule {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 1920px;
+        height: 6px;
+        background: var(--accent, #334488);
+        transform-origin: 0% 50%;
+      }
+
+      /* ---------- track 1 · stage ----------
+         The stage stops where the caption band starts, so no amount of copy
+         can ever collide with a caption. Nothing is positioned by eye. */
+      .stage-grid {
+        position: absolute;
+        left: 120px;
+        right: 120px;
+        top: 0;
+        bottom: var(--band);
+        display: flex;
+        align-items: center;
+        gap: 40px;
+      }
+
+      /* left · the lockup (640px) */
+      .col-type {
+        flex: 0 0 640px;
+      }
+      .title-mask {
+        display: block;
+        overflow: hidden;
+      }
+      .title {
+        display: block;
+        font-size: 132px;
+        font-weight: 900; /* bundled weight — 500/600 are not embedded */
+        line-height: 1.02;
+        letter-spacing: -0.035em;
+        color: var(--ink);
+      }
+      .brand-bar {
+        display: block;
+        width: 200px;
+        height: 8px;
+        margin-top: 34px;
+        background: var(--accent, #334488);
+        transform-origin: 0% 50%;
+      }
+      .address {
+        display: block;
+        margin-top: 30px;
+        font-family: "IBM Plex Mono", monospace;
+        font-size: 42px;
+        font-weight: 400;
+        line-height: 1;
+        color: var(--accent, #334488);
+      }
+      .support {
+        display: block;
+        margin-top: 34px;
+        max-width: 640px;
+        font-size: 38px;
+        font-weight: 400;
+        line-height: 1.45;
+        letter-spacing: -0.005em;
+        color: var(--ink-muted);
+      }
+
+      /* right · the real captured page (1000px) ----------
+         object-fit:none renders the 1920×1080 capture at its intrinsic size and
+         object-position crops to the window, so the page's own 16px body text is
+         pixel-exact 1:1. That is also why the plate never scales and never
+         rotates: a 1x capture has no headroom above 1:1. */
+      .col-plate {
+        flex: 1 1 auto;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+      }
+      .plate {
+        position: relative;
+        width: 1000px;
+        height: 400px;
+        overflow: hidden;
+        border: 1px solid var(--hairline);
+        border-radius: 10px;
+        background: var(--surface);
+        box-shadow:
+          0 28px 64px -18px rgba(27, 27, 27, 0.3),
+          0 2px 5px rgba(27, 27, 27, 0.06);
+      }
+      .page {
+        display: block;
+        width: 998px;
+        height: 398px;
+        object-fit: none;
+        object-position: -300px -104px;
+      }
+      /* the film's one argument: those are the page's words, not ours.
+         Measured against the capture — the content block sits at x 384–1131,
+         y 162–260 of the 1920×1080 screenshot, i.e. 84,58 → 831,156 in here. */
+      .page-marker {
+        position: absolute;
+        left: 56px;
+        top: 58px;
+        width: 5px;
+        height: 98px;
+        border-radius: 2px;
+        background: var(--accent, #334488);
+        transform-origin: 50% 0%;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="10"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <!-- track 0 · ground. The fill lives on a clip layer, never on #root:
+           the producer can drop the root element's own background. -->
+      <div id="bg" class="clip" data-start="0" data-duration="10" data-track-index="0">
+        <div class="ground"></div>
+        <div class="wash" data-layout-allow-overflow></div>
+        <div id="top-rule" class="top-rule"></div>
+      </div>
+
+      <!-- track 1 · stage -->
+      <div id="stage" class="clip" data-start="0" data-duration="10" data-track-index="1">
+        <div class="stage-grid">
+          <div class="col-type">
+            <div class="title-mask">
+              <h1 id="title" class="title" data-var-text="title">Example Domain</h1>
+            </div>
+            <span id="brand-bar" class="brand-bar"></span>
+            <span id="address" class="address" data-var-text="siteUrl">example.com</span>
+            <p id="support" class="support" data-var-text="supportingLine">
+              For use in documentation examples without needing permission.
+            </p>
+          </div>
+
+          <div class="col-plate">
+            <div id="plate" class="plate">
+              <!-- data-var-src binds the source to the `pageImage` variable; the
+                   authored src is the fallback. Keep data-var-src BEFORE src:
+                   `lint`'s missing_local_asset scan matches the last `src=` in
+                   the tag, and `data-var-src` ends in `src` too, so the reverse
+                   order makes it read the variable id as a file path. -->
+              <img
+                id="page"
+                class="page"
+                data-var-src="pageImage"
+                src="assets/example-com.png"
+                alt="The example.com landing page: the heading Example Domain, one sentence of body copy, and a Learn more link."
+              />
+              <div id="page-marker" class="page-marker"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- track 2 · captions overlay (sub-composition) -->
+      <div
+        id="captions-slot"
+        data-composition-id="captions"
+        data-composition-src="compositions/captions.html"
+        data-start="0"
+        data-duration="10"
+        data-track-index="2"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+
+      <!-- audio. The framework owns playback; never call play()/pause()/seek. -->
+      <audio
+        id="bgm"
+        src="assets/bgm.wav"
+        data-start="0"
+        data-duration="10"
+        data-track-index="8"
+        data-volume="0.34"
+      ></audio>
+      <audio
+        id="vo"
+        src="assets/narration.wav"
+        data-start="1"
+        data-duration="6.97"
+        data-track-index="9"
+        data-volume="1"
+      ></audio>
+      <audio
+        id="sfx-plate"
+        src="assets/sfx-whoosh.mp3"
+        data-start="2.62"
+        data-duration="0.6"
+        data-track-index="10"
+        data-volume="0.2"
+      ></audio>
+      <audio
+        id="sfx-marker"
+        src="assets/sfx-tick.mp3"
+        data-start="4.54"
+        data-duration="0.4"
+        data-track-index="11"
+        data-volume="0.16"
+      ></audio>
+    </div>
+
+    <script>
+      // One paused timeline, built synchronously, keyed to data-composition-id.
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+
+      // Load states. Everything that animates in is hidden explicitly, so a
+      // paused seek to t=0 renders the true first frame. Initial transforms are
+      // set here rather than in CSS: a CSS transform plus a GSAP tween on the
+      // same property fight each other (lint: gsap_css_transform_conflict).
+      gsap.set("#top-rule", { scaleX: 0 });
+      gsap.set("#title", { yPercent: 106 });
+      gsap.set("#brand-bar", { scaleX: 0 });
+      gsap.set(["#address", "#support"], { autoAlpha: 0, y: 20 });
+      gsap.set("#plate", { autoAlpha: 0, x: 140 });
+      gsap.set("#page-marker", { scaleY: 0 });
+
+      // Every cue below is a measured word timing from assets/narration.wav
+      // (see SCRIPT.md), not an estimate.
+
+      // 0.10s — the frame asserts itself. Narration has not started.
+      tl.to("#top-rule", { scaleX: 1, duration: 0.9, ease: "power3.out" }, 0.1);
+
+      // 1.00s — VO "This is…" · the name rises out of its mask.
+      tl.to("#title", { yPercent: 0, duration: 0.68, ease: "power4.out" }, 1.0);
+
+      // 1.55s / 1.78s — the brand rule, then VO "…example.com." lands the address.
+      tl.to("#brand-bar", { scaleX: 1, duration: 0.44, ease: "expo.out" }, 1.55);
+      tl.to("#address", { autoAlpha: 1, y: 0, duration: 0.55, ease: "power3.out" }, 1.78);
+
+      // 2.66s — VO "The domain…" · the real page travels in. x and opacity ONLY.
+      tl.to("#plate", { autoAlpha: 1, x: 0, duration: 0.85, ease: "power4.out" }, 2.66);
+
+      // 4.55s — VO "…examples." · the marker draws beside the page's own content block.
+      tl.to("#page-marker", { scaleY: 1, duration: 0.6, ease: "power2.out" }, 4.55);
+
+      // 5.15 → 6.42s — held read. Deliberately empty; a held frame beats bad motion.
+
+      // 6.42s — VO "…no permission needed." · the last reveal, in the final 30%.
+      tl.to("#support", { autoAlpha: 1, y: 0, duration: 0.68, ease: "power3.out" }, 6.42);
+
+      // 8.03 → 10.00s — still end card. No tween. This is the poster frame.
+
+      // Audio: the bed ducks under the narration, recovers, then fades out.
+      // Volume keyframes are probed off the timeline and applied identically in
+      // preview and render; data-volume is only the static baseline.
+      tl.to("#bgm", { volume: 0.13, duration: 0.6, ease: "sine.inOut" }, 0.7);
+      tl.to("#bgm", { volume: 0.3, duration: 0.9, ease: "sine.inOut" }, 7.7);
+      tl.to("#bgm", { volume: 0, duration: 1.0, ease: "sine.in" }, 9.0);
+
+      window.__timelines["main"] = tl;
+
+      // The documentation embed can change three safe variables without
+      // rebuilding the project. Only the parent iframe is trusted, and each
+      // value is allowlisted and bounded before it touches the composition.
+      window.addEventListener("message", (event) => {
+        if (event.source !== window.parent) return;
+        const message = event.data;
+        if (!message || message.type !== "hyperframes-docs:variables") return;
+
+        const variables = message.variables;
+        if (!variables || typeof variables !== "object") return;
+
+        if (typeof variables.title === "string") {
+          document.getElementById("title").textContent = variables.title.slice(0, 42);
+        }
+        if (typeof variables.supportingLine === "string") {
+          document.getElementById("support").textContent = variables.supportingLine.slice(0, 90);
+        }
+        if (typeof variables.accent === "string" && /^#[0-9a-fA-F]{6}$/.test(variables.accent)) {
+          document.getElementById("root").style.setProperty("--accent", variables.accent);
+        }
+      });
+    </script>
+  </body>
+</html>
diff --git a/examples/docs-reference-project/meta.json b/examples/docs-reference-project/meta.json
new file mode 100644
index 0000000000..0ae9af8d62
--- /dev/null
+++ b/examples/docs-reference-project/meta.json
@@ -0,0 +1,5 @@
+{
+  "id": "docs-reference-project",
+  "name": "docs-reference-project",
+  "createdAt": "2026-08-03T09:05:27.101Z"
+}
diff --git a/examples/docs-reference-project/package.json b/examples/docs-reference-project/package.json
new file mode 100644
index 0000000000..93fcf4e76d
--- /dev/null
+++ b/examples/docs-reference-project/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "docs-reference-project",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "npx --yes hyperframes@0.7.90 preview",
+    "check": "npx --yes hyperframes@0.7.90 check",
+    "render": "npx --yes hyperframes@0.7.90 render",
+    "publish": "npx --yes hyperframes@0.7.90 publish"
+  }
+}
diff --git a/examples/docs-reference-project/transcript.json b/examples/docs-reference-project/transcript.json
new file mode 100644
index 0000000000..c475233e93
--- /dev/null
+++ b/examples/docs-reference-project/transcript.json
@@ -0,0 +1,87 @@
+[
+  {
+    "text": "This",
+    "start": 0.1,
+    "end": 0.36
+  },
+  {
+    "text": "is",
+    "start": 0.36,
+    "end": 0.54
+  },
+  {
+    "text": "example.com,",
+    "start": 0.54,
+    "end": 1.81
+  },
+  {
+    "text": "the",
+    "start": 1.81,
+    "end": 1.95
+  },
+  {
+    "text": "domain",
+    "start": 1.95,
+    "end": 2.24
+  },
+  {
+    "text": "reserved",
+    "start": 2.24,
+    "end": 2.56
+  },
+  {
+    "text": "for",
+    "start": 2.74,
+    "end": 2.81
+  },
+  {
+    "text": "documentation",
+    "start": 2.88,
+    "end": 3.62
+  },
+  {
+    "text": "examples.",
+    "start": 3.74,
+    "end": 4.38
+  },
+  {
+    "text": "Use",
+    "start": 4.48,
+    "end": 4.55
+  },
+  {
+    "text": "it",
+    "start": 4.62,
+    "end": 4.68
+  },
+  {
+    "text": "in",
+    "start": 4.68,
+    "end": 4.8
+  },
+  {
+    "text": "your",
+    "start": 4.8,
+    "end": 5.03
+  },
+  {
+    "text": "docs,",
+    "start": 5.09,
+    "end": 5.36
+  },
+  {
+    "text": "no",
+    "start": 5.48,
+    "end": 5.54
+  },
+  {
+    "text": "permission",
+    "start": 5.54,
+    "end": 5.77
+  },
+  {
+    "text": "needed.",
+    "start": 6.17,
+    "end": 6.68
+  }
+]
diff --git a/package.json b/package.json
index 37140e5ae2..780922306a 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
     "generate:catalog-previews": "tsx scripts/generate-catalog-previews.ts",
     "package:codex-plugin": "node scripts/package-codex-plugin.mjs",
     "upload:docs-images": "bash scripts/upload-docs-images.sh",
+    "docs:bundle-reference": "bun scripts/docs/bundle-live-reference.mjs examples/docs-reference-project examples/docs-reference-project/live/index.html",
     "prepare": "test -d .git && lefthook install || true",
     "lint:registry-items": "node scripts/lint-registry-items.mjs"
   },
diff --git a/scripts/docs/bundle-live-reference.mjs b/scripts/docs/bundle-live-reference.mjs
new file mode 100644
index 0000000000..6918edc36b
--- /dev/null
+++ b/scripts/docs/bundle-live-reference.mjs
@@ -0,0 +1,24 @@
+import { mkdirSync, writeFileSync } from "node:fs";
+import { dirname, relative, resolve, sep } from "node:path";
+
+import { bundleToSingleHtml } from "../../packages/core/src/compiler/index.ts";
+
+const [projectArg, outputArg] = process.argv.slice(2);
+
+if (!projectArg || !outputArg) {
+  console.error("Usage: bun scripts/docs/bundle-live-reference.mjs <project-dir> <output.html>");
+  process.exit(1);
+}
+
+const projectDir = resolve(projectArg);
+const outputPath = resolve(outputArg);
+const bundledHtml = await bundleToSingleHtml(projectDir, { runtime: "inline" });
+const relativeProjectRoot = relative(dirname(outputPath), projectDir).split(sep).join("/");
+const baseHref = relativeProjectRoot ? `${relativeProjectRoot}/` : "./";
+const html = bundledHtml
+  .replace("<head>", `<head>\n    <base href="${baseHref}">`)
+  .replace(/[ \t]+$/gm, "");
+
+mkdirSync(dirname(outputPath), { recursive: true });
+writeFileSync(outputPath, html);
+console.log(`${outputPath} (${Buffer.byteLength(html).toLocaleString()} bytes)`);

From d4de59b18d1c53b6cd11c8a1c6197ee863a37aa0 Mon Sep 17 00:00:00 2001
From: ukimsanov <ular.kimsanov@heygen.com>
Date: Mon, 3 Aug 2026 17:31:10 -0700
Subject: [PATCH 03/11] docs: keep the Reference Project verification report
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Examples page links this file twice — as "What changed after review" and
as "The real verification report" — in the section that makes the project's
brief, source, revision notes, and checks public end to end. It is a published
artifact, not leftover scaffolding.
---
 .../docs-reference-project/VERIFICATION.md    | 285 ++++++++++++++++++
 1 file changed, 285 insertions(+)
 create mode 100644 examples/docs-reference-project/VERIFICATION.md

diff --git a/examples/docs-reference-project/VERIFICATION.md b/examples/docs-reference-project/VERIFICATION.md
new file mode 100644
index 0000000000..2568a110b6
--- /dev/null
+++ b/examples/docs-reference-project/VERIFICATION.md
@@ -0,0 +1,285 @@
+# Verification report — v1 → v2
+
+Project: `examples/docs-reference-project` · **1920×1080 · 10.000s · 30 fps · 300 frames**
+CLI: `hyperframes@0.7.90` (project pin bumped from `0.7.88` during this pass and
+re-verified — see "Toolchain" below).
+
+---
+
+## 1. Gate results
+
+All commands were run in the project directory. These are the actual results.
+
+| Gate                                            | Result                                                      |
+| ----------------------------------------------- | ----------------------------------------------------------- |
+| `npx hyperframes lint --verbose`                | **0 errors, 0 warnings** (2 files scanned)                  |
+| `npx hyperframes check`                         | **passed** — `ok: true`                                     |
+| &nbsp;&nbsp;› lint                              | 0 errors · 0 warnings · 1 info                              |
+| &nbsp;&nbsp;› runtime                           | 0 errors · 0 warnings · 0 info                              |
+| &nbsp;&nbsp;› layout                            | 0 errors · 0 warnings · 1 info                              |
+| &nbsp;&nbsp;› motion                            | 0 findings (no `*.motion.json` sidecars in this project)    |
+| &nbsp;&nbsp;› contrast                          | 0 errors · 0 warnings · 0 info                              |
+| `check --caption-zone "…y0=.83…severity=error"` | **passed** — 0 caption-band collisions across 8 seek points |
+| `npx hyperframes snapshot --at …` (19 frames)   | captured + inspected; 3 contact sheets                      |
+| `npx hyperframes render`                        | **passed** — H.264 1080p + AAC stereo, exactly 10.000s      |
+
+Final media inspection: 1920×1080 H.264, 30 fps, AAC stereo at 48 kHz,
+10.000 seconds. Mean volume is −22.9 dB and the peak is −3.8 dB.
+
+### The two info-level findings, and why they stay
+
+Neither gates the exit code. Both are deliberate.
+
+1. `pointer_events_none` on `compositions/captions.html` → `#root`.
+   The caption overlay spans the whole canvas above the artwork, so its root must be
+   click-through or nothing underneath is selectable in Studio. The pills themselves
+   carry `pointer-events: auto`, so the editable content _is_ selectable — which is
+   exactly what the finding's own fix hint asks for. Keeping `pointer-events: none` is
+   correct; the alternative is an invisible full-canvas div that eats every click.
+
+2. `container_overflow` on `#title` at `t=0.556`, inside `span.title-mask`.
+   This is the mask doing its job: the title starts at `yPercent: 106` and rises into
+   view, so for the first ~0.7s its box is below the mask it is clipped by. Marking the
+   mask `data-layout-allow-overflow` would silence it, but that attribute is inherited
+   and would also disable `text-clipping`, `content-cramped-container` and
+   `foreground-over-panel` on the hero title for the whole composition. A transient info
+   finding is the cheaper price. The finding is reported once, at one sample.
+
+### What "inspected snapshots" means here
+
+19 frames on the **30 fps frame grid** (not arbitrary decimals), chosen to cover every
+beat plus both caption cuts and the caption clear:
+
+`0 · 0.533 · 1.3 · 1.967 · 2.6 · 2.8 · 2.867 · 3.133 · 4.5 · 5.0 · 5.433 · 5.5 · 5.733 · 6.4 · 7.1 · 7.933 · 8.067 · 9.5 · 9.967`
+
+The root declares `data-fps="30"`, so those are real frame times. Requesting an
+off-grid time (e.g. `2.833`) quantises to the nearest frame and renders `2.800` twice —
+which briefly looked like a caption bleed until it was measured. It was not one.
+
+Checked and confirmed:
+
+- The plate lands at 1:1 and the page's real 16px body copy is legible — the headline,
+  the full sentence, and the `Learn more` link all read.
+- The accent marker draws beside the page's own paragraph without touching the link
+  below it (6px clearance, measured).
+- Both caption cuts hand off cleanly. At `2.800` only group 0 is drawn (fading out); at
+  `2.867` only group 1 (fading in). Same at `5.433` / `5.500`. This also holds by
+  construction: group _n_'s hard kill sits at exactly group _n+1_'s start, so before that
+  instant only _n_ can be non-zero and at/after it _n_ is set to `opacity: 0;
+visibility: hidden`.
+- Captions clear by `8.033s`: sampling the whole caption band at `8.067s` gives a
+  darkest pixel of `233` — pure canvas, nothing drawn. The frame then holds a still,
+  caption-free end card through the final frame at `9.967s`.
+- No black frame, no blank panel, no clipped text, no element in the caption band.
+
+`snapshot`'s optional Gemini frame-description pass failed (`API key not valid`) — the
+ambient `GEMINI_API_KEY` is rejected. That is an optional annotation, not a gate; the
+empty `descriptions.md` was deleted rather than shipped as a wall of identical errors.
+Frames were inspected directly.
+
+---
+
+## 2. v1 → v2
+
+v1 is the verified original at `quickstart/example-intro`: same request, same source,
+same 10.0s / 1920×1080 output. v2 keeps its concept — _show the site as it is, the real
+page is the proof_ — and its split composition. What changed, and why.
+
+### 2.1 The capture actually reads now — the one that mattered
+
+v1's biggest defect was invisible in the source and obvious in the render. The capture
+was 1440×810 displayed inside a 940×529 card: **0.65×**. The page's 16px body text
+rendered at roughly 10px in a 1080p frame, so the "real captured page" — the entire
+argument of the video — was an unreadable grey smudge with a tiny cluster in one corner.
+
+v2 shows the capture at **exactly 1:1**. A fresh 1920×1080 1x capture is displayed
+through a 1000×400 window with `object-fit: none; object-position: -300px -104px`, so the
+page's own type renders at the size it renders at in a browser. Three hard rules fall out
+of that, and they are written into `frame.md`:
+
+- the plate **never scales** (a 1x capture has no headroom above 1:1),
+- the plate **never rotates** (v1 tilted it `rotationY: -10° → -4° → -1.5°`, resampling
+  the page text for the entire shot),
+- the entrance is **`x` translate + opacity only**.
+
+`object-fit: none` also means the `<img>` box is exactly 1000×400 instead of a 1920×1080
+element hanging out of an `overflow: hidden` parent, so it needs no
+`data-layout-allow-overflow` and trips no layout finding.
+
+### 2.2 Decorative noise removed
+
+| Removed from v1                                       | Why                                                                                                        |
+| ----------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
+| 160px background grid **and** 4px dot "paper"         | Two textures stacked under a third layer (the light wash). Visible busywork on a flat page.                |
+| The sheen sweep across the card (`7.55 → 8.65s`)      | A stock shine gimmick. It decorated the evidence instead of reading it.                                    |
+| The ambient accent bloom (`5.0s`, then `scale 1.05`)  | Fired 2.5s after the plate landed, cued to nothing.                                                        |
+| `https://example.com` caption under the card          | A label repeating the `example.com` line already on screen, in near-invisible grey.                        |
+| The `Learn more →` pill button                        | Invented UI. The page's action is a plain text link — and it is already visible _in the plate_, as itself. |
+| The 1.9s `rotationY` "settle" + glow scale at the end | Lazy breathing. v2 holds completely still instead.                                                         |
+
+What replaced them is **one** device with a job: a single 5px accent marker that draws
+down the left edge of the page's own content block, on the narration cue
+_"…documentation examples."_ It is the film's argument — _those are the page's words, not
+ours_ — and it is the only new graphic element in v2.
+
+### 2.3 Narration, captions and pacing (new in v2)
+
+v1 was silent except for a music bed, so nothing cued anything; its beats were spaced by
+feel (`0.1 · 0.45 · 1.55 · 2.5 · 3.9 · 5.0 · 6.5 · 7.55`).
+
+v2 has narration, and **every visual cue is a measured word timing**, not an estimate:
+`assets/narration.wav` → `npx hyperframes transcribe --model small.en` →
+`transcript.json` → the tween positions in `index.html` and the group boundaries in
+`compositions/captions.html`. Three phrase captions for three sentences, fixed position,
+one visible at a time, per-word emphasis by luminance only.
+
+Pacing consequence: v1 front-loaded the lockup then idled with decoration. v2's reveals
+land at `1.00 · 1.55 · 1.78 · 2.66 · 4.55 · 6.42` — the last one inside the final 30% —
+with two **deliberately empty** holds (`5.15 → 6.42` mid-film breather, `8.03 → 10.0`
+still end card). The holds are left visibly empty in the timeline source, with comments
+saying so, because a held read beats bad motion.
+
+### 2.4 Determinism fix: non-embedded font weights
+
+v1 asked for `font-weight: 500` on IBM Plex Mono and `600` on Inter. The renderer embeds
+`inter` at **400/700/900** and `ibm-plex-mono` at **400/700** only, so both requests were
+synthesised or substituted on a clean render machine — preview and output could disagree.
+v2 uses only bundled weights: Inter 900 (title) / 400 (body), IBM Plex Mono 400
+(address), Inter 700 (captions). `frame.md` states the rule so an editor cannot
+reintroduce it.
+
+### 2.5 Parameterisation (new in v2)
+
+v1 had no variables — it was a one-off. v2 declares five with useful defaults and wires
+them declaratively (`data-var-text`, `data-var-src`, `var(--accent)`), with no
+`getVariables()` call anywhere, so the composition can front another site by flags alone.
+
+### 2.6 Palette: one derived value, stated as derived
+
+v1's brief claimed the palette was read from the capture, then set the canvas to
+`#eeeeee` — the page's own background. The plate therefore had the same fill as the
+ground and only its border separated them, which is why it read as a faint rectangle.
+
+v2 keeps ink `#1b1b1b` and accent `#334488` from the captured page (its CSS literally
+says `a { color:#348 }`) and steps the **canvas** down to `#e9e9e7`
+so the plate has something to lift off. `frame.md` labels that as the one derived value
+rather than pretending it was read.
+
+### 2.7 One thing v2 gives up
+
+v1's title was two hand-split `<span>`s waterfalling in 0.17s apart — a nicer reveal than
+v2's single masked rise. That split is incompatible with `data-var-text`, which replaces
+an element's own text and cannot drive per-line spans. v2 trades the waterfall for a
+title that is actually a parameter. Called out here because it is a real regression, not
+an oversight.
+
+---
+
+## 3. Two framework bugs found, with reproductions
+
+Both were hit while building this project and both are fixed _in_ this project. Neither
+is a blocker for it.
+
+### 3.1 `window.getComputedStyle()` throws inside a sub-composition
+
+**Severity: high** — the failure is near-silent and ships broken video.
+
+The captions doctrine (`media-use/audio/references/captions/authoring.md` → "Self-lint
+after building timeline") prescribes this snippet verbatim:
+
+```js
+var computed = window.getComputedStyle(el);
+```
+
+Inside a sub-composition it raises `TypeError: Illegal invocation`. The script dies
+mid-self-lint, so `window.__timelines["captions"] = tl` never runs, the runtime waits out
+its registration timeout, and the render captures whatever DOM state the throw left
+behind. Observed symptom: caption group 0 frozen at ~14% opacity for the whole video,
+with `check` reporting it only indirectly as 30 `contrast_aa_failure` errors against a
+background of `rgb(205,205,203)` — a colour that exists nowhere in the design.
+
+Root cause, measured from inside a sub-composition script:
+
+```
+window === globalThis                                  → false
+window.getComputedStyle === globalThis.getComputedStyle → true
+window.__hyperframes.fitTextFontSize                    → function
+window.__timelines                                      → object
+```
+
+The runtime evaluates a sub-composition's inline script with a **`window` wrapper
+object**. Property reads and writes proxy through to the real window, which is why
+`__timelines` and `__hyperframes` work. But retrieving the _same_ native function through
+the wrapper and calling it as a method makes the wrapper the receiver, and native code
+rejects it.
+
+Fix in this project (`compositions/captions.html`), with the reason in a comment:
+
+```js
+var computed = getComputedStyle(el); // bare — not window.getComputedStyle
+```
+
+`globalThis.getComputedStyle(el)` also works. Suggested upstream actions: make the
+wrapper bind native `Window` methods, and fix the snippet in the captions doctrine —
+every agent that follows it inside a sub-composition inherits this bug.
+
+### 3.2 `lint`'s `missing_local_asset` mis-parses `data-var-src`
+
+**Severity: low** — loud, harmless, one-line workaround.
+
+```html
+<img src="assets/example-com.png" data-var-src="pageImage" />
+```
+
+fails lint with `missing_local_asset: <img> element references local file(s) not found in
+the project: pageImage`. The rule's regex is
+`/<(video|img|source)\b[^>]*\bsrc\s*=\s*["']([^"']+)["'][^>]*>/gi`; the greedy `[^>]*`
+takes the **last** `src=` in the tag, and `data-var-src` ends in `src` with a `-` before
+it, so `\b` matches and the variable id is read as a filename.
+
+Workaround used here: author `data-var-src` **before** `src`. Suggested upstream fix:
+require a whitespace or `"` boundary before `src` (`(?<=[\s"'])src\s*=`), or explicitly
+skip `data-var-src`.
+
+---
+
+## 4. One documented authoring constraint
+
+Not a bug, but a real trap worth stating: **keep `data-composition-variables` pure
+ASCII.** It lives on `<html>`, which is consumed before `<meta charset>` is in effect, so
+a literal em dash in a `default` renders as `â€"`. Verified both ways by snapshot: the
+literal character mojibakes, the JSON escape `\u2014` renders a correct em dash. Text in
+the document body and inside a sub-composition `<template>` is unaffected (the runtime
+`fetch`es sub-compositions and decodes them as UTF-8).
+
+v2 ships ASCII-only variable defaults and states the rule in a comment in `index.html`.
+
+---
+
+## 5. Toolchain
+
+The project's `package.json` pinned `hyperframes@0.7.88`. Per the CLI's own upgrade
+protocol the pin was probed before any render-affecting command:
+
+```
+npx hyperframes@latest upgrade --project . --check
+  → would bump project scripts 0.7.88 → 0.7.90
+```
+
+Applied, then verified: `npx hyperframes check` passes on **0.7.90**. A passing check
+confirms the compositions still validate on the new version — not that output is
+frame-identical to the old pin. The project now runs on `0.7.90`; `hyperframes info`
+reports `updateAvailable: false`.
+
+---
+
+## 6. Blockers
+
+**None.** `lint` and `check` pass with zero errors and zero warnings, snapshots are
+captured and inspected, and the final MP4 passed the media gate.
+
+Two non-blocking environment notes: the ambient `GEMINI_API_KEY` is rejected by the API,
+so `snapshot`'s optional vision descriptions are unavailable; and `hyperframes feedback`
+was not sent, because the CLI's protocol sends it only after verifying a successful
+render. Both framework findings in §3 are written up here in reproducible form so they
+can be filed with that render.

From f3cb9cbdfe174951f78b506d37d0d3022997a064 Mon Sep 17 00:00:00 2001
From: ukimsanov <ular.kimsanov@heygen.com>
Date: Mon, 3 Aug 2026 17:42:40 -0700
Subject: [PATCH 04/11] docs: state the Reference Project embed's isolation
 contract
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The composition is fetched from the CDN and handed to the player as a blob:
URL, which inherits the docs origin, and <hyperframes-player> sandboxes its
iframe with allow-scripts + allow-same-origin. So the embedded composition runs
with script access to this origin.

That is a consequence of how the player works — it drives seeking through the
iframe's document, which a cross-origin frame does not expose — not something
this component can fix. Serving the CDN URL directly would isolate the frame
and break playback.

The guard is therefore the source, so the comment says so out loud: src must
stay a first-party path we publish, never user- or community-supplied HTML.
---
 docs/snippets/live-reference-project.jsx | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/docs/snippets/live-reference-project.jsx b/docs/snippets/live-reference-project.jsx
index 8bb9805a7b..12c8c98866 100644
--- a/docs/snippets/live-reference-project.jsx
+++ b/docs/snippets/live-reference-project.jsx
@@ -59,6 +59,24 @@ export const LiveReferenceProject = ({ src, poster }) => {
         return response.text();
       })
       .then((html) => {
+        // ISOLATION CONTRACT — read before pointing `src` anywhere new.
+        //
+        // A blob: URL inherits this page's origin, and <hyperframes-player>
+        // sandboxes its iframe with allow-scripts + allow-same-origin
+        // (packages/player/src/iframe-dom.ts). The composition therefore runs
+        // with script access to the docs origin, not in a hostile-content
+        // sandbox.
+        //
+        // That is deliberate, not an oversight: the player drives seeking
+        // through the iframe's document, which a cross-origin frame does not
+        // expose. Serving the CDN URL directly would isolate the frame and
+        // break playback.
+        //
+        // The guard is the source, so keep it a guard: `src` must stay a
+        // first-party path we publish
+        // (static.heygen.ai/hyperframes-oss/docs/reference-project/...).
+        // Never point this component at user-supplied, community-supplied, or
+        // third-party HTML.
         const assetBase = new URL("../", src).toString();
         const preparedHtml = html.includes('<base href="../">')
           ? html.replace('<base href="../">', `<base href="${assetBase}">`)

From 3cc42785b9b0e962cf39637df876cf770bc2247b Mon Sep 17 00:00:00 2001
From: ukimsanov <ular.kimsanov@heygen.com>
Date: Mon, 3 Aug 2026 18:52:00 -0700
Subject: [PATCH 05/11] fix(docs): resolve reduced-motion on the first render,
 and the embed's dep gap
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Both defects from Rames Jusso's review on #2977. Neither is visible today
because nothing imports these files yet, which is what makes them cheap now.

**Reduced motion resolved one paint too late, in all three grids.**
`useState(false)` plus a `matchMedia` read in an effect meant the first
committed render always emitted `<video src autoPlay loop>`; a reduce-motion
visitor had 6 + 8 + 4 tiles already fetching before the attributes came off.
`autoPlay` also overrides `preload="metadata"`, so those were the files, not
metadata probes — and dropping `src` with no following `load()` is not a
reliable abort. A lazy initializer knows the answer on the first render.

**LiveReferenceProject never sent the initial variables.** The sending effect
read `playerRef.current`, assigned by the effect above it on the commit where
`compositionSrc` lands — a commit with nothing in the sending effect's dep
array. So it ran once against a null ref and never again. It looked correct
only because the three defaults match what the composition already renders.

Also from the same review:

- The object URL could outlive its revoke: once the body resolves, `abort()`
  no longer stops the chain, so the blob could be minted after cleanup ran with
  `objectUrl` still undefined. Same `cancelled` guard the effect above uses.
- `postMessage` targeted `"*"` while the isolation comment argues the frame is
  same-origin. Naming `window.location.origin` turns that prose guard into an
  enforced one.
- Nothing reached a terminal state when the player script never arrived:
  `whenDefined()` does not reject, and a later mount reuses the tag without its
  error listener. A CSP rule or content blocker never fires `error` at all.
  A deadline covers every path instead of sitting on "Loading…" forever.
- `loadFailed` was never cleared, so one transient failure stuck.
- The README claimed a clone works without `git lfs pull`. It does for the
  visuals; both WAVs are pointers and they are the bed and the voiceover, so
  the captions would play over silence. Says so now.
- The bundler stripped trailing whitespace document-wide while inlining the
  runtime, which reaches inside script template literals where those spaces are
  data. It also assumed a literal `<head>` and would silently ship an embed with
  no `<base>`. Strip removed, anchor asserted.

Copilot's five "missing hook imports" comments are wrong — Mintlify pre-injects
the hooks, and `TemplateCard.jsx`, cited as the counter-example, uses the
`export function` form the same page says is unsupported.
---
 docs/snippets/advanced-path-grid.jsx      | 12 +++++++++--
 docs/snippets/docs-video.jsx              | 12 +++++++++--
 docs/snippets/live-reference-project.jsx  | 26 +++++++++++++++++++++--
 docs/snippets/workflow-chooser.jsx        | 12 +++++++++--
 examples/docs-reference-project/README.md |  8 +++++++
 scripts/docs/bundle-live-reference.mjs    | 12 ++++++++---
 6 files changed, 71 insertions(+), 11 deletions(-)

diff --git a/docs/snippets/advanced-path-grid.jsx b/docs/snippets/advanced-path-grid.jsx
index 97d2c41bf7..fe27ae739d 100644
--- a/docs/snippets/advanced-path-grid.jsx
+++ b/docs/snippets/advanced-path-grid.jsx
@@ -40,11 +40,19 @@ export const AdvancedPathGrid = () => {
       poster: `${CDN}/studio-check-render-loop-v2.jpg`,
     },
   ];
-  const [reducedMotion, setReducedMotion] = useState(false);
+  // Lazy initializer, not a post-mount effect: with useState(false) the first
+  // committed render emits <video src autoPlay loop> and only then drops the
+  // attributes, so a reduce-motion visitor has already started fetching every
+  // tile. autoPlay also overrides preload="metadata", and removing src without
+  // a following load() is not a reliable abort. CSS cannot reach any of this.
+  const [reducedMotion, setReducedMotion] = useState(
+    () =>
+      typeof window !== "undefined" &&
+      window.matchMedia("(prefers-reduced-motion: reduce)").matches,
+  );
 
   useEffect(() => {
     const query = window.matchMedia("(prefers-reduced-motion: reduce)");
-    setReducedMotion(query.matches);
     const onChange = (event) => setReducedMotion(event.matches);
     query.addEventListener("change", onChange);
     return () => query.removeEventListener("change", onChange);
diff --git a/docs/snippets/docs-video.jsx b/docs/snippets/docs-video.jsx
index 13177ebaf7..1128b5c044 100644
--- a/docs/snippets/docs-video.jsx
+++ b/docs/snippets/docs-video.jsx
@@ -419,11 +419,19 @@ export const ShowcaseWall = () => {
     },
   ];
   const [openId, setOpenId] = useState(null);
-  const [reduced, setReduced] = useState(false);
+  // Lazy initializer, not a post-mount effect: with useState(false) the first
+  // committed render emits <video src autoPlay loop> and only then drops the
+  // attributes, so a reduce-motion visitor has already started fetching every
+  // tile. autoPlay also overrides preload="metadata", and removing src without
+  // a following load() is not a reliable abort. CSS cannot reach any of this.
+  const [reduced, setReduced] = useState(
+    () =>
+      typeof window !== "undefined" &&
+      window.matchMedia("(prefers-reduced-motion: reduce)").matches,
+  );
 
   useEffect(() => {
     const query = window.matchMedia("(prefers-reduced-motion: reduce)");
-    setReduced(query.matches);
     const onChange = (event) => setReduced(event.matches);
     query.addEventListener("change", onChange);
     return () => query.removeEventListener("change", onChange);
diff --git a/docs/snippets/live-reference-project.jsx b/docs/snippets/live-reference-project.jsx
index 12c8c98866..395e16ec26 100644
--- a/docs/snippets/live-reference-project.jsx
+++ b/docs/snippets/live-reference-project.jsx
@@ -42,8 +42,17 @@ export const LiveReferenceProject = ({ src, poster }) => {
       .then(markReady)
       .catch(() => !cancelled && setLoadFailed(true));
 
+    // whenDefined() never rejects for a script that failed to load, and a later
+    // mount reuses the existing tag without its error listener. A CSP rule or a
+    // content blocker can also kill the request without firing `error` at all.
+    // Without a deadline every one of those paths sits on "Loading…" forever.
+    const deadline = window.setTimeout(() => {
+      if (!cancelled && !window.customElements?.get("hyperframes-player")) setLoadFailed(true);
+    }, 10000);
+
     return () => {
       cancelled = true;
+      window.clearTimeout(deadline);
     };
   }, [mounted]);
 
@@ -51,8 +60,11 @@ export const LiveReferenceProject = ({ src, poster }) => {
     if (!playerReady || typeof window === "undefined") return undefined;
 
     const controller = new AbortController();
+    let cancelled = false;
     let objectUrl;
 
+    setLoadFailed(false);
+
     fetch(src, { signal: controller.signal })
       .then((response) => {
         if (!response.ok) throw new Error(`Composition request failed: ${response.status}`);
@@ -81,6 +93,9 @@ export const LiveReferenceProject = ({ src, poster }) => {
         const preparedHtml = html.includes('<base href="../">')
           ? html.replace('<base href="../">', `<base href="${assetBase}">`)
           : html.replace("<head>", `<head><base href="${assetBase}">`);
+        // abort() no longer stops the chain once the body has resolved, so the
+        // blob can be minted after cleanup ran with objectUrl still undefined.
+        if (cancelled) return;
         objectUrl = URL.createObjectURL(new Blob([preparedHtml], { type: "text/html" }));
         setCompositionSrc(objectUrl);
       })
@@ -89,6 +104,7 @@ export const LiveReferenceProject = ({ src, poster }) => {
       });
 
     return () => {
+      cancelled = true;
       controller.abort();
       if (objectUrl) URL.revokeObjectURL(objectUrl);
     };
@@ -121,14 +137,20 @@ export const LiveReferenceProject = ({ src, poster }) => {
           type: "hyperframes-docs:variables",
           variables: { title, supportingLine, accent },
         },
-        "*",
+        // The blob inherits this origin, so name it. A wildcard would hand the
+        // payload to third-party HTML the day someone ignores the contract above.
+        window.location.origin,
       );
     };
 
     player.addEventListener("ready", sendVariables);
     sendVariables();
     return () => player.removeEventListener("ready", sendVariables);
-  }, [playerReady, title, supportingLine, accent]);
+  // compositionSrc is load-bearing here, not decoration: playerRef.current is
+  // assigned by the effect above on the commit where compositionSrc lands.
+  // Without it this effect runs once, on a commit where the ref is still null,
+  // and never again — so the initial variables are never sent.
+  }, [playerReady, compositionSrc, title, supportingLine, accent]);
 
   const reset = () => {
     setTitle("Example Domain");
diff --git a/docs/snippets/workflow-chooser.jsx b/docs/snippets/workflow-chooser.jsx
index 04746e33fc..eced2933cf 100644
--- a/docs/snippets/workflow-chooser.jsx
+++ b/docs/snippets/workflow-chooser.jsx
@@ -68,11 +68,19 @@ export const WorkflowChooser = () => {
     },
   ];
 
-  const [reducedMotion, setReducedMotion] = useState(false);
+  // Lazy initializer, not a post-mount effect: with useState(false) the first
+  // committed render emits <video src autoPlay loop> and only then drops the
+  // attributes, so a reduce-motion visitor has already started fetching every
+  // tile. autoPlay also overrides preload="metadata", and removing src without
+  // a following load() is not a reliable abort. CSS cannot reach any of this.
+  const [reducedMotion, setReducedMotion] = useState(
+    () =>
+      typeof window !== "undefined" &&
+      window.matchMedia("(prefers-reduced-motion: reduce)").matches,
+  );
 
   useEffect(() => {
     const query = window.matchMedia("(prefers-reduced-motion: reduce)");
-    setReducedMotion(query.matches);
     const onChange = (event) => setReducedMotion(event.matches);
     query.addEventListener("change", onChange);
     return () => query.removeEventListener("change", onChange);
diff --git a/examples/docs-reference-project/README.md b/examples/docs-reference-project/README.md
index 3426d79213..27c5dc22b2 100644
--- a/examples/docs-reference-project/README.md
+++ b/examples/docs-reference-project/README.md
@@ -95,6 +95,14 @@ project never calls `play()`, `pause()` or seeks.
 | 10    | `#sfx-plate`  | `sfx-whoosh.mp3` | `0.20`   | at `2.62s`, under the plate's travel       |
 | 11    | `#sfx-marker` | `sfx-tick.mp3`   | `0.16`   | at `4.54s`, on the marker draw             |
 
+<!-- The two WAVs are the only assets over the repository's 500 KB non-LFS
+     limit, so they are the only ones stored as pointers. -->
+
+Both WAVs are Git LFS pointers, so **run `git lfs pull` before rendering**. Without
+it the bed and the voiceover are 130-byte stubs and the captions — timed from
+`narration.wav` — play over silence. The two MP3 stings and the capture PNG are
+stored plainly and need no extra step.
+
 The bed is not a static level. Volume is **keyframed on the timeline**, which the runtime
 probes and applies identically in preview and render:
 
diff --git a/scripts/docs/bundle-live-reference.mjs b/scripts/docs/bundle-live-reference.mjs
index 6918edc36b..a6fe54504e 100644
--- a/scripts/docs/bundle-live-reference.mjs
+++ b/scripts/docs/bundle-live-reference.mjs
@@ -15,9 +15,15 @@ const outputPath = resolve(outputArg);
 const bundledHtml = await bundleToSingleHtml(projectDir, { runtime: "inline" });
 const relativeProjectRoot = relative(dirname(outputPath), projectDir).split(sep).join("/");
 const baseHref = relativeProjectRoot ? `${relativeProjectRoot}/` : "./";
-const html = bundledHtml
-  .replace("<head>", `<head>\n    <base href="${baseHref}">`)
-  .replace(/[ \t]+$/gm, "");
+if (!bundledHtml.includes("<head>")) {
+  console.error("Bundled output has no <head>; refusing to publish an embed with no <base>.");
+  process.exit(1);
+}
+
+// Only the <base> is injected. Trailing whitespace is left alone: the bundle
+// inlines the runtime, so a document-wide strip would also reach inside script
+// template literals, where trailing spaces are data.
+const html = bundledHtml.replace("<head>", `<head>\n    <base href="${baseHref}">`);
 
 mkdirSync(dirname(outputPath), { recursive: true });
 writeFileSync(outputPath, html);

From 49fb40471e3986207879c73d9fb582e7e568ccae Mon Sep 17 00:00:00 2001
From: ukimsanov <ular.kimsanov@heygen.com>
Date: Mon, 3 Aug 2026 19:04:05 -0700
Subject: [PATCH 06/11] fix(docs): stop preview loops when Reduce Motion is
 turned on mid-session
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Miguel's changes-requested on #2977. He is right about the mechanism: dropping
`src` and `autoPlay` through React props neither pauses a playing element nor
aborts its selected resource, so a visitor who turned Reduce Motion on with the
page already open kept every tile running.

Measured in a browser rather than argued from the spec, same clip, same
sequence:

  playing                 paused=false  t=2.90  readyState=4  networkState=1
  React props only        paused=false  t=3.90  readyState=4  networkState=1
  + pause/removeAttr/load paused=true   t=0     readyState=0  networkState=0

The middle row is the bug: time still advancing, resource still held.

Rames' follow-up asked for a remount-to-poster instead, because a video that
ends with `src` removed holds its last frame and `poster` only paints before
playback begins. `load()` covers that too — it drops readyState to
HAVE_NOTHING, which is precisely the state that paints the poster. Confirmed
side by side on screen: the React-props-only tile sits on an arbitrary mid-clip
frame, the pause/load tile shows the poster again. So no remount is needed.

The guard cannot be shared as code — Mintlify compiles each snippet in
isolation and forbids one importing another — so it is copy-pasted into all
three grids. A duplicated invariant is the kind that rots, and a rendering test
would mean adding React to a repo that only carries it inside packages/studio,
plus mocking Mintlify's hook-injection contract with a mock that can stay green
while the page breaks. `scripts/check-docs-snippet-motion.mjs` asserts the
source instead, wired into `bun run lint`, with unit tests covering both edges.

That gate immediately found `docs/snippets/TemplateCard.jsx`: autoplays with no
reduced-motion handling at all. It is imported by zero pages, and it uses the
`export function` form Mintlify's constraints page says is unsupported, so it
would not work if it were. Deleted rather than fixed.
---
 docs/snippets/TemplateCard.jsx             | 59 ---------------
 docs/snippets/advanced-path-grid.jsx       | 16 +++++
 docs/snippets/docs-video.jsx               | 16 +++++
 docs/snippets/workflow-chooser.jsx         | 17 ++++-
 package.json                               |  5 +-
 scripts/check-docs-snippet-motion.mjs      | 84 ++++++++++++++++++++++
 scripts/check-docs-snippet-motion.test.mjs | 60 ++++++++++++++++
 7 files changed, 195 insertions(+), 62 deletions(-)
 delete mode 100644 docs/snippets/TemplateCard.jsx
 create mode 100644 scripts/check-docs-snippet-motion.mjs
 create mode 100644 scripts/check-docs-snippet-motion.test.mjs

diff --git a/docs/snippets/TemplateCard.jsx b/docs/snippets/TemplateCard.jsx
deleted file mode 100644
index 26446368b1..0000000000
--- a/docs/snippets/TemplateCard.jsx
+++ /dev/null
@@ -1,59 +0,0 @@
-export function TemplateCard({ id, title, description, href, portrait }) {
-  const [hovering, setHovering] = React.useState(false);
-
-  const imgSrc = `https://static.heygen.ai/hyperframes-oss/docs/images/templates/${id}.png`;
-  const videoSrc = `https://static.heygen.ai/hyperframes-oss/docs/images/templates/${id}.mp4`;
-
-  return (
-    <a
-      href={href}
-      className="not-prose group block rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden transition-shadow hover:shadow-lg no-underline"
-      onMouseEnter={() => setHovering(true)}
-      onMouseLeave={() => setHovering(false)}
-    >
-      <div
-        className="relative overflow-hidden bg-gray-100 dark:bg-gray-800"
-        style={{ aspectRatio: portrait ? "9/16" : "16/9" }}
-      >
-        <img
-          src={imgSrc}
-          alt={`${title} example`}
-          className="absolute inset-0 w-full h-full object-cover"
-          style={{
-            opacity: hovering ? 0 : 1,
-            transition: "opacity 0.2s ease",
-          }}
-        />
-        {hovering && (
-          <video
-            src={videoSrc}
-            autoPlay
-            muted
-            loop
-            playsInline
-            className="absolute inset-0 w-full h-full object-cover"
-          />
-        )}
-      </div>
-      <div className="p-4">
-        <h3 className="text-base font-semibold text-gray-900 dark:text-white m-0">
-          {title}
-        </h3>
-        <p className="text-sm text-gray-500 dark:text-gray-400 mt-1 mb-0">
-          {description}
-        </p>
-      </div>
-    </a>
-  );
-}
-
-export function TemplateGrid({ children }) {
-  return (
-    <div
-      className="not-prose grid gap-4"
-      style={{ gridTemplateColumns: "repeat(2, 1fr)" }}
-    >
-      {children}
-    </div>
-  );
-}
diff --git a/docs/snippets/advanced-path-grid.jsx b/docs/snippets/advanced-path-grid.jsx
index fe27ae739d..a4677bb080 100644
--- a/docs/snippets/advanced-path-grid.jsx
+++ b/docs/snippets/advanced-path-grid.jsx
@@ -45,6 +45,7 @@ export const AdvancedPathGrid = () => {
   // attributes, so a reduce-motion visitor has already started fetching every
   // tile. autoPlay also overrides preload="metadata", and removing src without
   // a following load() is not a reliable abort. CSS cannot reach any of this.
+  const gridRef = useRef(null);
   const [reducedMotion, setReducedMotion] = useState(
     () =>
       typeof window !== "undefined" &&
@@ -58,8 +59,23 @@ export const AdvancedPathGrid = () => {
     return () => query.removeEventListener("change", onChange);
   }, []);
 
+  // React can drop src/autoPlay/loop from the DOM, but neither pauses a playing
+  // element nor aborts its selected resource: a media element keeps its current
+  // resource until the load algorithm is re-invoked, and `autoplay` only governs
+  // the first play. So a visitor who turns Reduce Motion on mid-session would
+  // otherwise keep every tile playing and downloading. Stop them for real.
+  useEffect(() => {
+    if (!reducedMotion || !gridRef.current) return;
+    for (const video of gridRef.current.querySelectorAll("video")) {
+      video.pause();
+      video.removeAttribute("src");
+      video.load();
+    }
+  }, [reducedMotion]);
+
   return (
     <div
+      ref={gridRef}
       style={{
         display: "grid",
         gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 260px), 1fr))",
diff --git a/docs/snippets/docs-video.jsx b/docs/snippets/docs-video.jsx
index 1128b5c044..28e8c866fc 100644
--- a/docs/snippets/docs-video.jsx
+++ b/docs/snippets/docs-video.jsx
@@ -424,6 +424,7 @@ export const ShowcaseWall = () => {
   // attributes, so a reduce-motion visitor has already started fetching every
   // tile. autoPlay also overrides preload="metadata", and removing src without
   // a following load() is not a reliable abort. CSS cannot reach any of this.
+  const wallRef = useRef(null);
   const [reduced, setReduced] = useState(
     () =>
       typeof window !== "undefined" &&
@@ -483,8 +484,23 @@ export const ShowcaseWall = () => {
     );
   }
 
+  // React can drop src/autoPlay/loop from the DOM, but neither pauses a playing
+  // element nor aborts its selected resource: a media element keeps its current
+  // resource until the load algorithm is re-invoked, and `autoplay` only governs
+  // the first play. So a visitor who turns Reduce Motion on mid-session would
+  // otherwise keep every tile playing and downloading. Stop them for real.
+  useEffect(() => {
+    if (!reduced || !wallRef.current) return;
+    for (const video of wallRef.current.querySelectorAll("video")) {
+      video.pause();
+      video.removeAttribute("src");
+      video.load();
+    }
+  }, [reduced]);
+
   return (
     <div
+      ref={wallRef}
       style={{
         display: "grid",
         gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))",
diff --git a/docs/snippets/workflow-chooser.jsx b/docs/snippets/workflow-chooser.jsx
index eced2933cf..66c3869eff 100644
--- a/docs/snippets/workflow-chooser.jsx
+++ b/docs/snippets/workflow-chooser.jsx
@@ -73,6 +73,7 @@ export const WorkflowChooser = () => {
   // attributes, so a reduce-motion visitor has already started fetching every
   // tile. autoPlay also overrides preload="metadata", and removing src without
   // a following load() is not a reliable abort. CSS cannot reach any of this.
+  const gridRef = useRef(null);
   const [reducedMotion, setReducedMotion] = useState(
     () =>
       typeof window !== "undefined" &&
@@ -86,8 +87,22 @@ export const WorkflowChooser = () => {
     return () => query.removeEventListener("change", onChange);
   }, []);
 
+  // React can drop src/autoPlay/loop from the DOM, but neither pauses a playing
+  // element nor aborts its selected resource: a media element keeps its current
+  // resource until the load algorithm is re-invoked, and `autoplay` only governs
+  // the first play. So a visitor who turns Reduce Motion on mid-session would
+  // otherwise keep every tile playing and downloading. Stop them for real.
+  useEffect(() => {
+    if (!reducedMotion || !gridRef.current) return;
+    for (const video of gridRef.current.querySelectorAll("video")) {
+      video.pause();
+      video.removeAttribute("src");
+      video.load();
+    }
+  }, [reducedMotion]);
+
   return (
-    <div className="hf-workflow-routes">
+    <div className="hf-workflow-routes" ref={gridRef}>
       {routes.map((route) => (
         <a
           key={route.href}
diff --git a/package.json b/package.json
index 780922306a..1fed96ee37 100644
--- a/package.json
+++ b/package.json
@@ -26,12 +26,13 @@
     "sync-schemas:check": "tsx scripts/sync-schemas.ts --check",
     "sync:package-subpaths": "node scripts/package-subpaths.mjs --write",
     "check:package-subpaths": "node scripts/package-subpaths.mjs",
-    "lint": "bun run check:tracked-artifacts && bun run check:workspace-contracts && bun run check:gcp-cloud-run-dockerfile && bun run check:package-cycles && bun run check:package-subpaths && bun run check:cli-process-ownership && oxlint . && tsx scripts/lint-skills.ts && node scripts/check-skill-mirror.mjs",
+    "lint": "bun run check:docs-snippet-motion && bun run check:tracked-artifacts && bun run check:workspace-contracts && bun run check:gcp-cloud-run-dockerfile && bun run check:package-cycles && bun run check:package-subpaths && bun run check:cli-process-ownership && oxlint . && tsx scripts/lint-skills.ts && node scripts/check-skill-mirror.mjs",
     "check:gcp-cloud-run-dockerfile": "bun run --cwd packages/gcp-cloud-run test:dockerfile-workspaces",
     "lint:skills": "tsx scripts/lint-skills.ts",
     "check:skill-mirror": "node scripts/check-skill-mirror.mjs",
     "lint:fix": "oxlint --fix .",
     "check:tracked-artifacts": "node scripts/check-tracked-artifacts.mjs",
+    "check:docs-snippet-motion": "node scripts/check-docs-snippet-motion.mjs",
     "check:workspace-contracts": "node scripts/check-workspace-contracts.mjs",
     "check:package-cycles": "node scripts/check-package-cycles.mjs",
     "check:cli-process-ownership": "node scripts/check-cli-process-ownership.mjs",
@@ -47,7 +48,7 @@
     "player:perf": "bun run --filter @hyperframes/player perf",
     "format:check": "oxfmt --check .",
     "knip": "knip",
-    "test:scripts": "node --import tsx --test scripts/check-tracked-artifacts.test.mjs scripts/check-workspace-contracts.test.mjs scripts/check-package-cycles.test.mjs scripts/check-cli-process-ownership.test.mjs scripts/package-subpaths.test.mjs scripts/validate-release-channel.test.mjs scripts/publish-workflow.test.mjs scripts/draft-changelog.test.ts scripts/set-version.test.ts scripts/release-prepare.test.ts scripts/cli-options.test.ts scripts/changelog-weekly.test.ts scripts/claude-plugin-compression.test.ts scripts/studio-runtime-smoke.test.mjs scripts/verify-packed-manifests.test.mjs scripts/lint-skills.test.mjs packages/gcp-cloud-run/check-dockerfile-workspaces.test.mjs",
+    "test:scripts": "node --import tsx --test scripts/check-tracked-artifacts.test.mjs scripts/check-docs-snippet-motion.test.mjs scripts/check-workspace-contracts.test.mjs scripts/check-package-cycles.test.mjs scripts/check-cli-process-ownership.test.mjs scripts/package-subpaths.test.mjs scripts/validate-release-channel.test.mjs scripts/publish-workflow.test.mjs scripts/draft-changelog.test.ts scripts/set-version.test.ts scripts/release-prepare.test.ts scripts/cli-options.test.ts scripts/changelog-weekly.test.ts scripts/claude-plugin-compression.test.ts scripts/studio-runtime-smoke.test.mjs scripts/verify-packed-manifests.test.mjs scripts/lint-skills.test.mjs packages/gcp-cloud-run/check-dockerfile-workspaces.test.mjs",
     "test:skills": "node --test 'skills/**/*.test.mjs'",
     "generate:previews": "tsx scripts/generate-template-previews.ts",
     "generate:catalog-previews": "tsx scripts/generate-catalog-previews.ts",
diff --git a/scripts/check-docs-snippet-motion.mjs b/scripts/check-docs-snippet-motion.mjs
new file mode 100644
index 0000000000..89a9cc1c64
--- /dev/null
+++ b/scripts/check-docs-snippet-motion.mjs
@@ -0,0 +1,84 @@
+/**
+ * Docs snippets that autoplay preview loops must honour prefers-reduced-motion
+ * on BOTH edges, and the guard cannot be shared as code.
+ *
+ * Mintlify compiles each file in `docs/snippets/` in isolation and forbids one
+ * snippet importing another, so the guard is necessarily copy-pasted into every
+ * grid that autoplays. A duplicated invariant is exactly the kind that rots, so
+ * it is asserted here instead.
+ *
+ * Two distinct failures, both real, both found in review on #2977:
+ *
+ *   First paint — `useState(false)` plus a `matchMedia` read in an effect means
+ *   the first committed render emits `<video src autoPlay loop>` and only then
+ *   pulls the attributes. `autoPlay` overrides `preload="metadata"`, so those
+ *   are the files, not metadata probes. A lazy initializer knows on render one.
+ *
+ *   Runtime change — dropping `src` and `autoPlay` via React props neither
+ *   pauses a playing element nor aborts its selected resource: a media element
+ *   keeps its resource until the load algorithm is re-invoked, and `autoplay`
+ *   only governs the first play. Turning Reduce Motion on mid-session would
+ *   otherwise leave every tile playing and downloading.
+ *
+ * A rendering test would mean adding React to a repository that only carries it
+ * inside `packages/studio`, and mocking Mintlify's hook-injection contract — a
+ * mock that can stay green while the real page breaks. This asserts the source
+ * instead, which is what actually regresses.
+ */
+
+import { readFileSync, readdirSync } from "node:fs";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const SNIPPETS_DIR = resolve(dirname(fileURLToPath(import.meta.url)), "..", "docs", "snippets");
+
+/** A file needs the guard only if it autoplays something. */
+export function autoplays(source) {
+  return /\bautoPlay(?:=\{|\s|\/?>)/.test(source);
+}
+
+export function findMotionGuardViolations(source) {
+  const problems = [];
+
+  if (!/useState\(\s*\(\)\s*=>/.test(source) || !source.includes("prefers-reduced-motion")) {
+    problems.push(
+      "reads prefers-reduced-motion after mount instead of in a useState lazy initializer, " +
+        "so the first committed render autoplays before the preference is known",
+    );
+  }
+
+  const stopsPlayback =
+    source.includes(".pause()") &&
+    source.includes(".load()") &&
+    /removeAttribute\(\s*"src"/.test(source);
+  if (!stopsPlayback) {
+    problems.push(
+      "never actively stops playback when the preference flips to reduce; " +
+        "dropping src/autoPlay through React props does not pause an element or abort its resource — " +
+        'pause(), removeAttribute("src") and load() are all required',
+    );
+  }
+
+  return problems;
+}
+
+export function auditSnippets(dir = SNIPPETS_DIR) {
+  return readdirSync(dir)
+    .filter((name) => name.endsWith(".jsx") || name.endsWith(".tsx"))
+    .map((name) => ({ name, source: readFileSync(join(dir, name), "utf8") }))
+    .filter(({ source }) => autoplays(source))
+    .map(({ name, source }) => ({ name, problems: findMotionGuardViolations(source) }))
+    .filter(({ problems }) => problems.length > 0);
+}
+
+if (import.meta.url === `file://${process.argv[1]}`) {
+  const failures = auditSnippets();
+  if (failures.length > 0) {
+    console.error("Docs snippets that autoplay must honour prefers-reduced-motion:\n");
+    for (const { name, problems } of failures) {
+      for (const problem of problems) console.error(`  docs/snippets/${name} — ${problem}`);
+    }
+    console.error("\nSee the header of scripts/check-docs-snippet-motion.mjs for why.");
+    process.exit(1);
+  }
+}
diff --git a/scripts/check-docs-snippet-motion.test.mjs b/scripts/check-docs-snippet-motion.test.mjs
new file mode 100644
index 0000000000..52d6194897
--- /dev/null
+++ b/scripts/check-docs-snippet-motion.test.mjs
@@ -0,0 +1,60 @@
+import { strict as assert } from "node:assert";
+import { test } from "node:test";
+
+import {
+  auditSnippets,
+  autoplays,
+  findMotionGuardViolations,
+} from "./check-docs-snippet-motion.mjs";
+
+const GUARDED = `
+  const [reducedMotion, setReducedMotion] = useState(
+    () =>
+      typeof window !== "undefined" &&
+      window.matchMedia("(prefers-reduced-motion: reduce)").matches,
+  );
+  useEffect(() => {
+    if (!reducedMotion || !gridRef.current) return;
+    for (const video of gridRef.current.querySelectorAll("video")) {
+      video.pause();
+      video.removeAttribute("src");
+      video.load();
+    }
+  }, [reducedMotion]);
+  return <video autoPlay={!reducedMotion} />;
+`;
+
+test("a guarded snippet passes", () => {
+  assert.deepEqual(findMotionGuardViolations(GUARDED), []);
+});
+
+test("reading the preference after mount is caught — the first-paint fetch", () => {
+  const lateRead = GUARDED.replace(
+    /const \[reducedMotion[\s\S]*?\);\n/,
+    "const [reducedMotion, setReducedMotion] = useState(false);\n",
+  );
+  const problems = findMotionGuardViolations(lateRead);
+  assert.equal(problems.length, 1);
+  assert.match(problems[0], /lazy initializer/);
+});
+
+test("false -> true with no active stop is caught — the regression Magi asked for", () => {
+  const noStop = GUARDED.replace(/\s*video\.pause\(\);[\s\S]*?video\.load\(\);/, "");
+  const problems = findMotionGuardViolations(noStop);
+  assert.equal(problems.length, 1);
+  assert.match(problems[0], /does not pause an element or abort its resource/);
+});
+
+test("dropping only load\\(\\) is still caught", () => {
+  const partial = GUARDED.replace("      video.load();\n", "");
+  assert.equal(findMotionGuardViolations(partial).length, 1);
+});
+
+test("snippets that never autoplay are out of scope", () => {
+  assert.equal(autoplays('<video controls muted playsInline preload="metadata" />'), false);
+  assert.equal(autoplays("<video autoPlay={!reduced} />"), true);
+});
+
+test("every autoplaying snippet in docs/snippets currently satisfies the guard", () => {
+  assert.deepEqual(auditSnippets(), []);
+});

From e1a03c63af646793330c0edd733c81e0e429b1b1 Mon Sep 17 00:00:00 2001
From: ukimsanov <ular.kimsanov@heygen.com>
Date: Mon, 3 Aug 2026 19:07:52 -0700
Subject: [PATCH 07/11] refactor(scripts): split the motion guard into named
 predicates
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fallow flagged findMotionGuardViolations at CRAP 42 — a finding this branch
introduced, so it gets fixed rather than suppressed, same as the catalog
generator earlier in the stack.

The two conditions are now their own predicates behind a small requirements
table, which drops the branch count under the threshold and makes each rule
readable on its own line. Same output, same tests.
---
 scripts/check-docs-snippet-motion.mjs | 45 ++++++++++++++++-----------
 1 file changed, 27 insertions(+), 18 deletions(-)

diff --git a/scripts/check-docs-snippet-motion.mjs b/scripts/check-docs-snippet-motion.mjs
index 89a9cc1c64..e566c6462c 100644
--- a/scripts/check-docs-snippet-motion.mjs
+++ b/scripts/check-docs-snippet-motion.mjs
@@ -37,29 +37,38 @@ export function autoplays(source) {
   return /\bautoPlay(?:=\{|\s|\/?>)/.test(source);
 }
 
-export function findMotionGuardViolations(source) {
-  const problems = [];
-
-  if (!/useState\(\s*\(\)\s*=>/.test(source) || !source.includes("prefers-reduced-motion")) {
-    problems.push(
-      "reads prefers-reduced-motion after mount instead of in a useState lazy initializer, " +
-        "so the first committed render autoplays before the preference is known",
-    );
-  }
+/** The preference must be known on the first render, not after the first effect. */
+export function readsPreferenceLazily(source) {
+  return /useState\(\s*\(\)\s*=>/.test(source) && source.includes("prefers-reduced-motion");
+}
 
-  const stopsPlayback =
+/** React props alone neither pause an element nor abort its resource. */
+export function stopsPlaybackActively(source) {
+  return (
     source.includes(".pause()") &&
     source.includes(".load()") &&
-    /removeAttribute\(\s*"src"/.test(source);
-  if (!stopsPlayback) {
-    problems.push(
+    /removeAttribute\(\s*"src"/.test(source)
+  );
+}
+
+const REQUIREMENTS = [
+  {
+    holds: readsPreferenceLazily,
+    problem:
+      "reads prefers-reduced-motion after mount instead of in a useState lazy initializer, " +
+      "so the first committed render autoplays before the preference is known",
+  },
+  {
+    holds: stopsPlaybackActively,
+    problem:
       "never actively stops playback when the preference flips to reduce; " +
-        "dropping src/autoPlay through React props does not pause an element or abort its resource — " +
-        'pause(), removeAttribute("src") and load() are all required',
-    );
-  }
+      "dropping src/autoPlay through React props does not pause an element or abort its resource — " +
+      'pause(), removeAttribute("src") and load() are all required',
+  },
+];
 
-  return problems;
+export function findMotionGuardViolations(source) {
+  return REQUIREMENTS.filter((rule) => !rule.holds(source)).map((rule) => rule.problem);
 }
 
 export function auditSnippets(dir = SNIPPETS_DIR) {

From 2a75276040098c8d19a6447627c675a3d4103e7b Mon Sep 17 00:00:00 2001
From: ukimsanov <ular.kimsanov@heygen.com>
Date: Mon, 3 Aug 2026 19:38:23 -0700
Subject: [PATCH 08/11] fix(docs): move the stop effect above ShowcaseWall's
 early return
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Rames' changes-requested on `e1a03c63`. The effect I added in the previous
commit landed below `if (open) return`, so `ShowcaseWall` called five hooks on
the grid render and four once a tile was open. That is a conditional hook:
clicking a tile — the component's primary interaction — threw "Rendered fewer
hooks than expected".

Worth naming why it landed in one of three. `workflow-chooser` and
`advanced-path-grid` have no early return, so the same paste position was fine
there. `ShowcaseWall` is the only one with a conditional return and it got the
same copy. That is the duplication cost this script's own header warns about,
showing up in the commit that added the script.

**The bespoke gate could not have caught it, and now the generic one does.**
`.oxlintrc.json` already loaded the `react` plugin and never excluded `docs/`
— only `.prettierignore` does, which is why formatting is not a finding here
but linting reaches these files. Naming the two hook rules in an override
scoped to `docs/snippets/**` reports this bug directly, and also reports the
`compositionSrc` dependency gap from round one that was found by reading.
Verified both ways: reintroducing the conditional hook produces
`react-hooks(rules-of-hooks)`, and `bunx oxlint .` is clean repo-wide, so
nothing lit up in `packages/studio`.

**Two holes in the script itself, both from the same review.**

It matched whole files while the invariant is per component, so a second
unguarded grid in `docs-video.jsx` would have ridden in on `ShowcaseWall`'s
guard. It now splits by component. That immediately surfaced the distinction
between a component that decides to autoplay and one that forwards its caller's
`autoPlay` prop — `DocsVideo` only ever plays because a reader clicked, so it
does not owe a preference check.

And `readsPreferenceLazily` never tied its halves: any lazy initializer plus
the media-query string anywhere in the file passed, which is the original bug
satisfying the check written to prevent it. The query now has to sit inside the
initializer's own expression.

Both holes have tests. fallow is clean at 0 introduced.
---
 .oxlintrc.json                             | 16 ++++-
 docs/snippets/docs-video.jsx               | 27 ++++----
 scripts/check-docs-snippet-motion.mjs      | 74 ++++++++++++++++++----
 scripts/check-docs-snippet-motion.test.mjs | 54 +++++++++++++---
 4 files changed, 135 insertions(+), 36 deletions(-)

diff --git a/.oxlintrc.json b/.oxlintrc.json
index 3107feae70..40afcb08e5 100644
--- a/.oxlintrc.json
+++ b/.oxlintrc.json
@@ -3,7 +3,7 @@
   "categories": {
     "correctness": "error"
   },
-  "plugins": ["react", "typescript"],
+  "plugins": ["react", "react-hooks", "typescript"],
   "ignorePatterns": [
     ".scratch/",
     "dist/",
@@ -24,7 +24,19 @@
       ],
       "excludeFiles": ["**/*.test.ts", "**/*.test.tsx", "packages/cli/src/telemetry/feedback.ts"],
       "rules": {
-        "no-console": ["error", { "allow": ["error", "warn"] }]
+        "no-console": [
+          "error",
+          {
+            "allow": ["error", "warn"]
+          }
+        ]
+      }
+    },
+    {
+      "files": ["docs/snippets/**/*.jsx", "docs/snippets/**/*.tsx"],
+      "rules": {
+        "react-hooks/rules-of-hooks": "error",
+        "react-hooks/exhaustive-deps": "warn"
       }
     }
   ]
diff --git a/docs/snippets/docs-video.jsx b/docs/snippets/docs-video.jsx
index 28e8c866fc..7dacfc3a12 100644
--- a/docs/snippets/docs-video.jsx
+++ b/docs/snippets/docs-video.jsx
@@ -438,6 +438,20 @@ export const ShowcaseWall = () => {
     return () => query.removeEventListener("change", onChange);
   }, []);
 
+  // React can drop src/autoPlay/loop from the DOM, but neither pauses a playing
+  // element nor aborts its selected resource: a media element keeps its current
+  // resource until the load algorithm is re-invoked, and `autoplay` only governs
+  // the first play. So a visitor who turns Reduce Motion on mid-session would
+  // otherwise keep every tile playing and downloading. Stop them for real.
+  useEffect(() => {
+    if (!reduced || !wallRef.current) return;
+    for (const video of wallRef.current.querySelectorAll("video")) {
+      video.pause();
+      video.removeAttribute("src");
+      video.load();
+    }
+  }, [reduced]);
+
   const open = films.find((film) => film.id === openId) || null;
 
   if (open) {
@@ -484,19 +498,6 @@ export const ShowcaseWall = () => {
     );
   }
 
-  // React can drop src/autoPlay/loop from the DOM, but neither pauses a playing
-  // element nor aborts its selected resource: a media element keeps its current
-  // resource until the load algorithm is re-invoked, and `autoplay` only governs
-  // the first play. So a visitor who turns Reduce Motion on mid-session would
-  // otherwise keep every tile playing and downloading. Stop them for real.
-  useEffect(() => {
-    if (!reduced || !wallRef.current) return;
-    for (const video of wallRef.current.querySelectorAll("video")) {
-      video.pause();
-      video.removeAttribute("src");
-      video.load();
-    }
-  }, [reduced]);
 
   return (
     <div
diff --git a/scripts/check-docs-snippet-motion.mjs b/scripts/check-docs-snippet-motion.mjs
index e566c6462c..d3f018813b 100644
--- a/scripts/check-docs-snippet-motion.mjs
+++ b/scripts/check-docs-snippet-motion.mjs
@@ -32,14 +32,57 @@ import { fileURLToPath } from "node:url";
 
 const SNIPPETS_DIR = resolve(dirname(fileURLToPath(import.meta.url)), "..", "docs", "snippets");
 
-/** A file needs the guard only if it autoplays something. */
+/**
+ * Split a snippet into its exported components.
+ *
+ * The invariant is per component, not per file: `docs-video.jsx` already holds
+ * two, so a whole-file match lets a second unguarded grid ride in on the first
+ * one's guard.
+ */
+export function splitComponents(source) {
+  const starts = [...source.matchAll(/^export\s+(?:const|function)\s+(\w+)/gm)];
+  return starts.map((match, index) => ({
+    name: match[1],
+    body: source.slice(match.index, starts[index + 1]?.index ?? source.length),
+  }));
+}
+
+/**
+ * A component needs the guard only if it *decides* to autoplay.
+ *
+ * `DocsVideo` forwards its caller's `autoPlay` prop and only ever plays because
+ * a reader clicked, so it is not the component that owes a preference check —
+ * whoever passes the prop is.
+ */
 export function autoplays(source) {
-  return /\bautoPlay(?:=\{|\s|\/?>)/.test(source);
+  const withoutPassthrough = source.replace(/autoPlay=\{\s*autoPlay\s*\}/g, "");
+  return /autoPlay=\{/.test(withoutPassthrough) || /^\s*autoPlay\s*$/m.test(withoutPassthrough);
+}
+
+/** The text between the parentheses of one `useState(` call. */
+function argumentAt(source, openParen) {
+  let depth = 0;
+  let index = openParen;
+  do {
+    depth += Number(source[index] === "(") - Number(source[index] === ")");
+    index += 1;
+  } while (depth > 0 && index < source.length);
+  return source.slice(openParen + 1, index - 1);
 }
 
-/** The preference must be known on the first render, not after the first effect. */
+/**
+ * The preference must be known on the first render, and both halves have to be
+ * the same expression. A lazy initializer for unrelated state, plus the media
+ * query read in a mount effect, is the original bug — so the query has to sit
+ * inside the initializer, not merely nearby.
+ */
 export function readsPreferenceLazily(source) {
-  return /useState\(\s*\(\)\s*=>/.test(source) && source.includes("prefers-reduced-motion");
+  return [...source.matchAll(/useState\(/g)]
+    .map((call) => argumentAt(source, call.index + "useState".length))
+    .some(
+      (argument) =>
+        /^\s*\(\s*\)\s*=>/.test(argument) && argument.includes("prefers-reduced-motion"),
+    );
 }
 
 /** React props alone neither pause an element nor abort its resource. */
@@ -55,7 +98,7 @@ const REQUIREMENTS = [
   {
     holds: readsPreferenceLazily,
     problem:
-      "reads prefers-reduced-motion after mount instead of in a useState lazy initializer, " +
+      "reads prefers-reduced-motion after mount instead of inside a useState lazy initializer, " +
       "so the first committed render autoplays before the preference is known",
   },
   {
@@ -73,19 +116,26 @@ export function findMotionGuardViolations(source) {
 
 export function auditSnippets(dir = SNIPPETS_DIR) {
   return readdirSync(dir)
-    .filter((name) => name.endsWith(".jsx") || name.endsWith(".tsx"))
-    .map((name) => ({ name, source: readFileSync(join(dir, name), "utf8") }))
-    .filter(({ source }) => autoplays(source))
-    .map(({ name, source }) => ({ name, problems: findMotionGuardViolations(source) }))
-    .filter(({ problems }) => problems.length > 0);
+    .filter((name) => /\.(?:jsx|tsx)$/.test(name))
+    .flatMap((name) =>
+      splitComponents(readFileSync(join(dir, name), "utf8"))
+        .filter((component) => autoplays(component.body))
+        .map((component) => ({
+          name,
+          component: component.name,
+          problems: findMotionGuardViolations(component.body),
+        })),
+    )
+    .filter((finding) => finding.problems.length > 0);
 }
 
 if (import.meta.url === `file://${process.argv[1]}`) {
   const failures = auditSnippets();
   if (failures.length > 0) {
     console.error("Docs snippets that autoplay must honour prefers-reduced-motion:\n");
-    for (const { name, problems } of failures) {
-      for (const problem of problems) console.error(`  docs/snippets/${name} — ${problem}`);
+    for (const { name, component, problems } of failures) {
+      for (const problem of problems)
+        console.error(`  docs/snippets/${name} → ${component} — ${problem}`);
     }
     console.error("\nSee the header of scripts/check-docs-snippet-motion.mjs for why.");
     process.exit(1);
diff --git a/scripts/check-docs-snippet-motion.test.mjs b/scripts/check-docs-snippet-motion.test.mjs
index 52d6194897..1d04e81721 100644
--- a/scripts/check-docs-snippet-motion.test.mjs
+++ b/scripts/check-docs-snippet-motion.test.mjs
@@ -5,9 +5,10 @@ import {
   auditSnippets,
   autoplays,
   findMotionGuardViolations,
+  splitComponents,
 } from "./check-docs-snippet-motion.mjs";
 
-const GUARDED = `
+const GUARDED = `export const Grid = () => {
   const [reducedMotion, setReducedMotion] = useState(
     () =>
       typeof window !== "undefined" &&
@@ -22,9 +23,10 @@ const GUARDED = `
     }
   }, [reducedMotion]);
   return <video autoPlay={!reducedMotion} />;
+};
 `;
 
-test("a guarded snippet passes", () => {
+test("a guarded component passes", () => {
   assert.deepEqual(findMotionGuardViolations(GUARDED), []);
 });
 
@@ -38,23 +40,57 @@ test("reading the preference after mount is caught — the first-paint fetch", (
   assert.match(problems[0], /lazy initializer/);
 });
 
-test("false -> true with no active stop is caught — the regression Magi asked for", () => {
+test("false -> true with no active stop is caught", () => {
   const noStop = GUARDED.replace(/\s*video\.pause\(\);[\s\S]*?video\.load\(\);/, "");
   const problems = findMotionGuardViolations(noStop);
   assert.equal(problems.length, 1);
   assert.match(problems[0], /does not pause an element or abort its resource/);
 });
 
-test("dropping only load\\(\\) is still caught", () => {
-  const partial = GUARDED.replace("      video.load();\n", "");
-  assert.equal(findMotionGuardViolations(partial).length, 1);
+test("dropping only load() is still caught", () => {
+  assert.equal(findMotionGuardViolations(GUARDED.replace("      video.load();\n", "")).length, 1);
 });
 
-test("snippets that never autoplay are out of scope", () => {
-  assert.equal(autoplays('<video controls muted playsInline preload="metadata" />'), false);
+// Both gaps below were found by review on #2977, against an earlier whole-file
+// version of this check that passed all of the cases above.
+
+test("a lazy initializer for unrelated state does not satisfy the preference read", () => {
+  const decoupled = GUARDED.replace(
+    /const \[reducedMotion[\s\S]*?\);\n/,
+    "const [id] = useState(() => makeId());\n  const [reducedMotion, setReducedMotion] = useState(false);\n" +
+      '  useEffect(() => setReducedMotion(window.matchMedia("(prefers-reduced-motion: reduce)").matches), []);\n',
+  );
+  const problems = findMotionGuardViolations(decoupled);
+  assert.equal(
+    problems.length,
+    1,
+    "a lazy initializer anywhere must not vouch for the media query",
+  );
+  assert.match(problems[0], /lazy initializer/);
+});
+
+test("a second unguarded component cannot ride in on the first one's guard", () => {
+  const twoComponents = `${GUARDED}
+export const OtherGrid = () => {
+  return <video autoPlay={true} />;
+};
+`;
+  const components = splitComponents(twoComponents);
+  assert.deepEqual(
+    components.map((component) => component.name),
+    ["Grid", "OtherGrid"],
+  );
+  assert.deepEqual(findMotionGuardViolations(components[0].body), []);
+  assert.equal(findMotionGuardViolations(components[1].body).length, 2);
+});
+
+test("forwarding a caller's autoPlay prop does not make a component owe the guard", () => {
+  assert.equal(autoplays('<video autoPlay={autoPlay} preload="metadata" />'), false);
+  assert.equal(autoplays("({ autoPlay = false }) => <video autoPlay={autoPlay} />"), false);
   assert.equal(autoplays("<video autoPlay={!reduced} />"), true);
+  assert.equal(autoplays('<video controls muted preload="metadata" />'), false);
 });
 
-test("every autoplaying snippet in docs/snippets currently satisfies the guard", () => {
+test("every autoplaying component in docs/snippets currently satisfies the guard", () => {
   assert.deepEqual(auditSnippets(), []);
 });

From 7030efab7f83b9a396d482c036941659ab37fc81 Mon Sep 17 00:00:00 2001
From: ukimsanov <ular.kimsanov@heygen.com>
Date: Mon, 3 Aug 2026 20:37:06 -0700
Subject: [PATCH 09/11] fix(scripts): close the two silent gaps in the motion
 gate
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Both from Rames' approval pass on #2977, and both found by running these
functions rather than reading them. Both fail the same quiet way: a component
`autoplays` misses is filtered out before any requirement runs, so the gate
reports zero problems instead of a violation.

`autoplays` had become narrower than the version it replaced. Excluding the
`autoPlay={autoPlay}` passthrough was right, but the replacement only matched
`autoPlay={` or `autoPlay` alone on a line, so `<video autoPlay muted />` on one
line slipped through. Restored the old breadth. Two things are stripped first
rather than one — the passthrough, and the prop's own default in the signature,
which is a declaration and not a use. Without the second strip, `DocsVideo` is
asked to own a decision it only forwards.

`splitComponents` anchored on `^export`, so anything not exported folded into
the previous exported component and inherited its guard. Same hole as the
whole-file match, narrowed from file scope to non-export scope. The anchor no
longer requires `export`.

Ten tests now, including his exact examples for both.
---
 scripts/check-docs-snippet-motion.mjs      | 10 +++++---
 scripts/check-docs-snippet-motion.test.mjs | 27 ++++++++++++++++++++++
 2 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/scripts/check-docs-snippet-motion.mjs b/scripts/check-docs-snippet-motion.mjs
index d3f018813b..1a19f3c999 100644
--- a/scripts/check-docs-snippet-motion.mjs
+++ b/scripts/check-docs-snippet-motion.mjs
@@ -40,7 +40,7 @@ const SNIPPETS_DIR = resolve(dirname(fileURLToPath(import.meta.url)), "..", "doc
  * one's guard.
  */
 export function splitComponents(source) {
-  const starts = [...source.matchAll(/^export\s+(?:const|function)\s+(\w+)/gm)];
+  const starts = [...source.matchAll(/^(?:export\s+)?(?:const|function)\s+(\w+)\s*[=(]/gm)];
   return starts.map((match, index) => ({
     name: match[1],
     body: source.slice(match.index, starts[index + 1]?.index ?? source.length),
@@ -55,8 +55,12 @@ export function splitComponents(source) {
  * whoever passes the prop is.
  */
 export function autoplays(source) {
-  const withoutPassthrough = source.replace(/autoPlay=\{\s*autoPlay\s*\}/g, "");
-  return /autoPlay=\{/.test(withoutPassthrough) || /^\s*autoPlay\s*$/m.test(withoutPassthrough);
+  const decidedElsewhere = source
+    // Forwarding the caller's prop.
+    .replace(/autoPlay=\{\s*autoPlay\s*\}/g, "")
+    // The prop's own default in the signature, which is a declaration, not a use.
+    .replace(/\bautoPlay\s*=\s*(?:true|false)\s*(?=[,}])/g, "");
+  return /\bautoPlay(?=[\s/>=])/.test(decidedElsewhere);
 }
 
 /** The text between the parentheses of one `useState(` call. */
diff --git a/scripts/check-docs-snippet-motion.test.mjs b/scripts/check-docs-snippet-motion.test.mjs
index 1d04e81721..3bbd4e29e5 100644
--- a/scripts/check-docs-snippet-motion.test.mjs
+++ b/scripts/check-docs-snippet-motion.test.mjs
@@ -84,9 +84,36 @@ export const OtherGrid = () => {
   assert.equal(findMotionGuardViolations(components[1].body).length, 2);
 });
 
+// Both below were found by running these functions rather than reading them,
+// on the approval pass for #2977. Each fails silently: a component that
+// `autoplays` misses is filtered out before any requirement runs, so the gate
+// reports zero problems instead of a violation.
+
+test("a bare autoPlay attribute counts, however the element is wrapped", () => {
+  assert.equal(autoplays("<video autoPlay muted />"), true);
+  assert.equal(autoplays("<video src={s} autoPlay/>"), true);
+  assert.equal(autoplays("<video\n  autoPlay\n/>"), true);
+});
+
+test("a component that is not exported cannot inherit the one above it", () => {
+  const sneaky = `${GUARDED}
+const Sneaky = () => <video autoPlay={true} />;
+`;
+  const components = splitComponents(sneaky);
+  assert.deepEqual(
+    components.map((component) => component.name),
+    ["Grid", "Sneaky"],
+  );
+  assert.equal(findMotionGuardViolations(components[1].body).length, 2);
+});
+
 test("forwarding a caller's autoPlay prop does not make a component owe the guard", () => {
   assert.equal(autoplays('<video autoPlay={autoPlay} preload="metadata" />'), false);
   assert.equal(autoplays("({ autoPlay = false }) => <video autoPlay={autoPlay} />"), false);
+  assert.equal(
+    autoplays("({ autoPlay = false, loop = false }) => <video autoPlay={autoPlay} />"),
+    false,
+  );
   assert.equal(autoplays("<video autoPlay={!reduced} />"), true);
   assert.equal(autoplays('<video controls muted preload="metadata" />'), false);
 });

From 1cc9962ee7b1dc3e6a673104ccabd5c4f0bcf9cd Mon Sep 17 00:00:00 2001
From: ukimsanov <ular.kimsanov@heygen.com>
Date: Mon, 3 Aug 2026 22:15:01 -0700
Subject: [PATCH 10/11] docs: remove the live-composition embed and its build
 apparatus
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Introduction no longer carries the embed (removed in #2979), and nothing
else used any of this: the 200-line snippet, 26 CSS rules, the bundler that
built the single-file HTML for the CDN, its npm script, and the README section
explaining how to regenerate it.

The Reference Project itself stays — Examples, Developers, and Go further all
link to it as the worked example; only the interactive embed of it is gone.

This also retires the isolation contract I documented two rounds ago. That
comment existed because the embed handed CDN HTML to a same-origin blob; with
the embed gone there is no such surface to reason about, which is a better
outcome than a comment explaining why it was acceptable.
---
 docs/custom.css                           | 218 +-------------------
 docs/snippets/live-reference-project.jsx  | 240 ----------------------
 examples/docs-reference-project/README.md |  14 --
 package.json                              |   1 -
 scripts/docs/bundle-live-reference.mjs    |  30 ---
 5 files changed, 2 insertions(+), 501 deletions(-)
 delete mode 100644 docs/snippets/live-reference-project.jsx
 delete mode 100644 scripts/docs/bundle-live-reference.mjs

diff --git a/docs/custom.css b/docs/custom.css
index 8fca43d812..cb531a1cf8 100644
--- a/docs/custom.css
+++ b/docs/custom.css
@@ -807,207 +807,7 @@ samp {
 .hf-agent-action button:focus-visible {
   border-color: var(--hf-brand);
   background: var(--hf-brand-soft);
-}
-
-.hf-live-reference-start {
-  display: flex;
-  width: 100%;
-  align-items: center;
-  gap: 0.8rem;
-  margin: 1rem 0 2rem;
-  padding: 1rem;
-  border: 1px solid rgba(128, 128, 128, 0.28);
-  border-radius: 0.75rem;
-  background: rgba(128, 128, 128, 0.05);
-  color: inherit;
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-}
-
-.hf-live-reference-start > span:first-child {
-  display: grid;
-  width: 2.4rem;
-  height: 2.4rem;
-  flex: 0 0 auto;
-  place-items: center;
-  border-radius: 50%;
-  background: var(--hf-brand);
-  color: #071008;
-  font-size: 0.78rem;
-}
-
-.hf-live-reference-start > span:last-child {
-  display: grid;
-  gap: 0.14rem;
-}
-
-.hf-live-reference-start strong {
-  font-size: 0.86rem;
-}
-
-.hf-live-reference-start small {
-  opacity: 0.65;
-  font-size: 0.75rem;
-}
-
-.hf-live-reference-start:hover,
-.hf-live-reference-start:focus-visible {
-  border-color: var(--hf-brand);
-  background: var(--hf-brand-soft);
-}
-
-.hf-live-reference {
-  margin: 1rem 0 2rem;
-  overflow: hidden;
-  border: 1px solid rgba(128, 128, 128, 0.28);
-  border-radius: 0.75rem;
-}
-
-.hf-live-reference-stage {
-  position: relative;
-  display: grid;
-  min-height: 18rem;
-  place-items: center;
-  aspect-ratio: 16 / 9;
-  background: #080808;
-}
-
-.hf-live-reference-preview {
-  position: absolute;
-  inset: 0;
-  display: grid;
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  overflow: hidden;
-  place-items: center;
-  border: 0;
-  background-color: #e9e9e7;
-  background-position: center;
-  background-size: cover;
-  cursor: pointer;
-  z-index: 4;
-}
-
-.hf-live-reference-preview span {
-  position: relative;
-  display: grid;
-  width: 3.5rem;
-  height: 3.5rem;
-  place-items: center;
-  border: 1px solid rgba(255, 255, 255, 0.68);
-  border-radius: 999px;
-  background: rgba(10, 10, 10, 0.84);
-  color: #fff;
-  font-size: 1rem;
-  line-height: 1;
-  box-shadow: 0 0.75rem 2rem rgba(10, 10, 10, 0.2);
-  transform: translateZ(0);
-}
-
-.hf-live-reference-preview:hover span,
-.hf-live-reference-preview:focus-visible span {
-  transform: scale(1.05);
-}
-
-.hf-live-reference-player-host,
-.hf-live-reference-player-host > * {
-  display: block;
-  width: 100%;
-  aspect-ratio: 16 / 9;
-}
-
-.hf-live-reference-loading {
-  color: rgba(255, 255, 255, 0.7);
-  font-size: 0.78rem;
-}
-
-.hf-live-reference-controls {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) auto auto;
-  gap: 0.65rem;
-  align-items: end;
-  padding: 0.85rem;
-  background: rgba(128, 128, 128, 0.055);
-}
-
-.hf-live-reference-controls label,
-.hf-live-reference-controls fieldset {
-  display: grid;
-  min-width: 0;
-  gap: 0.3rem;
-  margin: 0;
-  padding: 0;
-  border: 0;
-}
-
-.hf-live-reference-controls label > span,
-.hf-live-reference-controls legend {
-  padding: 0;
-  opacity: 0.62;
-  font-size: 0.68rem;
-  font-weight: 600;
-}
-
-.hf-live-reference-controls input {
-  width: 100%;
-  min-width: 0;
-  height: 2.15rem;
-  padding: 0 0.58rem;
-  border: 1px solid rgba(128, 128, 128, 0.3);
-  border-radius: 0.42rem;
-  background: rgba(128, 128, 128, 0.06);
-  color: inherit;
-  font: inherit;
-  font-size: 0.72rem;
-}
-
-.hf-live-reference-controls fieldset > div {
-  display: flex;
-  height: 2.15rem;
-  align-items: center;
-  gap: 0.28rem;
-}
-
-.hf-live-reference-controls fieldset button {
-  width: 1.35rem;
-  height: 1.35rem;
-  padding: 0;
-  border: 2px solid transparent;
-  border-radius: 50%;
-  background: var(--hf-live-accent);
-  box-shadow: 0 0 0 1px rgba(128, 128, 128, 0.34);
-  cursor: pointer;
-}
-
-.hf-live-reference-controls fieldset button[aria-pressed="true"] {
-  border-color: currentColor;
-  box-shadow: 0 0 0 2px rgba(107, 168, 100, 0.4);
-}
-
-.hf-live-reference-reset {
-  height: 2.15rem;
-  padding: 0 0.65rem;
-  border: 1px solid rgba(128, 128, 128, 0.3);
-  border-radius: 0.42rem;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  font-size: 0.7rem;
-  cursor: pointer;
-}
-
-@media (max-width: 720px) {
-  .hf-live-reference-controls {
-    grid-template-columns: 1fr 1fr;
-  }
-
-  .hf-live-reference-controls label:nth-child(2) {
-    grid-column: 1 / -1;
-    grid-row: 2;
-  }
-}
+}@media (max-width: 720px) {}
 
 @media (max-width: 520px) {
   .hf-agent-action {
@@ -1017,21 +817,7 @@ samp {
 
   .hf-agent-action button {
     width: 100%;
-  }
-
-  .hf-live-reference-stage {
-    min-height: 0;
-  }
-
-  .hf-live-reference-controls {
-    grid-template-columns: 1fr;
-  }
-
-  .hf-live-reference-controls label:nth-child(2) {
-    grid-column: auto;
-    grid-row: auto;
-  }
-}
+  }}
 
 .hf-docs-video:focus-visible {
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--hf-video-accent) 78%, transparent);
diff --git a/docs/snippets/live-reference-project.jsx b/docs/snippets/live-reference-project.jsx
deleted file mode 100644
index 395e16ec26..0000000000
--- a/docs/snippets/live-reference-project.jsx
+++ /dev/null
@@ -1,240 +0,0 @@
-export const LiveReferenceProject = ({ src, poster }) => {
-  const playerRef = useRef(null);
-  const playerHostRef = useRef(null);
-  const [mounted, setMounted] = useState(false);
-  const [playerReady, setPlayerReady] = useState(false);
-  const [compositionSrc, setCompositionSrc] = useState(null);
-  const [previewVisible, setPreviewVisible] = useState(true);
-  const [loadFailed, setLoadFailed] = useState(false);
-  const [title, setTitle] = useState("Example Domain");
-  const [supportingLine, setSupportingLine] = useState(
-    "For use in documentation examples without needing permission.",
-  );
-  const [accent, setAccent] = useState("#334488");
-
-  useEffect(() => {
-    if (!mounted || typeof window === "undefined") return undefined;
-
-    let cancelled = false;
-    const markReady = () => {
-      if (!cancelled) setPlayerReady(true);
-    };
-
-    if (window.customElements?.get("hyperframes-player")) {
-      markReady();
-      return () => {
-        cancelled = true;
-      };
-    }
-
-    let script = document.querySelector("script[data-hf-docs-player]");
-    if (!script) {
-      script = document.createElement("script");
-      script.type = "module";
-      script.src = "https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7.90";
-      script.dataset.hfDocsPlayer = "true";
-      script.addEventListener("error", () => !cancelled && setLoadFailed(true), { once: true });
-      document.head.appendChild(script);
-    }
-
-    window.customElements
-      ?.whenDefined("hyperframes-player")
-      .then(markReady)
-      .catch(() => !cancelled && setLoadFailed(true));
-
-    // whenDefined() never rejects for a script that failed to load, and a later
-    // mount reuses the existing tag without its error listener. A CSP rule or a
-    // content blocker can also kill the request without firing `error` at all.
-    // Without a deadline every one of those paths sits on "Loading…" forever.
-    const deadline = window.setTimeout(() => {
-      if (!cancelled && !window.customElements?.get("hyperframes-player")) setLoadFailed(true);
-    }, 10000);
-
-    return () => {
-      cancelled = true;
-      window.clearTimeout(deadline);
-    };
-  }, [mounted]);
-
-  useEffect(() => {
-    if (!playerReady || typeof window === "undefined") return undefined;
-
-    const controller = new AbortController();
-    let cancelled = false;
-    let objectUrl;
-
-    setLoadFailed(false);
-
-    fetch(src, { signal: controller.signal })
-      .then((response) => {
-        if (!response.ok) throw new Error(`Composition request failed: ${response.status}`);
-        return response.text();
-      })
-      .then((html) => {
-        // ISOLATION CONTRACT — read before pointing `src` anywhere new.
-        //
-        // A blob: URL inherits this page's origin, and <hyperframes-player>
-        // sandboxes its iframe with allow-scripts + allow-same-origin
-        // (packages/player/src/iframe-dom.ts). The composition therefore runs
-        // with script access to the docs origin, not in a hostile-content
-        // sandbox.
-        //
-        // That is deliberate, not an oversight: the player drives seeking
-        // through the iframe's document, which a cross-origin frame does not
-        // expose. Serving the CDN URL directly would isolate the frame and
-        // break playback.
-        //
-        // The guard is the source, so keep it a guard: `src` must stay a
-        // first-party path we publish
-        // (static.heygen.ai/hyperframes-oss/docs/reference-project/...).
-        // Never point this component at user-supplied, community-supplied, or
-        // third-party HTML.
-        const assetBase = new URL("../", src).toString();
-        const preparedHtml = html.includes('<base href="../">')
-          ? html.replace('<base href="../">', `<base href="${assetBase}">`)
-          : html.replace("<head>", `<head><base href="${assetBase}">`);
-        // abort() no longer stops the chain once the body has resolved, so the
-        // blob can be minted after cleanup ran with objectUrl still undefined.
-        if (cancelled) return;
-        objectUrl = URL.createObjectURL(new Blob([preparedHtml], { type: "text/html" }));
-        setCompositionSrc(objectUrl);
-      })
-      .catch((error) => {
-        if (error.name !== "AbortError") setLoadFailed(true);
-      });
-
-    return () => {
-      cancelled = true;
-      controller.abort();
-      if (objectUrl) URL.revokeObjectURL(objectUrl);
-    };
-  }, [playerReady, src]);
-
-  useEffect(() => {
-    if (!playerReady || !compositionSrc || !playerHostRef.current) return undefined;
-    const player = document.createElement("hyperframes-player");
-    player.setAttribute("src", compositionSrc);
-    player.setAttribute("controls", "");
-    player.setAttribute("width", "1920");
-    player.setAttribute("height", "1080");
-    playerHostRef.current.replaceChildren(player);
-    playerRef.current = player;
-
-    return () => {
-      playerRef.current = null;
-      player.remove();
-    };
-  }, [compositionSrc, playerReady]);
-
-  useEffect(() => {
-    if (!playerReady) return undefined;
-    const player = playerRef.current;
-    if (!player) return undefined;
-
-    const sendVariables = () => {
-      player.iframeElement?.contentWindow?.postMessage(
-        {
-          type: "hyperframes-docs:variables",
-          variables: { title, supportingLine, accent },
-        },
-        // The blob inherits this origin, so name it. A wildcard would hand the
-        // payload to third-party HTML the day someone ignores the contract above.
-        window.location.origin,
-      );
-    };
-
-    player.addEventListener("ready", sendVariables);
-    sendVariables();
-    return () => player.removeEventListener("ready", sendVariables);
-  // compositionSrc is load-bearing here, not decoration: playerRef.current is
-  // assigned by the effect above on the commit where compositionSrc lands.
-  // Without it this effect runs once, on a commit where the ref is still null,
-  // and never again — so the initial variables are never sent.
-  }, [playerReady, compositionSrc, title, supportingLine, accent]);
-
-  const reset = () => {
-    setTitle("Example Domain");
-    setSupportingLine("For use in documentation examples without needing permission.");
-    setAccent("#334488");
-  };
-
-  const playFromStart = () => {
-    const player = playerRef.current;
-    if (!player) return;
-    setPreviewVisible(false);
-    player.seek(0);
-    player.play();
-  };
-
-  if (!mounted) {
-    return (
-      <button type="button" className="hf-live-reference-start" onClick={() => setMounted(true)}>
-        <span aria-hidden="true">▶</span>
-        <span>
-          <strong>Load the live composition</strong>
-          <small>Runs the actual editable HTML project in this page.</small>
-        </span>
-      </button>
-    );
-  }
-
-  return (
-    <div className="hf-live-reference">
-      <div className="hf-live-reference-stage">
-        {playerReady && compositionSrc ? (
-          <>
-            <div ref={playerHostRef} className="hf-live-reference-player-host" />
-            {poster && previewVisible && (
-              <button
-                type="button"
-                className="hf-live-reference-preview"
-                onClick={playFromStart}
-                aria-label="Play the live Reference Project"
-                style={{ backgroundImage: `url(${poster})` }}
-              >
-                <span aria-hidden="true">▶</span>
-              </button>
-            )}
-          </>
-        ) : (
-          <div className="hf-live-reference-loading" role="status">
-            {loadFailed ? "The live project could not load." : "Loading the composition…"}
-          </div>
-        )}
-      </div>
-
-      <div className="hf-live-reference-controls" aria-label="Change the live composition">
-        <label>
-          <span>Headline</span>
-          <input value={title} onChange={(event) => setTitle(event.target.value)} maxLength={42} />
-        </label>
-        <label>
-          <span>Supporting line</span>
-          <input
-            value={supportingLine}
-            onChange={(event) => setSupportingLine(event.target.value)}
-            maxLength={74}
-          />
-        </label>
-        <fieldset>
-          <legend>Accent</legend>
-          <div>
-            {["#334488", "#2f7d4f", "#a44b35", "#6b4fa1"].map((color) => (
-              <button
-                type="button"
-                key={color}
-                aria-label={`Use accent ${color}`}
-                aria-pressed={accent === color}
-                onClick={() => setAccent(color)}
-                style={{ "--hf-live-accent": color }}
-              />
-            ))}
-          </div>
-        </fieldset>
-        <button type="button" className="hf-live-reference-reset" onClick={reset}>
-          Reset
-        </button>
-      </div>
-    </div>
-  );
-};
diff --git a/examples/docs-reference-project/README.md b/examples/docs-reference-project/README.md
index 27c5dc22b2..3deb0e54dd 100644
--- a/examples/docs-reference-project/README.md
+++ b/examples/docs-reference-project/README.md
@@ -150,20 +150,6 @@ The project keeps only the assets used by the composition:
 Generated capture folders, frame dumps, contact sheets, and compiled docs embeds are not
 committed. The docs copy of the verified render is served from the HyperFrames media CDN.
 
-### Rebuilding the docs embed
-
-The Introduction page embeds this project live. That embed is a single self-contained
-HTML file produced from this directory and uploaded to the CDN — regenerate it from the
-repository root whenever the composition changes:
-
-```bash
-bun run docs:bundle-reference
-```
-
-It writes `examples/docs-reference-project/live/index.html` (git-ignored). Upload that
-file to `docs/reference-project/live/` on the media CDN under a new version suffix, then
-point `LiveReferenceProject` in `docs/introduction.mdx` at the new name.
-
 ## Learning path through the composition
 
 Read `index.html` top to bottom; it is ordered deliberately:
diff --git a/package.json b/package.json
index 1fed96ee37..5fdf919ec0 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,6 @@
     "generate:catalog-previews": "tsx scripts/generate-catalog-previews.ts",
     "package:codex-plugin": "node scripts/package-codex-plugin.mjs",
     "upload:docs-images": "bash scripts/upload-docs-images.sh",
-    "docs:bundle-reference": "bun scripts/docs/bundle-live-reference.mjs examples/docs-reference-project examples/docs-reference-project/live/index.html",
     "prepare": "test -d .git && lefthook install || true",
     "lint:registry-items": "node scripts/lint-registry-items.mjs"
   },
diff --git a/scripts/docs/bundle-live-reference.mjs b/scripts/docs/bundle-live-reference.mjs
deleted file mode 100644
index a6fe54504e..0000000000
--- a/scripts/docs/bundle-live-reference.mjs
+++ /dev/null
@@ -1,30 +0,0 @@
-import { mkdirSync, writeFileSync } from "node:fs";
-import { dirname, relative, resolve, sep } from "node:path";
-
-import { bundleToSingleHtml } from "../../packages/core/src/compiler/index.ts";
-
-const [projectArg, outputArg] = process.argv.slice(2);
-
-if (!projectArg || !outputArg) {
-  console.error("Usage: bun scripts/docs/bundle-live-reference.mjs <project-dir> <output.html>");
-  process.exit(1);
-}
-
-const projectDir = resolve(projectArg);
-const outputPath = resolve(outputArg);
-const bundledHtml = await bundleToSingleHtml(projectDir, { runtime: "inline" });
-const relativeProjectRoot = relative(dirname(outputPath), projectDir).split(sep).join("/");
-const baseHref = relativeProjectRoot ? `${relativeProjectRoot}/` : "./";
-if (!bundledHtml.includes("<head>")) {
-  console.error("Bundled output has no <head>; refusing to publish an embed with no <base>.");
-  process.exit(1);
-}
-
-// Only the <base> is injected. Trailing whitespace is left alone: the bundle
-// inlines the runtime, so a document-wide strip would also reach inside script
-// template literals, where trailing spaces are data.
-const html = bundledHtml.replace("<head>", `<head>\n    <base href="${baseHref}">`);
-
-mkdirSync(dirname(outputPath), { recursive: true });
-writeFileSync(outputPath, html);
-console.log(`${outputPath} (${Buffer.byteLength(html).toLocaleString()} bytes)`);

From d6e4cf22be637b634ba0a1d230d866776b46a266 Mon Sep 17 00:00:00 2001
From: ukimsanov <ular.kimsanov@heygen.com>
Date: Mon, 3 Aug 2026 23:08:11 -0700
Subject: [PATCH 11/11] docs: remove the AgentAction snippet
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Its only consumer is gone. The Quickstart now shows the agent instruction in a
plain fence instead, because this component rendered a Copy button and never
displayed the request — a reader copied text they could not read, which is the
wrong shape for the one affordance a non-technical visitor depends on.

Mintlify fences already carry a copy button and show their contents.
---
 docs/custom.css                | 56 +---------------------------------
 docs/snippets/agent-action.jsx | 55 ---------------------------------
 2 files changed, 1 insertion(+), 110 deletions(-)
 delete mode 100644 docs/snippets/agent-action.jsx

diff --git a/docs/custom.css b/docs/custom.css
index cb531a1cf8..b0b3b147f2 100644
--- a/docs/custom.css
+++ b/docs/custom.css
@@ -761,63 +761,9 @@ samp {
   color: #fff;
   isolation: isolate;
   outline: none;
-}
-
-.hf-agent-action {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1.25rem;
-  margin: 2rem 0 1.5rem;
-  padding: 1rem 1.05rem;
-  border: 1px solid rgba(128, 128, 128, 0.26);
-  border-radius: 0.7rem;
-  background: rgba(128, 128, 128, 0.05);
-}
-
-.hf-agent-action > div {
-  display: grid;
-  gap: 0.16rem;
-}
-
-.hf-agent-action strong {
-  font-size: 0.86rem;
-  font-weight: 650;
-}
-
-.hf-agent-action span {
-  opacity: 0.64;
-  font-size: 0.76rem;
-}
-
-.hf-agent-action button {
-  flex: 0 0 auto;
-  padding: 0.52rem 0.78rem;
-  border: 1px solid rgba(128, 128, 128, 0.38);
-  border-radius: 0.48rem;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  font-size: 0.76rem;
-  font-weight: 620;
-  cursor: pointer;
-}
-
-.hf-agent-action button:hover,
-.hf-agent-action button:focus-visible {
-  border-color: var(--hf-brand);
-  background: var(--hf-brand-soft);
 }@media (max-width: 720px) {}
 
-@media (max-width: 520px) {
-  .hf-agent-action {
-    align-items: stretch;
-    flex-direction: column;
-  }
-
-  .hf-agent-action button {
-    width: 100%;
-  }}
+@media (max-width: 520px) {}
 
 .hf-docs-video:focus-visible {
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--hf-video-accent) 78%, transparent);
diff --git a/docs/snippets/agent-action.jsx b/docs/snippets/agent-action.jsx
deleted file mode 100644
index ddad5a1cb6..0000000000
--- a/docs/snippets/agent-action.jsx
+++ /dev/null
@@ -1,55 +0,0 @@
-export const AgentAction = ({ request }) => {
-  const [copied, setCopied] = useState(false);
-  const resetTimerRef = useRef(null);
-
-  const writeClipboard = async (text) => {
-    try {
-      if (navigator.clipboard?.writeText) {
-        await navigator.clipboard.writeText(text);
-        return true;
-      }
-    } catch {
-      // Fall through to the browser's older synchronous copy path.
-    }
-
-    const field = document.createElement("textarea");
-    field.value = text;
-    field.setAttribute("readonly", "");
-    field.style.position = "fixed";
-    field.style.opacity = "0";
-    document.body.appendChild(field);
-    field.select();
-    const copied = document.execCommand("copy");
-    field.remove();
-    return copied;
-  };
-
-  const copyRequest = async () => {
-    if (await writeClipboard(request)) {
-      setCopied(true);
-      if (resetTimerRef.current) window.clearTimeout(resetTimerRef.current);
-      resetTimerRef.current = window.setTimeout(() => setCopied(false), 1800);
-    } else {
-      setCopied(false);
-    }
-  };
-
-  useEffect(
-    () => () => {
-      if (resetTimerRef.current) window.clearTimeout(resetTimerRef.current);
-    },
-    [],
-  );
-
-  return (
-    <div className="hf-agent-action">
-      <div>
-        <strong>Use this with your agent</strong>
-        <span>Replace the URL with the page you want to show.</span>
-      </div>
-      <button type="button" onClick={copyRequest}>
-        {copied ? "Copied" : "Copy request"}
-      </button>
-    </div>
-  );
-};