@odori/cli 0.0.2

package/dist/registry-snapshot-NIH2JMQ6.js

@@ -0,0 +1,3559 @@
+// src/registry-snapshot.json
+var registry_snapshot_default = {
+  items: [
+    {
+      name: "absolute-stage",
+      description: "Full-frame surface with stable clipping and positioning.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/absolute-stage/absolute-stage.tsx",
+          content: 'import type {CSSProperties, ReactNode} from "react";\nimport {Fill, useBrand, useDesignScale, useVideo} from "odori";\n\nexport type AbsoluteStageProps = {\n  children?: ReactNode;\n  /** Where the content sits inside the frame. */\n  align?: "center" | "start" | "end";\n  /** Inset from the frame edge, in design pixels. */\n  padding?: number;\n  /** Draw the frame edge, useful while composing. */\n  showBounds?: boolean;\n  style?: CSSProperties;\n};\n\n/**\n * The plainest full-frame surface: predictable clipping, one alignment\n * decision, and padding that scales with the format. Reach for this when a\n * scene needs structure without the grid and glow of the branded stage.\n */\nexport const AbsoluteStage = ({children, align = "center", padding = 120, showBounds = false, style}: AbsoluteStageProps) => {\n  const brand = useBrand();\n  const scale = useDesignScale();\n  const {width, height} = useVideo();\n\n  return (\n    <Fill style={{background: brand.colors.background, overflow: "hidden", ...style}}>\n      <Fill\n        style={{\n          alignItems: "center",\n          display: "flex",\n          justifyContent: align === "center" ? "center" : align === "start" ? "flex-start" : "flex-end",\n          flexDirection: "column",\n          padding: padding * scale,\n        }}\n      >\n        {children}\n      </Fill>\n      {showBounds ? (\n        <Fill\n          style={{\n            border: `${2 * scale}px dashed ${brand.colors.border}`,\n            inset: padding * scale,\n            pointerEvents: "none",\n          }}\n        >\n          <span\n            style={{\n              color: brand.colors.muted,\n              fontFamily: brand.typography.mono,\n              fontSize: 22 * scale,\n              padding: 12 * scale,\n            }}\n          >\n            {width} x {height}\n          </span>\n        </Fill>\n      ) : null}\n    </Fill>\n  );\n};\n',
+          target: "videos/components/absolute-stage/absolute-stage.tsx"
+        },
+        {
+          path: "components/absolute-stage/absolute-stage.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {AbsoluteStage} from "./absolute-stage";\n\nexport default defineComponentPreview({\n  title: "Absolute stage",\n  category: "Foundation",\n  description: "Full-frame surface with stable clipping and positioning.",\n  component: AbsoluteStage,\n  canvas: {width: 1920, height: 1080, duration: "3s"},\n  controls: {\n    align: {type: "select", defaultValue: "center", options: ["center", "start", "end"]},\n    padding: {type: "number", defaultValue: 120, min: 0, max: 320},\n    showBounds: {type: "boolean", defaultValue: true},\n  },\n  examples: [\n    {name: "Bounds", props: {showBounds: true, children: "Content sits here"}},\n    {name: "Clean", props: {showBounds: false, children: "Content sits here"}},\n  ],\n});\n',
+          target: "videos/components/absolute-stage/absolute-stage.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Foundation",
+        namespaced: "@odori/absolute-stage",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 90,
+          minimumDurationInFrames: 24,
+          entranceFrames: 0,
+          exitFrames: 0,
+          contentLimits: {},
+          reducedMotion: "no motion of its own",
+          requires: {
+            fonts: [
+              "sans"
+            ],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "area-chart",
+      description: "Filled trend reveal for volume and cumulative change.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/area-chart/area-chart.tsx",
+          content: 'import {Fill, Easing, interpolate, useBrand, useFrame, useDesignScale} from "odori";\n\nexport type AreaChartProps = {\n  values: number[];\n  title?: string;\n  detail?: string;\n};\n\n/**\n * A filled trend for volume and cumulative change. The fill wipes in with the\n * path, so the area never appears ahead of the line that bounds it.\n */\nexport const AreaChart = ({values, title, detail}: AreaChartProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n  const max = Math.max(...values, 1);\n  const draw = interpolate(frame, [12, 62], [0, 1], {easing: Easing.standard});\n  const points = values.map((value, index) => ({\n    x: (index / Math.max(1, values.length - 1)) * 100,\n    y: 100 - (value / max) * 92,\n  }));\n  const line = points.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`).join(" ");\n  const area = `${line} L 100 100 L 0 100 Z`;\n\n  return (\n    <Fill style={{gap: 30 * scale, justifyContent: "center", padding: `${110 * scale}px ${130 * scale}px`}}>\n      {title ? (\n        <div style={{fontSize: 58 * scale, fontWeight: 560, letterSpacing: "-0.04em", opacity: interpolate(frame, [0, 16], [0, 1])}}>\n          {title}\n        </div>\n      ) : null}\n      <div style={{height: 460 * scale, width: "100%"}}>\n        <svg preserveAspectRatio="none" style={{clipPath: `inset(0 ${(1 - draw) * 100}% 0 0)`, height: "100%", width: "100%"}} viewBox="0 0 100 100">\n          <path d={area} fill={brand.colors.accent} opacity={0.18} />\n          <path d={line} fill="none" stroke={brand.colors.accent} strokeWidth={9 * scale} vectorEffect="non-scaling-stroke" />\n        </svg>\n      </div>\n      {detail ? (\n        <div style={{color: brand.colors.muted, fontSize: 32 * scale, opacity: interpolate(frame, [56, 74], [0, 1])}}>{detail}</div>\n      ) : null}\n    </Fill>\n  );\n};\n',
+          target: "videos/components/area-chart/area-chart.tsx"
+        },
+        {
+          path: "components/area-chart/area-chart.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {AreaChart} from "./area-chart";\n\nexport default defineComponentPreview({\n  title: "Area chart",\n  category: "Data",\n  description: "Filled trend reveal for volume and cumulative change.",\n  component: AreaChart,\n  canvas: {width: 1920, height: 1080, duration: "4s"},\n  controls: {\n    title: {type: "text", defaultValue: "Frames rendered"},\n    detail: {type: "text", defaultValue: "Cumulative, across every format."},\n  },\n  examples: [{name: "Adoption", props: {values: [2, 5, 9, 14, 22, 31, 44, 60]}}],\n});\n',
+          target: "videos/components/area-chart/area-chart.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Data",
+        namespaced: "@odori/area-chart",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 120,
+          minimumDurationInFrames: 78,
+          entranceFrames: 62,
+          exitFrames: 0,
+          contentLimits: {
+            points: 16
+          },
+          reducedMotion: "the filled area appears at once",
+          requires: {
+            fonts: [
+              "sans"
+            ],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "b-roll-window",
+      description: "Supporting footage framed beside the main narrative.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/b-roll-window/b-roll-window.tsx",
+          content: 'import type {ReactNode} from "react";\nimport {Easing, Fill, interpolate, placeholderImage, useBrand, useDesignScale, useFrame} from "odori";\n\nexport type BRollWindowProps = {\n  /** The main narrative, filling the frame. */\n  children?: ReactNode;\n  /** Supporting footage. A string is an image URL. */\n  media?: string | ReactNode;\n  /** Which corner the window sits in. */\n  corner?: "bottom-right" | "bottom-left" | "top-right" | "top-left";\n  /** Frame it enters and frame it leaves. */\n  at?: number;\n  until?: number;\n  label?: string;\n};\n\n/** Which two edges each corner hugs, so the offsets below stay declarative. */\nconst CORNERS: Record<string, {top?: boolean; bottom?: boolean; left?: boolean; right?: boolean}> = {\n  "bottom-right": {bottom: true, right: true},\n  "bottom-left": {bottom: true, left: true},\n  "top-right": {top: true, right: true},\n  "top-left": {top: true, left: true},\n};\n\n/**\n * Supporting footage beside the main narrative, in and out on cue.\n *\n * The window enters from the edge it sits against, which is what makes it read\n * as arriving from off-screen rather than fading up out of nowhere \u2014 and it\n * leaves the same way, so it never has to be cut around.\n */\nexport const BRollWindow = ({\n  children,\n  media,\n  corner = "bottom-right",\n  at = 24,\n  until = 140,\n  label,\n}: BRollWindowProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n  const place = CORNERS[corner];\n  const fromRight = corner.endsWith("right");\n\n  const enter = interpolate(frame, [at, at + 14], [0, 1], {easing: Easing.standard});\n  const leave = interpolate(frame, [until, until + 14], [1, 0], {easing: Easing.standard});\n  const visible = Math.min(enter, leave);\n  const source = media ?? placeholderImage({label: "b-roll", seed: "broll", width: 800, height: 500});\n\n  return (\n    <Fill>\n      {children}\n      {visible > 0.001 ? (\n        <div\n          style={{\n            border: `1px solid ${brand.colors.border}`,\n            borderRadius: 16 * scale,\n            bottom: place.bottom ? 64 * scale : undefined,\n            boxShadow: `0 ${24 * scale}px ${60 * scale}px rgba(0,0,0,0.5)`,\n            height: 340 * scale,\n            left: place.left ? 64 * scale : undefined,\n            opacity: visible,\n            overflow: "hidden",\n            position: "absolute",\n            right: place.right ? 64 * scale : undefined,\n            top: place.top ? 64 * scale : undefined,\n            transform: `translateX(${(1 - visible) * (fromRight ? 60 : -60) * scale}px)`,\n            width: 560 * scale,\n          }}\n        >\n          {typeof source === "string" ? (\n            <img src={source} alt="" style={{height: "100%", objectFit: "cover", width: "100%"}} />\n          ) : (\n            source\n          )}\n          {label ? (\n            <span\n              style={{\n                background: "rgba(0,0,0,0.6)",\n                bottom: 0,\n                color: "#ffffff",\n                fontFamily: brand.typography.mono,\n                fontSize: 20 * scale,\n                left: 0,\n                padding: `${10 * scale}px ${16 * scale}px`,\n                position: "absolute",\n                right: 0,\n              }}\n            >\n              {label}\n            </span>\n          ) : null}\n        </div>\n      ) : null}\n    </Fill>\n  );\n};\n',
+          target: "videos/components/b-roll-window/b-roll-window.tsx"
+        },
+        {
+          path: "components/b-roll-window/b-roll-window.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {BRollWindow} from "./b-roll-window";\n\nconst Main = () => (\n  <div\n    style={{\n      alignItems: "center",\n      background: "#080808",\n      color: "#f5f5f5",\n      display: "flex",\n      fontFamily: "ui-sans-serif, system-ui",\n      fontSize: 82,\n      inset: 0,\n      justifyContent: "center",\n      letterSpacing: "-0.04em",\n      position: "absolute",\n    }}\n  >\n    The main narrative\n  </div>\n);\n\nexport default defineComponentPreview({\n  title: "B-roll window",\n  category: "Media and canvas",\n  description: "Supporting footage framed beside the main narrative.",\n  component: BRollWindow,\n  canvas: {width: 1920, height: 1080, duration: "6s"},\n  controls: {\n    corner: {\n      type: "select",\n      defaultValue: "bottom-right",\n      options: ["bottom-right", "bottom-left", "top-right", "top-left"],\n    },\n    at: {type: "number", defaultValue: 24, min: 0, max: 90},\n    until: {type: "number", defaultValue: 140, min: 30, max: 200},\n    label: {type: "text", defaultValue: "odori export launch"},\n  },\n  examples: [\n    {name: "Default", props: {children: <Main />}},\n    {name: "Top left", props: {children: <Main />, corner: "top-left"}},\n  ],\n});\n',
+          target: "videos/components/b-roll-window/b-roll-window.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Media and canvas",
+        namespaced: "@odori/b-roll-window",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 180,
+          minimumDurationInFrames: 45,
+          entranceFrames: 14,
+          exitFrames: 14,
+          contentLimits: {
+            label: 48
+          },
+          reducedMotion: "the window is present without sliding in",
+          requires: {
+            fonts: [
+              "mono"
+            ],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "bar-chart",
+      description: "Ranked bars with labels, values, and staged growth.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/bar-chart/bar-chart.tsx",
+          content: 'import {Fill, Easing, interpolate, useBrand, useFrame, useDesignScale} from "odori";\n\nexport type BarDatum = {label: string; value: number};\n\nexport type BarChartProps = {\n  data: BarDatum[];\n  title?: string;\n  /** Appended to every printed value. */\n  unit?: string;\n  /** Index drawn in the accent color. */\n  highlight?: number;\n};\n\n/**\n * Ranked bars that grow from a shared baseline. The scale comes from the data,\n * never from a rounded guess, so two charts in one video stay comparable.\n */\nexport const BarChart = ({data, title, unit = "", highlight}: BarChartProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n  const max = Math.max(...data.map((item) => item.value), 1);\n\n  return (\n    <Fill style={{gap: 40 * scale, justifyContent: "center", padding: `${110 * scale}px ${130 * scale}px`}}>\n      {title ? (\n        <div\n          style={{\n            fontSize: 58 * scale,\n            fontWeight: 560,\n            letterSpacing: "-0.04em",\n            opacity: interpolate(frame, [0, 16], [0, 1], {easing: Easing.standard}),\n          }}\n        >\n          {title}\n        </div>\n      ) : null}\n      <div style={{display: "grid", gap: 22 * scale}}>\n        {data.map((item, index) => {\n          const delay = 10 + index * 6;\n          const grow = interpolate(frame, [delay, delay + 30], [0, 1], {easing: Easing.standard});\n          const accent = index === highlight;\n          return (\n            <div key={item.label} style={{alignItems: "center", display: "flex", gap: 24 * scale}}>\n              <span style={{color: brand.colors.muted, fontSize: 30 * scale, width: 320 * scale}}>{item.label}</span>\n              <div style={{background: brand.colors.border, borderRadius: 999, flex: 1, height: 34 * scale}}>\n                <div\n                  style={{\n                    background: accent ? brand.colors.accent : brand.colors.foreground,\n                    borderRadius: 999,\n                    height: "100%",\n                    width: `${(item.value / max) * 100 * grow}%`,\n                  }}\n                />\n              </div>\n              <span\n                style={{\n                  fontSize: 30 * scale,\n                  fontVariantNumeric: "tabular-nums",\n                  textAlign: "right",\n                  width: 180 * scale,\n                }}\n              >\n                {(item.value * grow).toFixed(item.value % 1 === 0 ? 0 : 1)}\n                {unit}\n              </span>\n            </div>\n          );\n        })}\n      </div>\n    </Fill>\n  );\n};\n',
+          target: "videos/components/bar-chart/bar-chart.tsx"
+        },
+        {
+          path: "components/bar-chart/bar-chart.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {BarChart} from "./bar-chart";\n\nexport default defineComponentPreview({\n  title: "Bar chart",\n  category: "Data",\n  description: "Ranked bars with labels, values, and staged growth.",\n  component: BarChart,\n  canvas: {width: 1920, height: 1080, duration: "4s"},\n  controls: {\n    title: {type: "text", defaultValue: "Time to first preview"},\n    unit: {type: "text", defaultValue: "s"},\n    highlight: {type: "number", defaultValue: 2, min: 0, max: 5},\n  },\n  examples: [\n    {\n      name: "Comparison",\n      props: {\n        data: [\n          {label: "Manual edit", value: 42},\n          {label: "Template tool", value: 18},\n          {label: "Odori", value: 4},\n        ],\n        highlight: 2,\n      },\n    },\n  ],\n});\n',
+          target: "videos/components/bar-chart/bar-chart.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Data",
+        namespaced: "@odori/bar-chart",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 120,
+          minimumDurationInFrames: 60,
+          entranceFrames: 50,
+          exitFrames: 0,
+          contentLimits: {
+            bars: 6,
+            labelLength: 28
+          },
+          reducedMotion: "bars appear at full length",
+          requires: {
+            fonts: [
+              "sans"
+            ],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "bed-build",
+      description: "A rising bed that lands on the reveal it is building to.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/bed-build/bed-build.tsx",
+          content: 'import {\n  chord,\n  defineCue,\n  gain,\n  highPass,\n  lowPass,\n  mix,\n  noise,\n  normalize,\n  note,\n  pad,\n  sequence,\n  shape,\n  sine,\n  sweep,\n  type CueDefinition,\n} from "odori";\n\nexport type BedBuildOptions = {\n  /** Root of the chord underneath, as a note name. */\n  root?: string;\n  /** Seconds the build runs before it lands. */\n  seconds?: number;\n  /** Peak level before the mix normalizes the whole track. */\n  peak?: number;\n};\n\n/**\n * A bed that goes somewhere: a chord that opens up, a noise sweep rising\n * through it, and a tick pattern that doubles halfway. For a reveal, where the\n * sound has to arrive at the same moment the picture does.\n *\n * It does not loop. A build that repeats is a build that never landed, so this\n * one is placed once, against the thing it is building to.\n */\nexport const bedBuild = ({root = "d2", seconds = 4, peak = 0.7}: BedBuildOptions = {}): CueDefinition => {\n  const samples = Math.round(48000 * seconds);\n  const bpm = 120;\n\n  return defineCue({\n    name: "bed.build",\n    durationInFrames: Math.round(seconds * 30),\n    params: {root, seconds, peak},\n    render: () =>\n      normalize(\n        mix(\n          // The chord, opening as the filter does.\n          gain(lowPass(pad(chord(root, "minor"), samples, {envelope: {attack: 1.2, sustain: 1}}), 1200), 0.8),\n          // The riser: filtered noise climbing, plus a tone sweeping under it.\n          gain(\n            shape(highPass(noise(samples, 11), 700), {attack: seconds * 0.92, sustain: 1, release: 0.08}),\n            0.22,\n          ),\n          gain(shape(sweep(samples, note(root), note(root) * 4), {attack: seconds * 0.8, sustain: 1}), 0.3),\n          // Ticks that double in the second half, which is what makes a build\n          // feel like it is accelerating without changing tempo.\n          sequence(\n            [\n              ...Array.from({length: 8}, (_, index) => ({at: index, gain: 0.18 + index * 0.02})),\n              ...Array.from({length: 16}, (_, index) => ({at: 8 + index * 0.5, gain: 0.2 + index * 0.02})),\n            ].map(({at, gain: level}) => ({\n              at,\n              gain: level,\n              play: (length: number) => shape(sine(length, note(root) * 8), {attack: 0.002, decay: 0.06, sustain: 0}),\n            })),\n            {bpm, samples},\n          ),\n        ),\n        peak,\n      ),\n  });\n};\n',
+          target: "videos/components/bed-build/bed-build.tsx"
+        },
+        {
+          path: "components/bed-build/bed-build.preview.tsx",
+          content: 'import {CueWave, defineComponentPreview} from "odori/preview";\nimport {bedBuild, type BedBuildOptions} from "./bed-build";\n\nconst Wave = ({root, seconds, peak}: BedBuildOptions) => <CueWave cue={bedBuild({root, seconds, peak})} />;\n\nexport default defineComponentPreview({\n  title: "Build bed",\n  category: "Sound",\n  description: "A rising bed that lands on the reveal it is building to.",\n  component: Wave,\n  canvas: {width: 1920, height: 1080, duration: "5s"},\n  controls: {\n    root: {type: "select", defaultValue: "d2", options: ["c2", "d2", "f2", "g2"]},\n    seconds: {type: "number", defaultValue: 4, min: 2, max: 8},\n    peak: {type: "number", defaultValue: 0.7, min: 0.1, max: 1, step: 0.05},\n  },\n  examples: [\n    {name: "Default", props: {}},\n    {name: "Short", props: {seconds: 2}},\n  ],\n});\n',
+          target: "videos/components/bed-build/bed-build.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "cue",
+        family: "Sound",
+        namespaced: "@odori/bed-build",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 120,
+          minimumDurationInFrames: 120,
+          entranceFrames: 0,
+          exitFrames: 0,
+          contentLimits: {},
+          reducedMotion: "the waveform renders without a playhead",
+          requires: {
+            fonts: [
+              "mono"
+            ],
+            audio: []
+          },
+          loops: false
+        },
+        cue: {
+          name: "bed.build",
+          export: "bedBuild"
+        }
+      }
+    },
+    {
+      name: "bed-drift",
+      description: "Sustained pads with no rhythm, for slow product shots.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/bed-drift/bed-drift.tsx",
+          content: 'import {\n  chord,\n  defineCue,\n  gain,\n  lowPass,\n  mix,\n  normalize,\n  pad,\n  type CueDefinition,\n} from "odori";\n\nexport type BedDriftOptions = {\n  /** Root of the chord the pad holds, as a note name. */\n  root?: string;\n  /** Detune between voices, in cents. More beats faster. */\n  detuneCents?: number;\n  /** Peak level before the mix normalizes the whole track. */\n  peak?: number;\n};\n\n/**\n * Sustained pads and nothing else: no rhythm, no onset to count against the\n * cut. For slow product shots, where a pulse would impose a tempo the picture\n * is not keeping.\n *\n * Two stacked voicings a fifth apart beat slowly against each other, which is\n * what stops a held chord from sounding like a test tone. Eight seconds, and\n * it loops.\n */\nexport const bedDrift = ({root = "f2", detuneCents = 7, peak = 0.5}: BedDriftOptions = {}): CueDefinition => {\n  const samples = 48000 * 8;\n\n  return defineCue({\n    name: "bed.drift",\n    durationInFrames: 240,\n    loops: true,\n    params: {root, detuneCents, peak},\n    render: () =>\n      normalize(\n        lowPass(\n          mix(\n            pad(chord(root, "add9"), samples, {\n              detuneCents,\n              envelope: {attack: 2.4, sustain: 1, release: 2.6},\n            }),\n            // The upper voicing enters later and leaves earlier, so the two\n            // never turn at the same moment and the pad never sounds gated.\n            gain(\n              pad(chord(root, "sus2").map((frequency) => frequency * 2), samples, {\n                detuneCents: detuneCents * 1.5,\n                envelope: {attack: 3.6, sustain: 1, release: 1.8},\n              }),\n              0.55,\n            ),\n          ),\n          1400,\n        ),\n        peak,\n      ),\n  });\n};\n',
+          target: "videos/components/bed-drift/bed-drift.tsx"
+        },
+        {
+          path: "components/bed-drift/bed-drift.preview.tsx",
+          content: 'import {CueWave, defineComponentPreview} from "odori/preview";\nimport {bedDrift, type BedDriftOptions} from "./bed-drift";\n\nconst Wave = ({root, detuneCents, peak}: BedDriftOptions) => <CueWave cue={bedDrift({root, detuneCents, peak})} />;\n\nexport default defineComponentPreview({\n  title: "Drift bed",\n  category: "Sound",\n  description: "Sustained pads with no rhythm, for slow product shots.",\n  component: Wave,\n  canvas: {width: 1920, height: 1080, duration: "6s"},\n  controls: {\n    root: {type: "select", defaultValue: "f2", options: ["c2", "d2", "f2", "a1"]},\n    detuneCents: {type: "number", defaultValue: 7, min: 0, max: 24},\n    peak: {type: "number", defaultValue: 0.5, min: 0.1, max: 1, step: 0.05},\n  },\n  examples: [\n    {name: "Default", props: {}},\n    {name: "Wider", props: {detuneCents: 16}},\n  ],\n});\n',
+          target: "videos/components/bed-drift/bed-drift.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "cue",
+        family: "Sound",
+        namespaced: "@odori/bed-drift",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 240,
+          minimumDurationInFrames: 240,
+          entranceFrames: 0,
+          exitFrames: 0,
+          contentLimits: {},
+          reducedMotion: "the waveform renders without a playhead",
+          requires: {
+            fonts: [
+              "mono"
+            ],
+            audio: []
+          },
+          loops: true
+        },
+        cue: {
+          name: "bed.drift",
+          export: "bedDrift"
+        }
+      }
+    },
+    {
+      name: "bed-pulse",
+      description: "A soft repeating pulse over a held chord, for narration.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/bed-pulse/bed-pulse.tsx",
+          content: 'import {\n  chord,\n  defineCue,\n  gain,\n  lowPass,\n  mix,\n  normalize,\n  note,\n  pad,\n  sequence,\n  shape,\n  sine,\n  step,\n  type CueDefinition,\n} from "odori";\n\nexport type BedPulseOptions = {\n  /** Tempo of the pulse. Slower reads calmer under narration. */\n  bpm?: number;\n  /** Root of the held chord, as a note name. */\n  root?: string;\n  /** Peak level before the mix normalizes the whole track. */\n  peak?: number;\n};\n\n/**\n * Two bars of soft repeating pulse: a held minor seventh underneath, and a\n * muted low tone on each beat to give the bed a heartbeat without giving it a\n * groove. Written to sit under a voice, so nothing in it competes for the\n * frequencies a voice uses.\n *\n * It loops, so the placement repeats it for as long as the scene runs and the\n * score is rendered once.\n */\nexport const bedPulse = ({bpm = 84, root = "c2", peak = 0.55}: BedPulseOptions = {}): CueDefinition => {\n  const beat = step(bpm, 4);\n  const bars = 2;\n  const samples = beat * 4 * bars;\n\n  return defineCue({\n    name: "bed.pulse",\n    // Two bars at this tempo, in frames at 30fps.\n    durationInFrames: Math.round((samples / 48000) * 30),\n    loops: true,\n    params: {bpm, root, peak},\n    render: () =>\n      normalize(\n        mix(\n          // The held chord, low passed so it stays under everything else.\n          gain(lowPass(pad(chord(root, "minor7"), samples, {envelope: {attack: 0.9, sustain: 1, release: 0.9}}), 900), 0.9),\n          // The pulse itself: one soft tone per beat, decaying immediately.\n          sequence(\n            Array.from({length: 4 * bars}, (_, index) => ({\n              at: index,\n              play: (length: number) =>\n                shape(sine(length, note(root) * 2), {attack: 0.01, decay: 0.35, sustain: 0, release: 0.1}),\n              // The downbeat is louder, which is what makes four beats read as a bar.\n              gain: index % 4 === 0 ? 0.5 : 0.28,\n            })),\n            {bpm, samples},\n          ),\n        ),\n        peak,\n      ),\n  });\n};\n',
+          target: "videos/components/bed-pulse/bed-pulse.tsx"
+        },
+        {
+          path: "components/bed-pulse/bed-pulse.preview.tsx",
+          content: 'import {CueWave, defineComponentPreview} from "odori/preview";\nimport {bedPulse, type BedPulseOptions} from "./bed-pulse";\n\nconst Wave = ({bpm, root, peak}: BedPulseOptions) => <CueWave cue={bedPulse({bpm, root, peak})} />;\n\nexport default defineComponentPreview({\n  title: "Pulse bed",\n  category: "Sound",\n  description: "A soft repeating pulse over a held chord, for narration.",\n  component: Wave,\n  canvas: {width: 1920, height: 1080, duration: "6s"},\n  controls: {\n    bpm: {type: "number", defaultValue: 84, min: 60, max: 140},\n    root: {type: "select", defaultValue: "c2", options: ["a1", "c2", "d2", "f2"]},\n    peak: {type: "number", defaultValue: 0.55, min: 0.1, max: 1, step: 0.05},\n  },\n  examples: [\n    {name: "Default", props: {}},\n    {name: "Slower", props: {bpm: 68}},\n    {name: "Darker", props: {root: "a1"}},\n  ],\n});\n',
+          target: "videos/components/bed-pulse/bed-pulse.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "cue",
+        family: "Sound",
+        namespaced: "@odori/bed-pulse",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 171,
+          minimumDurationInFrames: 171,
+          entranceFrames: 0,
+          exitFrames: 0,
+          contentLimits: {},
+          reducedMotion: "the waveform renders without a playhead",
+          requires: {
+            fonts: [
+              "mono"
+            ],
+            audio: []
+          },
+          loops: true
+        },
+        cue: {
+          name: "bed.pulse",
+          export: "bedPulse"
+        }
+      }
+    },
+    {
+      name: "bed-tick",
+      description: "Minimal rhythm for changelogs and lists.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/bed-tick/bed-tick.tsx",
+          content: 'import {\n  defineCue,\n  gain,\n  highPass,\n  lowPass,\n  mix,\n  noise,\n  normalize,\n  note,\n  sequence,\n  shape,\n  sine,\n  step,\n  triangle,\n  type CueDefinition,\n} from "odori";\n\nexport type BedTickOptions = {\n  /** Tempo of the pattern. */\n  bpm?: number;\n  /** Root of the bass note, as a note name. */\n  root?: string;\n  /** Shuffle on the offbeats, 0 to 0.3. */\n  swing?: number;\n  /** Peak level before the mix normalizes the whole track. */\n  peak?: number;\n};\n\n/**\n * Minimal rhythm: a closed hat on every eighth, a soft kick on one and three,\n * and a bass note under the bar. For changelogs and lists, where the cut moves\n * item to item and the sound should keep time with it.\n *\n * One bar, looping. Everything is pitched away from the middle of the spectrum\n * so a voice or a UI sound still has room.\n */\nexport const bedTick = ({bpm = 104, root = "e2", swing = 0.08, peak = 0.6}: BedTickOptions = {}): CueDefinition => {\n  const beat = step(bpm, 4);\n  const samples = beat * 4;\n\n  const hat = (length: number) =>\n    shape(highPass(noise(length, 3), 6000), {attack: 0.001, decay: 0.045, sustain: 0});\n  const kick = (length: number) =>\n    shape(lowPass(sine(length, note(root) / 2), 220), {attack: 0.004, decay: 0.22, sustain: 0});\n\n  return defineCue({\n    name: "bed.tick",\n    durationInFrames: Math.round((samples / 48000) * 30),\n    loops: true,\n    params: {bpm, root, swing, peak},\n    render: () =>\n      normalize(\n        mix(\n          sequence(\n            Array.from({length: 8}, (_, index) => ({at: index, play: hat, gain: index % 2 === 0 ? 0.3 : 0.16})),\n            {bpm, division: 8, swing, samples},\n          ),\n          sequence([{at: 0, play: kick, gain: 0.7}, {at: 2, play: kick, gain: 0.5}], {bpm, samples}),\n          // The bass holds the bar together under both.\n          gain(shape(triangle(samples, note(root)), {attack: 0.05, sustain: 0.8, release: 0.4}), 0.18),\n        ),\n        peak,\n      ),\n  });\n};\n',
+          target: "videos/components/bed-tick/bed-tick.tsx"
+        },
+        {
+          path: "components/bed-tick/bed-tick.preview.tsx",
+          content: 'import {CueWave, defineComponentPreview} from "odori/preview";\nimport {bedTick, type BedTickOptions} from "./bed-tick";\n\nconst Wave = ({bpm, root, swing, peak}: BedTickOptions) => <CueWave cue={bedTick({bpm, root, swing, peak})} />;\n\nexport default defineComponentPreview({\n  title: "Tick bed",\n  category: "Sound",\n  description: "Minimal rhythm for changelogs and lists.",\n  component: Wave,\n  canvas: {width: 1920, height: 1080, duration: "5s"},\n  controls: {\n    bpm: {type: "number", defaultValue: 104, min: 70, max: 160},\n    root: {type: "select", defaultValue: "e2", options: ["c2", "d2", "e2", "g2"]},\n    swing: {type: "number", defaultValue: 0.08, min: 0, max: 0.3, step: 0.02},\n    peak: {type: "number", defaultValue: 0.6, min: 0.1, max: 1, step: 0.05},\n  },\n  examples: [\n    {name: "Default", props: {}},\n    {name: "Straight", props: {swing: 0}},\n  ],\n});\n',
+          target: "videos/components/bed-tick/bed-tick.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "cue",
+        family: "Sound",
+        namespaced: "@odori/bed-tick",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 69,
+          minimumDurationInFrames: 69,
+          entranceFrames: 0,
+          exitFrames: 0,
+          contentLimits: {},
+          reducedMotion: "the waveform renders without a playhead",
+          requires: {
+            fonts: [
+              "mono"
+            ],
+            audio: []
+          },
+          loops: true
+        },
+        cue: {
+          name: "bed.tick",
+          export: "bedTick"
+        }
+      }
+    },
+    {
+      name: "before-after",
+      description: "Direct visual comparison with a controlled divider.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/before-after/before-after.tsx",
+          content: 'import type {ReactNode} from "react";\nimport {Fill, Easing, interpolate, useBrand, useFrame, useDesignScale} from "odori";\n\nexport type BeforeAfterProps = {\n  before: ReactNode;\n  after: ReactNode;\n  beforeLabel?: string;\n  afterLabel?: string;\n  /** Where the divider ends up, 0 to 1. */\n  settleAt?: number;\n};\n\n/**\n * One frame, two states, a divider that travels across it. Both sides are\n * always rendered at full size, so nothing reflows as the divider moves.\n */\nexport const BeforeAfter = ({before, after, beforeLabel = "Before", afterLabel = "After", settleAt = 0.5}: BeforeAfterProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n  const position = interpolate(frame, [12, 60], [1, settleAt], {\n    easing: Easing.standard,\n    extrapolateLeft: "clamp",\n    extrapolateRight: "clamp",\n  });\n\n  const label = (text: string, side: "left" | "right") => (\n    <span\n      style={{\n        background: brand.colors.surface,\n        border: `1px solid ${brand.colors.border}`,\n        borderRadius: 999,\n        bottom: 44 * scale,\n        color: brand.colors.muted,\n        fontFamily: brand.typography.mono,\n        fontSize: 24 * scale,\n        left: side === "left" ? 44 * scale : undefined,\n        padding: `${10 * scale}px ${20 * scale}px`,\n        position: "absolute",\n        right: side === "right" ? 44 * scale : undefined,\n      }}\n    >\n      {text}\n    </span>\n  );\n\n  return (\n    <Fill>\n      <Fill>{after}</Fill>\n      <Fill style={{clipPath: `inset(0 ${(1 - position) * 100}% 0 0)`}}>{before}</Fill>\n      <Fill style={{pointerEvents: "none"}}>\n        <div\n          style={{\n            background: brand.colors.accent,\n            bottom: 0,\n            left: `${position * 100}%`,\n            position: "absolute",\n            top: 0,\n            width: 3 * scale,\n          }}\n        />\n        {label(beforeLabel, "left")}\n        {label(afterLabel, "right")}\n      </Fill>\n    </Fill>\n  );\n};\n',
+          target: "videos/components/before-after/before-after.tsx"
+        },
+        {
+          path: "components/before-after/before-after.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {BeforeAfter} from "./before-after";\n\nexport default defineComponentPreview({\n  title: "Before and after",\n  category: "Narrative",\n  description: "Direct visual comparison with a controlled divider.",\n  component: BeforeAfter,\n  canvas: {width: 1920, height: 1080, duration: "4s"},\n  controls: {\n    beforeLabel: {type: "text", defaultValue: "Before"},\n    afterLabel: {type: "text", defaultValue: "After"},\n    settleAt: {type: "number", defaultValue: 0.5, min: 0.1, max: 0.9, step: 0.05},\n  },\n  examples: [\n    {\n      name: "Timeline",\n      props: {\n        before: "Hand-numbered frames",\n        after: "Ordered scenes",\n      },\n    },\n  ],\n});\n',
+          target: "videos/components/before-after/before-after.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Narrative",
+        namespaced: "@odori/before-after",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 120,
+          minimumDurationInFrames: 72,
+          entranceFrames: 60,
+          exitFrames: 0,
+          contentLimits: {
+            beforeLabel: 18,
+            afterLabel: 18
+          },
+          reducedMotion: "the divider starts at its resting position",
+          requires: {
+            fonts: [
+              "sans",
+              "mono"
+            ],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "brand-provider",
+      description: "Typed color, type, spacing, radius, and motion tokens.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/brand-provider/brand-provider.tsx",
+          content: 'import {Fill, Easing, interpolate, useBrand, useFrame, useDesignScale} from "odori";\n\nexport type BrandProviderProps = {\n  /** Which token groups to show. */\n  show?: Array<"colors" | "type" | "motion">;\n  title?: string;\n};\n\n/**\n * Reads the resolved brand and renders it. Every token on screen is the value\n * the surrounding video actually uses, so this doubles as a brand sheet and as\n * a check that a layout inherited what you expected.\n */\nexport const BrandProvider = ({show = ["colors", "type", "motion"], title = "Brand tokens"}: BrandProviderProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n  const swatches = Object.entries(brand.colors);\n\n  const row = (index: number) => {\n    const delay = 8 + index * 4;\n    const progress = interpolate(frame, [delay, delay + 20], [0, 1], {easing: Easing.standard});\n    return {opacity: progress, transform: `translateY(${(1 - progress) * 18 * scale}px)`};\n  };\n\n  return (\n    <Fill\n      style={{\n        gap: 40 * scale,\n        justifyContent: "center",\n        padding: `${110 * scale}px ${130 * scale}px`,\n      }}\n    >\n      <div style={{fontSize: 62 * scale, fontWeight: 570, letterSpacing: "-0.04em", ...row(0)}}>{title}</div>\n\n      {show.includes("colors") ? (\n        <div style={{display: "flex", flexWrap: "wrap", gap: 18 * scale}}>\n          {swatches.map(([name, value], index) => (\n            <div key={name} style={{alignItems: "center", display: "flex", gap: 12 * scale, ...row(index + 1)}}>\n              <span\n                style={{\n                  background: value,\n                  border: `1px solid ${brand.colors.border}`,\n                  borderRadius: 12 * scale,\n                  height: 56 * scale,\n                  width: 56 * scale,\n                }}\n              />\n              <span style={{fontFamily: brand.typography.mono, fontSize: 24 * scale}}>\n                {name}\n                <span style={{color: brand.colors.muted, display: "block"}}>{value}</span>\n              </span>\n            </div>\n          ))}\n        </div>\n      ) : null}\n\n      {show.includes("type") ? (\n        <div style={{display: "grid", gap: 8 * scale, ...row(swatches.length + 1)}}>\n          <span style={{fontFamily: brand.typography.sans, fontSize: 44 * scale}}>Sans, for statements</span>\n          <span style={{color: brand.colors.muted, fontFamily: brand.typography.mono, fontSize: 30 * scale}}>\n            Mono, for evidence\n          </span>\n        </div>\n      ) : null}\n\n      {show.includes("motion") ? (\n        <div\n          style={{\n            color: brand.colors.muted,\n            fontFamily: brand.typography.mono,\n            fontSize: 26 * scale,\n            ...row(swatches.length + 2),\n          }}\n        >\n          standard [{brand.motion.standard.join(", ")}] \xB7 stagger {brand.motion.staggerFrames}f\n        </div>\n      ) : null}\n    </Fill>\n  );\n};\n',
+          target: "videos/components/brand-provider/brand-provider.tsx"
+        },
+        {
+          path: "components/brand-provider/brand-provider.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {BrandProvider} from "./brand-provider";\n\nexport default defineComponentPreview({\n  title: "Brand provider",\n  category: "Foundation",\n  description: "Typed color, type, spacing, radius, and motion tokens.",\n  component: BrandProvider,\n  canvas: {width: 1920, height: 1080, duration: "4s"},\n  controls: {\n    title: {type: "text", defaultValue: "Brand tokens"},\n  },\n  examples: [\n    {name: "Everything", props: {}},\n    {name: "Colors only", props: {show: ["colors"], title: "Palette"}},\n  ],\n});\n',
+          target: "videos/components/brand-provider/brand-provider.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Foundation",
+        namespaced: "@odori/brand-provider",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 120,
+          minimumDurationInFrames: 60,
+          entranceFrames: 40,
+          exitFrames: 0,
+          contentLimits: {},
+          reducedMotion: "rows appear together",
+          requires: {
+            fonts: [
+              "sans",
+              "mono"
+            ],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "brand-resolve",
+      description: "The closing sting: a fifth, a root, and a sub under the landing.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/brand-resolve/brand-resolve.tsx",
+          content: 'import {\n  defineCue,\n  mix,\n  normalize,\n  shape,\n  sine,\n  type CueDefinition,\n} from "odori";\n\nexport type BrandResolveOptions = {\n  /** The note the sting lands on, in hertz. */\n  root?: number;\n  /** Sub weight under the landing, 0 to 1. */\n  weight?: number;\n  peak?: number;\n};\n\n/**\n * The closing sting: a fifth above the root arriving first, the root landing\n * under it, and a sub giving the landing weight. Thirty six frames, so an end\n * card can breathe before the cut.\n */\nexport const brandResolve = ({root = 196, weight = 0.5, peak = 0.8}: BrandResolveOptions = {}): CueDefinition =>\n  defineCue({\n    name: "brand.resolve",\n    durationInFrames: 36,\n    params: {root, weight, peak},\n    render: ({samples}) =>\n      normalize(\n        mix(\n          shape(sine(samples, root * 1.5), {attack: 0.01, decay: 0.3, sustain: 0.18, release: 0.5}),\n          shape(sine(samples, root), {attack: 0.04, decay: 0.35, sustain: 0.4, release: 0.6}),\n          shape(sine(samples, root / 2), {attack: 0.02, decay: 0.45, sustain: weight * 0.6, release: 0.5}),\n        ),\n        peak,\n      ),\n  });\n',
+          target: "videos/components/brand-resolve/brand-resolve.tsx"
+        },
+        {
+          path: "components/brand-resolve/brand-resolve.preview.tsx",
+          content: 'import {CueWave, defineComponentPreview} from "odori/preview";\nimport {brandResolve, type BrandResolveOptions} from "./brand-resolve";\n\nconst Wave = ({root, weight, peak}: BrandResolveOptions) => <CueWave cue={brandResolve({root, weight, peak})} />;\n\nexport default defineComponentPreview({\n  title: "Brand resolve",\n  category: "Sound",\n  description: "The closing sting: a fifth, a root, and a sub under the landing.",\n  component: Wave,\n  canvas: {width: 1920, height: 1080, duration: "2s"},\n  controls: {\n    root: {type: "number", defaultValue: 196, min: 80, max: 400},\n    weight: {type: "number", defaultValue: 0.5, min: 0, max: 1, step: 0.05},\n  },\n  examples: [\n    {name: "Default", props: {}},\n    {name: "Lighter", props: {root: 262, weight: 0.2}},\n  ],\n});\n',
+          target: "videos/components/brand-resolve/brand-resolve.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "cue",
+        family: "Sound",
+        namespaced: "@odori/brand-resolve",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 36,
+          minimumDurationInFrames: 36,
+          entranceFrames: 0,
+          exitFrames: 0,
+          contentLimits: {},
+          reducedMotion: "the waveform renders without a playhead",
+          requires: {
+            fonts: [
+              "mono"
+            ],
+            audio: []
+          },
+          loops: false
+        },
+        cue: {
+          name: "brand.resolve",
+          export: "brandResolve"
+        }
+      }
+    },
+    {
+      name: "browser-demo",
+      description: "Browser chrome for deterministic product interface frames.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/browser-demo/browser-demo.tsx",
+          content: 'import type {ReactNode} from "react";\nimport {Fill, Easing, interpolate, useBrand, useFrame, useDesignScale} from "odori";\n\nexport type BrowserDemoProps = {\n  url: string;\n  children?: ReactNode;\n  /** Frame-driven cursor path in canvas coordinates. */\n  cursor?: Array<{frame: number; x: number; y: number}>;\n};\n\n/**\n * A browser chrome frame for product UI. Application components can be passed\n * as children when they render deterministically from frozen props.\n */\nexport const BrowserDemo = ({url, children, cursor = []}: BrowserDemoProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n  const appear = interpolate(frame, [0, 18], [0, 1], {easing: Easing.standard});\n\n  const position =\n    cursor.length >= 2\n      ? {\n          x: interpolate(frame, cursor.map((point) => point.frame), cursor.map((point) => point.x)),\n          y: interpolate(frame, cursor.map((point) => point.frame), cursor.map((point) => point.y)),\n        }\n      : null;\n\n  return (\n    <Fill style={{alignItems: "center", justifyContent: "center", padding: 100 * scale}}>\n      <div\n        style={{\n          background: brand.colors.surface,\n          border: `1px solid ${brand.colors.border}`,\n          borderRadius: 20 * scale,\n          boxShadow: `0 ${40 * scale}px ${80 * scale}px rgba(0,0,0,0.45)`,\n          height: "100%",\n          maxHeight: 860 * scale,\n          maxWidth: 1500 * scale,\n          opacity: appear,\n          overflow: "hidden",\n          position: "relative",\n          transform: `translateY(${(1 - appear) * 30 * scale}px) scale(${0.98 + appear * 0.02})`,\n          width: "100%",\n        }}\n      >\n        <div\n          style={{\n            alignItems: "center",\n            borderBottom: `1px solid ${brand.colors.border}`,\n            background: "rgba(255,255,255,0.02)",\n            display: "flex",\n            gap: 9 * scale,\n            padding: `${16 * scale}px ${22 * scale}px`,\n          }}\n        >\n          {[0, 1, 2].map((index) => (\n            <span key={index} style={{background: "#2a2a2a", borderRadius: 999, height: 12 * scale, width: 12 * scale}} />\n          ))}\n          <div\n            style={{\n              background: brand.colors.background,\n              border: `1px solid ${brand.colors.border}`,\n              borderRadius: 999,\n              color: brand.colors.muted,\n              flex: 1,\n              fontFamily: brand.typography.mono,\n              fontSize: 20 * scale,\n              marginLeft: 12 * scale,\n              padding: `${8 * scale}px ${18 * scale}px`,\n              textAlign: "center",\n            }}\n          >\n            {url}\n          </div>\n        </div>\n        <div style={{flex: 1, position: "relative"}}>{children}</div>\n        {position ? (\n          <div\n            style={{\n              borderBottom: `${14 * scale}px solid ${brand.colors.foreground}`,\n              borderLeft: `${9 * scale}px solid transparent`,\n              borderRight: `${9 * scale}px solid transparent`,\n              height: 0,\n              left: position.x * scale,\n              position: "absolute",\n              top: position.y * scale,\n              transform: "rotate(-30deg)",\n              width: 0,\n            }}\n          />\n        ) : null}\n      </div>\n    </Fill>\n  );\n};\n',
+          target: "videos/components/browser-demo/browser-demo.tsx"
+        },
+        {
+          path: "components/browser-demo/browser-demo.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {BrowserDemo} from "./browser-demo";\n\nexport default defineComponentPreview({\n  title: "Browser demo",\n  category: "Product UI",\n  description: "Browser chrome for deterministic product interface frames.",\n  component: BrowserDemo,\n  canvas: {width: 1920, height: 1080, duration: "5s"},\n  controls: {url: {type: "text", defaultValue: "odori.dev/docs"}},\n  examples: [\n    {name: "Empty frame", props: {url: "odori.dev/docs"}},\n    {\n      name: "With cursor",\n      props: {\n        url: "odori.dev/components",\n        cursor: [\n          {frame: 0, x: 200, y: 200},\n          {frame: 60, x: 900, y: 520},\n        ],\n      },\n    },\n  ],\n});\n',
+          target: "videos/components/browser-demo/browser-demo.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Product UI",
+        namespaced: "@odori/browser-demo",
+        contract: {
+          aspectRatios: [
+            "16:9"
+          ],
+          recommendedDurationInFrames: 240,
+          minimumDurationInFrames: 90,
+          entranceFrames: 18,
+          exitFrames: 12,
+          contentLimits: {
+            url: 48
+          },
+          reducedMotion: "no cursor motion",
+          requires: {
+            fonts: [
+              "mono",
+              "sans"
+            ],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "canvas-magnifier",
+      description: "A true enlarged detail lens over authored content.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/canvas-magnifier/canvas-magnifier.tsx",
+          content: 'import type {ReactNode} from "react";\nimport {Easing, Fill, cursorAt, interpolate, useBrand, useFrame, useDesignScale, type CursorStop} from "odori";\n\nexport type CanvasMagnifierProps = {\n  /** What is being magnified. Rendered once, at full size, underneath. */\n  children?: ReactNode;\n  /** Where the lens sits, in composition pixels. Accepts an authored path. */\n  path?: CursorStop[];\n  /** Static position, when the lens does not move. */\n  x?: number;\n  y?: number;\n  /** Lens diameter in composition pixels. */\n  size?: number;\n  /** How much larger the detail appears. */\n  zoom?: number;\n  /** Frames the lens takes to open. */\n  entranceFrames?: number;\n};\n\n/**\n * A lens that shows the content underneath it, larger.\n *\n * True enlargement, not a copy: the same subtree is rendered a second time\n * inside a clipped circle, scaled about the lens centre, so what the lens\n * shows is the real thing and cannot drift from it. A screenshot pasted into a\n * circle would be a second asset to keep in step, and it would be wrong the\n * first time the content changed.\n *\n * The cost is that children render twice per frame. That is the honest price\n * of the detail being real, and it is why the lens takes a subtree rather than\n * the whole scene.\n */\nexport const CanvasMagnifier = ({\n  children,\n  path,\n  x = 960,\n  y = 540,\n  size = 460,\n  zoom = 2.4,\n  entranceFrames = 14,\n}: CanvasMagnifierProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n\n  const cursor = path && path.length > 0 ? cursorAt(path, frame) : null;\n  const centreX = cursor ? cursor.x : x;\n  const centreY = cursor ? cursor.y : y;\n  const open = interpolate(frame, [0, entranceFrames], [0, 1], {easing: Easing.standard}) * (cursor?.visible ?? 1);\n\n  const diameter = size * scale;\n  const left = centreX * scale - diameter / 2;\n  const top = centreY * scale - diameter / 2;\n\n  return (\n    <Fill>\n      {children}\n      <div\n        aria-hidden\n        style={{\n          border: `${Math.max(1, 3 * scale)}px solid ${brand.colors.border}`,\n          borderRadius: "50%",\n          boxShadow: `0 ${20 * scale}px ${50 * scale}px rgba(0,0,0,0.5)`,\n          height: diameter,\n          left,\n          opacity: open,\n          overflow: "hidden",\n          position: "absolute",\n          top,\n          transform: `scale(${0.9 + open * 0.1})`,\n          width: diameter,\n        }}\n      >\n        {/* The same subtree, scaled about the point under the lens, so the\n            detail is the content rather than a picture of it. */}\n        <div\n          style={{\n            height: "100%",\n            left: 0,\n            position: "absolute",\n            top: 0,\n            transform: `scale(${zoom}) translate(${(diameter / 2 - centreX * scale) / zoom}px, ${\n              (diameter / 2 - centreY * scale) / zoom\n            }px)`,\n            transformOrigin: "top left",\n            width: "100%",\n          }}\n        >\n          {children}\n        </div>\n      </div>\n    </Fill>\n  );\n};\n',
+          target: "videos/components/canvas-magnifier/canvas-magnifier.tsx"
+        },
+        {
+          path: "components/canvas-magnifier/canvas-magnifier.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {CanvasMagnifier} from "./canvas-magnifier";\n\nconst Detail = () => (\n  <div style={{background: "#080808", inset: 0, position: "absolute"}}>\n    {Array.from({length: 7}, (_, row) => (\n      <div\n        key={row}\n        style={{\n          color: row === 3 ? "#f5f5f5" : "#5a5a5a",\n          fontFamily: "ui-monospace, monospace",\n          fontSize: 34,\n          left: 200,\n          position: "absolute",\n          top: 260 + row * 70,\n        }}\n      >\n        {row === 3 ? "duration: \\"12s\\"," : `line ${row + 1}: const value = ${row * 7};`}\n      </div>\n    ))}\n  </div>\n);\n\nexport default defineComponentPreview({\n  title: "Canvas magnifier",\n  category: "Media and canvas",\n  description: "A true enlarged detail lens over authored content.",\n  component: CanvasMagnifier,\n  canvas: {width: 1920, height: 1080, duration: "4s"},\n  controls: {\n    size: {type: "number", defaultValue: 460, min: 200, max: 900},\n    zoom: {type: "number", defaultValue: 2.4, min: 1.2, max: 5, step: 0.1},\n  },\n  examples: [\n    {name: "Default", props: {children: <Detail />, x: 520, y: 470}},\n    {\n      name: "Travelling",\n      props: {\n        children: <Detail />,\n        path: [\n          {frame: 0, x: 400, y: 300},\n          {frame: 45, x: 520, y: 470, hold: 25},\n          {frame: 80, x: 700, y: 640},\n        ],\n      },\n    },\n  ],\n});\n',
+          target: "videos/components/canvas-magnifier/canvas-magnifier.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Media and canvas",
+        namespaced: "@odori/canvas-magnifier",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 120,
+          minimumDurationInFrames: 30,
+          entranceFrames: 14,
+          exitFrames: 0,
+          contentLimits: {},
+          reducedMotion: "the lens is open in place from the first frame",
+          requires: {
+            fonts: [],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "canvas-stage",
+      description: "Frame-driven canvas drawing with export parity.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/canvas-stage/canvas-stage.tsx",
+          content: 'import {Fill, random, useBrand, useCanvas, useDesignScale, useVideo, type CanvasDraw} from "odori";\n\nexport type CanvasStageProps = {\n  /** The draw call. Receives the 2D context and the frame it is drawing. */\n  draw?: CanvasDraw;\n  /** Canvas size in composition pixels. Defaults to the whole frame. */\n  width?: number;\n  height?: number;\n  /** Particles drawn by the built-in field, when no draw is supplied. */\n  count?: number;\n  /** Seed for the built-in field, so two videos can differ on purpose. */\n  seed?: string;\n};\n\n/**\n * A canvas that is a function of the frame.\n *\n * Everything a composition can do with markup, it can do with a draw call \u2014\n * and a draw call can do the things markup cannot: sample pixels, warp,\n * accumulate a trail without a thousand elements. What it must not do is\n * animate itself. `requestAnimationFrame` is wall time, and wall time means an\n * export samples wherever the loop happened to be, so two chunks disagree at\n * their seam.\n *\n * The default draw is a field of particles positioned by seeded randomness and\n * moved by the frame. It exists to make the contract legible: no state, no\n * timers, no accumulation \u2014 the same number in, the same pixels out.\n */\nexport const CanvasStage = ({draw, width, height, count = 120, seed = "field"}: CanvasStageProps) => {\n  const brand = useBrand();\n  const scale = useDesignScale();\n  const video = useVideo();\n\n  const canvasWidth = width ?? video.width;\n  const canvasHeight = height ?? video.height;\n\n  const field: CanvasDraw = (context, {frame, width: w, height: h}) => {\n    context.fillStyle = brand.colors.accent;\n    for (let index = 0; index < count; index += 1) {\n      // Position comes from the seed; motion comes from the frame. Neither\n      // reads a clock, so frame 200 is the same picture on every run.\n      const x = random([seed, "x", index]) * w;\n      const drift = random([seed, "speed", index]) * 0.6 + 0.2;\n      const y = (random([seed, "y", index]) * h + frame * drift * scale * 2) % h;\n      const size = (random([seed, "size", index]) * 3 + 1) * scale;\n      context.globalAlpha = 0.15 + random([seed, "alpha", index]) * 0.5;\n      context.beginPath();\n      context.arc(x, y, size, 0, Math.PI * 2);\n      context.fill();\n    }\n    context.globalAlpha = 1;\n  };\n\n  const canvas = useCanvas(draw ?? field, [draw, brand.colors.accent, count, seed, scale]);\n\n  return (\n    <Fill style={{alignItems: "center", background: brand.colors.background, justifyContent: "center"}}>\n      <canvas ref={canvas} width={canvasWidth} height={canvasHeight} style={{height: "100%", width: "100%"}} />\n    </Fill>\n  );\n};\n',
+          target: "videos/components/canvas-stage/canvas-stage.tsx"
+        },
+        {
+          path: "components/canvas-stage/canvas-stage.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {CanvasStage} from "./canvas-stage";\n\nexport default defineComponentPreview({\n  title: "Canvas stage",\n  category: "Media and canvas",\n  description: "Frame-driven canvas drawing with export parity.",\n  component: CanvasStage,\n  canvas: {width: 1920, height: 1080, duration: "5s"},\n  controls: {\n    count: {type: "number", defaultValue: 120, min: 10, max: 600},\n    seed: {type: "text", defaultValue: "field"},\n  },\n  examples: [\n    {name: "Default", props: {}},\n    {name: "Dense", props: {count: 400}},\n    {name: "Another seed", props: {seed: "launch"}},\n  ],\n});\n',
+          target: "videos/components/canvas-stage/canvas-stage.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Media and canvas",
+        namespaced: "@odori/canvas-stage",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 150,
+          minimumDurationInFrames: 30,
+          entranceFrames: 0,
+          exitFrames: 0,
+          contentLimits: {
+            count: 600
+          },
+          reducedMotion: "the field holds its first frame",
+          requires: {
+            fonts: [],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "captions",
+      description: "Frame-accurate caption cues for sound-off playback.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/captions/captions.tsx",
+          content: 'import {Fill, Easing, interpolate, useBrand, useFrame, useDesignScale} from "odori";\n\nexport type CaptionCue = {text: string; fromFrame: number; durationInFrames: number};\n\nexport type CaptionsProps = {\n  cues: CaptionCue[];\n  position?: "bottom" | "center";\n};\n\n/** Frame-accurate captions, safe-area aware. */\nexport const Captions = ({cues, position = "bottom"}: CaptionsProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n  const active = cues.find((cue) => frame >= cue.fromFrame && frame < cue.fromFrame + cue.durationInFrames);\n  if (!active) return null;\n\n  const local = frame - active.fromFrame;\n  const opacity = interpolate(\n    local,\n    [0, 6, Math.max(7, active.durationInFrames - 6), active.durationInFrames],\n    [0, 1, 1, 0],\n    {easing: Easing.standard},\n  );\n\n  return (\n    <Fill\n      style={{\n        alignItems: "center",\n        justifyContent: position === "bottom" ? "flex-end" : "center",\n        padding: `${72 * scale}px ${96 * scale}px`,\n        pointerEvents: "none",\n      }}\n    >\n      <div\n        style={{\n          background: "rgba(0,0,0,0.55)",\n          border: `1px solid ${brand.colors.border}`,\n          borderRadius: 14 * scale,\n          fontSize: 40 * scale,\n          fontWeight: 520,\n          maxWidth: 1400 * scale,\n          opacity,\n          padding: `${16 * scale}px ${28 * scale}px`,\n          textAlign: "center",\n        }}\n      >\n        {active.text}\n      </div>\n    </Fill>\n  );\n};\n',
+          target: "videos/components/captions/captions.tsx"
+        },
+        {
+          path: "components/captions/captions.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {Captions} from "./captions";\n\nexport default defineComponentPreview({\n  title: "Captions",\n  category: "Typography",\n  description: "Frame-accurate caption cues for sound-off playback.",\n  component: Captions,\n  canvas: {width: 1920, height: 1080, duration: "5s"},\n  examples: [\n    {\n      name: "Two cues",\n      props: {\n        cues: [\n          {text: "Preview needs no encode.", fromFrame: 0, durationInFrames: 60},\n          {text: "Export freezes the approved cut.", fromFrame: 62, durationInFrames: 70},\n        ],\n      },\n    },\n  ],\n});\n',
+          target: "videos/components/captions/captions.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Typography",
+        namespaced: "@odori/captions",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 60,
+          minimumDurationInFrames: 20,
+          entranceFrames: 6,
+          exitFrames: 6,
+          contentLimits: {
+            text: 84
+          },
+          reducedMotion: "cuts instead of fading",
+          requires: {
+            fonts: [
+              "sans"
+            ],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "carousel",
+      description: "A paced media sequence with stable aspect handling.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/carousel/carousel.tsx",
+          content: 'import type {ReactNode} from "react";\nimport {Easing, Fill, interpolate, placeholderImage, useBrand, useDesignScale, useFrame, useVideo} from "odori";\n\nexport type CarouselProps = {\n  /** Items to page through. Strings are treated as image URLs. */\n  items?: Array<string | ReactNode>;\n  /** Frames each item holds before the next arrives. */\n  holdInFrames?: number;\n  /** Frames the change takes. */\n  changeInFrames?: number;\n  /** Dots showing position. */\n  indicator?: boolean;\n};\n\n/**\n * A paced sequence with a stable frame around it.\n *\n * Two things make a carousel read as considered rather than as a slideshow:\n * the frame never changes size, so nothing reflows between items, and the\n * outgoing item leaves while the incoming one arrives rather than after it.\n * Both are handled here so a caller only supplies the items and the pace.\n */\nexport const Carousel = ({items, holdInFrames = 45, changeInFrames = 14, indicator = true}: CarouselProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n  const {width, height} = useVideo();\n\n  const list =\n    items && items.length > 0\n      ? items\n      : [1, 2, 3].map((index) => placeholderImage({label: `slide ${index}`, seed: `slide-${index}`}));\n\n  const cycle = holdInFrames + changeInFrames;\n  const index = Math.floor(frame / cycle) % list.length;\n  const next = (index + 1) % list.length;\n  const local = frame % cycle;\n  const changing = interpolate(local, [holdInFrames, cycle], [0, 1], {easing: Easing.standard});\n\n  const render = (item: string | ReactNode, key: number, offset: number, opacity: number) => (\n    <div\n      key={key}\n      style={{\n        alignItems: "center",\n        display: "flex",\n        height: "100%",\n        inset: 0,\n        justifyContent: "center",\n        opacity,\n        position: "absolute",\n        transform: `translateX(${offset}%)`,\n        width: "100%",\n      }}\n    >\n      {typeof item === "string" ? (\n        <img src={item} alt="" style={{height: "100%", objectFit: "cover", width: "100%"}} />\n      ) : (\n        item\n      )}\n    </div>\n  );\n\n  return (\n    <Fill style={{alignItems: "center", justifyContent: "center", overflow: "hidden"}}>\n      <div\n        style={{\n          borderRadius: 20 * scale,\n          height: Math.min(height * 0.72, width * 0.5),\n          overflow: "hidden",\n          position: "relative",\n          width: width * 0.78,\n        }}\n      >\n        {render(list[index], index, changing * -12, 1 - changing)}\n        {changing > 0 ? render(list[next], next + list.length, (1 - changing) * 12, changing) : null}\n      </div>\n\n      {indicator ? (\n        <div style={{bottom: 60 * scale, display: "flex", gap: 10 * scale, position: "absolute"}}>\n          {list.map((_, dot) => (\n            <span\n              key={dot}\n              style={{\n                background: dot === index ? brand.colors.foreground : brand.colors.border,\n                borderRadius: 999,\n                height: 10 * scale,\n                width: dot === index ? 28 * scale : 10 * scale,\n              }}\n            />\n          ))}\n        </div>\n      ) : null}\n    </Fill>\n  );\n};\n',
+          target: "videos/components/carousel/carousel.tsx"
+        },
+        {
+          path: "components/carousel/carousel.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {Carousel} from "./carousel";\n\nexport default defineComponentPreview({\n  title: "Carousel",\n  category: "Media and canvas",\n  description: "A paced media sequence with stable aspect handling.",\n  component: Carousel,\n  canvas: {width: 1920, height: 1080, duration: "8s"},\n  controls: {\n    holdInFrames: {type: "number", defaultValue: 45, min: 10, max: 150},\n    changeInFrames: {type: "number", defaultValue: 14, min: 4, max: 60},\n    indicator: {type: "boolean", defaultValue: true},\n  },\n  examples: [\n    {name: "Default", props: {}},\n    {name: "Fast", props: {holdInFrames: 20, changeInFrames: 8}},\n  ],\n});\n',
+          target: "videos/components/carousel/carousel.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Media and canvas",
+        namespaced: "@odori/carousel",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 240,
+          minimumDurationInFrames: 60,
+          entranceFrames: 14,
+          exitFrames: 14,
+          contentLimits: {
+            items: 8
+          },
+          reducedMotion: "the first item is shown without paging",
+          requires: {
+            fonts: [],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "character-rise",
+      description: "Characters rise with a crisp per-letter stagger.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/character-rise/character-rise.tsx",
+          content: 'import {Fill, Easing, interpolate, useBrand, useFrame, useDesignScale} from "odori";\n\nexport type CharacterRiseProps = {\n  text: string;\n  detail?: string;\n  /** Frames between one character and the next. */\n  stagger?: number;\n};\n\n/**\n * Characters rise out of a clipped baseline one after another. Spaces hold\n * their slot so the line never reflows while it assembles.\n */\nexport const CharacterRise = ({text, detail, stagger = 2}: CharacterRiseProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n  const characters = [...text];\n  const settled = 8 + characters.length * stagger + 22;\n\n  return (\n    <Fill\n      style={{\n        alignItems: "center",\n        gap: 30 * scale,\n        justifyContent: "center",\n        padding: `${120 * scale}px ${140 * scale}px`,\n      }}\n    >\n      <div style={{display: "flex", overflow: "hidden", paddingBottom: 14 * scale}}>\n        {characters.map((character, index) => {\n          const delay = 8 + index * stagger;\n          const progress = interpolate(frame, [delay, delay + 22], [0, 1], {easing: Easing.standard});\n          return (\n            <span\n              key={`${character}-${index}`}\n              style={{\n                display: "inline-block",\n                fontSize: 132 * scale,\n                fontWeight: 600,\n                letterSpacing: "-0.04em",\n                lineHeight: 1.02,\n                opacity: progress,\n                transform: `translateY(${(1 - progress) * 84 * scale}px)`,\n                whiteSpace: "pre",\n              }}\n            >\n              {character}\n            </span>\n          );\n        })}\n      </div>\n      {detail ? (\n        <div\n          style={{\n            color: brand.colors.muted,\n            fontSize: 34 * scale,\n            opacity: interpolate(frame, [settled, settled + 18], [0, 1], {easing: Easing.standard}),\n          }}\n        >\n          {detail}\n        </div>\n      ) : null}\n    </Fill>\n  );\n};\n',
+          target: "videos/components/character-rise/character-rise.tsx"
+        },
+        {
+          path: "components/character-rise/character-rise.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {CharacterRise} from "./character-rise";\n\nexport default defineComponentPreview({\n  title: "Character rise",\n  category: "Typography",\n  description: "Characters rise with a crisp per-letter stagger.",\n  component: CharacterRise,\n  canvas: {width: 1920, height: 1080, duration: "4s"},\n  controls: {\n    text: {type: "text", defaultValue: "Momentum", maxLength: 22},\n    detail: {type: "text", defaultValue: "Motion with a purpose."},\n    stagger: {type: "number", defaultValue: 2, min: 1, max: 8},\n  },\n  examples: [\n    {name: "Default", props: {text: "Momentum", detail: "Motion with a purpose."}},\n    {name: "Slow", props: {text: "Deliberate", stagger: 5}},\n  ],\n});\n',
+          target: "videos/components/character-rise/character-rise.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Typography",
+        namespaced: "@odori/character-rise",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 120,
+          minimumDurationInFrames: 45,
+          entranceFrames: 34,
+          exitFrames: 10,
+          contentLimits: {
+            text: 22
+          },
+          reducedMotion: "the word fades without per-letter motion",
+          requires: {
+            fonts: [
+              "sans"
+            ],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "code-proof",
+      description: "A framed source excerpt that reveals line by line.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/code-proof/code-proof.tsx",
+          content: 'import {Fill, Easing, interpolate, useBrand, useFrame, useDesignScale} from "odori";\n\nexport type CodeProofProps = {\n  code: string;\n  language?: string;\n  title?: string;\n  /** One-based line numbers to emphasize. Other lines dim. */\n  focus?: number[];\n  caption?: string;\n};\n\ntype Token = {pattern: RegExp; role: "comment" | "keyword" | "string" | "number" | "type" | "punctuation"};\n\nconst TOKENS: Token[] = [\n  {pattern: /(\\/\\/[^\\n]*)/g, role: "comment"},\n  {pattern: /("[^"]*"|\'[^\']*\'|`[^`]*`)/g, role: "string"},\n  {\n    pattern: /\\b(import|export|from|const|let|var|return|function|default|await|async|type|interface|new|class)\\b/g,\n    role: "keyword",\n  },\n  {pattern: /\\b([A-Z][A-Za-z0-9]*)\\b/g, role: "type"},\n  {pattern: /\\b(\\d+(?:\\.\\d+)?)\\b/g, role: "number"},\n];\n\nconst PALETTE: Record<Token["role"], string> = {\n  comment: "#6f6f6f",\n  keyword: "#c586ff",\n  string: "#7ee787",\n  number: "#ffc86b",\n  type: "#79c0ff",\n  punctuation: "#8b8b8b",\n};\n\nconst highlight = (line: string) => {\n  const marks: Array<{start: number; end: number; color: string}> = [];\n  for (const token of TOKENS) {\n    for (const match of line.matchAll(token.pattern)) {\n      const start = match.index ?? 0;\n      const end = start + match[0].length;\n      if (marks.some((mark) => start < mark.end && end > mark.start)) continue;\n      marks.push({start, end, color: PALETTE[token.role]});\n    }\n  }\n  marks.sort((left, right) => left.start - right.start);\n\n  const parts: Array<{text: string; color?: string}> = [];\n  let cursor = 0;\n  for (const mark of marks) {\n    if (mark.start > cursor) parts.push({text: line.slice(cursor, mark.start)});\n    parts.push({text: line.slice(mark.start, mark.end), color: mark.color});\n    cursor = mark.end;\n  }\n  if (cursor < line.length) parts.push({text: line.slice(cursor)});\n  return parts;\n};\n\n/**\n * A source excerpt in a product-grade window. Lines resolve from a small blur\n * so the eye lands on the code rather than on the motion.\n */\nexport const CodeProof = ({code, language = "tsx", title, focus = [], caption}: CodeProofProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n  const lines = code.replace(/\\n+$/, "").split("\\n");\n  const enter = interpolate(frame, [0, 22], [0, 1], {easing: Easing.standard});\n\n  return (\n    <Fill style={{alignItems: "center", gap: 30 * scale, justifyContent: "center", padding: 110 * scale}}>\n      <div\n        style={{\n          background: brand.colors.surface,\n          border: `1px solid ${brand.colors.border}`,\n          borderRadius: 16 * scale,\n          boxShadow: `0 ${30 * scale}px ${90 * scale}px rgba(0,0,0,0.6)`,\n          maxWidth: 1440 * scale,\n          opacity: enter,\n          overflow: "hidden",\n          transform: `translateY(${(1 - enter) * 28 * scale}px)`,\n          width: "100%",\n        }}\n      >\n        <div\n          style={{\n            alignItems: "center",\n            background: "rgba(255,255,255,0.02)",\n            borderBottom: `1px solid ${brand.colors.border}`,\n            display: "flex",\n            gap: 14 * scale,\n            padding: `${18 * scale}px ${24 * scale}px`,\n          }}\n        >\n          <div style={{display: "flex", gap: 9 * scale}}>\n            {["#2a2a2a", "#2a2a2a", "#2a2a2a"].map((color, index) => (\n              <span key={index} style={{background: color, borderRadius: 999, height: 12 * scale, width: 12 * scale}} />\n            ))}\n          </div>\n          {title ? (\n            <span\n              style={{\n                color: brand.colors.muted,\n                fontFamily: brand.typography.mono,\n                fontSize: 21 * scale,\n                letterSpacing: "-0.01em",\n                marginLeft: 8 * scale,\n              }}\n            >\n              {title}\n            </span>\n          ) : null}\n          <span\n            style={{\n              border: `1px solid ${brand.colors.border}`,\n              borderRadius: 6 * scale,\n              color: brand.colors.muted,\n              fontFamily: brand.typography.mono,\n              fontSize: 21 * scale,\n              marginLeft: "auto",\n              padding: `${4 * scale}px ${12 * scale}px`,\n              textTransform: "uppercase",\n            }}\n          >\n            {language}\n          </span>\n        </div>\n\n        <pre\n          style={{\n            color: brand.colors.foreground,\n            fontFamily: brand.typography.mono,\n            fontSize: 28 * scale,\n            lineHeight: 1.65,\n            margin: 0,\n            padding: `${30 * scale}px ${28 * scale}px`,\n          }}\n        >\n          {lines.map((line, index) => {\n            const delay = 10 + index * 3;\n            const appear = interpolate(frame, [delay, delay + 14], [0, 1], {easing: Easing.standard});\n            const focused = focus.length === 0 || focus.includes(index + 1);\n            return (\n              <div\n                key={`${line}-${index}`}\n                style={{\n                  display: "flex",\n                  filter: `blur(${(1 - appear) * 6}px)`,\n                  gap: 24 * scale,\n                  opacity: appear * (focused ? 1 : 0.32),\n                  transform: `translateY(${(1 - appear) * 8 * scale}px)`,\n                }}\n              >\n                <span style={{color: "#3a3a3a", minWidth: 32 * scale, textAlign: "right", userSelect: "none"}}>\n                  {index + 1}\n                </span>\n                <span style={{whiteSpace: "pre"}}>\n                  {highlight(line).map((part, partIndex) => (\n                    <span key={partIndex} style={{color: part.color}}>\n                      {part.text}\n                    </span>\n                  ))}\n                </span>\n              </div>\n            );\n          })}\n        </pre>\n      </div>\n\n      {caption ? (\n        <div\n          style={{\n            color: brand.colors.muted,\n            fontSize: 30 * scale,\n            letterSpacing: "-0.01em",\n            opacity: interpolate(frame, [24, 40], [0, 1], {easing: Easing.standard}),\n          }}\n        >\n          {caption}\n        </div>\n      ) : null}\n    </Fill>\n  );\n};\n',
+          target: "videos/components/code-proof/code-proof.tsx"
+        },
+        {
+          path: "components/code-proof/code-proof.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {CodeProof} from "./code-proof";\n\nconst SAMPLE = `export const metadata = defineVideoMetadata({\n  id: "launch",\n  title: "Product launch",\n  duration: "12s",\n});`;\n\nexport default defineComponentPreview({\n  title: "Code proof",\n  category: "Developer proof",\n  description: "A framed source excerpt that reveals line by line.",\n  component: CodeProof,\n  canvas: {width: 1920, height: 1080, duration: "5s"},\n  controls: {\n    code: {type: "text", defaultValue: SAMPLE, multiline: true},\n    language: {type: "select", defaultValue: "tsx", options: ["tsx", "ts", "shell", "json"]},\n    title: {type: "text", defaultValue: "videos/launch/video.tsx"},\n    caption: {type: "text", defaultValue: "Static metadata, ordinary JSX."},\n  },\n  examples: [\n    {name: "Default", props: {code: SAMPLE, title: "videos/launch/video.tsx"}},\n    {name: "Focused line", props: {code: SAMPLE, focus: [3]}},\n  ],\n});\n',
+          target: "videos/components/code-proof/code-proof.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Developer proof",
+        namespaced: "@odori/code-proof",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 180,
+          minimumDurationInFrames: 90,
+          entranceFrames: 18,
+          exitFrames: 12,
+          contentLimits: {
+            lines: 14,
+            lineLength: 62
+          },
+          reducedMotion: "reveals all lines immediately",
+          requires: {
+            fonts: [
+              "mono"
+            ],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "code-walkthrough",
+      description: "Progressive code reveal with authored focal regions.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/code-walkthrough/code-walkthrough.tsx",
+          content: 'import {Fill, Easing, interpolate, useBrand, useFrame, useDesignScale} from "odori";\n\nexport type WalkthroughStep = {\n  /** Inclusive line range to focus, one-based. */\n  from: number;\n  to: number;\n  note?: string;\n};\n\nexport type CodeWalkthroughProps = {\n  code: string;\n  steps: WalkthroughStep[];\n  title?: string;\n  /** Frames each step holds before the next takes focus. */\n  hold?: number;\n};\n\n/**\n * Source read in authored order. Every line stays on screen the whole time, so\n * the reader keeps their place; focus moves by dimming everything the current\n * step is not about.\n */\nexport const CodeWalkthrough = ({code, steps, title = "videos/launch/video.tsx", hold = 60}: CodeWalkthroughProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n  const lines = code.split("\\n");\n  const index = Math.min(steps.length - 1, Math.floor(Math.max(0, frame - 12) / hold));\n  const step = steps[index];\n  const stepStart = 12 + index * hold;\n  const focus = interpolate(frame, [stepStart, stepStart + 16], [0, 1], {easing: Easing.standard});\n\n  return (\n    <Fill style={{alignItems: "center", justifyContent: "center", padding: 90 * scale}}>\n      <div\n        style={{\n          background: brand.colors.surface,\n          border: `1px solid ${brand.colors.border}`,\n          borderRadius: 26 * scale,\n          minWidth: 1180 * scale,\n          overflow: "hidden",\n        }}\n      >\n        <div\n          style={{\n            borderBottom: `1px solid ${brand.colors.border}`,\n            color: brand.colors.muted,\n            fontFamily: brand.typography.mono,\n            fontSize: 24 * scale,\n            padding: `${20 * scale}px ${28 * scale}px`,\n          }}\n        >\n          {title}\n        </div>\n        <div style={{padding: `${20 * scale}px 0`}}>\n          {lines.map((line, lineIndex) => {\n            const number = lineIndex + 1;\n            const inFocus = step && number >= step.from && number <= step.to;\n            const dim = inFocus ? 1 : 1 - 0.68 * focus;\n            return (\n              <div\n                key={`${line}-${lineIndex}`}\n                style={{\n                  alignItems: "center",\n                  background: inFocus\n                    ? `color-mix(in srgb, ${brand.colors.accent} ${focus * 10}%, transparent)`\n                    : "transparent",\n                  display: "flex",\n                  gap: 24 * scale,\n                  opacity: dim,\n                  padding: `${6 * scale}px ${28 * scale}px`,\n                }}\n              >\n                <span style={{color: brand.colors.muted, fontFamily: brand.typography.mono, fontSize: 24 * scale, width: 44 * scale}}>\n                  {number}\n                </span>\n                <span style={{fontFamily: brand.typography.mono, fontSize: 30 * scale, whiteSpace: "pre"}}>{line}</span>\n              </div>\n            );\n          })}\n        </div>\n        {step?.note ? (\n          <div\n            style={{\n              borderTop: `1px solid ${brand.colors.border}`,\n              color: brand.colors.muted,\n              fontSize: 30 * scale,\n              opacity: focus,\n              padding: `${22 * scale}px ${28 * scale}px`,\n            }}\n          >\n            {step.note}\n          </div>\n        ) : null}\n      </div>\n    </Fill>\n  );\n};\n',
+          target: "videos/components/code-walkthrough/code-walkthrough.tsx"
+        },
+        {
+          path: "components/code-walkthrough/code-walkthrough.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {CodeWalkthrough} from "./code-walkthrough";\n\nexport default defineComponentPreview({\n  title: "Code walkthrough",\n  category: "Developer proof",\n  description: "Progressive code reveal with authored focal regions.",\n  component: CodeWalkthrough,\n  canvas: {width: 1920, height: 1080, duration: "8s"},\n  controls: {\n    title: {type: "text", defaultValue: "videos/launch/video.tsx"},\n    hold: {type: "number", defaultValue: 60, min: 24, max: 120},\n  },\n  examples: [\n    {\n      name: "Metadata to timeline",\n      props: {\n        code: `export const metadata = defineVideoMetadata({\n  id: "launch",\n  duration: "8s",\n});\n\nexport default function LaunchVideo() {\n  return (\n    <Video>\n      <Scene duration="5s">\n        <TitleReveal title="Ship the story." />\n      </Scene>\n    </Video>\n  );\n}`,\n        steps: [\n          {from: 1, to: 4, note: "Static metadata, so discovery never runs your component."},\n          {from: 6, to: 13, note: "Ordinary JSX for the timeline."},\n          {from: 8, to: 10, note: "Scenes are ordered, not numbered."},\n        ],\n      },\n    },\n  ],\n});\n',
+          target: "videos/components/code-walkthrough/code-walkthrough.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Developer proof",
+        namespaced: "@odori/code-walkthrough",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 240,
+          minimumDurationInFrames: 120,
+          entranceFrames: 28,
+          exitFrames: 0,
+          contentLimits: {
+            lines: 16,
+            lineLength: 62,
+            steps: 4
+          },
+          reducedMotion: "all steps show without dimming",
+          requires: {
+            fonts: [
+              "mono"
+            ],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "command-menu",
+      description: "Keyboard-first action search and selection flow.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/command-menu/command-menu.tsx",
+          content: 'import {Fill, Easing, interpolate, useBrand, useFrame, useDesignScale} from "odori";\n\nexport type CommandMenuProps = {\n  /** What the operator types, revealed character by character. */\n  query: string;\n  items: string[];\n  /** Index the selection lands on. */\n  selectedIndex?: number;\n  placeholder?: string;\n};\n\n/**\n * A keyboard-first palette: the query types itself, the list narrows to what\n * matches, and the selection settles on one action. Filtering is computed from\n * the typed prefix, so the list on screen is the list the query produces.\n */\nexport const CommandMenu = ({query, items, selectedIndex = 0, placeholder = "Search actions"}: CommandMenuProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n  const open = interpolate(frame, [0, 18], [0, 1], {easing: Easing.standard});\n  const typed = query.slice(0, Math.max(0, Math.floor((frame - 14) / 2)));\n  const matches = items.filter((item) => item.toLowerCase().includes(typed.toLowerCase()));\n  const selectAt = 16 + query.length * 2 + 12;\n  const selection = interpolate(frame, [selectAt, selectAt + 12], [0, 1], {easing: Easing.standard});\n\n  return (\n    <Fill style={{alignItems: "center", justifyContent: "center", padding: 90 * scale}}>\n      <div\n        style={{\n          background: brand.colors.surface,\n          border: `1px solid ${brand.colors.border}`,\n          borderRadius: 26 * scale,\n          boxShadow: `0 ${40 * scale}px ${120 * scale}px rgba(0,0,0,0.35)`,\n          opacity: open,\n          overflow: "hidden",\n          transform: `translateY(${(1 - open) * 26 * scale}px) scale(${0.97 + open * 0.03})`,\n          width: 1080 * scale,\n        }}\n      >\n        <div\n          style={{\n            alignItems: "center",\n            borderBottom: `1px solid ${brand.colors.border}`,\n            display: "flex",\n            gap: 14 * scale,\n            padding: `${26 * scale}px ${30 * scale}px`,\n          }}\n        >\n          <span style={{color: brand.colors.muted, fontFamily: brand.typography.mono, fontSize: 32 * scale}}>{">"}</span>\n          <span style={{fontSize: 36 * scale}}>\n            {typed || <span style={{color: brand.colors.muted}}>{placeholder}</span>}\n          </span>\n          <span\n            style={{\n              background: brand.colors.accent,\n              height: 36 * scale,\n              opacity: frame % 30 < 15 ? 1 : 0,\n              width: 3 * scale,\n            }}\n          />\n        </div>\n        <div style={{padding: `${14 * scale}px ${12 * scale}px`}}>\n          {matches.map((item, index) => {\n            const active = index === Math.min(selectedIndex, matches.length - 1);\n            return (\n              <div\n                key={item}\n                style={{\n                  background: active\n                    ? `color-mix(in srgb, ${brand.colors.accent} ${selection * 14}%, transparent)`\n                    : "transparent",\n                  borderRadius: 14 * scale,\n                  color: active ? brand.colors.foreground : brand.colors.muted,\n                  fontSize: 32 * scale,\n                  padding: `${16 * scale}px ${20 * scale}px`,\n                }}\n              >\n                {item}\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </Fill>\n  );\n};\n',
+          target: "videos/components/command-menu/command-menu.tsx"
+        },
+        {
+          path: "components/command-menu/command-menu.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {CommandMenu} from "./command-menu";\n\nexport default defineComponentPreview({\n  title: "Command menu",\n  category: "Developer proof",\n  description: "Keyboard-first action search and selection flow.",\n  component: CommandMenu,\n  canvas: {width: 1920, height: 1080, duration: "5s"},\n  controls: {\n    query: {type: "text", defaultValue: "exp", maxLength: 24},\n    selectedIndex: {type: "number", defaultValue: 0, min: 0, max: 5},\n  },\n  examples: [\n    {\n      name: "Export",\n      props: {\n        query: "exp",\n        items: ["Export video", "Export still", "Open Studio", "Run contract tests"],\n      },\n    },\n  ],\n});\n',
+          target: "videos/components/command-menu/command-menu.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Developer proof",
+        namespaced: "@odori/command-menu",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 150,
+          minimumDurationInFrames: 75,
+          entranceFrames: 18,
+          exitFrames: 0,
+          contentLimits: {
+            items: 6,
+            itemLength: 32,
+            query: 24
+          },
+          reducedMotion: "the query and selection are shown resolved",
+          requires: {
+            fonts: [
+              "mono"
+            ],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "comparison",
+      description: "Two options contrasted through matched structure.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/comparison/comparison.tsx",
+          content: 'import {Fill, Easing, interpolate, useBrand, useFrame, useDesignScale, useVideo} from "odori";\n\nexport type ComparisonColumn = {\n  title: string;\n  points: string[];\n  preferred?: boolean;\n};\n\nexport type ComparisonProps = {\n  columns: ComparisonColumn[];\n  headline?: string;\n};\n\n/**\n * Two options in matched structure, so the difference is the content rather\n * than the layout. The preferred column is marked once, at the top, instead of\n * being styled louder throughout.\n */\nexport const Comparison = ({columns, headline}: ComparisonProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n  const {width, height} = useVideo();\n  const stacked = height >= width;\n\n  return (\n    <Fill style={{gap: 40 * scale, justifyContent: "center", padding: `${100 * scale}px ${110 * scale}px`}}>\n      {headline ? (\n        <div style={{fontSize: 58 * scale, fontWeight: 560, letterSpacing: "-0.04em", opacity: interpolate(frame, [0, 16], [0, 1])}}>\n          {headline}\n        </div>\n      ) : null}\n      <div style={{display: "flex", flexDirection: stacked ? "column" : "row", gap: 24 * scale}}>\n        {columns.map((column, columnIndex) => {\n          const enter = interpolate(frame, [10 + columnIndex * 10, 10 + columnIndex * 10 + 22], [0, 1], {\n            easing: Easing.standard,\n          });\n          return (\n            <div\n              key={column.title}\n              style={{\n                background: brand.colors.surface,\n                border: `1px solid ${column.preferred ? brand.colors.accent : brand.colors.border}`,\n                borderRadius: 26 * scale,\n                display: "grid",\n                flex: 1,\n                gap: 20 * scale,\n                opacity: enter,\n                padding: `${34 * scale}px ${34 * scale}px`,\n                transform: `translateY(${(1 - enter) * 22 * scale}px)`,\n              }}\n            >\n              <div style={{alignItems: "center", display: "flex", gap: 14 * scale}}>\n                <span style={{fontSize: 44 * scale, fontWeight: 570, letterSpacing: "-0.03em"}}>{column.title}</span>\n                {column.preferred ? (\n                  <span\n                    style={{\n                      background: brand.colors.accent,\n                      borderRadius: 999,\n                      color: brand.colors.background,\n                      fontFamily: brand.typography.mono,\n                      fontSize: 20 * scale,\n                      padding: `${6 * scale}px ${14 * scale}px`,\n                    }}\n                  >\n                    this one\n                  </span>\n                ) : null}\n              </div>\n              {column.points.map((point, pointIndex) => {\n                const at = 18 + columnIndex * 10 + pointIndex * 7;\n                const show = interpolate(frame, [at, at + 16], [0, 1], {easing: Easing.standard});\n                return (\n                  <div\n                    key={point}\n                    style={{\n                      color: brand.colors.muted,\n                      fontSize: 30 * scale,\n                      lineHeight: 1.4,\n                      opacity: show,\n                      transform: `translateX(${(1 - show) * 12 * scale}px)`,\n                    }}\n                  >\n                    {point}\n                  </div>\n                );\n              })}\n            </div>\n          );\n        })}\n      </div>\n    </Fill>\n  );\n};\n',
+          target: "videos/components/comparison/comparison.tsx"
+        },
+        {
+          path: "components/comparison/comparison.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {Comparison} from "./comparison";\n\nexport default defineComponentPreview({\n  title: "Comparison",\n  category: "Narrative",\n  description: "Two options contrasted through matched structure.",\n  component: Comparison,\n  canvas: {width: 1920, height: 1080, duration: "5s"},\n  controls: {headline: {type: "text", defaultValue: "Two ways to ship a launch video"}},\n  examples: [\n    {\n      name: "Manual and Odori",\n      props: {\n        columns: [\n          {title: "Manual edit", points: ["Re-cut for every format", "Copy changes by hand", "Export to see the change"]},\n          {\n            title: "Odori",\n            preferred: true,\n            points: ["One layout per format", "Typed inputs per variant", "Preview needs no encode"],\n          },\n        ],\n      },\n    },\n  ],\n});\n',
+          target: "videos/components/comparison/comparison.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Narrative",
+        namespaced: "@odori/comparison",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 150,
+          minimumDurationInFrames: 75,
+          entranceFrames: 60,
+          exitFrames: 0,
+          contentLimits: {
+            columns: 2,
+            points: 4,
+            pointLength: 42
+          },
+          reducedMotion: "columns and points appear together",
+          requires: {
+            fonts: [
+              "sans",
+              "mono"
+            ],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "connection-story",
+      description: "A left-to-right pipeline of connected stages.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/connection-story/connection-story.tsx",
+          content: 'import {Fill, Easing, interpolate, useBrand, useFrame, useDesignScale} from "odori";\n\nexport type ConnectionNode = {label: string; detail?: string};\n\nexport type ConnectionStoryProps = {\n  nodes: ConnectionNode[];\n  headline?: string;\n};\n\n/** Stages connect left to right as the frame advances. */\nexport const ConnectionStory = ({nodes, headline}: ConnectionStoryProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n\n  return (\n    <Fill style={{alignItems: "center", gap: 76 * scale, justifyContent: "center", padding: 110 * scale}}>\n      {headline ? (\n        <div\n          style={{\n            fontSize: 58 * scale,\n            fontWeight: 540,\n            letterSpacing: "-0.04em",\n            opacity: interpolate(frame, [0, 16], [0, 1], {easing: Easing.standard}),\n            textAlign: "center",\n            transform: `translateY(${interpolate(frame, [0, 20], [16 * scale, 0], {easing: Easing.standard})}px)`,\n          }}\n        >\n          {headline}\n        </div>\n      ) : null}\n\n      <div style={{alignItems: "stretch", display: "flex", justifyContent: "center"}}>\n        {nodes.map((node, index) => {\n          const delay = 14 + index * 16;\n          const appear = interpolate(frame, [delay, delay + 18], [0, 1], {easing: Easing.standard});\n          const sweep = interpolate(frame, [delay - 8, delay + 12], [0, 100], {easing: Easing.standard});\n          return (\n            <div key={node.label} style={{alignItems: "center", display: "flex"}}>\n              {index > 0 ? (\n                <div style={{background: brand.colors.border, height: 1, position: "relative", width: 116 * scale}}>\n                  <div\n                    style={{\n                      background: `linear-gradient(90deg, ${brand.colors.border}, ${brand.colors.foreground})`,\n                      height: 1,\n                      width: `${sweep}%`,\n                    }}\n                  />\n                  <span\n                    style={{\n                      background: brand.colors.foreground,\n                      borderRadius: 999,\n                      height: 7 * scale,\n                      left: `${sweep}%`,\n                      opacity: sweep > 2 && sweep < 99 ? 1 : 0,\n                      position: "absolute",\n                      top: -3 * scale,\n                      width: 7 * scale,\n                    }}\n                  />\n                </div>\n              ) : null}\n              <div\n                style={{\n                  background: brand.colors.surface,\n                  border: `1px solid ${brand.colors.border}`,\n                  borderRadius: 14 * scale,\n                  display: "grid",\n                  gap: 10 * scale,\n                  minWidth: 280 * scale,\n                  opacity: appear,\n                  padding: `${30 * scale}px ${32 * scale}px`,\n                  transform: `translateY(${(1 - appear) * 22 * scale}px)`,\n                }}\n              >\n                <span\n                  style={{\n                    fontFamily: brand.typography.mono,\n                    fontSize: 34 * scale,\n                    fontWeight: 500,\n                    letterSpacing: "-0.02em",\n                  }}\n                >\n                  {node.label}\n                </span>\n                {node.detail ? (\n                  <span style={{color: brand.colors.muted, fontSize: 25 * scale, letterSpacing: "-0.01em"}}>\n                    {node.detail}\n                  </span>\n                ) : null}\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </Fill>\n  );\n};\n',
+          target: "videos/components/connection-story/connection-story.tsx"
+        },
+        {
+          path: "components/connection-story/connection-story.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {ConnectionStory} from "./connection-story";\n\nexport default defineComponentPreview({\n  title: "Connection story",\n  category: "Narrative",\n  description: "A left-to-right pipeline of connected stages.",\n  component: ConnectionStory,\n  canvas: {width: 1920, height: 1080, duration: "5s"},\n  controls: {headline: {type: "text", defaultValue: "One definition, every render path."}},\n  examples: [\n    {\n      name: "Pipeline",\n      props: {\n        headline: "One definition, every render path.",\n        nodes: [\n          {label: "videos/", detail: "source of truth"},\n          {label: "Studio", detail: "instant preview"},\n          {label: "Export", detail: "frozen manifest"},\n        ],\n      },\n    },\n  ],\n});\n',
+          target: "videos/components/connection-story/connection-story.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Narrative",
+        namespaced: "@odori/connection-story",
+        contract: {
+          aspectRatios: [
+            "16:9"
+          ],
+          recommendedDurationInFrames: 150,
+          minimumDurationInFrames: 75,
+          entranceFrames: 26,
+          exitFrames: 10,
+          contentLimits: {
+            nodes: 4,
+            label: 18
+          },
+          reducedMotion: "connects without sweeping links",
+          requires: {
+            fonts: [
+              "sans"
+            ],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "cursor-focus",
+      description: "An authored pointer that moves, holds, and clicks over a surface.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/cursor-focus/cursor-focus.tsx",
+          content: 'import type {ReactNode} from "react";\nimport {Fill, cursorAt, useBrand, useFrame, useDesignScale, type CursorStop} from "odori";\n\nexport type CursorFocusProps = {\n  /** The authored path. Coordinates are the composition\'s own pixels. */\n  path: CursorStop[];\n  /** The surface the pointer moves over. */\n  children?: ReactNode;\n  /** Pointer size in canvas pixels, before the design scale. */\n  size?: number;\n  /** Draw a soft spotlight under the pointer, dimming the rest of the frame. */\n  spotlight?: boolean;\n};\n\n/**\n * An authored pointer over a product surface.\n *\n * A surface on its own reads as a screenshot. A pointer moving across it and\n * clicking is what makes the same pixels read as someone using the product,\n * which is why every other component in this family composes with this one.\n *\n * The path is source, not a recording: the same frames come out on every\n * machine, and a change to the layout is a change to two numbers rather than a\n * re-record.\n */\nexport const CursorFocus = ({path, children, size = 28, spotlight = false}: CursorFocusProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n  const cursor = cursorAt(path, frame);\n\n  const width = size * scale;\n\n  return (\n    <Fill>\n      {children}\n      {spotlight && cursor.visible > 0 ? (\n        <div\n          aria-hidden\n          style={{\n            background: `radial-gradient(circle ${420 * scale}px at ${cursor.x * scale}px ${cursor.y * scale}px, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%)`,\n            inset: 0,\n            opacity: cursor.visible,\n            position: "absolute",\n            pointerEvents: "none",\n          }}\n        />\n      ) : null}\n      <div\n        aria-hidden\n        style={{\n          height: width,\n          left: cursor.x * scale,\n          opacity: cursor.visible,\n          position: "absolute",\n          top: cursor.y * scale,\n          // The tip is the anchor, the way a real pointer\'s hotspot is.\n          transform: "translate(-2%, -2%)",\n          width: width,\n        }}\n      >\n        {/* The press ring, drawn under the arrow so it reads as the surface\n            responding rather than as part of the pointer. */}\n        {cursor.pressed > 0 ? (\n          <span\n            style={{\n              background: "transparent",\n              border: `${Math.max(1, 2 * scale)}px solid ${brand.colors.accent}`,\n              borderRadius: 999,\n              height: width * 2.4,\n              left: "50%",\n              opacity: cursor.pressed * 0.8,\n              position: "absolute",\n              top: "50%",\n              transform: `translate(-50%, -50%) scale(${0.4 + (1 - cursor.pressed) * 0.9})`,\n              width: width * 2.4,\n            }}\n          />\n        ) : null}\n        <svg\n          viewBox="0 0 24 24"\n          style={{\n            display: "block",\n            filter: `drop-shadow(0 ${2 * scale}px ${6 * scale}px rgba(0,0,0,0.5))`,\n            height: "100%",\n            transform: `scale(${1 - cursor.pressed * 0.12})`,\n            transformOrigin: "top left",\n            width: "100%",\n          }}\n        >\n          <path\n            d="M5 2.5 L5 19 L9.2 15.1 L11.9 21.2 L14.8 19.9 L12.1 13.9 L18 13.6 Z"\n            fill={brand.colors.foreground}\n            stroke={brand.colors.background}\n            strokeWidth={1.4}\n            strokeLinejoin="round"\n          />\n        </svg>\n      </div>\n    </Fill>\n  );\n};\n',
+          target: "videos/components/cursor-focus/cursor-focus.tsx"
+        },
+        {
+          path: "components/cursor-focus/cursor-focus.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {CursorFocus} from "./cursor-focus";\n\n/** A plain surface, so the fixture shows the pointer rather than a product. */\nconst Surface = () => (\n  <div style={{background: "#0b0b0b", inset: 0, position: "absolute"}}>\n    {[\n      {label: "Overview", top: 220},\n      {label: "Deployments", top: 340},\n      {label: "Settings", top: 460},\n    ].map((row) => (\n      <div\n        key={row.label}\n        style={{\n          border: "1px solid #1f1f1f",\n          borderRadius: 16,\n          color: "#d4d4d4",\n          fontFamily: "ui-sans-serif, system-ui",\n          fontSize: 40,\n          left: 260,\n          padding: "28px 40px",\n          position: "absolute",\n          top: row.top,\n          width: 900,\n        }}\n      >\n        {row.label}\n      </div>\n    ))}\n  </div>\n);\n\nexport default defineComponentPreview({\n  title: "Cursor focus",\n  category: "Product UI",\n  description: "An authored pointer that moves, holds, and clicks over a surface.",\n  component: CursorFocus,\n  canvas: {width: 1920, height: 1080, duration: "5s"},\n  controls: {\n    size: {type: "number", defaultValue: 28, min: 16, max: 64},\n    spotlight: {type: "boolean", defaultValue: false},\n  },\n  examples: [\n    {\n      name: "Default",\n      props: {\n        children: <Surface />,\n        path: [\n          {frame: 0, x: 1500, y: 900},\n          {frame: 30, x: 640, y: 380, click: true, hold: 20},\n          {frame: 60, x: 700, y: 500, click: true, hold: 15},\n        ],\n      },\n    },\n    {\n      name: "Spotlight",\n      props: {\n        children: <Surface />,\n        spotlight: true,\n        path: [\n          {frame: 0, x: 1600, y: 300},\n          {frame: 36, x: 700, y: 620, click: true, hold: 30},\n        ],\n      },\n    },\n  ],\n});\n',
+          target: "videos/components/cursor-focus/cursor-focus.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Product UI",
+        namespaced: "@odori/cursor-focus",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 150,
+          minimumDurationInFrames: 40,
+          entranceFrames: 6,
+          exitFrames: 20,
+          contentLimits: {},
+          reducedMotion: "the pointer holds its first stop without travelling",
+          requires: {
+            fonts: [
+              "sans"
+            ],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "dashboard-frame",
+      description: "Navigation, content, and status regions for a SaaS surface.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/dashboard-frame/dashboard-frame.tsx",
+          content: 'import type {ReactNode} from "react";\nimport {Easing, Fill, interpolate, useBrand, useFrame, useDesignScale} from "odori";\n\nexport type DashboardFrameProps = {\n  /** Product name in the sidebar head. */\n  product?: string;\n  /** Sidebar entries. The active one is the section the content belongs to. */\n  sections?: string[];\n  /** Which section is current, by index. */\n  active?: number;\n  /** Shown along the top of the content region. */\n  title?: string;\n  /** A short status, drawn as a pill beside the title. */\n  status?: string;\n  children?: ReactNode;\n};\n\n/**\n * The navigation, content, and status regions every SaaS interface has, drawn\n * as a real state rather than a wireframe.\n *\n * The rule this family lives by: a fake dashboard that no user could reach is\n * worse than no dashboard. So there is one active section, one title, and one\n * status \u2014 the things a real screen commits to \u2014 and the content region is a\n * slot, because that is where the truthful part of the demonstration goes.\n */\nexport const DashboardFrame = ({\n  product = "Acme",\n  sections = ["Overview", "Deployments", "Analytics", "Settings"],\n  active = 1,\n  title = "Deployments",\n  status,\n  children,\n}: DashboardFrameProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n  const appear = interpolate(frame, [0, 16], [0, 1], {easing: Easing.standard});\n\n  return (\n    <Fill style={{background: brand.colors.background, flexDirection: "row", opacity: appear}}>\n      <aside\n        style={{\n          borderRight: `1px solid ${brand.colors.border}`,\n          display: "flex",\n          flexDirection: "column",\n          gap: 8 * scale,\n          padding: `${36 * scale}px ${24 * scale}px`,\n          width: 320 * scale,\n        }}\n      >\n        <div\n          style={{\n            color: brand.colors.foreground,\n            fontFamily: brand.typography.sans,\n            fontSize: 30 * scale,\n            fontWeight: 600,\n            letterSpacing: "-0.02em",\n            marginBottom: 22 * scale,\n          }}\n        >\n          {product}\n        </div>\n        {sections.map((section, index) => (\n          <div\n            key={section}\n            style={{\n              background: index === active ? brand.colors.surface : "transparent",\n              borderRadius: 12 * scale,\n              color: index === active ? brand.colors.foreground : brand.colors.muted,\n              fontFamily: brand.typography.sans,\n              fontSize: 25 * scale,\n              padding: `${14 * scale}px ${18 * scale}px`,\n            }}\n          >\n            {section}\n          </div>\n        ))}\n      </aside>\n\n      <section style={{display: "flex", flex: 1, flexDirection: "column", minWidth: 0}}>\n        <header\n          style={{\n            alignItems: "center",\n            borderBottom: `1px solid ${brand.colors.border}`,\n            display: "flex",\n            gap: 18 * scale,\n            padding: `${34 * scale}px ${44 * scale}px`,\n          }}\n        >\n          <span\n            style={{\n              color: brand.colors.foreground,\n              fontFamily: brand.typography.sans,\n              fontSize: 40 * scale,\n              fontWeight: 600,\n              letterSpacing: "-0.025em",\n            }}\n          >\n            {title}\n          </span>\n          {status ? (\n            <span\n              style={{\n                border: `1px solid ${brand.colors.border}`,\n                borderRadius: 999,\n                color: brand.colors.muted,\n                fontFamily: brand.typography.mono,\n                fontSize: 20 * scale,\n                padding: `${7 * scale}px ${16 * scale}px`,\n              }}\n            >\n              {status}\n            </span>\n          ) : null}\n        </header>\n        <div style={{flex: 1, minHeight: 0, padding: 44 * scale, position: "relative"}}>{children}</div>\n      </section>\n    </Fill>\n  );\n};\n',
+          target: "videos/components/dashboard-frame/dashboard-frame.tsx"
+        },
+        {
+          path: "components/dashboard-frame/dashboard-frame.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {DashboardFrame} from "./dashboard-frame";\n\nconst Rows = () => (\n  <div style={{display: "flex", flexDirection: "column", gap: 16}}>\n    {[\n      ["odori.dev", "Production", "12s ago"],\n      ["docs-site", "Preview", "4m ago"],\n      ["studio", "Production", "1h ago"],\n    ].map(([name, environment, when]) => (\n      <div\n        key={name}\n        style={{\n          alignItems: "center",\n          border: "1px solid #1f1f1f",\n          borderRadius: 14,\n          color: "#e5e5e5",\n          display: "flex",\n          fontFamily: "ui-sans-serif, system-ui",\n          fontSize: 26,\n          justifyContent: "space-between",\n          padding: "22px 26px",\n        }}\n      >\n        <span>{name}</span>\n        <span style={{color: "#8f8f8f"}}>{environment}</span>\n        <span style={{color: "#8f8f8f", fontFamily: "ui-monospace, monospace"}}>{when}</span>\n      </div>\n    ))}\n  </div>\n);\n\nexport default defineComponentPreview({\n  title: "Dashboard frame",\n  category: "Product UI",\n  description: "Navigation, content, and status regions for a SaaS surface.",\n  component: DashboardFrame,\n  canvas: {width: 1920, height: 1080, duration: "5s"},\n  controls: {\n    product: {type: "text", defaultValue: "Acme"},\n    title: {type: "text", defaultValue: "Deployments"},\n    status: {type: "text", defaultValue: "All systems normal"},\n    active: {type: "number", defaultValue: 1, min: 0, max: 3},\n  },\n  examples: [\n    {name: "Default", props: {children: <Rows />}},\n    {name: "Settings", props: {active: 3, title: "Settings", status: undefined, children: <Rows />}},\n  ],\n});\n',
+          target: "videos/components/dashboard-frame/dashboard-frame.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Product UI",
+        namespaced: "@odori/dashboard-frame",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 150,
+          minimumDurationInFrames: 40,
+          entranceFrames: 16,
+          exitFrames: 0,
+          contentLimits: {
+            product: 24,
+            title: 40,
+            status: 48
+          },
+          reducedMotion: "the frame appears without fading in",
+          requires: {
+            fonts: [
+              "sans"
+            ],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "data-table",
+      description: "Sortable rows with an authored selection story.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/data-table/data-table.tsx",
+          content: 'import {Fill, Easing, interpolate, useBrand, useFrame, useDesignScale} from "odori";\n\nexport type DataTableProps = {\n  columns: string[];\n  rows: string[][];\n  /** Row that ends up selected, zero based. */\n  selectedIndex?: number;\n  title?: string;\n};\n\n/**\n * Rows arriving in order, ending on one authored selection. The selected row\n * fills rather than recolors its text, so the story survives a brand where\n * accent and foreground sit close together.\n */\nexport const DataTable = ({columns, rows, selectedIndex, title}: DataTableProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n  const selectAt = 16 + rows.length * 7;\n\n  return (\n    <Fill style={{alignItems: "center", justifyContent: "center", padding: 90 * scale}}>\n      <div\n        style={{\n          background: brand.colors.surface,\n          border: `1px solid ${brand.colors.border}`,\n          borderRadius: 26 * scale,\n          minWidth: 1200 * scale,\n          overflow: "hidden",\n        }}\n      >\n        {title ? (\n          <div\n            style={{\n              borderBottom: `1px solid ${brand.colors.border}`,\n              fontSize: 40 * scale,\n              fontWeight: 560,\n              padding: `${24 * scale}px ${30 * scale}px`,\n            }}\n          >\n            {title}\n          </div>\n        ) : null}\n        <div\n          style={{\n            color: brand.colors.muted,\n            display: "grid",\n            fontSize: 26 * scale,\n            gap: 20 * scale,\n            gridTemplateColumns: `repeat(${columns.length}, 1fr)`,\n            padding: `${20 * scale}px ${30 * scale}px`,\n          }}\n        >\n          {columns.map((column) => (\n            <span key={column}>{column}</span>\n          ))}\n        </div>\n        {rows.map((row, index) => {\n          const delay = 14 + index * 7;\n          const enter = interpolate(frame, [delay, delay + 16], [0, 1], {easing: Easing.standard});\n          const selected = index === selectedIndex;\n          const fill = selected ? interpolate(frame, [selectAt, selectAt + 16], [0, 1], {easing: Easing.standard}) : 0;\n          return (\n            <div\n              key={index}\n              style={{\n                background: `color-mix(in srgb, ${brand.colors.accent} ${fill * 14}%, transparent)`,\n                borderTop: `1px solid ${brand.colors.border}`,\n                display: "grid",\n                fontSize: 30 * scale,\n                gap: 20 * scale,\n                gridTemplateColumns: `repeat(${columns.length}, 1fr)`,\n                opacity: enter,\n                padding: `${20 * scale}px ${30 * scale}px`,\n                transform: `translateY(${(1 - enter) * 10 * scale}px)`,\n              }}\n            >\n              {row.map((cell, cellIndex) => (\n                <span key={cellIndex} style={{fontFamily: cellIndex === 0 ? brand.typography.sans : brand.typography.mono}}>\n                  {cell}\n                </span>\n              ))}\n            </div>\n          );\n        })}\n      </div>\n    </Fill>\n  );\n};\n',
+          target: "videos/components/data-table/data-table.tsx"
+        },
+        {
+          path: "components/data-table/data-table.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {DataTable} from "./data-table";\n\nexport default defineComponentPreview({\n  title: "Data table",\n  category: "Data",\n  description: "Sortable rows with an authored selection story.",\n  component: DataTable,\n  canvas: {width: 1920, height: 1080, duration: "5s"},\n  controls: {\n    title: {type: "text", defaultValue: "Export jobs"},\n    selectedIndex: {type: "number", defaultValue: 1, min: 0, max: 5},\n  },\n  examples: [\n    {\n      name: "Jobs",\n      props: {\n        columns: ["Video", "Format", "Duration", "State"],\n        rows: [\n          ["launch", "1920x1080", "12s", "queued"],\n          ["launch", "1080x1920", "12s", "rendering"],\n          ["announcement", "1080x1080", "8s", "done"],\n        ],\n        selectedIndex: 1,\n      },\n    },\n  ],\n});\n',
+          target: "videos/components/data-table/data-table.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Data",
+        namespaced: "@odori/data-table",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 150,
+          minimumDurationInFrames: 75,
+          entranceFrames: 60,
+          exitFrames: 0,
+          contentLimits: {
+            rows: 6,
+            columns: 5
+          },
+          reducedMotion: "rows and the selection appear at once",
+          requires: {
+            fonts: [
+              "sans",
+              "mono"
+            ],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "dependency-graph",
+      description: "Packages and modules connected as a readable graph.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/dependency-graph/dependency-graph.tsx",
+          content: 'import {Fill, Easing, interpolate, useBrand, useFrame, useDesignScale} from "odori";\n\nexport type GraphNode = {\n  label: string;\n  /** Position in the frame, 0 to 1 on each axis. */\n  x: number;\n  y: number;\n};\n\nexport type DependencyGraphProps = {\n  nodes: GraphNode[];\n  /** Pairs of node indexes, drawn in order. */\n  edges: Array<[number, number]>;\n  headline?: string;\n};\n\n/**\n * Packages connected as a readable graph. Edges draw before the node they\n * point at appears, so the eye follows the dependency rather than hunting for\n * what moved.\n */\nexport const DependencyGraph = ({nodes, edges, headline}: DependencyGraphProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n\n  return (\n    <Fill style={{padding: 100 * scale}}>\n      {headline ? (\n        <div\n          style={{\n            fontSize: 56 * scale,\n            fontWeight: 560,\n            letterSpacing: "-0.04em",\n            opacity: interpolate(frame, [0, 18], [0, 1], {easing: Easing.standard}),\n          }}\n        >\n          {headline}\n        </div>\n      ) : null}\n\n      <Fill>\n        <svg style={{height: "100%", width: "100%"}}>\n          {edges.map(([from, to], index) => {\n            const delay = 14 + index * 8;\n            const draw = interpolate(frame, [delay, delay + 20], [0, 1], {easing: Easing.standard});\n            const a = nodes[from];\n            const b = nodes[to];\n            if (!a || !b) return null;\n            return (\n              <line\n                key={`${from}-${to}`}\n                stroke={brand.colors.border}\n                strokeWidth={2 * scale}\n                x1={`${a.x * 100}%`}\n                x2={`${(a.x + (b.x - a.x) * draw) * 100}%`}\n                y1={`${a.y * 100}%`}\n                y2={`${(a.y + (b.y - a.y) * draw) * 100}%`}\n              />\n            );\n          })}\n        </svg>\n      </Fill>\n\n      {nodes.map((node, index) => {\n        const delay = 10 + index * 8;\n        const enter = interpolate(frame, [delay, delay + 18], [0, 1], {easing: Easing.standard});\n        return (\n          <div\n            key={node.label}\n            style={{\n              background: brand.colors.surface,\n              border: `1px solid ${brand.colors.border}`,\n              borderRadius: 999,\n              fontFamily: brand.typography.mono,\n              fontSize: 28 * scale,\n              left: `${node.x * 100}%`,\n              opacity: enter,\n              padding: `${14 * scale}px ${26 * scale}px`,\n              position: "absolute",\n              top: `${node.y * 100}%`,\n              transform: `translate(-50%, -50%) scale(${0.9 + enter * 0.1})`,\n            }}\n          >\n            {node.label}\n          </div>\n        );\n      })}\n    </Fill>\n  );\n};\n',
+          target: "videos/components/dependency-graph/dependency-graph.tsx"
+        },
+        {
+          path: "components/dependency-graph/dependency-graph.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {DependencyGraph} from "./dependency-graph";\n\nexport default defineComponentPreview({\n  title: "Dependency graph",\n  category: "Developer proof",\n  description: "Packages and modules connected as a readable graph.",\n  component: DependencyGraph,\n  canvas: {width: 1920, height: 1080, duration: "5s"},\n  controls: {\n    headline: {type: "text", defaultValue: "One graph, one render path."},\n  },\n  examples: [\n    {\n      name: "Project",\n      props: {\n        nodes: [\n          {label: "videos/launch", x: 0.24, y: 0.4},\n          {label: "videos/components", x: 0.56, y: 0.26},\n          {label: "odori", x: 0.78, y: 0.56},\n          {label: "public/audio", x: 0.36, y: 0.74},\n        ],\n        edges: [\n          [0, 1],\n          [1, 2],\n          [0, 3],\n        ],\n      },\n    },\n  ],\n});\n',
+          target: "videos/components/dependency-graph/dependency-graph.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Developer proof",
+        namespaced: "@odori/dependency-graph",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 150,
+          minimumDurationInFrames: 75,
+          entranceFrames: 60,
+          exitFrames: 0,
+          contentLimits: {
+            nodes: 6,
+            labelLength: 24
+          },
+          reducedMotion: "edges and nodes appear without drawing",
+          requires: {
+            fonts: [
+              "sans",
+              "mono"
+            ],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "device-frame",
+      description: "A phone, tablet, or desktop body around a product surface.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/device-frame/device-frame.tsx",
+          content: 'import type {ReactNode} from "react";\nimport {Easing, Fill, interpolate, useBrand, useFrame, useDesignScale} from "odori";\n\nexport type DeviceFrameProps = {\n  /** Which body to draw around the content. */\n  device?: "phone" | "tablet" | "desktop";\n  children?: ReactNode;\n  /** Shown in the desktop chrome\'s address bar. Ignored by the other two. */\n  url?: string;\n  /** Frames the device takes to settle into place. */\n  entranceFrames?: number;\n};\n\nconst BODIES = {\n  phone: {width: 480, height: 980, radius: 62, bezel: 14},\n  tablet: {width: 900, height: 1180, radius: 40, bezel: 18},\n  desktop: {width: 1560, height: 940, radius: 22, bezel: 0},\n} as const;\n\n/**\n * A product stage with a body around it: the same content reads as an app on a\n * phone and as a site on a desktop, and the frame is what tells the viewer\n * which claim is being made.\n *\n * Proportions are the real ones rather than a stylised outline, because a\n * device that is the wrong shape quietly undermines the screenshot inside it.\n * Nothing here is a photograph, so it takes the brand\'s colours and stays\n * honest at any format.\n */\nexport const DeviceFrame = ({device = "desktop", children, url, entranceFrames = 20}: DeviceFrameProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n  const body = BODIES[device];\n\n  const appear = interpolate(frame, [0, entranceFrames], [0, 1], {easing: Easing.standard});\n  const bezel = body.bezel * scale;\n\n  return (\n    <Fill style={{alignItems: "center", justifyContent: "center", padding: 60 * scale}}>\n      <div\n        style={{\n          background: brand.colors.surface,\n          border: `${Math.max(1, 2 * scale)}px solid ${brand.colors.border}`,\n          borderRadius: body.radius * scale,\n          boxShadow: `0 ${44 * scale}px ${90 * scale}px rgba(0,0,0,0.5)`,\n          // A column, so the screen below the chrome can take the remaining\n          // height. Without this the body\'s `flex: 1` means nothing and the\n          // content collapses to zero \u2014 the frame renders, and it is empty.\n          display: "flex",\n          flexDirection: "column",\n          height: body.height * scale,\n          maxHeight: "100%",\n          maxWidth: "100%",\n          opacity: appear,\n          overflow: "hidden",\n          padding: bezel,\n          position: "relative",\n          transform: `translateY(${(1 - appear) * 26 * scale}px) scale(${0.985 + appear * 0.015})`,\n          width: body.width * scale,\n        }}\n      >\n        {device === "desktop" ? (\n          <div\n            style={{\n              alignItems: "center",\n              background: "rgba(255,255,255,0.02)",\n              borderBottom: `1px solid ${brand.colors.border}`,\n              display: "flex",\n              gap: 9 * scale,\n              padding: `${14 * scale}px ${20 * scale}px`,\n            }}\n          >\n            {[0, 1, 2].map((index) => (\n              <span\n                key={index}\n                style={{background: brand.colors.border, borderRadius: 999, height: 11 * scale, width: 11 * scale}}\n              />\n            ))}\n            {url ? (\n              <span\n                style={{\n                  background: brand.colors.background,\n                  borderRadius: 999,\n                  color: brand.colors.muted,\n                  fontFamily: brand.typography.mono,\n                  // 17px is what a browser really shows and what `odori test`\n                  // rejects: at 1080p it is a grey smudge. A video is read\n                  // from further away than a screen is.\n                  fontSize: 24 * scale,\n                  marginLeft: 14 * scale,\n                  padding: `${8 * scale}px ${20 * scale}px`,\n                }}\n              >\n                {url}\n              </span>\n            ) : null}\n          </div>\n        ) : null}\n\n        <div\n          style={{\n            background: brand.colors.background,\n            borderRadius: Math.max(0, (body.radius - body.bezel) * scale),\n            flex: 1,\n            overflow: "hidden",\n            position: "relative",\n          }}\n        >\n          {children}\n        </div>\n\n        {/* The one physical detail worth drawing: a phone\'s status notch and a\n            tablet\'s home line are what the eye uses to tell them apart. */}\n        {device === "phone" ? (\n          <span\n            style={{\n              background: brand.colors.background,\n              borderRadius: 999,\n              height: 26 * scale,\n              left: "50%",\n              position: "absolute",\n              top: bezel + 10 * scale,\n              transform: "translateX(-50%)",\n              width: 150 * scale,\n            }}\n          />\n        ) : null}\n      </div>\n    </Fill>\n  );\n};\n',
+          target: "videos/components/device-frame/device-frame.tsx"
+        },
+        {
+          path: "components/device-frame/device-frame.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {DeviceFrame} from "./device-frame";\n\nconst Screen = () => (\n  <div\n    style={{\n      alignItems: "center",\n      color: "#f5f5f5",\n      display: "flex",\n      flexDirection: "column",\n      fontFamily: "ui-sans-serif, system-ui",\n      gap: 18,\n      inset: 0,\n      justifyContent: "center",\n      position: "absolute",\n      textAlign: "center",\n    }}\n  >\n    <strong style={{fontSize: 54, letterSpacing: "-0.03em"}}>Deployments</strong>\n    <span style={{color: "#8f8f8f", fontSize: 28}}>All systems normal</span>\n  </div>\n);\n\nexport default defineComponentPreview({\n  title: "Device frame",\n  category: "Product UI",\n  description: "A phone, tablet, or desktop body around a product surface.",\n  component: DeviceFrame,\n  canvas: {width: 1920, height: 1080, duration: "4s"},\n  controls: {\n    device: {type: "select", defaultValue: "desktop", options: ["desktop", "tablet", "phone"]},\n    url: {type: "text", defaultValue: "app.example.com/deployments"},\n    entranceFrames: {type: "number", defaultValue: 20, min: 0, max: 60},\n  },\n  examples: [\n    {name: "Desktop", props: {children: <Screen />}},\n    {name: "Phone", props: {device: "phone", children: <Screen />}},\n    {name: "Tablet", props: {device: "tablet", children: <Screen />}},\n  ],\n});\n',
+          target: "videos/components/device-frame/device-frame.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Product UI",
+        namespaced: "@odori/device-frame",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 120,
+          minimumDurationInFrames: 30,
+          entranceFrames: 20,
+          exitFrames: 0,
+          contentLimits: {
+            url: 64
+          },
+          reducedMotion: "the body appears in place without rising",
+          requires: {
+            fonts: [
+              "sans"
+            ],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "diff-proof",
+      description: "Before and after source changes with semantic emphasis.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/diff-proof/diff-proof.tsx",
+          content: 'import {Fill, Easing, interpolate, useBrand, useFrame, useDesignScale} from "odori";\n\nexport type DiffLine = {\n  text: string;\n  kind?: "added" | "removed" | "context";\n};\n\nexport type DiffProofProps = {\n  lines: DiffLine[];\n  title?: string;\n  /** Frames between one changed line and the next. */\n  stagger?: number;\n};\n\n/**\n * A patch that reveals its changed lines in order. Context lines are present\n * from the first frame, so the eye reads the change rather than the file.\n */\nexport const DiffProof = ({lines, title = "videos/launch/video.tsx", stagger = 8}: DiffProofProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n  let changed = 0;\n\n  return (\n    <Fill style={{alignItems: "center", justifyContent: "center", padding: 90 * scale}}>\n      <div\n        style={{\n          background: brand.colors.surface,\n          border: `1px solid ${brand.colors.border}`,\n          borderRadius: 24 * scale,\n          minWidth: 1100 * scale,\n          overflow: "hidden",\n        }}\n      >\n        <div\n          style={{\n            borderBottom: `1px solid ${brand.colors.border}`,\n            color: brand.colors.muted,\n            fontFamily: brand.typography.mono,\n            fontSize: 24 * scale,\n            padding: `${20 * scale}px ${26 * scale}px`,\n          }}\n        >\n          {title}\n        </div>\n        <div style={{padding: `${18 * scale}px 0`}}>\n          {lines.map((line, index) => {\n            const kind = line.kind ?? "context";\n            const context = kind === "context";\n            const delay = context ? 0 : 12 + changed * stagger;\n            if (!context) changed += 1;\n            const enter = context ? 1 : interpolate(frame, [delay, delay + 14], [0, 1], {easing: Easing.standard});\n            const tint =\n              kind === "added" ? brand.colors.accent : kind === "removed" ? brand.colors.muted : "transparent";\n            return (\n              <div\n                key={`${line.text}-${index}`}\n                style={{\n                  background: context ? "transparent" : `color-mix(in srgb, ${tint} ${enter * 14}%, transparent)`,\n                  borderLeft: `${4 * scale}px solid ${context ? "transparent" : tint}`,\n                  color: context ? brand.colors.muted : brand.colors.foreground,\n                  fontFamily: brand.typography.mono,\n                  fontSize: 30 * scale,\n                  opacity: context ? 0.7 : enter,\n                  padding: `${8 * scale}px ${26 * scale}px`,\n                  textDecoration: kind === "removed" ? "line-through" : "none",\n                  whiteSpace: "pre",\n                }}\n              >\n                {kind === "added" ? "+ " : kind === "removed" ? "- " : "  "}\n                {line.text}\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </Fill>\n  );\n};\n',
+          target: "videos/components/diff-proof/diff-proof.tsx"
+        },
+        {
+          path: "components/diff-proof/diff-proof.preview.tsx",
+          content: `import {defineComponentPreview} from "odori/preview";
+import {DiffProof} from "./diff-proof";
+
+export default defineComponentPreview({
+  title: "Diff proof",
+  category: "Developer proof",
+  description: "Before and after source changes with semantic emphasis.",
+  component: DiffProof,
+  canvas: {width: 1920, height: 1080, duration: "5s"},
+  controls: {
+    title: {type: "text", defaultValue: "videos/launch/video.tsx"},
+    stagger: {type: "number", defaultValue: 8, min: 2, max: 24},
+  },
+  examples: [
+    {
+      name: "Scene retimed",
+      props: {
+        lines: [
+          {text: "<Video>", kind: "context"},
+          {text: '  <Scene duration="4s">', kind: "removed"},
+          {text: '  <Scene duration="5s">', kind: "added"},
+          {text: "    <TitleReveal title={headline} />", kind: "context"},
+          {text: "  </Scene>", kind: "context"},
+          {text: "</Video>", kind: "context"},
+        ],
+      },
+    },
+  ],
+});
+`,
+          target: "videos/components/diff-proof/diff-proof.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Developer proof",
+        namespaced: "@odori/diff-proof",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 150,
+          minimumDurationInFrames: 72,
+          entranceFrames: 40,
+          exitFrames: 0,
+          contentLimits: {
+            lines: 12,
+            lineLength: 58
+          },
+          reducedMotion: "changed lines appear without staggering",
+          requires: {
+            fonts: [
+              "mono"
+            ],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "donut-chart",
+      description: "Part-to-whole display with a stable center metric.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/donut-chart/donut-chart.tsx",
+          content: 'import {Fill, Easing, interpolate, useBrand, useFrame, useDesignScale} from "odori";\n\nexport type DonutSlice = {label: string; value: number};\n\nexport type DonutChartProps = {\n  slices: DonutSlice[];\n  /** Held in the middle of the ring. */\n  centerLabel?: string;\n  title?: string;\n};\n\n/**\n * Part to whole with a stable center. Slices sweep in order around one ring,\n * and the center metric never moves, so the eye has somewhere to rest.\n */\nexport const DonutChart = ({slices, centerLabel, title}: DonutChartProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n  const total = slices.reduce((sum, slice) => sum + slice.value, 0) || 1;\n  const sweep = interpolate(frame, [10, 62], [0, 1], {easing: Easing.standard});\n  const radius = 40;\n  const circumference = 2 * Math.PI * radius;\n  let offset = 0;\n\n  return (\n    <Fill style={{alignItems: "center", gap: 34 * scale, justifyContent: "center", padding: 100 * scale}}>\n      {title ? (\n        <div style={{fontSize: 54 * scale, fontWeight: 560, letterSpacing: "-0.04em", opacity: interpolate(frame, [0, 16], [0, 1])}}>\n          {title}\n        </div>\n      ) : null}\n      <div style={{height: 460 * scale, position: "relative", width: 460 * scale}}>\n        <svg style={{height: "100%", transform: "rotate(-90deg)", width: "100%"}} viewBox="0 0 100 100">\n          <circle cx={50} cy={50} fill="none" r={radius} stroke={brand.colors.border} strokeWidth={12} />\n          {slices.map((slice, index) => {\n            const share = (slice.value / total) * sweep;\n            const dash = share * circumference;\n            const element = (\n              <circle\n                key={slice.label}\n                cx={50}\n                cy={50}\n                fill="none"\n                r={radius}\n                stroke={index === 0 ? brand.colors.accent : brand.colors.muted}\n                strokeDasharray={`${dash} ${circumference}`}\n                strokeDashoffset={-offset * circumference}\n                strokeWidth={12}\n                opacity={index === 0 ? 1 : 0.45 + index * 0.1}\n              />\n            );\n            offset += slice.value / total;\n            return element;\n          })}\n        </svg>\n        {centerLabel ? (\n          <div\n            style={{\n              alignItems: "center",\n              display: "flex",\n              fontSize: 92 * scale,\n              fontWeight: 600,\n              inset: 0,\n              justifyContent: "center",\n              letterSpacing: "-0.05em",\n              position: "absolute",\n            }}\n          >\n            {centerLabel}\n          </div>\n        ) : null}\n      </div>\n      <div style={{color: brand.colors.muted, display: "flex", fontSize: 28 * scale, gap: 28 * scale}}>\n        {slices.map((slice) => (\n          <span key={slice.label}>\n            {slice.label} {Math.round((slice.value / total) * 100)}%\n          </span>\n        ))}\n      </div>\n    </Fill>\n  );\n};\n',
+          target: "videos/components/donut-chart/donut-chart.tsx"
+        },
+        {
+          path: "components/donut-chart/donut-chart.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {DonutChart} from "./donut-chart";\n\nexport default defineComponentPreview({\n  title: "Donut chart",\n  category: "Data",\n  description: "Part-to-whole display with a stable center metric.",\n  component: DonutChart,\n  canvas: {width: 1920, height: 1080, duration: "4s"},\n  controls: {\n    title: {type: "text", defaultValue: "Where render time goes"},\n    centerLabel: {type: "text", defaultValue: "72%"},\n  },\n  examples: [\n    {\n      name: "Split",\n      props: {\n        slices: [\n          {label: "encode", value: 72},\n          {label: "paint", value: 18},\n          {label: "audio", value: 10},\n        ],\n        centerLabel: "72%",\n      },\n    },\n  ],\n});\n',
+          target: "videos/components/donut-chart/donut-chart.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Data",
+        namespaced: "@odori/donut-chart",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 120,
+          minimumDurationInFrames: 72,
+          entranceFrames: 62,
+          exitFrames: 0,
+          contentLimits: {
+            slices: 5,
+            labelLength: 18
+          },
+          reducedMotion: "slices appear without sweeping",
+          requires: {
+            fonts: [
+              "sans"
+            ],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "end-card",
+      description: "The closing frame: title, supporting line, and a call to action.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/end-card/end-card.tsx",
+          content: 'import {Fill, Easing, interpolate, spring, useBrand, useFrame, useDesignScale, useVideo} from "odori";\n\nexport type EndCardProps = {\n  title: string;\n  detail?: string;\n  callToAction?: string;\n};\n\n/** The closing lockup: the statement, and one command to run. */\nexport const EndCard = ({title, detail, callToAction}: EndCardProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const {fps} = useVideo();\n  const scale = useDesignScale();\n  const rise = spring({frame, fps, from: 0.96, to: 1, damping: 20});\n  const line = interpolate(frame, [8, 34], [0, 1], {easing: Easing.standard});\n\n  return (\n    <Fill style={{alignItems: "center", gap: 30 * scale, justifyContent: "center", padding: 110 * scale}}>\n      <div\n        style={{\n          fontSize: 108 * scale,\n          fontWeight: 560,\n          letterSpacing: "-0.05em",\n          lineHeight: 1.02,\n          maxWidth: 1400 * scale,\n          opacity: interpolate(frame, [0, 18], [0, 1], {easing: Easing.standard}),\n          textAlign: "center",\n          transform: `scale(${rise})`,\n          whiteSpace: "pre-line",\n        }}\n      >\n        {title}\n      </div>\n\n      <div\n        style={{\n          background: `linear-gradient(90deg, transparent, ${brand.colors.border}, transparent)`,\n          height: 1,\n          opacity: line,\n          width: `${line * 46}%`,\n        }}\n      />\n\n      {detail ? (\n        <div\n          style={{\n            color: brand.colors.muted,\n            fontSize: 34 * scale,\n            letterSpacing: "-0.015em",\n            opacity: interpolate(frame, [14, 30], [0, 1], {easing: Easing.standard}),\n            textAlign: "center",\n          }}\n        >\n          {detail}\n        </div>\n      ) : null}\n\n      {callToAction ? (\n        <div\n          style={{\n            alignItems: "center",\n            background: "rgba(255,255,255,0.04)",\n            border: `1px solid ${brand.colors.border}`,\n            borderRadius: 10 * scale,\n            color: brand.colors.foreground,\n            display: "flex",\n            fontFamily: brand.typography.mono,\n            fontSize: 28 * scale,\n            gap: 14 * scale,\n            marginTop: 8 * scale,\n            opacity: interpolate(frame, [22, 38], [0, 1], {easing: Easing.standard}),\n            padding: `${16 * scale}px ${28 * scale}px`,\n            transform: `translateY(${interpolate(frame, [22, 38], [12 * scale, 0], {easing: Easing.standard})}px)`,\n          }}\n        >\n          <span style={{color: brand.colors.muted}}>{"$"}</span>\n          {callToAction}\n        </div>\n      ) : null}\n    </Fill>\n  );\n};\n',
+          target: "videos/components/end-card/end-card.tsx"
+        },
+        {
+          path: "components/end-card/end-card.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {EndCard} from "./end-card";\n\nexport default defineComponentPreview({\n  title: "End card",\n  category: "Brand",\n  description: "The closing frame: title, supporting line, and a call to action.",\n  component: EndCard,\n  canvas: {width: 1920, height: 1080, duration: "3s"},\n  controls: {\n    title: {type: "text", defaultValue: "Author. Preview. Ship.", maxLength: 48},\n    detail: {type: "text", defaultValue: "An independent React video framework."},\n    callToAction: {type: "text", defaultValue: "npm i odori"},\n  },\n  examples: [\n    {name: "Default", props: {title: "Author. Preview. Ship.", callToAction: "npm i odori"}},\n    {name: "Title only", props: {title: "Available today.", detail: undefined, callToAction: undefined}},\n  ],\n});\n',
+          target: "videos/components/end-card/end-card.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Brand",
+        namespaced: "@odori/end-card",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 90,
+          minimumDurationInFrames: 45,
+          entranceFrames: 24,
+          exitFrames: 12,
+          contentLimits: {
+            title: 48,
+            callToAction: 28
+          },
+          reducedMotion: "fades without scaling",
+          requires: {
+            fonts: [
+              "sans",
+              "mono"
+            ],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "error",
+      description: "Two notes falling a fourth, for a failure.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/error/error.tsx",
+          content: 'import {defineCue, gain, lowPass, mix, normalize, note, sequence, shape, sine, triangle, type CueDefinition} from "odori";\n\nexport type ErrorOptions = {\n  /** The note the sound starts from before it falls. */\n  root?: string;\n  /** Peak level before the mix normalizes the whole track. */\n  peak?: number;\n};\n\n/**\n * Two notes falling a fourth, with a little edge under them: the inverse of\n * `success`, which is how an interface says the thing did not work.\n *\n * Deliberately not harsh. A buzzer punishes the viewer for watching; a falling\n * interval reports the failure and gets out of the way.\n */\nexport const error = ({root = "c5", peak = 0.55}: ErrorOptions = {}): CueDefinition => {\n  const samples = Math.round(48000 * 0.55);\n  const base = note(root);\n\n  return defineCue({\n    name: "ui.error",\n    durationInFrames: 17,\n    params: {root, peak},\n    render: () =>\n      normalize(\n        sequence(\n          [base, base * 2 ** (-5 / 12)].map((frequency, index) => ({\n            at: index,\n            play: (length: number) =>\n              mix(\n                shape(sine(length, frequency), {attack: 0.004, decay: 0.26, sustain: 0.05, release: 0.14}),\n                // A triangle under the second note gives it the edge that\n                // reads as "wrong" without reaching for distortion.\n                gain(lowPass(shape(triangle(length, frequency / 2), {attack: 0.006, decay: 0.3, sustain: 0}), 1800), 0.35),\n              ),\n            gain: index === 0 ? 0.75 : 0.9,\n          })),\n          {bpm: 132, division: 16, samples},\n        ),\n        peak,\n      ),\n  });\n};\n',
+          target: "videos/components/error/error.tsx"
+        },
+        {
+          path: "components/error/error.preview.tsx",
+          content: 'import {CueWave, defineComponentPreview} from "odori/preview";\nimport {error, type ErrorOptions} from "./error";\n\nconst Wave = ({root, peak}: ErrorOptions) => <CueWave cue={error({root, peak})} />;\n\nexport default defineComponentPreview({\n  title: "Error",\n  category: "Sound",\n  description: "Two notes falling a fourth, for a failure.",\n  component: Wave,\n  canvas: {width: 1920, height: 1080, duration: "2s"},\n  controls: {\n    root: {type: "select", defaultValue: "c5", options: ["a4", "c5", "d5", "e5"]},\n    peak: {type: "number", defaultValue: 0.55, min: 0.1, max: 1, step: 0.05},\n  },\n  examples: [{name: "Default", props: {}}, {name: "Lower", props: {root: "a4"}}],\n});\n',
+          target: "videos/components/error/error.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "cue",
+        family: "Sound",
+        namespaced: "@odori/error",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 17,
+          minimumDurationInFrames: 17,
+          entranceFrames: 0,
+          exitFrames: 0,
+          contentLimits: {},
+          reducedMotion: "the waveform renders without a playhead",
+          requires: {
+            fonts: [
+              "mono"
+            ],
+            audio: []
+          },
+          loops: false
+        },
+        cue: {
+          name: "ui.error",
+          export: "error"
+        }
+      }
+    },
+    {
+      name: "feature-stack",
+      description: "Benefits progress through one stable visual container.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/feature-stack/feature-stack.tsx",
+          content: 'import {Fill, Easing, interpolate, useBrand, useFrame, useDesignScale} from "odori";\n\nexport type Feature = {title: string; detail?: string};\n\nexport type FeatureStackProps = {\n  features: Feature[];\n  headline?: string;\n  /** Frames each feature holds before the next replaces it. */\n  hold?: number;\n};\n\n/**\n * Benefits progressing through one stable container. The card never moves or\n * resizes; only its contents change, so a viewer can read three claims without\n * their eye being dragged around the frame.\n */\nexport const FeatureStack = ({features, headline, hold = 45}: FeatureStackProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n  const index = Math.min(features.length - 1, Math.floor(Math.max(0, frame - 12) / hold));\n  const feature = features[index];\n  const at = 12 + index * hold;\n  const enter = interpolate(frame, [at, at + 16], [0, 1], {easing: Easing.standard});\n\n  return (\n    <Fill style={{alignItems: "center", gap: 40 * scale, justifyContent: "center", padding: 110 * scale}}>\n      {headline ? (\n        <div style={{color: brand.colors.muted, fontSize: 34 * scale, opacity: interpolate(frame, [0, 16], [0, 1])}}>\n          {headline}\n        </div>\n      ) : null}\n      <div\n        style={{\n          background: brand.colors.surface,\n          border: `1px solid ${brand.colors.border}`,\n          borderRadius: 30 * scale,\n          display: "grid",\n          gap: 18 * scale,\n          minHeight: 320 * scale,\n          padding: `${52 * scale}px ${56 * scale}px`,\n          placeContent: "center",\n          textAlign: "center",\n          width: 1200 * scale,\n        }}\n      >\n        <div\n          style={{\n            fontSize: 76 * scale,\n            fontWeight: 570,\n            letterSpacing: "-0.04em",\n            opacity: enter,\n            transform: `translateY(${(1 - enter) * 18 * scale}px)`,\n          }}\n        >\n          {feature?.title}\n        </div>\n        {feature?.detail ? (\n          <div style={{color: brand.colors.muted, fontSize: 32 * scale, opacity: enter}}>{feature.detail}</div>\n        ) : null}\n      </div>\n      <div style={{display: "flex", gap: 10 * scale}}>\n        {features.map((item, dot) => (\n          <span\n            key={item.title}\n            style={{\n              background: dot === index ? brand.colors.accent : brand.colors.border,\n              borderRadius: 999,\n              height: 10 * scale,\n              width: dot === index ? 34 * scale : 10 * scale,\n            }}\n          />\n        ))}\n      </div>\n    </Fill>\n  );\n};\n',
+          target: "videos/components/feature-stack/feature-stack.tsx"
+        },
+        {
+          path: "components/feature-stack/feature-stack.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {FeatureStack} from "./feature-stack";\n\nexport default defineComponentPreview({\n  title: "Feature stack",\n  category: "Narrative",\n  description: "Benefits progress through one stable visual container.",\n  component: FeatureStack,\n  canvas: {width: 1920, height: 1080, duration: "6s"},\n  controls: {\n    headline: {type: "text", defaultValue: "What you get"},\n    hold: {type: "number", defaultValue: 45, min: 20, max: 90},\n  },\n  examples: [\n    {\n      name: "Three claims",\n      props: {\n        features: [\n          {title: "Fast", detail: "Preview needs no encode."},\n          {title: "Typed", detail: "Inputs validated before a render starts."},\n          {title: "Reliable", detail: "The approved cut is the rendered cut."},\n        ],\n      },\n    },\n  ],\n});\n',
+          target: "videos/components/feature-stack/feature-stack.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Narrative",
+        namespaced: "@odori/feature-stack",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 180,
+          minimumDurationInFrames: 90,
+          entranceFrames: 28,
+          exitFrames: 0,
+          contentLimits: {
+            features: 4,
+            titleLength: 24,
+            detailLength: 56
+          },
+          reducedMotion: "features cross-fade without travel",
+          requires: {
+            fonts: [
+              "sans"
+            ],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "file-tree",
+      description: "Progressive repository navigation with active file state.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/file-tree/file-tree.tsx",
+          content: 'import {Fill, Easing, interpolate, useBrand, useFrame, useDesignScale} from "odori";\n\nexport type FileTreeNode = {\n  /** Path segment shown on the row. */\n  name: string;\n  /** Depth from the root, starting at zero. */\n  depth?: number;\n  kind?: "folder" | "file";\n};\n\nexport type FileTreeProps = {\n  nodes: FileTreeNode[];\n  /** Row index that ends up highlighted. */\n  activeIndex?: number;\n  title?: string;\n};\n\n/**\n * A repository revealing itself row by row, ending on one active file. The\n * highlight is a filled row rather than a color change, so it survives a\n * light brand as well as a dark one.\n */\nexport const FileTree = ({nodes, activeIndex = 0, title = "videos/"}: FileTreeProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n  const settle = 10 + nodes.length * 5;\n\n  return (\n    <Fill style={{alignItems: "center", justifyContent: "center", padding: 90 * scale}}>\n      <div\n        style={{\n          background: brand.colors.surface,\n          border: `1px solid ${brand.colors.border}`,\n          borderRadius: 26 * scale,\n          minWidth: 900 * scale,\n          overflow: "hidden",\n          padding: `${28 * scale}px ${20 * scale}px`,\n        }}\n      >\n        <div\n          style={{\n            color: brand.colors.muted,\n            fontFamily: brand.typography.mono,\n            fontSize: 24 * scale,\n            padding: `0 ${18 * scale}px ${18 * scale}px`,\n          }}\n        >\n          {title}\n        </div>\n        {nodes.map((node, index) => {\n          const delay = 10 + index * 5;\n          const enter = interpolate(frame, [delay, delay + 16], [0, 1], {easing: Easing.standard});\n          const active = index === activeIndex;\n          const highlight = active\n            ? interpolate(frame, [settle, settle + 16], [0, 1], {easing: Easing.standard})\n            : 0;\n          return (\n            <div\n              key={`${node.name}-${index}`}\n              style={{\n                alignItems: "center",\n                background: active ? `color-mix(in srgb, ${brand.colors.accent} ${highlight * 16}%, transparent)` : "transparent",\n                borderRadius: 12 * scale,\n                display: "flex",\n                gap: 14 * scale,\n                opacity: enter,\n                padding: `${10 * scale}px ${18 * scale}px`,\n                paddingLeft: (18 + (node.depth ?? 0) * 28) * scale,\n                transform: `translateX(${(1 - enter) * 16 * scale}px)`,\n              }}\n            >\n              <span\n                style={{\n                  background: node.kind === "folder" ? brand.colors.muted : "transparent",\n                  border: `${2 * scale}px solid ${node.kind === "folder" ? brand.colors.muted : brand.colors.border}`,\n                  borderRadius: 5 * scale,\n                  height: 18 * scale,\n                  opacity: 0.8,\n                  width: 18 * scale,\n                }}\n              />\n              <span\n                style={{\n                  color: active ? brand.colors.foreground : brand.colors.muted,\n                  fontFamily: brand.typography.mono,\n                  fontSize: 30 * scale,\n                }}\n              >\n                {node.name}\n              </span>\n            </div>\n          );\n        })}\n      </div>\n    </Fill>\n  );\n};\n',
+          target: "videos/components/file-tree/file-tree.tsx"
+        },
+        {
+          path: "components/file-tree/file-tree.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {FileTree} from "./file-tree";\n\nexport default defineComponentPreview({\n  title: "File tree",\n  category: "Developer proof",\n  description: "Progressive repository navigation with active file state.",\n  component: FileTree,\n  canvas: {width: 1920, height: 1080, duration: "5s"},\n  controls: {\n    title: {type: "text", defaultValue: "videos/"},\n    activeIndex: {type: "number", defaultValue: 4, min: 0, max: 10},\n  },\n  examples: [\n    {\n      name: "Project",\n      props: {\n        nodes: [\n          {name: "layout.tsx", kind: "file"},\n          {name: "components/", kind: "folder"},\n          {name: "title-reveal/", depth: 1, kind: "folder"},\n          {name: "launch/", kind: "folder"},\n          {name: "video.tsx", depth: 1, kind: "file"},\n          {name: "schema.ts", depth: 1, kind: "file"},\n        ],\n        activeIndex: 4,\n      },\n    },\n  ],\n});\n',
+          target: "videos/components/file-tree/file-tree.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Developer proof",
+        namespaced: "@odori/file-tree",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 150,
+          minimumDurationInFrames: 60,
+          entranceFrames: 50,
+          exitFrames: 0,
+          contentLimits: {
+            nodes: 10,
+            nameLength: 28
+          },
+          reducedMotion: "rows appear together",
+          requires: {
+            fonts: [
+              "mono"
+            ],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "form-flow",
+      description: "Fields, validation, submit, and the success it resolves to.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/form-flow/form-flow.tsx",
+          content: 'import {Easing, Fill, interpolate, useBrand, useFrame, useDesignScale} from "odori";\n\nexport type FormField = {\n  label: string;\n  /** What gets typed into it. */\n  value: string;\n  /** Frame the typing starts. */\n  at: number;\n  /** A validation message that appears, then clears when the value is fixed. */\n  error?: string;\n};\n\nexport type FormFlowProps = {\n  title?: string;\n  fields?: FormField[];\n  submit?: string;\n  /** Frame the submit is pressed. */\n  submitAt?: number;\n  /** What replaces the form once it succeeds. */\n  success?: string;\n};\n\n/**\n * Fields, validation, submit, success \u2014 the whole progression, driven by\n * frames.\n *\n * Typing is drawn character by character from the frame clock rather than\n * animated with a CSS trick, so the same characters appear on the same frames\n * in preview and in the export, and a scrub backwards untypes them.\n */\nexport const FormFlow = ({\n  title = "Create a project",\n  fields = [],\n  submit = "Create",\n  submitAt = 100,\n  success = "Project created",\n}: FormFlowProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n\n  const appear = interpolate(frame, [0, 14], [0, 1], {easing: Easing.standard});\n  const pressed = interpolate(frame, [submitAt - 3, submitAt, submitAt + 6], [0, 1, 0]);\n  const done = interpolate(frame, [submitAt + 6, submitAt + 20], [0, 1], {easing: Easing.standard});\n\n  return (\n    <Fill style={{alignItems: "center", justifyContent: "center", opacity: appear, padding: 80 * scale}}>\n      <div\n        style={{\n          background: brand.colors.surface,\n          border: `1px solid ${brand.colors.border}`,\n          borderRadius: 24 * scale,\n          display: "flex",\n          flexDirection: "column",\n          gap: 26 * scale,\n          padding: 52 * scale,\n          position: "relative",\n          width: 880 * scale,\n        }}\n      >\n        <strong\n          style={{\n            color: brand.colors.foreground,\n            fontFamily: brand.typography.sans,\n            fontSize: 40 * scale,\n            fontWeight: 600,\n            letterSpacing: "-0.025em",\n            opacity: 1 - done,\n          }}\n        >\n          {title}\n        </strong>\n\n        {fields.map((field) => {\n          // Six frames a character: fast enough to read as typing, slow\n          // enough that the viewer can follow what is being written.\n          const typed = Math.max(0, Math.min(field.value.length, Math.floor((frame - field.at) / 3)));\n          const text = field.value.slice(0, typed);\n          const complete = typed >= field.value.length;\n          const focused = frame >= field.at && !complete;\n          const showError = Boolean(field.error) && typed > 0 && !complete;\n\n          return (\n            <label key={field.label} style={{display: "flex", flexDirection: "column", gap: 10 * scale, opacity: 1 - done}}>\n              <span style={{color: brand.colors.muted, fontFamily: brand.typography.sans, fontSize: 22 * scale}}>\n                {field.label}\n              </span>\n              <span\n                style={{\n                  background: brand.colors.background,\n                  border: `1px solid ${showError ? "#e5484d" : focused ? brand.colors.accent : brand.colors.border}`,\n                  borderRadius: 12 * scale,\n                  color: brand.colors.foreground,\n                  fontFamily: brand.typography.mono,\n                  fontSize: 26 * scale,\n                  minHeight: 34 * scale,\n                  padding: `${18 * scale}px ${22 * scale}px`,\n                }}\n              >\n                {text}\n                {focused ? (\n                  // The caret blinks on the frame clock, not on wall time.\n                  <span style={{opacity: Math.floor(frame / 8) % 2 === 0 ? 1 : 0.15}}>\u2502</span>\n                ) : null}\n              </span>\n              {showError ? (\n                <span style={{color: "#e5484d", fontFamily: brand.typography.sans, fontSize: 20 * scale}}>\n                  {field.error}\n                </span>\n              ) : null}\n            </label>\n          );\n        })}\n\n        <span\n          style={{\n            background: brand.colors.accent,\n            borderRadius: 12 * scale,\n            color: brand.colors.background,\n            fontFamily: brand.typography.sans,\n            fontSize: 27 * scale,\n            fontWeight: 560,\n            opacity: 1 - done,\n            padding: `${18 * scale}px ${30 * scale}px`,\n            textAlign: "center",\n            transform: `scale(${1 - pressed * 0.03})`,\n          }}\n        >\n          {submit}\n        </span>\n\n        {success ? (\n          <div\n            style={{\n              alignItems: "center",\n              display: "flex",\n              flexDirection: "column",\n              gap: 16 * scale,\n              inset: 0,\n              justifyContent: "center",\n              opacity: done,\n              position: "absolute",\n            }}\n          >\n            <span\n              style={{\n                alignItems: "center",\n                background: brand.colors.accent,\n                borderRadius: 999,\n                color: brand.colors.background,\n                display: "flex",\n                fontSize: 34 * scale,\n                height: 76 * scale,\n                justifyContent: "center",\n                transform: `scale(${0.8 + done * 0.2})`,\n                width: 76 * scale,\n              }}\n            >\n              \u2713\n            </span>\n            <strong\n              style={{color: brand.colors.foreground, fontFamily: brand.typography.sans, fontSize: 34 * scale}}\n            >\n              {success}\n            </strong>\n          </div>\n        ) : null}\n      </div>\n    </Fill>\n  );\n};\n',
+          target: "videos/components/form-flow/form-flow.tsx"
+        },
+        {
+          path: "components/form-flow/form-flow.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {FormFlow} from "./form-flow";\n\nexport default defineComponentPreview({\n  title: "Form flow",\n  category: "Product UI",\n  description: "Fields, validation, submit, and the success it resolves to.",\n  component: FormFlow,\n  canvas: {width: 1920, height: 1080, duration: "6s"},\n  controls: {\n    title: {type: "text", defaultValue: "Create a project"},\n    submit: {type: "text", defaultValue: "Create"},\n    submitAt: {type: "number", defaultValue: 100, min: 30, max: 170},\n    success: {type: "text", defaultValue: "Project created"},\n  },\n  examples: [\n    {\n      name: "Default",\n      props: {\n        fields: [\n          {label: "Name", value: "launch-video", at: 12},\n          {label: "Source root", value: "videos/", at: 60},\n        ],\n      },\n    },\n    {\n      name: "With validation",\n      props: {\n        fields: [{label: "Name", value: "Launch Video", at: 12, error: "Use a lowercase, dash separated name."}],\n        submitAt: 90,\n      },\n    },\n  ],\n});\n',
+          target: "videos/components/form-flow/form-flow.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Product UI",
+        namespaced: "@odori/form-flow",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 180,
+          minimumDurationInFrames: 60,
+          entranceFrames: 14,
+          exitFrames: 20,
+          contentLimits: {
+            title: 48,
+            fields: 4,
+            submit: 24
+          },
+          reducedMotion: "values appear complete rather than typing in",
+          requires: {
+            fonts: [
+              "sans"
+            ],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "gradient-field",
+      description: "Subtle brand-aware background motion that loops seamlessly.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/gradient-field/gradient-field.tsx",
+          content: 'import {Fill, useBrand, useFrame, useVideo} from "odori";\n\nexport type GradientFieldProps = {\n  /** Colours to drift. Defaults to the brand\'s accent over its background. */\n  colors?: string[];\n  /** How far the blobs travel, as a fraction of the frame. */\n  travel?: number;\n  /** Frames for one full cycle. The motion repeats seamlessly across it. */\n  cycleInFrames?: number;\n  /** Blur radius in canvas pixels. Large is the point: this is atmosphere. */\n  softness?: number;\n  /** Overall strength, 0 to 1. */\n  intensity?: number;\n};\n\n/**\n * Slow brand-aware colour behind everything else.\n *\n * The motion is driven by sine and cosine of the frame over one cycle, which\n * makes it exactly periodic: the last frame of a cycle matches the first, so\n * a background under a looping section never jumps. Deriving position from the\n * frame rather than from a CSS animation is also what keeps preview and export\n * showing the same pixels \u2014 a keyframe animation runs on wall time and would\n * be somewhere else in every render.\n */\nexport const GradientField = ({\n  colors,\n  travel = 0.18,\n  cycleInFrames = 240,\n  softness = 260,\n  intensity = 0.55,\n}: GradientFieldProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const {width, height} = useVideo();\n  const palette = colors ?? [brand.colors.accent, brand.colors.surface, brand.colors.accent];\n\n  const turn = (frame / cycleInFrames) * Math.PI * 2;\n\n  return (\n    <Fill style={{background: brand.colors.background, overflow: "hidden"}}>\n      {palette.map((color, index) => {\n        // Each blob runs the same cycle at a different phase and a different\n        // ratio, so they never line up and never drift out of period.\n        const phase = turn + (index * Math.PI * 2) / palette.length;\n        const x = 50 + Math.sin(phase) * travel * 100;\n        const y = 50 + Math.cos(phase * (index % 2 === 0 ? 1 : -1.5)) * travel * 100;\n\n        return (\n          <div\n            key={index}\n            aria-hidden\n            style={{\n              background: `radial-gradient(circle at ${x}% ${y}%, ${color} 0%, transparent 60%)`,\n              filter: `blur(${softness}px)`,\n              inset: `-${softness}px`,\n              opacity: intensity / palette.length + intensity * 0.35,\n              position: "absolute",\n            }}\n          />\n        );\n      })}\n      {/* A vignette keeps the corners from lifting, which is where a soft\n          gradient otherwise starts to look like a rendering artefact. */}\n      <div\n        aria-hidden\n        style={{\n          background: `radial-gradient(circle at 50% 50%, transparent 40%, ${brand.colors.background} 100%)`,\n          inset: 0,\n          position: "absolute",\n        }}\n      />\n      <div aria-hidden style={{height, position: "absolute", width, pointerEvents: "none"}} />\n    </Fill>\n  );\n};\n',
+          target: "videos/components/gradient-field/gradient-field.tsx"
+        },
+        {
+          path: "components/gradient-field/gradient-field.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {GradientField} from "./gradient-field";\n\nexport default defineComponentPreview({\n  title: "Gradient field",\n  category: "Motion",\n  description: "Subtle brand-aware background motion that loops seamlessly.",\n  component: GradientField,\n  canvas: {width: 1920, height: 1080, duration: "8s"},\n  controls: {\n    travel: {type: "number", defaultValue: 0.18, min: 0, max: 0.6, step: 0.02},\n    cycleInFrames: {type: "number", defaultValue: 240, min: 60, max: 900},\n    softness: {type: "number", defaultValue: 260, min: 40, max: 500},\n    intensity: {type: "number", defaultValue: 0.55, min: 0.1, max: 1, step: 0.05},\n  },\n  examples: [\n    {name: "Default", props: {}},\n    {name: "Still", props: {travel: 0}},\n    {name: "Strong", props: {intensity: 0.9, travel: 0.32}},\n  ],\n});\n',
+          target: "videos/components/gradient-field/gradient-field.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Motion",
+        namespaced: "@odori/gradient-field",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 240,
+          minimumDurationInFrames: 30,
+          entranceFrames: 0,
+          exitFrames: 0,
+          contentLimits: {
+            colors: 5
+          },
+          reducedMotion: "the field holds one still position",
+          requires: {
+            fonts: [],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "heatmap",
+      description: "Grid intensity reveal for activity and distribution.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/heatmap/heatmap.tsx",
+          content: 'import {Fill, Easing, interpolate, useBrand, useFrame, useDesignScale} from "odori";\n\nexport type HeatmapProps = {\n  /** Rows of intensity values, 0 to 1. */\n  rows: number[][];\n  title?: string;\n  rowLabels?: string[];\n};\n\n/**\n * Grid intensity revealed cell by cell, in reading order. Intensity is carried\n * by opacity of one accent color rather than a rainbow, so the scale stays\n * legible at video distance.\n */\nexport const Heatmap = ({rows, title, rowLabels}: HeatmapProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n  const columns = Math.max(...rows.map((row) => row.length), 1);\n  let cellIndex = 0;\n\n  return (\n    <Fill style={{gap: 34 * scale, justifyContent: "center", padding: `${110 * scale}px ${130 * scale}px`}}>\n      {title ? (\n        <div style={{fontSize: 56 * scale, fontWeight: 560, letterSpacing: "-0.04em", opacity: interpolate(frame, [0, 16], [0, 1])}}>\n          {title}\n        </div>\n      ) : null}\n      <div style={{display: "grid", gap: 12 * scale}}>\n        {rows.map((row, rowNumber) => (\n          <div key={rowNumber} style={{alignItems: "center", display: "flex", gap: 18 * scale}}>\n            {rowLabels ? (\n              <span style={{color: brand.colors.muted, fontSize: 26 * scale, width: 200 * scale}}>\n                {rowLabels[rowNumber]}\n              </span>\n            ) : null}\n            <div style={{display: "grid", flex: 1, gap: 12 * scale, gridTemplateColumns: `repeat(${columns}, 1fr)`}}>\n              {row.map((intensity, columnNumber) => {\n                const delay = 10 + cellIndex * 1.5;\n                cellIndex += 1;\n                const enter = interpolate(frame, [delay, delay + 14], [0, 1], {easing: Easing.standard});\n                return (\n                  <span\n                    key={columnNumber}\n                    style={{\n                      background: `color-mix(in srgb, ${brand.colors.accent} ${Math.round(intensity * 100)}%, ${brand.colors.surface})`,\n                      borderRadius: 10 * scale,\n                      height: 62 * scale,\n                      opacity: enter,\n                      transform: `scale(${0.86 + enter * 0.14})`,\n                    }}\n                  />\n                );\n              })}\n            </div>\n          </div>\n        ))}\n      </div>\n    </Fill>\n  );\n};\n',
+          target: "videos/components/heatmap/heatmap.tsx"
+        },
+        {
+          path: "components/heatmap/heatmap.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {Heatmap} from "./heatmap";\n\nexport default defineComponentPreview({\n  title: "Heatmap",\n  category: "Data",\n  description: "Grid intensity reveal for activity and distribution.",\n  component: Heatmap,\n  canvas: {width: 1920, height: 1080, duration: "4s"},\n  controls: {title: {type: "text", defaultValue: "Renders per day"}},\n  examples: [\n    {\n      name: "Activity",\n      props: {\n        rowLabels: ["week 1", "week 2", "week 3"],\n        rows: [\n          [0.1, 0.3, 0.2, 0.6, 0.4, 0.1, 0.05],\n          [0.2, 0.5, 0.7, 0.8, 0.6, 0.2, 0.1],\n          [0.4, 0.7, 0.9, 1, 0.8, 0.3, 0.15],\n        ],\n      },\n    },\n  ],\n});\n',
+          target: "videos/components/heatmap/heatmap.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Data",
+        namespaced: "@odori/heatmap",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 120,
+          minimumDurationInFrames: 60,
+          entranceFrames: 50,
+          exitFrames: 0,
+          contentLimits: {
+            rows: 6,
+            columns: 10
+          },
+          reducedMotion: "cells appear together",
+          requires: {
+            fonts: [
+              "sans"
+            ],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "html-canvas",
+      description: "HTML authored into a canvas-safe rendered surface.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/html-canvas/html-canvas.tsx",
+          content: 'import {useEffect, useRef, useState} from "react";\nimport {Easing, Fill, drawHtml, interpolate, useBrand, useFrame, useReadiness, useVideo} from "odori";\n\nexport type HtmlCanvasProps = {\n  /** Markup to rasterize. Every element must carry inline styles. */\n  html: string;\n  /** Style applied to the wrapper inside the SVG. */\n  style?: string;\n  /** Canvas size in composition pixels. Defaults to the whole frame. */\n  width?: number;\n  height?: number;\n  /** Frames the result takes to fade up. */\n  entranceFrames?: number;\n};\n\n/**\n * HTML drawn into the frame as pixels rather than as live DOM.\n *\n * The reason to want this is compositing: once markup is a canvas it can be\n * warped, masked, blurred, sampled, or fed to another draw call, none of which\n * a live DOM subtree can do. The reason it needs a component rather than a\n * snippet is that getting it right means holding the frame until the raster\n * lands and waiting for fonts first, and both are easy to forget once and hard\n * to notice afterwards.\n *\n * The markup is self-contained by necessity. An SVG `foreignObject` cannot see\n * the page\'s stylesheets, so styles are inline and images are data URLs; there\n * is no way to make that ergonomic, so it is at least stated plainly and the\n * failure names it.\n */\nexport const HtmlCanvas = ({html, style, width, height, entranceFrames = 12}: HtmlCanvasProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const video = useVideo();\n  const readiness = useReadiness();\n  const canvas = useRef<HTMLCanvasElement | null>(null);\n  const [failed, setFailed] = useState<string | null>(null);\n\n  const canvasWidth = width ?? video.width;\n  const canvasHeight = height ?? video.height;\n\n  // The raster is asynchronous, so it cannot use the synchronous useCanvas\n  // path: the frame is held by hand until the image has been drawn.\n  useEffect(() => {\n    const element = canvas.current;\n    if (!element) return;\n    const context = element.getContext("2d");\n    if (!context) return;\n\n    let cancelled = false;\n    const release = readiness.hold();\n    context.clearRect(0, 0, element.width, element.height);\n    drawHtml(context, html, {\n      width: canvasWidth,\n      height: canvasHeight,\n      style: style ?? `color:${brand.colors.foreground};font-family:${brand.typography.sans};`,\n    })\n      .catch((error: Error) => {\n        if (!cancelled) setFailed(error.message);\n      })\n      .finally(() => {\n        if (!cancelled) release();\n      });\n\n    return () => {\n      cancelled = true;\n      release();\n    };\n  }, [brand.colors.foreground, brand.typography.sans, canvasHeight, canvasWidth, html, readiness, style]);\n\n  const appear = interpolate(frame, [0, entranceFrames], [0, 1], {easing: Easing.standard});\n\n  return (\n    <Fill style={{alignItems: "center", justifyContent: "center"}}>\n      <canvas\n        ref={canvas}\n        width={canvasWidth}\n        height={canvasHeight}\n        style={{height: canvasHeight, opacity: appear, width: canvasWidth}}\n      />\n      {failed ? (\n        <span\n          style={{\n            color: "#ff9b91",\n            fontFamily: brand.typography.mono,\n            fontSize: 24,\n            maxWidth: "70%",\n            position: "absolute",\n            textAlign: "center",\n          }}\n        >\n          {failed}\n        </span>\n      ) : null}\n    </Fill>\n  );\n};\n',
+          target: "videos/components/html-canvas/html-canvas.tsx"
+        },
+        {
+          path: "components/html-canvas/html-canvas.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {HtmlCanvas} from "./html-canvas";\n\nconst CARD = `\n  <div style="display:flex;flex-direction:column;gap:18px;padding:64px;border:1px solid #232323;border-radius:24px;background:#0c0c0c;">\n    <div style="font-size:26px;letter-spacing:0.08em;text-transform:uppercase;color:#8f8f8f;">Deployment</div>\n    <div style="font-size:76px;font-weight:600;letter-spacing:-0.03em;color:#f5f5f5;">odori.dev</div>\n    <div style="font-size:30px;color:#8f8f8f;">Production \xB7 48s \xB7 ready</div>\n  </div>\n`;\n\nexport default defineComponentPreview({\n  title: "HTML canvas",\n  category: "Media and canvas",\n  description: "HTML authored into a canvas-safe rendered surface.",\n  component: HtmlCanvas,\n  canvas: {width: 1920, height: 1080, duration: "3s"},\n  controls: {\n    entranceFrames: {type: "number", defaultValue: 12, min: 0, max: 60},\n  },\n  examples: [\n    {name: "Default", props: {html: CARD, width: 1100, height: 460}},\n    {\n      name: "Full frame",\n      props: {\n        html: `<div style="display:flex;align-items:center;justify-content:center;height:100%;font-size:96px;color:#f5f5f5;">Rasterized</div>`,\n      },\n    },\n  ],\n});\n',
+          target: "videos/components/html-canvas/html-canvas.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Media and canvas",
+        namespaced: "@odori/html-canvas",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 90,
+          minimumDurationInFrames: 24,
+          entranceFrames: 12,
+          exitFrames: 0,
+          contentLimits: {
+            html: 4e3
+          },
+          reducedMotion: "the raster appears without fading in",
+          requires: {
+            fonts: [
+              "sans"
+            ],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "identity-reveal",
+      description: "Product mark and name entrance with visual restraint.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/identity-reveal/identity-reveal.tsx",
+          content: 'import type {ReactNode} from "react";\nimport {Fill, Easing, interpolate, useBrand, useFrame, useDesignScale} from "odori";\n\nexport type IdentityRevealProps = {\n  /** Defaults to the brand name, so a project never hardcodes its own mark. */\n  wordmark?: string;\n  /**\n   * Your own mark, as JSX. Inline SVG scales with the design, takes brand\n   * colors, and can animate per frame, which a file can never do.\n   */\n  mark?: ReactNode;\n  /** A key in `brand.logos`, or a URL. Used when no `mark` is given. */\n  logo?: string;\n  detail?: string;\n};\n\n/**\n * The product mark and name entering together: the mark settles first, the\n * wordmark follows out of a clipped box, and a rule draws under both. Restraint\n * is the point, so nothing spins or bounces.\n */\nexport const IdentityReveal = ({wordmark, mark: markNode, logo, detail}: IdentityRevealProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n  const name = wordmark ?? brand.name;\n  const source = logo ? brand.logos[logo] ?? logo : undefined;\n\n  const mark = interpolate(frame, [0, 24], [0, 1], {easing: Easing.standard});\n  const word = interpolate(frame, [12, 38], [0, 1], {easing: Easing.standard});\n  const rule = interpolate(frame, [28, 54], [0, 1], {easing: Easing.standard});\n  const note = interpolate(frame, [38, 60], [0, 1], {easing: Easing.standard});\n\n  return (\n    <Fill style={{alignItems: "center", gap: 26 * scale, justifyContent: "center"}}>\n      <div style={{alignItems: "center", display: "flex", gap: 26 * scale}}>\n        {markNode ? (\n          <div\n            style={{\n              alignItems: "center",\n              display: "flex",\n              height: 88 * scale,\n              opacity: mark,\n              transform: `scale(${0.92 + mark * 0.08})`,\n            }}\n          >\n            {markNode}\n          </div>\n        ) : source ? (\n          <img alt="" src={source} style={{height: 88 * scale, opacity: mark, transform: `scale(${0.92 + mark * 0.08})`}} />\n        ) : (\n          <span\n            style={{\n              background: brand.colors.accent,\n              borderRadius: 18 * scale,\n              display: "block",\n              height: 72 * scale,\n              opacity: mark,\n              transform: `scale(${0.9 + mark * 0.1})`,\n              width: 72 * scale,\n            }}\n          />\n        )}\n        <div style={{overflow: "hidden", paddingBottom: 8 * scale}}>\n          <span\n            style={{\n              display: "inline-block",\n              fontSize: 96 * scale,\n              fontWeight: 600,\n              letterSpacing: "-0.05em",\n              opacity: word,\n              transform: `translateY(${(1 - word) * 66 * scale}px)`,\n            }}\n          >\n            {name}\n          </span>\n        </div>\n      </div>\n\n      <div style={{background: brand.colors.border, height: Math.max(1, 1 * scale), transform: `scaleX(${rule})`, width: 420 * scale}} />\n\n      {detail ? <div style={{color: brand.colors.muted, fontSize: 32 * scale, opacity: note}}>{detail}</div> : null}\n    </Fill>\n  );\n};\n',
+          target: "videos/components/identity-reveal/identity-reveal.tsx"
+        },
+        {
+          path: "components/identity-reveal/identity-reveal.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {IdentityReveal} from "./identity-reveal";\n\nexport default defineComponentPreview({\n  title: "Identity reveal",\n  category: "Foundation",\n  description: "Product mark and name entrance with visual restraint.",\n  component: IdentityReveal,\n  canvas: {width: 1920, height: 1080, duration: "3s"},\n  controls: {\n    wordmark: {type: "text", defaultValue: "odori", maxLength: 24},\n    detail: {type: "text", defaultValue: "An independent React video framework."},\n  },\n  examples: [\n    {name: "Mark and name", props: {}},\n    {name: "Name only", props: {wordmark: "odori", detail: ""}},\n  ],\n});\n',
+          target: "videos/components/identity-reveal/identity-reveal.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Foundation",
+        namespaced: "@odori/identity-reveal",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 90,
+          minimumDurationInFrames: 60,
+          entranceFrames: 60,
+          exitFrames: 0,
+          contentLimits: {
+            wordmark: 24,
+            detail: 72
+          },
+          reducedMotion: "mark and name fade in together",
+          requires: {
+            fonts: [
+              "sans"
+            ],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "image-stage",
+      description: "A still with a slow push, held until it has decoded.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/image-stage/image-stage.tsx",
+          content: 'import {Easing, Fill, interpolate, placeholderImage, useDesignScale, useFrame, useReadiness} from "odori";\nimport {useEffect, useState} from "react";\n\nexport type ImageStageProps = {\n  /** Image URL. Defaults to a generated placeholder, so a fixture needs no file. */\n  src?: string;\n  alt?: string;\n  /** How the image meets the frame. */\n  fit?: "contain" | "cover";\n  /** Slow push in or out across the scene, as a scale delta. */\n  zoom?: number;\n  /** Pan across the scene, as a fraction of the frame. */\n  pan?: {x?: number; y?: number};\n  entranceFrames?: number;\n};\n\n/**\n * A still, with the slow move that keeps it from reading as a slide.\n *\n * The move is the whole component. A static image in a video looks like the\n * player has frozen, and a fraction of a percent of drift per frame is what\n * tells the eye it has not \u2014 so `zoom` and `pan` are small by default and are\n * derived from the frame rather than from a CSS transition.\n *\n * The frame is held until the image decodes. Without that the capture takes a\n * screenshot of a gap, which is the classic way a rendered video ends up with\n * the first second missing its picture.\n */\nexport const ImageStage = ({src, alt = "", fit = "cover", zoom = 0.06, pan, entranceFrames = 16}: ImageStageProps) => {\n  const frame = useFrame();\n  const scale = useDesignScale();\n  const readiness = useReadiness();\n  const [ready, setReady] = useState(false);\n  const url = src ?? placeholderImage({label: "image-stage", seed: "image"});\n\n  useEffect(() => {\n    setReady(false);\n    const release = readiness.hold();\n    const image = new Image();\n    let cancelled = false;\n    const done = () => {\n      if (cancelled) return;\n      setReady(true);\n      release();\n    };\n    image.onload = done;\n    // A failed decode still releases: a missing file should show as a missing\n    // picture, not as a render that hangs until the driver times out.\n    image.onerror = done;\n    image.src = url;\n    return () => {\n      cancelled = true;\n      release();\n    };\n  }, [readiness, url]);\n\n  const progress = frame / 300;\n  const appear = interpolate(frame, [0, entranceFrames], [0, 1], {easing: Easing.standard});\n  const offsetX = (pan?.x ?? 0) * progress * 100;\n  const offsetY = (pan?.y ?? 0) * progress * 100;\n\n  return (\n    <Fill style={{overflow: "hidden"}}>\n      <img\n        src={url}\n        alt={alt}\n        style={{\n          height: "100%",\n          objectFit: fit,\n          opacity: ready ? appear : 0,\n          transform: `scale(${1 + zoom * progress}) translate(${offsetX}%, ${offsetY}%)`,\n          transformOrigin: "center",\n          width: "100%",\n        }}\n      />\n      <span style={{display: "none"}}>{scale}</span>\n    </Fill>\n  );\n};\n',
+          target: "videos/components/image-stage/image-stage.tsx"
+        },
+        {
+          path: "components/image-stage/image-stage.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {ImageStage} from "./image-stage";\n\nexport default defineComponentPreview({\n  title: "Image stage",\n  category: "Media and canvas",\n  description: "A still with a slow push, held until it has decoded.",\n  component: ImageStage,\n  canvas: {width: 1920, height: 1080, duration: "5s"},\n  controls: {\n    fit: {type: "select", defaultValue: "cover", options: ["cover", "contain"]},\n    zoom: {type: "number", defaultValue: 0.06, min: -0.2, max: 0.4, step: 0.02},\n    entranceFrames: {type: "number", defaultValue: 16, min: 0, max: 60},\n  },\n  examples: [\n    {name: "Default", props: {}},\n    {name: "Pan right", props: {pan: {x: -0.04}, zoom: 0.1}},\n    {name: "Contain", props: {fit: "contain", zoom: 0}},\n  ],\n});\n',
+          target: "videos/components/image-stage/image-stage.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Media and canvas",
+        namespaced: "@odori/image-stage",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 150,
+          minimumDurationInFrames: 30,
+          entranceFrames: 16,
+          exitFrames: 0,
+          contentLimits: {
+            alt: 120
+          },
+          reducedMotion: "the still holds without drifting",
+          requires: {
+            fonts: [],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "kinetic-center",
+      description: "A centered statement assembled from timed word groups.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/kinetic-center/kinetic-center.tsx",
+          content: 'import {Fill, Easing, interpolate, useBrand, useFrame, useDesignScale} from "odori";\n\nexport type KineticCenterProps = {\n  /** Word groups that assemble into one centered statement. */\n  groups: string[];\n  accentIndex?: number;\n};\n\n/**\n * A centered statement assembled from timed word groups. Each group scales in\n * from slightly under its final size, so the line tightens as it completes.\n */\nexport const KineticCenter = ({groups, accentIndex}: KineticCenterProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n\n  return (\n    <Fill\n      style={{\n        alignItems: "center",\n        justifyContent: "center",\n        padding: `${120 * scale}px ${140 * scale}px`,\n      }}\n    >\n      <div\n        style={{\n          display: "flex",\n          flexWrap: "wrap",\n          gap: `${10 * scale}px ${24 * scale}px`,\n          justifyContent: "center",\n          maxWidth: 1560 * scale,\n          textAlign: "center",\n        }}\n      >\n        {groups.map((group, index) => {\n          const delay = 6 + index * 9;\n          const progress = interpolate(frame, [delay, delay + 24], [0, 1], {easing: Easing.standard});\n          const accent = index === accentIndex;\n          return (\n            <span\n              key={`${group}-${index}`}\n              style={{\n                color: accent ? brand.colors.accent : brand.colors.foreground,\n                display: "inline-block",\n                fontSize: 118 * scale,\n                fontWeight: accent ? 600 : 540,\n                letterSpacing: "-0.05em",\n                lineHeight: 1.04,\n                opacity: progress,\n                transform: `scale(${0.9 + progress * 0.1}) translateY(${(1 - progress) * 22 * scale}px)`,\n              }}\n            >\n              {group}\n            </span>\n          );\n        })}\n      </div>\n    </Fill>\n  );\n};\n',
+          target: "videos/components/kinetic-center/kinetic-center.tsx"
+        },
+        {
+          path: "components/kinetic-center/kinetic-center.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {KineticCenter} from "./kinetic-center";\n\nexport default defineComponentPreview({\n  title: "Kinetic center",\n  category: "Typography",\n  description: "A centered statement assembled from timed word groups.",\n  component: KineticCenter,\n  canvas: {width: 1920, height: 1080, duration: "4s"},\n  controls: {\n    accentIndex: {type: "number", defaultValue: 2, min: 0, max: 5},\n  },\n  examples: [\n    {name: "Default", props: {groups: ["Make", "motion", "useful."], accentIndex: 2}},\n    {name: "Longer", props: {groups: ["Every", "frame", "is", "a", "decision."], accentIndex: 4}},\n  ],\n});\n',
+          target: "videos/components/kinetic-center/kinetic-center.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Typography",
+        namespaced: "@odori/kinetic-center",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 120,
+          minimumDurationInFrames: 45,
+          entranceFrames: 33,
+          exitFrames: 10,
+          contentLimits: {
+            groups: 6,
+            groupLength: 16
+          },
+          reducedMotion: "groups fade without scaling",
+          requires: {
+            fonts: [
+              "sans"
+            ],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "line-chart",
+      description: "Time-series path draw with optional focal annotation.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/line-chart/line-chart.tsx",
+          content: 'import {Fill, Easing, interpolate, useBrand, useFrame, useDesignScale} from "odori";\n\nexport type LineChartProps = {\n  /** One value per step, drawn left to right. */\n  values: number[];\n  title?: string;\n  /** Index to annotate once the path finishes drawing. */\n  annotateIndex?: number;\n  annotation?: string;\n};\n\n/**\n * A time series drawn as one continuous path. The line reveals by clipping\n * from the left rather than by animating point positions, so the shape of the\n * data never lies during the reveal.\n */\nexport const LineChart = ({values, title, annotateIndex, annotation}: LineChartProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n  const max = Math.max(...values, 1);\n  const min = Math.min(...values, 0);\n  const draw = interpolate(frame, [12, 60], [0, 1], {easing: Easing.standard});\n  const point = (value: number, index: number) => ({\n    x: (index / Math.max(1, values.length - 1)) * 100,\n    y: 100 - ((value - min) / Math.max(1, max - min)) * 100,\n  });\n  const path = values\n    .map((value, index) => {\n      const {x, y} = point(value, index);\n      return `${index === 0 ? "M" : "L"} ${x} ${y}`;\n    })\n    .join(" ");\n  const marked = annotateIndex !== undefined ? point(values[annotateIndex] ?? 0, annotateIndex) : null;\n  const markOpacity = interpolate(frame, [58, 76], [0, 1], {easing: Easing.standard});\n\n  return (\n    <Fill style={{gap: 34 * scale, justifyContent: "center", padding: `${110 * scale}px ${130 * scale}px`}}>\n      {title ? (\n        <div style={{fontSize: 58 * scale, fontWeight: 560, letterSpacing: "-0.04em", opacity: interpolate(frame, [0, 16], [0, 1])}}>\n          {title}\n        </div>\n      ) : null}\n      <div style={{height: 460 * scale, position: "relative", width: "100%"}}>\n        <svg preserveAspectRatio="none" style={{height: "100%", width: "100%"}} viewBox="0 0 100 100">\n          <path\n            d={path}\n            fill="none"\n            stroke={brand.colors.foreground}\n            strokeLinecap="round"\n            strokeWidth={9 * scale}\n            style={{clipPath: `inset(0 ${(1 - draw) * 100}% 0 0)`}}\n            vectorEffect="non-scaling-stroke"\n          />\n        </svg>\n        {marked ? (\n          <div\n            style={{\n              left: `${marked.x}%`,\n              opacity: markOpacity,\n              position: "absolute",\n              top: `${marked.y}%`,\n              transform: "translate(-50%, -50%)",\n            }}\n          >\n            <span\n              style={{\n                background: brand.colors.accent,\n                borderRadius: 999,\n                display: "block",\n                height: 18 * scale,\n                width: 18 * scale,\n              }}\n            />\n          </div>\n        ) : null}\n      </div>\n      {annotation ? (\n        <div style={{color: brand.colors.muted, fontSize: 32 * scale, opacity: markOpacity}}>{annotation}</div>\n      ) : null}\n    </Fill>\n  );\n};\n',
+          target: "videos/components/line-chart/line-chart.tsx"
+        },
+        {
+          path: "components/line-chart/line-chart.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {LineChart} from "./line-chart";\n\nexport default defineComponentPreview({\n  title: "Line chart",\n  category: "Data",\n  description: "Time-series path draw with optional focal annotation.",\n  component: LineChart,\n  canvas: {width: 1920, height: 1080, duration: "4s"},\n  controls: {\n    title: {type: "text", defaultValue: "Videos shipped per week"},\n    annotation: {type: "text", defaultValue: "The week the registry landed."},\n    annotateIndex: {type: "number", defaultValue: 6, min: 0, max: 11},\n  },\n  examples: [\n    {name: "Growth", props: {values: [3, 4, 6, 5, 9, 12, 18, 21], annotateIndex: 6}},\n  ],\n});\n',
+          target: "videos/components/line-chart/line-chart.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Data",
+        namespaced: "@odori/line-chart",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 120,
+          minimumDurationInFrames: 78,
+          entranceFrames: 64,
+          exitFrames: 0,
+          contentLimits: {
+            points: 16
+          },
+          reducedMotion: "the full path is drawn immediately",
+          requires: {
+            fonts: [
+              "sans"
+            ],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "log-stream",
+      description: "Paced runtime logs with levels and bounded scrolling.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/log-stream/log-stream.tsx",
+          content: 'import {Fill, Easing, interpolate, useBrand, useFrame, useDesignScale} from "odori";\n\nexport type LogEntry = {\n  message: string;\n  level?: "info" | "warn" | "error" | "done";\n  /** Frame the line appears on. Derived from the index when omitted. */\n  atFrame?: number;\n};\n\nexport type LogStreamProps = {\n  entries: LogEntry[];\n  title?: string;\n  /** Lines visible at once before the stream scrolls. */\n  window?: number;\n};\n\n/**\n * Runtime logs arriving on a schedule, bounded so the panel never grows past\n * the frame. Older lines scroll out of the window rather than shrinking the\n * type to fit.\n */\nexport const LogStream = ({entries, title = "odori export launch", window: visible = 6}: LogStreamProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n\n  const arrived = entries.filter((entry, index) => frame >= (entry.atFrame ?? 14 + index * 12));\n  const shown = arrived.slice(Math.max(0, arrived.length - visible));\n  const color = (level: LogEntry["level"]) =>\n    level === "error" || level === "warn" ? brand.colors.accent : level === "done" ? brand.colors.foreground : brand.colors.muted;\n\n  return (\n    <Fill style={{alignItems: "center", justifyContent: "center", padding: 90 * scale}}>\n      <div\n        style={{\n          background: brand.colors.surface,\n          border: `1px solid ${brand.colors.border}`,\n          borderRadius: 24 * scale,\n          minHeight: visible * 56 * scale,\n          minWidth: 1180 * scale,\n          overflow: "hidden",\n          padding: `${24 * scale}px 0`,\n        }}\n      >\n        <div\n          style={{\n            color: brand.colors.muted,\n            fontFamily: brand.typography.mono,\n            fontSize: 24 * scale,\n            padding: `0 ${28 * scale}px ${16 * scale}px`,\n          }}\n        >\n          {title}\n        </div>\n        {shown.map((entry, index) => {\n          const at = entry.atFrame ?? 14 + entries.indexOf(entry) * 12;\n          const enter = interpolate(frame, [at, at + 10], [0, 1], {easing: Easing.standard});\n          return (\n            <div\n              key={`${entry.message}-${index}`}\n              style={{\n                alignItems: "center",\n                color: color(entry.level),\n                display: "flex",\n                fontFamily: brand.typography.mono,\n                fontSize: 28 * scale,\n                gap: 16 * scale,\n                opacity: enter,\n                padding: `${8 * scale}px ${28 * scale}px`,\n                transform: `translateY(${(1 - enter) * 10 * scale}px)`,\n              }}\n            >\n              <span style={{opacity: 0.55, width: 90 * scale}}>{(entry.level ?? "info").toUpperCase()}</span>\n              <span>{entry.message}</span>\n            </div>\n          );\n        })}\n      </div>\n    </Fill>\n  );\n};\n',
+          target: "videos/components/log-stream/log-stream.tsx"
+        },
+        {
+          path: "components/log-stream/log-stream.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {LogStream} from "./log-stream";\n\nexport default defineComponentPreview({\n  title: "Log stream",\n  category: "Developer proof",\n  description: "Paced runtime logs with levels and bounded scrolling.",\n  component: LogStream,\n  canvas: {width: 1920, height: 1080, duration: "6s"},\n  controls: {\n    title: {type: "text", defaultValue: "odori export launch"},\n    window: {type: "number", defaultValue: 6, min: 3, max: 10},\n  },\n  examples: [\n    {\n      name: "Export",\n      props: {\n        entries: [\n          {message: "resolved manifest launch@2f9c", level: "info"},\n          {message: "sampling 12 representative frames", level: "info"},\n          {message: "scene proof runs 18f under its contract", level: "warn"},\n          {message: "rendering 360 frames", level: "info"},\n          {message: "mixing audio to -14 LUFS", level: "info"},\n          {message: "wrote out/launch.mp4", level: "done"},\n        ],\n      },\n    },\n  ],\n});\n',
+          target: "videos/components/log-stream/log-stream.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Developer proof",
+        namespaced: "@odori/log-stream",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 180,
+          minimumDurationInFrames: 90,
+          entranceFrames: 14,
+          exitFrames: 0,
+          contentLimits: {
+            entries: 10,
+            messageLength: 56
+          },
+          reducedMotion: "lines appear without travel",
+          requires: {
+            fonts: [
+              "mono"
+            ],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "logo-orbit",
+      description: "Product identity surrounded by connected integrations.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/logo-orbit/logo-orbit.tsx",
+          content: 'import {Fill, Easing, interpolate, useBrand, useFrame, useDesignScale} from "odori";\n\nexport type LogoOrbitProps = {\n  /** Center wordmark. Defaults to the brand name. */\n  center?: string;\n  /** Integration names placed evenly around the ring. */\n  around: string[];\n  detail?: string;\n};\n\n/**\n * One identity surrounded by what connects to it. The ring is static and the\n * marks arrive in order, because a spinning orbit is unreadable at any\n * distance a viewer will actually watch from.\n */\nexport const LogoOrbit = ({center, around, detail}: LogoOrbitProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n  const name = center ?? brand.name;\n  const ring = interpolate(frame, [6, 40], [0, 1], {easing: Easing.standard});\n  const radius = 300 * scale;\n\n  return (\n    <Fill style={{alignItems: "center", justifyContent: "center"}}>\n      <div style={{height: radius * 2, position: "relative", width: radius * 2}}>\n        <div\n          style={{\n            border: `1px solid ${brand.colors.border}`,\n            borderRadius: 999,\n            inset: 0,\n            opacity: ring,\n            position: "absolute",\n            transform: `scale(${0.9 + ring * 0.1})`,\n          }}\n        />\n        <div\n          style={{\n            alignItems: "center",\n            display: "flex",\n            flexDirection: "column",\n            gap: 10 * scale,\n            inset: 0,\n            justifyContent: "center",\n            position: "absolute",\n          }}\n        >\n          <span style={{fontSize: 72 * scale, fontWeight: 600, letterSpacing: "-0.05em", opacity: ring}}>{name}</span>\n          {detail ? <span style={{color: brand.colors.muted, fontSize: 26 * scale, opacity: ring}}>{detail}</span> : null}\n        </div>\n        {around.map((label, index) => {\n          const angle = (index / around.length) * Math.PI * 2 - Math.PI / 2;\n          const at = 20 + index * 8;\n          const enter = interpolate(frame, [at, at + 18], [0, 1], {easing: Easing.standard});\n          return (\n            <div\n              key={label}\n              style={{\n                background: brand.colors.surface,\n                border: `1px solid ${brand.colors.border}`,\n                borderRadius: 999,\n                fontFamily: brand.typography.mono,\n                fontSize: 24 * scale,\n                left: radius + Math.cos(angle) * radius,\n                opacity: enter,\n                padding: `${12 * scale}px ${20 * scale}px`,\n                position: "absolute",\n                top: radius + Math.sin(angle) * radius,\n                transform: `translate(-50%, -50%) scale(${0.85 + enter * 0.15})`,\n              }}\n            >\n              {label}\n            </div>\n          );\n        })}\n      </div>\n    </Fill>\n  );\n};\n',
+          target: "videos/components/logo-orbit/logo-orbit.tsx"
+        },
+        {
+          path: "components/logo-orbit/logo-orbit.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {LogoOrbit} from "./logo-orbit";\n\nexport default defineComponentPreview({\n  title: "Logo orbit",\n  category: "Narrative",\n  description: "Product identity surrounded by connected integrations.",\n  component: LogoOrbit,\n  canvas: {width: 1920, height: 1080, duration: "5s"},\n  controls: {\n    center: {type: "text", defaultValue: "odori", maxLength: 18},\n    detail: {type: "text", defaultValue: "one ecosystem"},\n  },\n  examples: [\n    {name: "Ecosystem", props: {around: ["Next.js", "React", "Studio", "FFmpeg", "CI", "Slack"]}},\n  ],\n});\n',
+          target: "videos/components/logo-orbit/logo-orbit.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Narrative",
+        namespaced: "@odori/logo-orbit",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 150,
+          minimumDurationInFrames: 75,
+          entranceFrames: 68,
+          exitFrames: 0,
+          contentLimits: {
+            around: 8,
+            labelLength: 16
+          },
+          reducedMotion: "marks appear without scaling",
+          requires: {
+            fonts: [
+              "sans",
+              "mono"
+            ],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "marks-starter",
+      description: "Placeholder marks that draw themselves on, as editable SVG source.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/marks-starter/marks-starter.tsx",
+          content: `import type {CSSProperties} from "react";
+import {useBrand, useFrame, useDesignScale, Easing, interpolate} from "odori";
+
+export type MarkProps = {
+  /** Defaults to the brand accent, so a mark inherits the palette. */
+  color?: string;
+  /** Size in design pixels, scaled for the format. */
+  size?: number;
+  /** Draw the mark on across this many frames. Zero renders it complete. */
+  drawFrames?: number;
+  style?: CSSProperties;
+};
+
+/**
+ * Placeholder marks, as source. Replace the paths with your own and the motion
+ * stays: a stroked mark draws itself on from the frame clock, which is the one
+ * thing an image file can never do.
+ *
+ * These are deliberately generic. A registry that shipped other companies'
+ * logos would be making a trademark decision on your behalf.
+ */
+const useMark = (drawFrames: number, color?: string) => {
+  const frame = useFrame();
+  const brand = useBrand();
+  const progress =
+    drawFrames <= 0 ? 1 : interpolate(frame, [0, drawFrames], [0, 1], {easing: Easing.standard});
+  return {stroke: color ?? brand.colors.accent, progress};
+};
+
+/** A closed shape that draws its outline, then fills. */
+export const MarkAperture = ({color, size = 72, drawFrames = 24, style}: MarkProps) => {
+  const scale = useDesignScale();
+  const {stroke, progress} = useMark(drawFrames, color);
+  const length = 240;
+
+  return (
+    <svg
+      viewBox="0 0 100 100"
+      style={{height: size * scale, width: size * scale, ...style}}
+      aria-hidden="true"
+    >
+      <circle
+        cx="50"
+        cy="50"
+        r="38"
+        fill={stroke}
+        fillOpacity={Math.max(0, (progress - 0.7) / 0.3) * 0.16}
+        stroke={stroke}
+        strokeWidth="8"
+        strokeDasharray={length}
+        strokeDashoffset={length * (1 - progress)}
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+};
+
+/** Three ascending bars, staggered so the mark builds rather than appears. */
+export const MarkStack = ({color, size = 72, drawFrames = 24, style}: MarkProps) => {
+  const scale = useDesignScale();
+  const frame = useFrame();
+  const {stroke} = useMark(drawFrames, color);
+  const bars = [
+    {x: 18, height: 30},
+    {x: 42, height: 52},
+    {x: 66, height: 74},
+  ];
+
+  return (
+    <svg
+      viewBox="0 0 100 100"
+      style={{height: size * scale, width: size * scale, ...style}}
+      aria-hidden="true"
+    >
+      {bars.map((bar, index) => {
+        const start = index * Math.max(1, drawFrames / 4);
+        const grow =
+          drawFrames <= 0
+            ? 1
+            : interpolate(frame, [start, start + drawFrames], [0, 1], {easing: Easing.standard});
+        return (
+          <rect
+            key={bar.x}
+            x={bar.x}
+            y={88 - bar.height * grow}
+            width="16"
+            height={bar.height * grow}
+            rx="4"
+            fill={stroke}
+          />
+        );
+      })}
+    </svg>
+  );
+};
+`,
+          target: "videos/components/marks-starter/marks-starter.tsx"
+        },
+        {
+          path: "components/marks-starter/marks-starter.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {MarkAperture} from "./marks-starter";\n\nexport default defineComponentPreview({\n  title: "Marks starter",\n  category: "Foundation",\n  description: "Placeholder marks that draw themselves on, as editable SVG source.",\n  component: MarkAperture,\n  canvas: {width: 1920, height: 1080, duration: "2s"},\n  controls: {\n    size: {type: "number", defaultValue: 220, min: 48, max: 400},\n    drawFrames: {type: "number", defaultValue: 24, min: 0, max: 60},\n  },\n  examples: [\n    {name: "Aperture", props: {size: 220}},\n    {name: "Instant", props: {size: 220, drawFrames: 0}},\n  ],\n});\n',
+          target: "videos/components/marks-starter/marks-starter.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Foundation",
+        namespaced: "@odori/marks-starter",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 60,
+          minimumDurationInFrames: 24,
+          entranceFrames: 24,
+          exitFrames: 0,
+          contentLimits: {},
+          reducedMotion: "the mark renders complete, with no draw on",
+          requires: {
+            fonts: [],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "mask-reveal",
+      description: "Clipped media and typography, revealed at full strength.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/mask-reveal/mask-reveal.tsx",
+          content: 'import type {ReactNode} from "react";\nimport {Easing, Fill, interpolate, useFrame} from "odori";\n\nexport type MaskRevealProps = {\n  children?: ReactNode;\n  /** Which edge the mask opens from. */\n  from?: "left" | "right" | "top" | "bottom" | "center";\n  /** Frame the reveal begins. */\n  at?: number;\n  durationInFrames?: number;\n  /** Soft edge on the mask, in percent of the frame. Zero is a hard wipe. */\n  feather?: number;\n};\n\n/**\n * Content clipped in rather than faded in.\n *\n * A fade changes what the content *is* \u2014 half-opacity type is a different\n * colour, and a half-opacity screenshot is a lie about the product. A mask\n * leaves every visible pixel at full strength and only changes how much of it\n * you can see, which is why typography and UI should arrive this way.\n *\n * Built on a gradient mask rather than a clip path so the edge can be soft,\n * and both `mask` and `WebkitMask` are set because the export browser and the\n * preview browser are the same engine but the property is not yet unprefixed\n * everywhere it renders.\n */\nexport const MaskReveal = ({children, from = "left", at = 0, durationInFrames = 24, feather = 6}: MaskRevealProps) => {\n  const frame = useFrame();\n  const progress = interpolate(frame, [at, at + durationInFrames], [0, 1], {easing: Easing.standard});\n\n  const angle = {left: "to right", right: "to left", top: "to bottom", bottom: "to top", center: "to right"}[from];\n  // The visible edge travels past 100 so the feather clears the frame too.\n  const edge = progress * (100 + feather * 2);\n  const mask =\n    from === "center"\n      ? `radial-gradient(circle at 50% 50%, #000 ${edge}%, transparent ${edge + feather}%)`\n      : `linear-gradient(${angle}, #000 ${Math.max(0, edge - feather)}%, transparent ${edge}%)`;\n\n  return (\n    <Fill\n      style={{\n        mask,\n        WebkitMask: mask,\n      }}\n    >\n      {children}\n    </Fill>\n  );\n};\n',
+          target: "videos/components/mask-reveal/mask-reveal.tsx"
+        },
+        {
+          path: "components/mask-reveal/mask-reveal.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {MaskReveal} from "./mask-reveal";\n\nconst Content = () => (\n  <div\n    style={{\n      alignItems: "center",\n      color: "#f5f5f5",\n      display: "flex",\n      flexDirection: "column",\n      fontFamily: "ui-sans-serif, system-ui",\n      gap: 24,\n      inset: 0,\n      justifyContent: "center",\n      position: "absolute",\n      textAlign: "center",\n    }}\n  >\n    <strong style={{fontSize: 104, letterSpacing: "-0.045em"}}>Definitions</strong>\n    <span style={{color: "#8f8f8f", fontSize: 38}}>not timelines</span>\n  </div>\n);\n\nexport default defineComponentPreview({\n  title: "Mask reveal",\n  category: "Motion",\n  description: "Clipped media and typography, revealed at full strength.",\n  component: MaskReveal,\n  canvas: {width: 1920, height: 1080, duration: "3s"},\n  controls: {\n    from: {type: "select", defaultValue: "left", options: ["left", "right", "top", "bottom", "center"]},\n    at: {type: "number", defaultValue: 0, min: 0, max: 60},\n    durationInFrames: {type: "number", defaultValue: 24, min: 8, max: 90},\n    feather: {type: "number", defaultValue: 6, min: 0, max: 40},\n  },\n  examples: [\n    {name: "Default", props: {children: <Content />}},\n    {name: "From below", props: {from: "bottom", children: <Content />}},\n    {name: "Hard edge", props: {feather: 0, children: <Content />}},\n  ],\n});\n',
+          target: "videos/components/mask-reveal/mask-reveal.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Motion",
+        namespaced: "@odori/mask-reveal",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 60,
+          minimumDurationInFrames: 24,
+          entranceFrames: 24,
+          exitFrames: 0,
+          contentLimits: {},
+          reducedMotion: "the content is fully unmasked from the first frame",
+          requires: {
+            fonts: [],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "metric-callout",
+      description: "A single counted number with a supporting label.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/metric-callout/metric-callout.tsx",
+          content: 'import {Fill, Easing, interpolate, useBrand, useFrame, useDesignScale} from "odori";\n\nexport type MetricCalloutProps = {\n  value: number;\n  label: string;\n  suffix?: string;\n  prefix?: string;\n  decimals?: number;\n  detail?: string;\n};\n\n/** A counted metric. The count is a pure function of the frame. */\nexport const MetricCallout = ({value, label, suffix = "", prefix = "", decimals = 0, detail}: MetricCalloutProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n  const counted = interpolate(frame, [0, 44], [0, value], {easing: Easing.out(Easing.cubic)});\n  const rise = interpolate(frame, [0, 22], [0, 1], {easing: Easing.standard});\n\n  return (\n    <Fill style={{alignItems: "center", gap: 20 * scale, justifyContent: "center", padding: 120 * scale}}>\n      <div\n        style={{\n          backgroundImage: `linear-gradient(180deg, ${brand.colors.foreground} 30%, ${brand.colors.muted} 100%)`,\n          backgroundClip: "text",\n          color: "transparent",\n          fontFamily: brand.typography.sans,\n          fontSize: 216 * scale,\n          fontWeight: 560,\n          letterSpacing: "-0.06em",\n          lineHeight: 1,\n          opacity: rise,\n          transform: `translateY(${(1 - rise) * 40 * scale}px)`,\n          WebkitBackgroundClip: "text",\n        }}\n      >\n        {prefix}\n        {counted.toFixed(decimals)}\n        {suffix}\n      </div>\n      <div\n        style={{\n          color: brand.colors.foreground,\n          fontSize: 42 * scale,\n          letterSpacing: "-0.02em",\n          opacity: interpolate(frame, [14, 30], [0, 1], {easing: Easing.standard}),\n          textAlign: "center",\n        }}\n      >\n        {label}\n      </div>\n      {detail ? (\n        <div\n          style={{\n            color: brand.colors.muted,\n            fontSize: 30 * scale,\n            opacity: interpolate(frame, [22, 38], [0, 1], {easing: Easing.standard}),\n            textAlign: "center",\n          }}\n        >\n          {detail}\n        </div>\n      ) : null}\n    </Fill>\n  );\n};\n',
+          target: "videos/components/metric-callout/metric-callout.tsx"
+        },
+        {
+          path: "components/metric-callout/metric-callout.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {MetricCallout} from "./metric-callout";\n\nexport default defineComponentPreview({\n  title: "Metric callout",\n  category: "Typography",\n  description: "A single counted number with a supporting label.",\n  component: MetricCallout,\n  canvas: {width: 1920, height: 1080, duration: "3s"},\n  controls: {\n    value: {type: "number", defaultValue: 100, min: 0, max: 100000},\n    label: {type: "text", defaultValue: "frames rendered deterministically"},\n    suffix: {type: "text", defaultValue: "%"},\n  },\n  examples: [\n    {name: "Percentage", props: {value: 100, suffix: "%", label: "deterministic frames"}},\n    {name: "Duration", props: {value: 0.4, decimals: 1, suffix: "s", label: "preview startup"}},\n  ],\n});\n',
+          target: "videos/components/metric-callout/metric-callout.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Typography",
+        namespaced: "@odori/metric-callout",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 90,
+          minimumDurationInFrames: 60,
+          entranceFrames: 40,
+          exitFrames: 8,
+          contentLimits: {
+            label: 48
+          },
+          reducedMotion: "shows the final value immediately",
+          requires: {
+            fonts: [
+              "mono",
+              "sans"
+            ],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "modal-flow",
+      description: "Trigger, dialog, confirmation, and the state it resolves to.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/modal-flow/modal-flow.tsx",
+          content: 'import type {ReactNode} from "react";\nimport {Easing, Fill, interpolate, useBrand, useFrame, useDesignScale} from "odori";\n\nexport type ModalFlowProps = {\n  /** What sits behind the dialog. */\n  children?: ReactNode;\n  title?: string;\n  body?: string;\n  /** The primary button\'s label. */\n  confirm?: string;\n  cancel?: string;\n  /** What the surface says once the dialog has resolved. */\n  resolved?: string;\n  /** Frame the dialog opens on. */\n  openAt?: number;\n  /** Frame the confirm button is pressed. */\n  confirmAt?: number;\n};\n\n/**\n * The four states a dialog actually has: closed, open, confirming, resolved.\n *\n * They are driven by two frame numbers rather than by props a caller flips,\n * because the point of a video is the transition between states \u2014 a component\n * that only renders one of them makes the author animate it from outside, and\n * then two videos of the same dialog disagree about how it opens.\n */\nexport const ModalFlow = ({\n  children,\n  title = "Deploy to production?",\n  body = "This will promote the current preview build. It can be rolled back.",\n  confirm = "Deploy",\n  cancel = "Cancel",\n  resolved = "Deployed",\n  openAt = 18,\n  confirmAt = 66,\n}: ModalFlowProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n\n  const open = interpolate(frame, [openAt, openAt + 12], [0, 1], {easing: Easing.standard});\n  const close = interpolate(frame, [confirmAt, confirmAt + 10], [1, 0], {easing: Easing.standard});\n  const visible = Math.min(open, close);\n  const pressed = interpolate(frame, [confirmAt - 3, confirmAt, confirmAt + 6], [0, 1, 0]);\n  const settled = interpolate(frame, [confirmAt + 8, confirmAt + 20], [0, 1], {easing: Easing.standard});\n\n  return (\n    <Fill>\n      {children}\n      <div\n        aria-hidden\n        style={{background: "rgba(0,0,0,0.62)", inset: 0, opacity: visible, position: "absolute"}}\n      />\n      <div\n        style={{\n          alignItems: "center",\n          inset: 0,\n          justifyContent: "center",\n          display: "flex",\n          opacity: visible,\n          position: "absolute",\n        }}\n      >\n        <div\n          style={{\n            background: brand.colors.surface,\n            border: `1px solid ${brand.colors.border}`,\n            borderRadius: 24 * scale,\n            boxShadow: `0 ${30 * scale}px ${70 * scale}px rgba(0,0,0,0.55)`,\n            display: "flex",\n            flexDirection: "column",\n            gap: 20 * scale,\n            padding: 48 * scale,\n            transform: `translateY(${(1 - visible) * 24 * scale}px) scale(${0.97 + visible * 0.03})`,\n            width: 900 * scale,\n          }}\n        >\n          <strong\n            style={{\n              color: brand.colors.foreground,\n              fontFamily: brand.typography.sans,\n              fontSize: 44 * scale,\n              fontWeight: 600,\n              letterSpacing: "-0.025em",\n            }}\n          >\n            {title}\n          </strong>\n          <p\n            style={{\n              color: brand.colors.muted,\n              fontFamily: brand.typography.sans,\n              fontSize: 27 * scale,\n              lineHeight: 1.5,\n              margin: 0,\n            }}\n          >\n            {body}\n          </p>\n          <div style={{display: "flex", gap: 14 * scale, justifyContent: "flex-end", marginTop: 12 * scale}}>\n            <span\n              style={{\n                border: `1px solid ${brand.colors.border}`,\n                borderRadius: 12 * scale,\n                color: brand.colors.muted,\n                fontFamily: brand.typography.sans,\n                fontSize: 26 * scale,\n                padding: `${16 * scale}px ${28 * scale}px`,\n              }}\n            >\n              {cancel}\n            </span>\n            <span\n              style={{\n                background: brand.colors.accent,\n                borderRadius: 12 * scale,\n                color: brand.colors.background,\n                fontFamily: brand.typography.sans,\n                fontSize: 26 * scale,\n                fontWeight: 560,\n                padding: `${16 * scale}px ${28 * scale}px`,\n                // The press is the only motion on the button, and it is what\n                // makes the dialog close read as caused rather than scheduled.\n                transform: `scale(${1 - pressed * 0.04})`,\n              }}\n            >\n              {confirm}\n            </span>\n          </div>\n        </div>\n      </div>\n\n      {resolved ? (\n        <div\n          style={{\n            alignItems: "center",\n            background: brand.colors.surface,\n            border: `1px solid ${brand.colors.border}`,\n            borderRadius: 14 * scale,\n            bottom: 60 * scale,\n            color: brand.colors.foreground,\n            display: "flex",\n            fontFamily: brand.typography.sans,\n            fontSize: 26 * scale,\n            gap: 12 * scale,\n            left: "50%",\n            opacity: settled,\n            padding: `${18 * scale}px ${28 * scale}px`,\n            position: "absolute",\n            transform: `translate(-50%, ${(1 - settled) * 16 * scale}px)`,\n          }}\n        >\n          <span style={{background: brand.colors.accent, borderRadius: 999, height: 10 * scale, width: 10 * scale}} />\n          {resolved}\n        </div>\n      ) : null}\n    </Fill>\n  );\n};\n',
+          target: "videos/components/modal-flow/modal-flow.tsx"
+        },
+        {
+          path: "components/modal-flow/modal-flow.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {ModalFlow} from "./modal-flow";\n\nconst Behind = () => (\n  <div style={{background: "#0b0b0b", inset: 0, position: "absolute"}}>\n    <div\n      style={{\n        color: "#e5e5e5",\n        fontFamily: "ui-sans-serif, system-ui",\n        fontSize: 44,\n        left: 90,\n        position: "absolute",\n        top: 80,\n      }}\n    >\n      Deployments\n    </div>\n  </div>\n);\n\nexport default defineComponentPreview({\n  title: "Modal flow",\n  category: "Product UI",\n  description: "Trigger, dialog, confirmation, and the state it resolves to.",\n  component: ModalFlow,\n  canvas: {width: 1920, height: 1080, duration: "4s"},\n  controls: {\n    title: {type: "text", defaultValue: "Deploy to production?"},\n    confirm: {type: "text", defaultValue: "Deploy"},\n    resolved: {type: "text", defaultValue: "Deployed"},\n    openAt: {type: "number", defaultValue: 18, min: 0, max: 60},\n    confirmAt: {type: "number", defaultValue: 66, min: 20, max: 110},\n  },\n  examples: [\n    {name: "Default", props: {children: <Behind />}},\n    {name: "Destructive", props: {children: <Behind />, title: "Delete project?", confirm: "Delete", resolved: "Deleted"}},\n  ],\n});\n',
+          target: "videos/components/modal-flow/modal-flow.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Product UI",
+        namespaced: "@odori/modal-flow",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 120,
+          minimumDurationInFrames: 60,
+          entranceFrames: 12,
+          exitFrames: 10,
+          contentLimits: {
+            title: 64,
+            body: 160,
+            confirm: 24,
+            cancel: 24,
+            resolved: 40
+          },
+          reducedMotion: "the dialog cuts between states without scaling",
+          requires: {
+            fonts: [
+              "sans"
+            ],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "notify",
+      description: "A soft bell for a toast or a message.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/notify/notify.tsx",
+          content: 'import {defineCue, gain, mix, normalize, note, shape, sine, type CueDefinition} from "odori";\n\nexport type NotifyOptions = {\n  /** The note the bell rings on. */\n  pitch?: string;\n  /** How much of the metallic partial is kept, 0 to 1. */\n  shimmer?: number;\n  /** Peak level before the mix normalizes the whole track. */\n  peak?: number;\n};\n\n/**\n * A soft bell: a fundamental with two inharmonic partials over it, decaying\n * together. For a toast arriving or a message landing.\n *\n * The partials are what make it a bell rather than a beep \u2014 they are tuned to\n * ratios a struck object actually produces, not to the harmonic series.\n */\nexport const notify = ({pitch = "a5", shimmer = 0.5, peak = 0.55}: NotifyOptions = {}): CueDefinition => {\n  const samples = Math.round(48000 * 0.9);\n  const base = note(pitch);\n\n  return defineCue({\n    name: "ui.notify",\n    durationInFrames: 27,\n    params: {pitch, shimmer, peak},\n    render: () =>\n      normalize(\n        mix(\n          shape(sine(samples, base), {attack: 0.003, decay: 0.7, sustain: 0.02, release: 0.18}),\n          gain(shape(sine(samples, base * 2.76), {attack: 0.002, decay: 0.35, sustain: 0}), 0.34 * shimmer),\n          gain(shape(sine(samples, base * 5.4), {attack: 0.002, decay: 0.16, sustain: 0}), 0.18 * shimmer),\n        ),\n        peak,\n      ),\n  });\n};\n',
+          target: "videos/components/notify/notify.tsx"
+        },
+        {
+          path: "components/notify/notify.preview.tsx",
+          content: 'import {CueWave, defineComponentPreview} from "odori/preview";\nimport {notify, type NotifyOptions} from "./notify";\n\nconst Wave = ({pitch, shimmer, peak}: NotifyOptions) => <CueWave cue={notify({pitch, shimmer, peak})} />;\n\nexport default defineComponentPreview({\n  title: "Notify",\n  category: "Sound",\n  description: "A soft bell for a toast or a message.",\n  component: Wave,\n  canvas: {width: 1920, height: 1080, duration: "2s"},\n  controls: {\n    pitch: {type: "select", defaultValue: "a5", options: ["f5", "a5", "c6", "e6"]},\n    shimmer: {type: "number", defaultValue: 0.5, min: 0, max: 1, step: 0.05},\n    peak: {type: "number", defaultValue: 0.55, min: 0.1, max: 1, step: 0.05},\n  },\n  examples: [{name: "Default", props: {}}, {name: "Pure", props: {shimmer: 0}}],\n});\n',
+          target: "videos/components/notify/notify.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "cue",
+        family: "Sound",
+        namespaced: "@odori/notify",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 27,
+          minimumDurationInFrames: 27,
+          entranceFrames: 0,
+          exitFrames: 0,
+          contentLimits: {},
+          reducedMotion: "the waveform renders without a playhead",
+          requires: {
+            fonts: [
+              "mono"
+            ],
+            audio: []
+          },
+          loops: false
+        },
+        cue: {
+          name: "ui.notify",
+          export: "notify"
+        }
+      }
+    },
+    {
+      name: "pop",
+      description: "A four frame bubble for something appearing.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/pop/pop.tsx",
+          content: 'import {defineCue, gain, mix, normalize, note, shape, sine, sweep, type CueDefinition} from "odori";\n\nexport type PopOptions = {\n  /** The note the pop lands on. */\n  pitch?: string;\n  /** Peak level before the mix normalizes the whole track. */\n  peak?: number;\n};\n\n/**\n * A small bubble of air: a tone that snaps up in pitch and dies immediately.\n * Four frames, for a chip appearing, a card landing, an item entering a list.\n *\n * The upward sweep is the whole trick. A flat tone this short is a beep; a\n * tone that rises through it is a pop.\n */\nexport const pop = ({pitch = "e5", peak = 0.7}: PopOptions = {}): CueDefinition => {\n  const samples = Math.round(48000 * 0.13);\n  const target = note(pitch);\n\n  return defineCue({\n    name: "ui.pop",\n    durationInFrames: 4,\n    params: {pitch, peak},\n    render: () =>\n      normalize(\n        mix(\n          gain(shape(sweep(samples, target * 0.55, target), {attack: 0.002, decay: 0.09, sustain: 0}), 0.9),\n          gain(shape(sine(samples, target * 2), {attack: 0.001, decay: 0.04, sustain: 0}), 0.25),\n        ),\n        peak,\n      ),\n  });\n};\n',
+          target: "videos/components/pop/pop.tsx"
+        },
+        {
+          path: "components/pop/pop.preview.tsx",
+          content: 'import {CueWave, defineComponentPreview} from "odori/preview";\nimport {pop, type PopOptions} from "./pop";\n\nconst Wave = ({pitch, peak}: PopOptions) => <CueWave cue={pop({pitch, peak})} />;\n\nexport default defineComponentPreview({\n  title: "Pop",\n  category: "Sound",\n  description: "A four frame bubble for something appearing.",\n  component: Wave,\n  canvas: {width: 1920, height: 1080, duration: "1s"},\n  controls: {\n    pitch: {type: "select", defaultValue: "e5", options: ["c5", "e5", "g5", "c6"]},\n    peak: {type: "number", defaultValue: 0.7, min: 0.1, max: 1, step: 0.05},\n  },\n  examples: [{name: "Default", props: {}}, {name: "Higher", props: {pitch: "c6"}}],\n});\n',
+          target: "videos/components/pop/pop.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "cue",
+        family: "Sound",
+        namespaced: "@odori/pop",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 4,
+          minimumDurationInFrames: 4,
+          entranceFrames: 0,
+          exitFrames: 0,
+          contentLimits: {},
+          reducedMotion: "the waveform renders without a playhead",
+          requires: {
+            fonts: [
+              "mono"
+            ],
+            audio: []
+          },
+          loops: false
+        },
+        cue: {
+          name: "ui.pop",
+          export: "pop"
+        }
+      }
+    },
+    {
+      name: "progress-ring",
+      description: "Circular completion display with restrained motion.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/progress-ring/progress-ring.tsx",
+          content: 'import {Fill, Easing, interpolate, useBrand, useFrame, useDesignScale} from "odori";\n\nexport type ProgressRingProps = {\n  /** Target completion, 0 to 100. */\n  value: number;\n  label?: string;\n  /** Ring thickness in design pixels. */\n  thickness?: number;\n};\n\n/**\n * Circular completion with restrained motion: one sweep, one counted number,\n * no pulsing. The printed value tracks the sweep, so the ring and the text can\n * never disagree.\n */\nexport const ProgressRing = ({value, label, thickness = 12}: ProgressRingProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n  const progress = interpolate(frame, [10, 64], [0, 1], {easing: Easing.standard});\n  const shown = Math.round(value * progress);\n  const radius = 42;\n  const circumference = 2 * Math.PI * radius;\n\n  return (\n    <Fill style={{alignItems: "center", gap: 30 * scale, justifyContent: "center"}}>\n      <div style={{height: 460 * scale, position: "relative", width: 460 * scale}}>\n        <svg style={{height: "100%", transform: "rotate(-90deg)", width: "100%"}} viewBox="0 0 100 100">\n          <circle cx={50} cy={50} fill="none" r={radius} stroke={brand.colors.border} strokeWidth={thickness / 2} />\n          <circle\n            cx={50}\n            cy={50}\n            fill="none"\n            r={radius}\n            stroke={brand.colors.accent}\n            strokeDasharray={`${(value / 100) * progress * circumference} ${circumference}`}\n            strokeLinecap="round"\n            strokeWidth={thickness / 2}\n          />\n        </svg>\n        <div\n          style={{\n            alignItems: "center",\n            display: "flex",\n            fontSize: 104 * scale,\n            fontVariantNumeric: "tabular-nums",\n            fontWeight: 600,\n            inset: 0,\n            justifyContent: "center",\n            letterSpacing: "-0.05em",\n            position: "absolute",\n          }}\n        >\n          {shown}%\n        </div>\n      </div>\n      {label ? <div style={{color: brand.colors.muted, fontSize: 34 * scale}}>{label}</div> : null}\n    </Fill>\n  );\n};\n',
+          target: "videos/components/progress-ring/progress-ring.tsx"
+        },
+        {
+          path: "components/progress-ring/progress-ring.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {ProgressRing} from "./progress-ring";\n\nexport default defineComponentPreview({\n  title: "Progress ring",\n  category: "Data",\n  description: "Circular completion display with restrained motion.",\n  component: ProgressRing,\n  canvas: {width: 1920, height: 1080, duration: "3s"},\n  controls: {\n    value: {type: "number", defaultValue: 84, min: 0, max: 100},\n    label: {type: "text", defaultValue: "of frames validated"},\n    thickness: {type: "number", defaultValue: 12, min: 4, max: 24},\n  },\n  examples: [\n    {name: "Coverage", props: {value: 84, label: "of frames validated"}},\n    {name: "Complete", props: {value: 100, label: "render complete"}},\n  ],\n});\n',
+          target: "videos/components/progress-ring/progress-ring.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Data",
+        namespaced: "@odori/progress-ring",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 90,
+          minimumDurationInFrames: 66,
+          entranceFrames: 64,
+          exitFrames: 0,
+          contentLimits: {
+            label: 40
+          },
+          reducedMotion: "the ring is drawn at its final value",
+          requires: {
+            fonts: [
+              "sans"
+            ],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "push-through",
+      description: "A scene arriving by pushing the last one out of frame.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/push-through/push-through.tsx",
+          content: 'import type {ReactNode} from "react";\nimport {Easing, Fill, interpolate, useSceneTransition} from "odori";\n\nexport type PushThroughProps = {\n  children?: ReactNode;\n  /** Which way the incoming scene travels. */\n  direction?: "up" | "down" | "left" | "right";\n  /** How far the outgoing scene recedes, as a scale. */\n  recede?: number;\n};\n\n/**\n * One scene pushing the last one out of the frame.\n *\n * This is the transition the timeline could not express before: it needs both\n * scenes on screen at once, so the scene it lives in declares an `overlap` and\n * this reads how far through the join it is. The same component handles both\n * halves \u2014 arriving, it slides in and pushes; leaving, it recedes and is\n * pushed \u2014 because a transition written as two components has two places to\n * get the timing wrong.\n *\n * ```tsx\n * <Scene id="proof" duration="4s" overlap="0.5s">\n *   <PushThrough>{content}</PushThrough>\n * </Scene>\n * ```\n */\nexport const PushThrough = ({children, direction = "up", recede = 0.94}: PushThroughProps) => {\n  const {entering, leaving} = useSceneTransition();\n\n  const arriving = interpolate(entering, [0, 1], [0, 1], {easing: Easing.standard});\n  const departing = interpolate(leaving, [0, 1], [0, 1], {easing: Easing.standard});\n\n  const axis = direction === "up" || direction === "down" ? "Y" : "X";\n  const sign = direction === "up" || direction === "left" ? 1 : -1;\n\n  // Arriving: travel in from off-frame. Leaving: give way in the same\n  // direction, and shrink slightly so the incoming scene reads as in front.\n  const offset = arriving < 1 ? (1 - arriving) * 100 * sign : departing * 22 * sign;\n  const scale = arriving < 1 ? 1 : 1 - departing * (1 - recede);\n  const dim = arriving < 1 ? 0 : departing * 0.35;\n\n  return (\n    <Fill style={{transform: `translate${axis}(${offset}%) scale(${scale})`, transformOrigin: "center"}}>\n      {children}\n      {dim > 0 ? (\n        <div aria-hidden style={{background: "#000", inset: 0, opacity: dim, position: "absolute"}} />\n      ) : null}\n    </Fill>\n  );\n};\n',
+          target: "videos/components/push-through/push-through.tsx"
+        },
+        {
+          path: "components/push-through/push-through.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {PushThrough} from "./push-through";\n\nconst Panel = ({label}: {label: string}) => (\n  <div\n    style={{\n      alignItems: "center",\n      background: "#0b0b0b",\n      color: "#f5f5f5",\n      display: "flex",\n      fontFamily: "ui-sans-serif, system-ui",\n      fontSize: 88,\n      inset: 0,\n      justifyContent: "center",\n      letterSpacing: "-0.04em",\n      position: "absolute",\n    }}\n  >\n    {label}\n  </div>\n);\n\nexport default defineComponentPreview({\n  title: "Push through",\n  category: "Motion",\n  description: "A scene arriving by pushing the last one out of frame.",\n  component: PushThrough,\n  canvas: {width: 1920, height: 1080, duration: "3s"},\n  controls: {\n    direction: {type: "select", defaultValue: "up", options: ["up", "down", "left", "right"]},\n    recede: {type: "number", defaultValue: 0.94, min: 0.8, max: 1, step: 0.01},\n  },\n  examples: [\n    {name: "Default", props: {children: <Panel label="Arriving" />}},\n    {name: "Sideways", props: {direction: "left", children: <Panel label="Arriving" />}},\n  ],\n});\n',
+          target: "videos/components/push-through/push-through.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Motion",
+        namespaced: "@odori/push-through",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 90,
+          minimumDurationInFrames: 30,
+          entranceFrames: 15,
+          exitFrames: 15,
+          contentLimits: {},
+          reducedMotion: "the arriving scene appears in place, with no travel",
+          requires: {
+            fonts: [],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "rolling-number",
+      description: "Metrics roll without width changes or digit jitter.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/rolling-number/rolling-number.tsx",
+          content: 'import {Fill, Easing, interpolate, useBrand, useFrame, useDesignScale} from "odori";\n\nexport type RollingNumberProps = {\n  from?: number;\n  to: number;\n  label?: string;\n  prefix?: string;\n  suffix?: string;\n  decimals?: number;\n};\n\n/**\n * A number that counts without the width jitter proportional digits cause.\n * Tabular figures hold every glyph in the same advance, so the label under it\n * never shifts while the value climbs.\n */\nexport const RollingNumber = ({from = 0, to, label, prefix = "", suffix = "", decimals = 0}: RollingNumberProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n  const progress = interpolate(frame, [8, 62], [0, 1], {easing: Easing.standard});\n  const value = (from + (to - from) * progress).toFixed(decimals);\n\n  return (\n    <Fill\n      style={{\n        alignItems: "flex-start",\n        gap: 16 * scale,\n        justifyContent: "center",\n        padding: `${120 * scale}px ${150 * scale}px`,\n      }}\n    >\n      <div\n        style={{\n          fontSize: 208 * scale,\n          fontVariantNumeric: "tabular-nums",\n          fontWeight: 600,\n          letterSpacing: "-0.06em",\n          lineHeight: 1,\n          opacity: interpolate(frame, [0, 14], [0, 1], {easing: Easing.standard}),\n        }}\n      >\n        {prefix}\n        {value}\n        {suffix}\n      </div>\n      {label ? (\n        <div\n          style={{\n            color: brand.colors.muted,\n            fontSize: 40 * scale,\n            letterSpacing: "-0.015em",\n            opacity: interpolate(frame, [10, 30], [0, 1], {easing: Easing.standard}),\n          }}\n        >\n          {label}\n        </div>\n      ) : null}\n    </Fill>\n  );\n};\n',
+          target: "videos/components/rolling-number/rolling-number.tsx"
+        },
+        {
+          path: "components/rolling-number/rolling-number.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {RollingNumber} from "./rolling-number";\n\nexport default defineComponentPreview({\n  title: "Rolling number",\n  category: "Typography",\n  description: "Metrics roll without width changes or digit jitter.",\n  component: RollingNumber,\n  canvas: {width: 1920, height: 1080, duration: "3s"},\n  controls: {\n    from: {type: "number", defaultValue: 0, min: 0, max: 10000},\n    to: {type: "number", defaultValue: 98.7, min: 0, max: 10000},\n    decimals: {type: "number", defaultValue: 1, min: 0, max: 3},\n    label: {type: "text", defaultValue: "frames delivered on time"},\n    suffix: {type: "text", defaultValue: "%"},\n  },\n  examples: [\n    {name: "Percentage", props: {to: 98.7, decimals: 1, suffix: "%", label: "frames delivered on time"}},\n    {name: "Count", props: {to: 12480, decimals: 0, suffix: "", label: "frames rendered"}},\n  ],\n});\n',
+          target: "videos/components/rolling-number/rolling-number.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Typography",
+        namespaced: "@odori/rolling-number",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 90,
+          minimumDurationInFrames: 54,
+          entranceFrames: 54,
+          exitFrames: 0,
+          contentLimits: {
+            label: 48
+          },
+          reducedMotion: "the final value is shown immediately",
+          requires: {
+            fonts: [
+              "sans"
+            ],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "safe-area",
+      description: "Format-aware title and action safety boundaries.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/safe-area/safe-area.tsx",
+          content: 'import type {ReactNode} from "react";\nimport {Fill, Easing, interpolate, useBrand, useFrame, useDesignScale, useLayout} from "odori";\n\nexport type SafeAreaGuidesProps = {\n  children?: ReactNode;\n  /** Draw the title and action boundaries. */\n  guides?: boolean;\n  /** Extra inset beyond the layout policy, in design pixels. */\n  inset?: number;\n  label?: string;\n};\n\n/**\n * Keeps content inside the boundaries the layout declares, and can draw them.\n * The numbers come from the resolved layout, so a 9:16 cut gets the safety it\n * asked for rather than a value guessed at authoring time.\n */\nexport const SafeAreaGuides = ({children, guides = true, inset = 0, label = "safe area"}: SafeAreaGuidesProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n  const layout = useLayout();\n  const safe = layout.safeArea ?? {x: 80, y: 80};\n  const x = (safe.x + inset) * scale;\n  const y = (safe.y + inset) * scale;\n  const appear = interpolate(frame, [0, 18], [0, 1], {easing: Easing.standard});\n\n  return (\n    <Fill>\n      <Fill\n        style={{\n          alignItems: "center",\n          justifyContent: "center",\n          padding: `${y}px ${x}px`,\n          textAlign: "center",\n        }}\n      >\n        {children}\n      </Fill>\n      {guides ? (\n        <Fill style={{opacity: appear, pointerEvents: "none"}}>\n          <div\n            style={{\n              border: `${2 * scale}px solid ${brand.colors.accent}`,\n              inset: 0,\n              margin: `${y}px ${x}px`,\n              opacity: 0.55,\n              position: "absolute",\n            }}\n          />\n          <span\n            style={{\n              color: brand.colors.muted,\n              fontFamily: brand.typography.mono,\n              fontSize: 22 * scale,\n              left: x,\n              position: "absolute",\n              top: Math.max(0, y - 34 * scale),\n            }}\n          >\n            {label} \xB7 {Math.round(safe.x + inset)} x {Math.round(safe.y + inset)}\n          </span>\n        </Fill>\n      ) : null}\n    </Fill>\n  );\n};\n',
+          target: "videos/components/safe-area/safe-area.tsx"
+        },
+        {
+          path: "components/safe-area/safe-area.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {SafeAreaGuides} from "./safe-area";\n\nexport default defineComponentPreview({\n  title: "Safe area",\n  category: "Foundation",\n  description: "Format-aware title and action safety boundaries.",\n  component: SafeAreaGuides,\n  canvas: {width: 1920, height: 1080, duration: "3s"},\n  controls: {\n    guides: {type: "boolean", defaultValue: true},\n    inset: {type: "number", defaultValue: 0, min: 0, max: 160},\n    label: {type: "text", defaultValue: "safe area"},\n  },\n  examples: [\n    {name: "Guides", props: {guides: true, children: "Everything readable sits inside"}},\n    {name: "Composed", props: {guides: false, children: "Everything readable sits inside"}},\n  ],\n});\n',
+          target: "videos/components/safe-area/safe-area.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Foundation",
+        namespaced: "@odori/safe-area",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 90,
+          minimumDurationInFrames: 24,
+          entranceFrames: 18,
+          exitFrames: 0,
+          contentLimits: {},
+          reducedMotion: "guides appear without fading",
+          requires: {
+            fonts: [
+              "sans",
+              "mono"
+            ],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "screenshot-focus",
+      description: "A camera move from the whole interface to one detail.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/screenshot-focus/screenshot-focus.tsx",
+          content: 'import {Easing, Fill, interpolate, placeholderImage, useBrand, useDesignScale, useFrame} from "odori";\n\nexport type ScreenshotFocusProps = {\n  src?: string;\n  /** The detail to travel to, in fractions of the image. */\n  focus?: {x: number; y: number};\n  /** How close the move ends up. */\n  zoom?: number;\n  /** Frame the move starts, and how long it takes. */\n  at?: number;\n  durationInFrames?: number;\n  /** A ring drawn around the detail once the move lands. */\n  marker?: boolean;\n  caption?: string;\n};\n\n/**\n * A move from the whole interface to one part of it.\n *\n * The reason this is a component rather than two props on an image: the shot\n * only works if the wide frame is held long enough to be read, the move is\n * eased rather than linear, and the marker arrives *after* the move rather\n * than travelling with it. Those are three decisions that are easy to get\n * subtly wrong, and wrong here reads as a camera lurching.\n */\nexport const ScreenshotFocus = ({\n  src,\n  focus = {x: 0.5, y: 0.5},\n  zoom = 2.2,\n  at = 20,\n  durationInFrames = 34,\n  marker = true,\n  caption,\n}: ScreenshotFocusProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n  const url = src ?? placeholderImage({label: "screenshot", seed: "shot"});\n\n  const progress = interpolate(frame, [at, at + durationInFrames], [0, 1], {easing: Easing.standard});\n  const currentZoom = 1 + (zoom - 1) * progress;\n  // Translate so the focal point stays under the centre as the scale grows.\n  const shiftX = (0.5 - focus.x) * 100 * (currentZoom - 1);\n  const shiftY = (0.5 - focus.y) * 100 * (currentZoom - 1);\n  const landed = interpolate(frame, [at + durationInFrames, at + durationInFrames + 10], [0, 1], {\n    easing: Easing.standard,\n  });\n\n  return (\n    <Fill style={{overflow: "hidden"}}>\n      <div\n        style={{\n          height: "100%",\n          transform: `scale(${currentZoom}) translate(${shiftX / currentZoom}%, ${shiftY / currentZoom}%)`,\n          transformOrigin: "center",\n          width: "100%",\n        }}\n      >\n        <img src={url} alt="" style={{height: "100%", objectFit: "cover", width: "100%"}} />\n      </div>\n\n      {marker ? (\n        <span\n          style={{\n            border: `${Math.max(1, 3 * scale)}px solid ${brand.colors.accent}`,\n            borderRadius: 16 * scale,\n            height: 180 * scale,\n            left: "50%",\n            opacity: landed * 0.9,\n            position: "absolute",\n            top: "50%",\n            transform: `translate(-50%, -50%) scale(${0.9 + landed * 0.1})`,\n            width: 300 * scale,\n          }}\n        />\n      ) : null}\n\n      {caption ? (\n        <span\n          style={{\n            background: brand.colors.surface,\n            border: `1px solid ${brand.colors.border}`,\n            borderRadius: 12 * scale,\n            bottom: 70 * scale,\n            color: brand.colors.foreground,\n            fontFamily: brand.typography.sans,\n            fontSize: 28 * scale,\n            left: "50%",\n            opacity: landed,\n            padding: `${16 * scale}px ${26 * scale}px`,\n            position: "absolute",\n            transform: "translateX(-50%)",\n          }}\n        >\n          {caption}\n        </span>\n      ) : null}\n    </Fill>\n  );\n};\n',
+          target: "videos/components/screenshot-focus/screenshot-focus.tsx"
+        },
+        {
+          path: "components/screenshot-focus/screenshot-focus.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {ScreenshotFocus} from "./screenshot-focus";\n\nexport default defineComponentPreview({\n  title: "Screenshot focus",\n  category: "Media and canvas",\n  description: "A camera move from the whole interface to one detail.",\n  component: ScreenshotFocus,\n  canvas: {width: 1920, height: 1080, duration: "4s"},\n  controls: {\n    zoom: {type: "number", defaultValue: 2.2, min: 1.2, max: 5, step: 0.1},\n    at: {type: "number", defaultValue: 20, min: 0, max: 60},\n    durationInFrames: {type: "number", defaultValue: 34, min: 10, max: 90},\n    marker: {type: "boolean", defaultValue: true},\n    caption: {type: "text", defaultValue: "One deployment, 48 seconds"},\n  },\n  examples: [\n    {name: "Default", props: {}},\n    {name: "Top left", props: {focus: {x: 0.24, y: 0.3}, zoom: 3}},\n  ],\n});\n',
+          target: "videos/components/screenshot-focus/screenshot-focus.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Media and canvas",
+        namespaced: "@odori/screenshot-focus",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 120,
+          minimumDurationInFrames: 45,
+          entranceFrames: 0,
+          exitFrames: 0,
+          contentLimits: {
+            caption: 64
+          },
+          reducedMotion: "the wide frame is held, with the marker in place",
+          requires: {
+            fonts: [
+              "sans"
+            ],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "shared-axis",
+      description: "Related scenes travelling on one spatial axis.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/shared-axis/shared-axis.tsx",
+          content: 'import type {ReactNode} from "react";\nimport {Easing, Fill, interpolate, useSceneTransition} from "odori";\n\nexport type SharedAxisProps = {\n  children?: ReactNode;\n  /** The axis the pair travels on. */\n  axis?: "x" | "y" | "z";\n  /** How far the move carries, as a fraction of the frame. */\n  distance?: number;\n};\n\n/**\n * Two related scenes travelling on one axis.\n *\n * The claim a shared axis makes is that these two scenes are *the same kind of\n * thing*, one after another \u2014 a list and its detail, a before and its after.\n * That reads only if both halves move together on one line and fade across\n * each other, so the move is short, the fade is quick, and neither scene ever\n * translates in a direction the other does not.\n *\n * The `z` axis is the depth variant: forward for arriving, back for leaving,\n * which is the one to use when the second scene is *inside* the first rather\n * than beside it.\n *\n * ```tsx\n * <Scene id="detail" duration="4s" overlap="0.4s">\n *   <SharedAxis axis="x">{content}</SharedAxis>\n * </Scene>\n * ```\n */\nexport const SharedAxis = ({children, axis = "x", distance = 0.12}: SharedAxisProps) => {\n  const {entering, leaving} = useSceneTransition();\n\n  const arriving = interpolate(entering, [0, 1], [0, 1], {easing: Easing.standard});\n  const departing = interpolate(leaving, [0, 1], [0, 1], {easing: Easing.standard});\n  const travelling = arriving < 1;\n\n  // One line, one direction: arriving comes from behind the axis origin,\n  // leaving continues past it.\n  const shift = travelling ? (1 - arriving) * distance * 100 : -departing * distance * 100;\n  const depth = travelling ? 0.94 + arriving * 0.06 : 1 + departing * 0.06;\n\n  const transform =\n    axis === "z"\n      ? `scale(${depth})`\n      : axis === "x"\n        ? `translateX(${shift}%)`\n        : `translateY(${shift}%)`;\n\n  // The fade is fast at both ends so the two scenes are never both at half\n  // strength, which is what makes a cross-fade look like a mistake.\n  const opacity = travelling\n    ? interpolate(arriving, [0, 0.45], [0, 1], {easing: Easing.standard})\n    : interpolate(departing, [0.35, 1], [1, 0], {easing: Easing.standard});\n\n  return <Fill style={{opacity, transform, transformOrigin: "center"}}>{children}</Fill>;\n};\n',
+          target: "videos/components/shared-axis/shared-axis.tsx"
+        },
+        {
+          path: "components/shared-axis/shared-axis.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {SharedAxis} from "./shared-axis";\n\nconst Panel = () => (\n  <div\n    style={{\n      alignItems: "center",\n      background: "#0b0b0b",\n      color: "#f5f5f5",\n      display: "flex",\n      flexDirection: "column",\n      fontFamily: "ui-sans-serif, system-ui",\n      gap: 18,\n      inset: 0,\n      justifyContent: "center",\n      position: "absolute",\n    }}\n  >\n    <strong style={{fontSize: 84, letterSpacing: "-0.04em"}}>Deployment detail</strong>\n    <span style={{color: "#8f8f8f", fontSize: 32}}>the same thing, one level in</span>\n  </div>\n);\n\nexport default defineComponentPreview({\n  title: "Shared axis",\n  category: "Motion",\n  description: "Related scenes travelling on one spatial axis.",\n  component: SharedAxis,\n  canvas: {width: 1920, height: 1080, duration: "3s"},\n  controls: {\n    axis: {type: "select", defaultValue: "x", options: ["x", "y", "z"]},\n    distance: {type: "number", defaultValue: 0.12, min: 0.02, max: 0.4, step: 0.02},\n  },\n  examples: [\n    {name: "Default", props: {children: <Panel />}},\n    {name: "Depth", props: {axis: "z", children: <Panel />}},\n  ],\n});\n',
+          target: "videos/components/shared-axis/shared-axis.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Motion",
+        namespaced: "@odori/shared-axis",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 90,
+          minimumDurationInFrames: 30,
+          entranceFrames: 12,
+          exitFrames: 12,
+          contentLimits: {},
+          reducedMotion: "the scenes cross-fade without moving",
+          requires: {
+            fonts: [],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "soft-blur-in",
+      description: "A gentle blur and opacity reveal for premium openings.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/soft-blur-in/soft-blur-in.tsx",
+          content: 'import {Fill, Easing, interpolate, useBrand, useFrame, useDesignScale} from "odori";\n\nexport type SoftBlurInProps = {\n  title: string;\n  detail?: string;\n  /** Blur radius at the start of the reveal, in design pixels. */\n  blur?: number;\n};\n\n/**\n * A restrained opening: the headline resolves out of a blur while it settles\n * a few pixels upward. Useful when a hard word stagger would feel too busy.\n */\nexport const SoftBlurIn = ({title, detail, blur = 26}: SoftBlurInProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n  const progress = interpolate(frame, [0, 34], [0, 1], {easing: Easing.standard});\n  const detailProgress = interpolate(frame, [18, 46], [0, 1], {easing: Easing.standard});\n\n  return (\n    <Fill\n      style={{\n        alignItems: "center",\n        gap: 32 * scale,\n        justifyContent: "center",\n        padding: `${120 * scale}px ${160 * scale}px`,\n        textAlign: "center",\n      }}\n    >\n      <div\n        style={{\n          filter: `blur(${(1 - progress) * blur * scale}px)`,\n          fontSize: 124 * scale,\n          fontWeight: 560,\n          letterSpacing: "-0.05em",\n          lineHeight: 1.04,\n          maxWidth: 1500 * scale,\n          opacity: progress,\n          transform: `translateY(${(1 - progress) * 26 * scale}px) scale(${0.98 + progress * 0.02})`,\n        }}\n      >\n        {title}\n      </div>\n      {detail ? (\n        <div\n          style={{\n            color: brand.colors.muted,\n            filter: `blur(${(1 - detailProgress) * 10 * scale}px)`,\n            fontSize: 36 * scale,\n            maxWidth: 1100 * scale,\n            opacity: detailProgress,\n          }}\n        >\n          {detail}\n        </div>\n      ) : null}\n    </Fill>\n  );\n};\n',
+          target: "videos/components/soft-blur-in/soft-blur-in.tsx"
+        },
+        {
+          path: "components/soft-blur-in/soft-blur-in.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {SoftBlurIn} from "./soft-blur-in";\n\nexport default defineComponentPreview({\n  title: "Soft blur in",\n  category: "Typography",\n  description: "A gentle blur and opacity reveal for premium openings.",\n  component: SoftBlurIn,\n  canvas: {width: 1920, height: 1080, duration: "4s"},\n  controls: {\n    title: {type: "text", defaultValue: "Built for focus.", maxLength: 64},\n    detail: {type: "text", defaultValue: "Everything you need, nothing you do not."},\n    blur: {type: "number", defaultValue: 26, min: 0, max: 60},\n  },\n  examples: [\n    {name: "Default", props: {title: "Built for focus."}},\n    {name: "Subtle", props: {title: "Quietly precise.", blur: 10}},\n  ],\n});\n',
+          target: "videos/components/soft-blur-in/soft-blur-in.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Typography",
+        namespaced: "@odori/soft-blur-in",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 120,
+          minimumDurationInFrames: 45,
+          entranceFrames: 34,
+          exitFrames: 10,
+          contentLimits: {
+            title: 64,
+            detail: 96
+          },
+          reducedMotion: "fades without blur",
+          requires: {
+            fonts: [
+              "sans"
+            ],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "split-layout",
+      description: "Responsive two-up composition for proof and explanation.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/split-layout/split-layout.tsx",
+          content: 'import type {ReactNode} from "react";\nimport {Fill, Easing, interpolate, useBrand, useFrame, useDesignScale, useVideo} from "odori";\n\nexport type SplitLayoutProps = {\n  title: string;\n  detail?: string;\n  /** The proof side: code, a product frame, a chart. */\n  children?: ReactNode;\n  /** Which side the words sit on in a wide format. */\n  side?: "left" | "right";\n  /** Share of the frame the words take. */\n  ratio?: number;\n};\n\n/**\n * Explanation beside proof. In a wide format the two sit side by side; in a\n * tall one they stack, because a 9:16 column cannot hold two readable panels.\n */\nexport const SplitLayout = ({title, detail, children, side = "left", ratio = 0.42}: SplitLayoutProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n  const {width, height} = useVideo();\n  const stacked = height >= width;\n  const words = interpolate(frame, [0, 26], [0, 1], {easing: Easing.standard});\n  const proof = interpolate(frame, [14, 44], [0, 1], {easing: Easing.standard});\n  const share = `${Math.min(Math.max(ratio, 0.3), 0.6) * 100}%`;\n\n  return (\n    <Fill\n      style={{\n        alignItems: "stretch",\n        display: "flex",\n        flexDirection: stacked ? "column" : side === "left" ? "row" : "row-reverse",\n        gap: 56 * scale,\n        padding: `${100 * scale}px ${110 * scale}px`,\n      }}\n    >\n      <div\n        style={{\n          alignContent: "center",\n          display: "grid",\n          flex: stacked ? "none" : `0 0 ${share}`,\n          gap: 20 * scale,\n          opacity: words,\n          transform: `translateY(${(1 - words) * 24 * scale}px)`,\n        }}\n      >\n        <div style={{fontSize: 78 * scale, fontWeight: 570, letterSpacing: "-0.045em", lineHeight: 1.06}}>{title}</div>\n        {detail ? <div style={{color: brand.colors.muted, fontSize: 32 * scale, lineHeight: 1.45}}>{detail}</div> : null}\n      </div>\n\n      <div\n        style={{\n          background: brand.colors.surface,\n          border: `1px solid ${brand.colors.border}`,\n          borderRadius: 26 * scale,\n          flex: 1,\n          opacity: proof,\n          overflow: "hidden",\n          position: "relative",\n          transform: `translateY(${(1 - proof) * 28 * scale}px)`,\n        }}\n      >\n        {children}\n      </div>\n    </Fill>\n  );\n};\n',
+          target: "videos/components/split-layout/split-layout.tsx"
+        },
+        {
+          path: "components/split-layout/split-layout.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {SplitLayout} from "./split-layout";\n\nexport default defineComponentPreview({\n  title: "Split layout",\n  category: "Foundation",\n  description: "Responsive two-up composition for proof and explanation.",\n  component: SplitLayout,\n  canvas: {width: 1920, height: 1080, duration: "4s"},\n  controls: {\n    title: {type: "text", defaultValue: "Story on one side.", maxLength: 48},\n    detail: {type: "text", defaultValue: "Proof on the other, in the same frame."},\n    side: {type: "select", defaultValue: "left", options: ["left", "right"]},\n    ratio: {type: "number", defaultValue: 0.42, min: 0.3, max: 0.6, step: 0.02},\n  },\n  examples: [\n    {name: "Words left", props: {}},\n    {name: "Words right", props: {side: "right"}},\n  ],\n});\n',
+          target: "videos/components/split-layout/split-layout.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Foundation",
+        namespaced: "@odori/split-layout",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 120,
+          minimumDurationInFrames: 60,
+          entranceFrames: 44,
+          exitFrames: 0,
+          contentLimits: {
+            title: 48,
+            detail: 96
+          },
+          reducedMotion: "both panels fade without travel",
+          requires: {
+            fonts: [
+              "sans"
+            ],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "split-wipe",
+      description: "Two panels parting to reveal the scene behind them.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/split-wipe/split-wipe.tsx",
+          content: 'import type {ReactNode} from "react";\nimport {Easing, Fill, interpolate, useBrand, useFrame, useDesignScale} from "odori";\n\nexport type SplitWipeProps = {\n  /** What is revealed as the panels part. */\n  children?: ReactNode;\n  /** Which way the two panels travel. */\n  direction?: "horizontal" | "vertical";\n  /** Frame the wipe begins. */\n  at?: number;\n  /** How long the panels take to clear the frame. */\n  durationInFrames?: number;\n  /** Colour of the panels. Defaults to the brand background. */\n  color?: string;\n  /** A hairline down the seam, so the split reads before it opens. */\n  seam?: boolean;\n};\n\n/**\n * Two panels parting to reveal what is behind them.\n *\n * The panels are the transition, not a fade of the content: content that fades\n * in has no edge and reads as a slideshow, while an edge travelling across the\n * frame reads as a cut with intent. Both halves move together, so the reveal\n * grows from the centre and the eye stays where the next scene begins.\n */\nexport const SplitWipe = ({\n  children,\n  direction = "horizontal",\n  at = 0,\n  durationInFrames = 26,\n  color,\n  seam = true,\n}: SplitWipeProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n\n  const progress = interpolate(frame, [at, at + durationInFrames], [0, 1], {easing: Easing.standard});\n  const plate = color ?? brand.colors.background;\n  const vertical = direction === "vertical";\n  const shift = `${progress * 100}%`;\n\n  return (\n    <Fill>\n      {children}\n      {/* Two panels, each covering half and leaving in opposite directions.\n          They stay mounted once open, which costs nothing and keeps the\n          component\'s output identical on every frame it renders. */}\n      {[0, 1].map((index) => (\n        <div\n          key={index}\n          aria-hidden\n          style={{\n            background: plate,\n            height: vertical ? "50%" : "100%",\n            left: vertical ? 0 : index === 0 ? 0 : "50%",\n            position: "absolute",\n            top: vertical ? (index === 0 ? 0 : "50%") : 0,\n            transform: vertical\n              ? `translateY(${index === 0 ? "-" : ""}${shift})`\n              : `translateX(${index === 0 ? "-" : ""}${shift})`,\n            width: vertical ? "100%" : "50%",\n          }}\n        />\n      ))}\n      {seam && progress < 1 ? (\n        <div\n          aria-hidden\n          style={{\n            background: brand.colors.border,\n            height: vertical ? Math.max(1, 2 * scale) : "100%",\n            left: vertical ? 0 : "50%",\n            opacity: 1 - progress,\n            position: "absolute",\n            top: vertical ? "50%" : 0,\n            width: vertical ? "100%" : Math.max(1, 2 * scale),\n          }}\n        />\n      ) : null}\n    </Fill>\n  );\n};\n',
+          target: "videos/components/split-wipe/split-wipe.tsx"
+        },
+        {
+          path: "components/split-wipe/split-wipe.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {SplitWipe} from "./split-wipe";\n\nconst Behind = () => (\n  <div\n    style={{\n      alignItems: "center",\n      background: "#0b0b0b",\n      color: "#f5f5f5",\n      display: "flex",\n      fontFamily: "ui-sans-serif, system-ui",\n      fontSize: 96,\n      inset: 0,\n      justifyContent: "center",\n      letterSpacing: "-0.04em",\n      position: "absolute",\n    }}\n  >\n    Ship the story.\n  </div>\n);\n\nexport default defineComponentPreview({\n  title: "Split wipe",\n  category: "Motion",\n  description: "Two panels parting to reveal the scene behind them.",\n  component: SplitWipe,\n  canvas: {width: 1920, height: 1080, duration: "3s"},\n  controls: {\n    direction: {type: "select", defaultValue: "horizontal", options: ["horizontal", "vertical"]},\n    at: {type: "number", defaultValue: 0, min: 0, max: 60},\n    durationInFrames: {type: "number", defaultValue: 26, min: 8, max: 90},\n    seam: {type: "boolean", defaultValue: true},\n  },\n  examples: [\n    {name: "Default", props: {children: <Behind />}},\n    {name: "Vertical", props: {direction: "vertical", children: <Behind />}},\n    {name: "Slow", props: {durationInFrames: 60, children: <Behind />}},\n  ],\n});\n',
+          target: "videos/components/split-wipe/split-wipe.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Motion",
+        namespaced: "@odori/split-wipe",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 60,
+          minimumDurationInFrames: 26,
+          entranceFrames: 26,
+          exitFrames: 0,
+          contentLimits: {},
+          reducedMotion: "the panels are open from the first frame",
+          requires: {
+            fonts: [],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "stage",
+      description: "The shared backdrop: hairline grid, soft glow, and vignette.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/stage/stage.tsx",
+          content: 'import type {CSSProperties, ReactNode} from "react";\nimport {Fill, Easing, interpolate, useBrand, useFrame, useDesignScale, useVideo} from "odori";\n\nexport type StageProps = {\n  children?: ReactNode;\n  /** A hairline grid keeps large empty frames from feeling flat. */\n  grid?: boolean;\n  /** A slow radial glow behind the content. */\n  glow?: boolean;\n  align?: "center" | "start";\n  style?: CSSProperties;\n};\n\n/**\n * The shared backdrop. Every scene sits on the same surface so cuts feel like\n * one film rather than a stack of unrelated slides.\n */\n/** Relative luminance, so the backdrop adapts to a light or dark brand. */\nconst isLight = (hex: string) => {\n  const value = hex.replace("#", "");\n  const full = value.length === 3 ? value.split("").map((part) => part + part).join("") : value;\n  const [red, green, blue] = [0, 2, 4].map((offset) => parseInt(full.slice(offset, offset + 2), 16) / 255);\n  return 0.2126 * red + 0.7152 * green + 0.0722 * blue > 0.5;\n};\n\nexport const Stage = ({children, grid = true, glow = true, align = "center", style}: StageProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const {width, height} = useVideo();\n  const scale = useDesignScale();\n  const drift = interpolate(frame, [0, 240], [0, 1], {extrapolateRight: "extend"});\n  const cell = 80 * scale;\n  const light = isLight(brand.colors.background);\n  const glowColor = light ? "rgba(0,0,0,0.05)" : "rgba(255,255,255,0.07)";\n  const vignette = light ? "rgba(0,0,0,0.06)" : "rgba(0,0,0,0.55)";\n\n  return (\n    <Fill style={{background: brand.colors.background, ...style}}>\n      {grid ? (\n        <Fill\n          style={{\n            backgroundImage: `linear-gradient(to right, ${brand.colors.border} 1px, transparent 1px), linear-gradient(to bottom, ${brand.colors.border} 1px, transparent 1px)`,\n            backgroundSize: `${cell}px ${cell}px`,\n            maskImage: `radial-gradient(ellipse ${width * 0.55}px ${height * 0.5}px at 50% 45%, rgba(0,0,0,0.65), transparent 78%)`,\n            WebkitMaskImage: `radial-gradient(ellipse ${width * 0.55}px ${height * 0.5}px at 50% 45%, rgba(0,0,0,0.65), transparent 78%)`,\n            opacity: interpolate(frame, [0, 24], [0, 0.7], {easing: Easing.standard}),\n            transform: `translateY(${drift * -14 * scale}px)`,\n          }}\n        />\n      ) : null}\n      {glow ? (\n        <Fill\n          style={{\n            backgroundImage: `radial-gradient(ellipse ${width * 0.45}px ${height * 0.42}px at 50% ${\n              38 + drift * 3\n            }%, ${glowColor}, transparent 70%)`,\n          }}\n        />\n      ) : null}\n      <Fill\n        style={{\n          alignItems: "center",\n          justifyContent: align === "center" ? "center" : "flex-start",\n        }}\n      >\n        {children}\n      </Fill>\n      <Fill\n        style={{\n          boxShadow: `inset 0 0 ${240 * scale}px ${vignette}`,\n          pointerEvents: "none",\n        }}\n      />\n    </Fill>\n  );\n};\n',
+          target: "videos/components/stage/stage.tsx"
+        },
+        {
+          path: "components/stage/stage.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {Stage} from "./stage";\n\nexport default defineComponentPreview({\n  title: "Stage",\n  category: "Brand",\n  description: "The shared backdrop: hairline grid, soft glow, and vignette.",\n  component: Stage,\n  canvas: {width: 1920, height: 1080, duration: "4s"},\n  controls: {\n    grid: {type: "boolean", defaultValue: true},\n    glow: {type: "boolean", defaultValue: true},\n  },\n  examples: [\n    {name: "Default", props: {}},\n    {name: "Flat", props: {grid: false, glow: false}},\n  ],\n});\n',
+          target: "videos/components/stage/stage.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Brand",
+        namespaced: "@odori/stage",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 120,
+          minimumDurationInFrames: 24,
+          entranceFrames: 24,
+          exitFrames: 0,
+          contentLimits: {},
+          reducedMotion: "static grid without drift",
+          requires: {
+            fonts: [],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "staggered-lines",
+      description: "Two line hierarchy with independent entrance timing.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/staggered-lines/staggered-lines.tsx",
+          content: 'import {Fill, Easing, interpolate, useBrand, useFrame, useDesignScale} from "odori";\n\nexport type StaggeredLinesProps = {\n  /** Each line enters on its own beat, in order. */\n  lines: string[];\n  detail?: string;\n  align?: "left" | "center";\n  /** Frames between one line and the next. */\n  stagger?: number;\n};\n\n/**\n * Two or three lines with independent entrance timing, so a statement builds\n * its own hierarchy: the first line lands, the rest answer it.\n */\nexport const StaggeredLines = ({lines, detail, align = "left", stagger = 10}: StaggeredLinesProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n\n  return (\n    <Fill\n      style={{\n        alignItems: align === "center" ? "center" : "flex-start",\n        gap: 8 * scale,\n        justifyContent: "center",\n        padding: `${120 * scale}px ${150 * scale}px`,\n        textAlign: align,\n      }}\n    >\n      {lines.map((line, index) => {\n        const delay = 6 + index * stagger;\n        const progress = interpolate(frame, [delay, delay + 26], [0, 1], {easing: Easing.standard});\n        const leading = index === 0;\n        return (\n          <div key={`${line}-${index}`} style={{overflow: "hidden", paddingBottom: 12 * scale}}>\n            <span\n              style={{\n                color: leading ? brand.colors.foreground : brand.colors.muted,\n                display: "inline-block",\n                fontSize: (leading ? 112 : 92) * scale,\n                fontWeight: leading ? 570 : 460,\n                letterSpacing: "-0.045em",\n                lineHeight: 1.05,\n                opacity: progress,\n                transform: `translateY(${(1 - progress) * 70 * scale}px)`,\n              }}\n            >\n              {line}\n            </span>\n          </div>\n        );\n      })}\n      {detail ? (\n        <div\n          style={{\n            color: brand.colors.muted,\n            fontSize: 34 * scale,\n            marginTop: 20 * scale,\n            opacity: interpolate(frame, [6 + lines.length * stagger, 6 + lines.length * stagger + 20], [0, 1], {\n              easing: Easing.standard,\n            }),\n          }}\n        >\n          {detail}\n        </div>\n      ) : null}\n    </Fill>\n  );\n};\n',
+          target: "videos/components/staggered-lines/staggered-lines.tsx"
+        },
+        {
+          path: "components/staggered-lines/staggered-lines.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {StaggeredLines} from "./staggered-lines";\n\nexport default defineComponentPreview({\n  title: "Staggered lines",\n  category: "Typography",\n  description: "Two line hierarchy with independent entrance timing.",\n  component: StaggeredLines,\n  canvas: {width: 1920, height: 1080, duration: "4s"},\n  controls: {\n    align: {type: "select", defaultValue: "left", options: ["left", "center"]},\n    stagger: {type: "number", defaultValue: 10, min: 4, max: 30},\n    detail: {type: "text", defaultValue: "From first scene to final render."},\n  },\n  examples: [\n    {name: "Default", props: {lines: ["One workflow.", "Every launch."]}},\n    {name: "Centered", props: {lines: ["Author the story.", "Render the proof."], align: "center"}},\n  ],\n});\n',
+          target: "videos/components/staggered-lines/staggered-lines.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Typography",
+        namespaced: "@odori/staggered-lines",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 120,
+          minimumDurationInFrames: 48,
+          entranceFrames: 32,
+          exitFrames: 10,
+          contentLimits: {
+            lines: 3,
+            lineLength: 42
+          },
+          reducedMotion: "lines fade in together",
+          requires: {
+            fonts: [
+              "sans"
+            ],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "state-transition",
+      description: "Before, processing, and resolved product states.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/state-transition/state-transition.tsx",
+          content: 'import {Fill, Easing, interpolate, useBrand, useFrame, useDesignScale} from "odori";\n\nexport type StateTransitionProps = {\n  /** The state the product starts in. */\n  from: string;\n  /** What it looks like while the work happens. */\n  during: string;\n  /** Where it resolves. */\n  to: string;\n  label?: string;\n};\n\n/**\n * Before, working, resolved. The card keeps its size across all three, so the\n * transition reads as one object changing rather than three cards cutting.\n */\nexport const StateTransition = ({from, during, to, label}: StateTransitionProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n  const stage = frame < 34 ? 0 : frame < 78 ? 1 : 2;\n  const text = [from, during, to][stage];\n  const enterAt = [0, 34, 78][stage];\n  const enter = interpolate(frame, [enterAt, enterAt + 14], [0, 1], {easing: Easing.standard});\n  const tint = stage === 2 ? brand.colors.accent : brand.colors.border;\n  const spin = (frame % 30) / 30;\n\n  return (\n    <Fill style={{alignItems: "center", gap: 30 * scale, justifyContent: "center"}}>\n      {label ? <div style={{color: brand.colors.muted, fontSize: 32 * scale}}>{label}</div> : null}\n      <div\n        style={{\n          alignItems: "center",\n          background: brand.colors.surface,\n          border: `${2 * scale}px solid ${tint}`,\n          borderRadius: 26 * scale,\n          display: "flex",\n          gap: 22 * scale,\n          minWidth: 720 * scale,\n          justifyContent: "center",\n          padding: `${44 * scale}px ${52 * scale}px`,\n        }}\n      >\n        {stage === 1 ? (\n          <span\n            style={{\n              border: `${4 * scale}px solid ${brand.colors.border}`,\n              borderRadius: 999,\n              borderTopColor: brand.colors.accent,\n              display: "block",\n              height: 46 * scale,\n              transform: `rotate(${spin * 360}deg)`,\n              width: 46 * scale,\n            }}\n          />\n        ) : null}\n        <span\n          style={{\n            fontSize: 62 * scale,\n            fontWeight: 560,\n            letterSpacing: "-0.03em",\n            opacity: enter,\n            transform: `translateY(${(1 - enter) * 14 * scale}px)`,\n          }}\n        >\n          {text}\n        </span>\n      </div>\n    </Fill>\n  );\n};\n',
+          target: "videos/components/state-transition/state-transition.tsx"
+        },
+        {
+          path: "components/state-transition/state-transition.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {StateTransition} from "./state-transition";\n\nexport default defineComponentPreview({\n  title: "State transition",\n  category: "Narrative",\n  description: "Before, processing, and resolved product states.",\n  component: StateTransition,\n  canvas: {width: 1920, height: 1080, duration: "5s"},\n  controls: {\n    label: {type: "text", defaultValue: "Export job"},\n    from: {type: "text", defaultValue: "Queued", maxLength: 24},\n    during: {type: "text", defaultValue: "Rendering 360 frames", maxLength: 32},\n    to: {type: "text", defaultValue: "Ready", maxLength: 24},\n  },\n  examples: [{name: "Export", props: {}}],\n});\n',
+          target: "videos/components/state-transition/state-transition.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Narrative",
+        namespaced: "@odori/state-transition",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 150,
+          minimumDurationInFrames: 120,
+          entranceFrames: 14,
+          exitFrames: 0,
+          contentLimits: {
+            from: 24,
+            during: 32,
+            to: 24
+          },
+          reducedMotion: "states cut without a spinner",
+          requires: {
+            fonts: [
+              "sans"
+            ],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "sting-close",
+      description: "A resolving fall under an end card.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/sting-close/sting-close.tsx",
+          content: 'import {\n  chord,\n  defineCue,\n  gain,\n  lowPass,\n  mix,\n  normalize,\n  note,\n  sequence,\n  shape,\n  sine,\n  type CueDefinition,\n} from "odori";\n\nexport type StingCloseOptions = {\n  /** Root the sting resolves onto, as a note name. */\n  root?: string;\n  /** Peak level before the mix normalizes the whole track. */\n  peak?: number;\n};\n\n/**\n * The closing bookend: the fifth first, the root landing under it, and a long\n * tail that lets the end card sit. Two and a half seconds, and it resolves\n * downward, because a video that ends on a rise sounds unfinished.\n */\nexport const stingClose = ({root = "d3", peak = 0.8}: StingCloseOptions = {}): CueDefinition => {\n  const samples = 48000 * 2.5;\n  const [tonic, , fifth] = chord(root, "minor");\n\n  return defineCue({\n    name: "sting.close",\n    durationInFrames: 75,\n    params: {root, peak},\n    render: () =>\n      normalize(\n        mix(\n          sequence(\n            [\n              {\n                at: 0,\n                play: (length: number) => shape(sine(length, fifth), {attack: 0.01, decay: 1.4, sustain: 0.1, release: 0.6}),\n                gain: 0.55,\n              },\n              {\n                at: 1,\n                play: (length: number) => shape(sine(length, tonic), {attack: 0.012, decay: 1.6, sustain: 0.12, release: 0.7}),\n                gain: 0.8,\n              },\n            ],\n            {bpm: 96, division: 8, samples},\n          ),\n          // Weight under the landing, low passed so it is felt rather than heard.\n          gain(lowPass(shape(sine(samples, note(root) / 2), {attack: 0.03, decay: 1.8, sustain: 0}), 160), 0.5),\n        ),\n        peak,\n      ),\n  });\n};\n',
+          target: "videos/components/sting-close/sting-close.tsx"
+        },
+        {
+          path: "components/sting-close/sting-close.preview.tsx",
+          content: 'import {CueWave, defineComponentPreview} from "odori/preview";\nimport {stingClose, type StingCloseOptions} from "./sting-close";\n\nconst Wave = ({root, peak}: StingCloseOptions) => <CueWave cue={stingClose({root, peak})} />;\n\nexport default defineComponentPreview({\n  title: "Closing sting",\n  category: "Sound",\n  description: "A resolving fall under an end card.",\n  component: Wave,\n  canvas: {width: 1920, height: 1080, duration: "3s"},\n  controls: {\n    root: {type: "select", defaultValue: "d3", options: ["c3", "d3", "f3", "g3"]},\n    peak: {type: "number", defaultValue: 0.8, min: 0.1, max: 1, step: 0.05},\n  },\n  examples: [{name: "Default", props: {}}, {name: "Lower", props: {root: "c3"}}],\n});\n',
+          target: "videos/components/sting-close/sting-close.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "cue",
+        family: "Sound",
+        namespaced: "@odori/sting-close",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 75,
+          minimumDurationInFrames: 75,
+          entranceFrames: 0,
+          exitFrames: 0,
+          contentLimits: {},
+          reducedMotion: "the waveform renders without a playhead",
+          requires: {
+            fonts: [
+              "mono"
+            ],
+            audio: []
+          },
+          loops: false
+        },
+        cue: {
+          name: "sting.close",
+          export: "stingClose"
+        }
+      }
+    },
+    {
+      name: "sting-open",
+      description: "A breath of air and an arriving chord, for a title.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/sting-open/sting-open.tsx",
+          content: 'import {\n  chord,\n  defineCue,\n  gain,\n  highPass,\n  mix,\n  noise,\n  normalize,\n  note,\n  sequence,\n  shape,\n  sine,\n  type CueDefinition,\n} from "odori";\n\nexport type StingOpenOptions = {\n  /** Root of the arrival chord, as a note name. */\n  root?: string;\n  /** Peak level before the mix normalizes the whole track. */\n  peak?: number;\n};\n\n/**\n * The opening bookend: a breath of air, then a chord arriving under it. Two\n * seconds, so a title has something to land on without the sound outstaying\n * the first shot.\n *\n * The notes enter as an arpeggio a few frames apart rather than together,\n * which is the difference between a chord and a stab.\n */\nexport const stingOpen = ({root = "a3", peak = 0.85}: StingOpenOptions = {}): CueDefinition => {\n  const samples = 48000 * 2;\n  const voices = chord(root, "add9");\n\n  return defineCue({\n    name: "sting.open",\n    durationInFrames: 60,\n    params: {root, peak},\n    render: () =>\n      normalize(\n        mix(\n          // Air: filtered noise opening the moment.\n          gain(shape(highPass(noise(samples, 21), 3000), {attack: 0.18, decay: 0.5, sustain: 0.05}), 0.25),\n          // The chord, one voice every sixteenth.\n          sequence(\n            voices.map((frequency, index) => ({\n              at: index,\n              play: (length: number) =>\n                shape(sine(length, frequency), {attack: 0.008, decay: 0.9, sustain: 0.15, release: 0.4}),\n              gain: 0.7 - index * 0.08,\n            })),\n            {bpm: 120, division: 16, samples},\n          ),\n          // A sub under the root gives the arrival a floor.\n          gain(shape(sine(samples, note(root) / 2), {attack: 0.02, decay: 1.1, sustain: 0}), 0.4),\n        ),\n        peak,\n      ),\n  });\n};\n',
+          target: "videos/components/sting-open/sting-open.tsx"
+        },
+        {
+          path: "components/sting-open/sting-open.preview.tsx",
+          content: 'import {CueWave, defineComponentPreview} from "odori/preview";\nimport {stingOpen, type StingOpenOptions} from "./sting-open";\n\nconst Wave = ({root, peak}: StingOpenOptions) => <CueWave cue={stingOpen({root, peak})} />;\n\nexport default defineComponentPreview({\n  title: "Opening sting",\n  category: "Sound",\n  description: "A breath of air and an arriving chord, for a title.",\n  component: Wave,\n  canvas: {width: 1920, height: 1080, duration: "3s"},\n  controls: {\n    root: {type: "select", defaultValue: "a3", options: ["f3", "g3", "a3", "c4"]},\n    peak: {type: "number", defaultValue: 0.85, min: 0.1, max: 1, step: 0.05},\n  },\n  examples: [{name: "Default", props: {}}, {name: "Higher", props: {root: "c4"}}],\n});\n',
+          target: "videos/components/sting-open/sting-open.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "cue",
+        family: "Sound",
+        namespaced: "@odori/sting-open",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 60,
+          minimumDurationInFrames: 60,
+          entranceFrames: 0,
+          exitFrames: 0,
+          contentLimits: {},
+          reducedMotion: "the waveform renders without a playhead",
+          requires: {
+            fonts: [
+              "mono"
+            ],
+            audio: []
+          },
+          loops: false
+        },
+        cue: {
+          name: "sting.open",
+          export: "stingOpen"
+        }
+      }
+    },
+    {
+      name: "success",
+      description: "Two notes rising a fifth, for a confirmation.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/success/success.tsx",
+          content: 'import {defineCue, gain, mix, normalize, note, sequence, shape, sine, type CueDefinition} from "odori";\n\nexport type SuccessOptions = {\n  /** The note the confirmation starts from. */\n  root?: string;\n  /** Peak level before the mix normalizes the whole track. */\n  peak?: number;\n};\n\n/**\n * Two notes rising a fifth: the shape every interface has agreed means "that\n * worked". Half a second, so it fits inside the frame where the check mark\n * appears.\n *\n * Rising is the entire message. The same two notes in the other order are\n * `error`, which is why both are written from one interval.\n */\nexport const success = ({root = "e5", peak = 0.6}: SuccessOptions = {}): CueDefinition => {\n  const samples = Math.round(48000 * 0.5);\n  const base = note(root);\n\n  return defineCue({\n    name: "ui.success",\n    durationInFrames: 15,\n    params: {root, peak},\n    render: () =>\n      normalize(\n        sequence(\n          [base, base * 2 ** (7 / 12)].map((frequency, index) => ({\n            at: index,\n            play: (length: number) =>\n              mix(\n                shape(sine(length, frequency), {attack: 0.004, decay: 0.24, sustain: 0.06, release: 0.12}),\n                gain(shape(sine(length, frequency * 2), {attack: 0.004, decay: 0.12, sustain: 0}), 0.3),\n              ),\n            gain: index === 0 ? 0.7 : 0.85,\n          })),\n          {bpm: 150, division: 16, samples},\n        ),\n        peak,\n      ),\n  });\n};\n',
+          target: "videos/components/success/success.tsx"
+        },
+        {
+          path: "components/success/success.preview.tsx",
+          content: 'import {CueWave, defineComponentPreview} from "odori/preview";\nimport {success, type SuccessOptions} from "./success";\n\nconst Wave = ({root, peak}: SuccessOptions) => <CueWave cue={success({root, peak})} />;\n\nexport default defineComponentPreview({\n  title: "Success",\n  category: "Sound",\n  description: "Two notes rising a fifth, for a confirmation.",\n  component: Wave,\n  canvas: {width: 1920, height: 1080, duration: "2s"},\n  controls: {\n    root: {type: "select", defaultValue: "e5", options: ["c5", "d5", "e5", "g5"]},\n    peak: {type: "number", defaultValue: 0.6, min: 0.1, max: 1, step: 0.05},\n  },\n  examples: [{name: "Default", props: {}}, {name: "Lower", props: {root: "c5"}}],\n});\n',
+          target: "videos/components/success/success.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "cue",
+        family: "Sound",
+        namespaced: "@odori/success",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 15,
+          minimumDurationInFrames: 15,
+          entranceFrames: 0,
+          exitFrames: 0,
+          contentLimits: {},
+          reducedMotion: "the waveform renders without a playhead",
+          requires: {
+            fonts: [
+              "mono"
+            ],
+            audio: []
+          },
+          loops: false
+        },
+        cue: {
+          name: "ui.success",
+          export: "success"
+        }
+      }
+    },
+    {
+      name: "table-focus",
+      description: "Rows and columns with one animated focal selection.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/table-focus/table-focus.tsx",
+          content: 'import {Easing, Fill, interpolate, useBrand, useFrame, useDesignScale} from "odori";\n\nexport type TableFocusProps = {\n  columns?: string[];\n  rows?: string[][];\n  /** Which row the camera settles on, by index. */\n  focus?: number;\n  /** Frame the focus lands. */\n  focusAt?: number;\n  /** Dim the rows that are not the focus. */\n  dim?: boolean;\n};\n\n/**\n * Rows and columns with one row that matters.\n *\n * A table in a product video is never about the table: it is about the one row\n * the viewer is supposed to read. So the focus is a first-class prop, the rows\n * around it recede, and the highlight arrives on a frame the author chose\n * rather than fading in with everything else.\n */\nexport const TableFocus = ({\n  columns = ["Deployment", "Environment", "Duration", "Status"],\n  rows = [],\n  focus = 1,\n  focusAt = 30,\n  dim = true,\n}: TableFocusProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n  const appear = interpolate(frame, [0, 14], [0, 1], {easing: Easing.standard});\n  const landed = interpolate(frame, [focusAt, focusAt + 14], [0, 1], {easing: Easing.standard});\n\n  return (\n    <Fill style={{justifyContent: "center", opacity: appear, padding: 90 * scale}}>\n      <div style={{display: "flex", flexDirection: "column", gap: 10 * scale}}>\n        <div style={{display: "flex", gap: 24 * scale, padding: `0 ${28 * scale}px ${14 * scale}px`}}>\n          {columns.map((column) => (\n            <span\n              key={column}\n              style={{\n                color: brand.colors.muted,\n                flex: 1,\n                fontFamily: brand.typography.sans,\n                fontSize: 21 * scale,\n                letterSpacing: "0.06em",\n                textTransform: "uppercase",\n              }}\n            >\n              {column}\n            </span>\n          ))}\n        </div>\n\n        {rows.map((row, index) => {\n          const isFocus = index === focus;\n          // Everything else recedes rather than the focus getting brighter:\n          // the row stays the colour it always was, which keeps the table\n          // looking like a table and not like a slide.\n          const recede = dim && !isFocus ? 1 - landed * 0.65 : 1;\n\n          return (\n            <div\n              key={index}\n              style={{\n                alignItems: "center",\n                background: isFocus ? brand.colors.surface : "transparent",\n                border: `1px solid ${isFocus ? brand.colors.border : "transparent"}`,\n                borderRadius: 14 * scale,\n                display: "flex",\n                gap: 24 * scale,\n                opacity: recede,\n                padding: `${22 * scale}px ${28 * scale}px`,\n                transform: isFocus ? `scale(${1 + landed * 0.012})` : undefined,\n              }}\n            >\n              {row.map((cell, cellIndex) => (\n                <span\n                  key={cellIndex}\n                  style={{\n                    color: cellIndex === 0 ? brand.colors.foreground : brand.colors.muted,\n                    flex: 1,\n                    fontFamily: cellIndex === 0 ? brand.typography.sans : brand.typography.mono,\n                    fontSize: 26 * scale,\n                    overflow: "hidden",\n                    textOverflow: "ellipsis",\n                    whiteSpace: "nowrap",\n                  }}\n                >\n                  {cell}\n                </span>\n              ))}\n            </div>\n          );\n        })}\n      </div>\n    </Fill>\n  );\n};\n',
+          target: "videos/components/table-focus/table-focus.tsx"
+        },
+        {
+          path: "components/table-focus/table-focus.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {TableFocus} from "./table-focus";\n\nconst ROWS = [\n  ["odori.dev", "production", "48s", "ready"],\n  ["docs-site", "preview", "31s", "ready"],\n  ["studio", "production", "62s", "building"],\n  ["registry", "preview", "12s", "ready"],\n];\n\nexport default defineComponentPreview({\n  title: "Table focus",\n  category: "Product UI",\n  description: "Rows and columns with one animated focal selection.",\n  component: TableFocus,\n  canvas: {width: 1920, height: 1080, duration: "4s"},\n  controls: {\n    focus: {type: "number", defaultValue: 1, min: 0, max: 3},\n    focusAt: {type: "number", defaultValue: 30, min: 0, max: 90},\n    dim: {type: "boolean", defaultValue: true},\n  },\n  examples: [\n    {name: "Default", props: {rows: ROWS}},\n    {name: "Last row", props: {rows: ROWS, focus: 3}},\n    {name: "No dimming", props: {rows: ROWS, dim: false}},\n  ],\n});\n',
+          target: "videos/components/table-focus/table-focus.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Product UI",
+        namespaced: "@odori/table-focus",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 120,
+          minimumDurationInFrames: 45,
+          entranceFrames: 14,
+          exitFrames: 0,
+          contentLimits: {
+            columns: 6,
+            rows: 8
+          },
+          reducedMotion: "the focused row is marked without the others dimming",
+          requires: {
+            fonts: [
+              "sans"
+            ],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "terminal",
+      description: "A typed command session with deterministic output reveals.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/terminal/terminal.tsx",
+          content: 'import {Fill, Easing, interpolate, useBrand, useFrame, useDesignScale} from "odori";\n\nexport type TerminalStep = {command: string; output?: string[]; durationInFrames?: number};\n\nexport type TerminalProps = {\n  steps: TerminalStep[];\n  title?: string;\n  prompt?: string;\n};\n\n/**\n * A typed session. Characters, the caret blink, and output all derive from the\n * frame, so scrubbing backwards untypes the command exactly.\n */\nexport const Terminal = ({steps, title = "product-stories", prompt = "$"}: TerminalProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n  const enter = interpolate(frame, [0, 20], [0, 1], {easing: Easing.standard});\n\n  let cursor = 0;\n  const rendered = steps.map((step) => {\n    const typing = Math.max(14, Math.round(step.command.length * 1.5));\n    const hold = step.durationInFrames ?? typing + 40;\n    const start = cursor;\n    cursor += hold;\n    const local = frame - start;\n    return {\n      step,\n      visible: local >= 0,\n      typed: Math.max(0, Math.min(step.command.length, Math.round(local / 1.5))),\n      typing,\n      local,\n      outputProgress: interpolate(local, [typing + 6, typing + 20], [0, 1], {easing: Easing.standard}),\n    };\n  });\n\n  return (\n    <Fill style={{alignItems: "center", justifyContent: "center", padding: 110 * scale}}>\n      <div\n        style={{\n          background: brand.colors.surface,\n          border: `1px solid ${brand.colors.border}`,\n          borderRadius: 16 * scale,\n          boxShadow: `0 ${30 * scale}px ${90 * scale}px rgba(0,0,0,0.6)`,\n          fontFamily: brand.typography.mono,\n          maxWidth: 1360 * scale,\n          minHeight: 540 * scale,\n          opacity: enter,\n          overflow: "hidden",\n          transform: `translateY(${(1 - enter) * 26 * scale}px)`,\n          width: "100%",\n        }}\n      >\n        <div\n          style={{\n            alignItems: "center",\n            background: "rgba(255,255,255,0.02)",\n            borderBottom: `1px solid ${brand.colors.border}`,\n            color: brand.colors.muted,\n            display: "flex",\n            fontSize: 21 * scale,\n            gap: 14 * scale,\n            padding: `${18 * scale}px ${24 * scale}px`,\n          }}\n        >\n          <div style={{display: "flex", gap: 9 * scale}}>\n            {[0, 1, 2].map((index) => (\n              <span key={index} style={{background: "#2a2a2a", borderRadius: 999, height: 12 * scale, width: 12 * scale}} />\n            ))}\n          </div>\n          <span style={{marginLeft: 8 * scale}}>{title}</span>\n        </div>\n\n        <div style={{display: "grid", fontSize: 29 * scale, gap: 20 * scale, lineHeight: 1.5, padding: 32 * scale}}>\n          {rendered.map((item, index) =>\n            item.visible ? (\n              <div key={index} style={{display: "grid", gap: 8 * scale}}>\n                <div style={{display: "flex", gap: 14 * scale}}>\n                  <span style={{color: brand.colors.muted}}>{prompt}</span>\n                  <span style={{color: brand.colors.foreground, whiteSpace: "pre"}}>\n                    {item.step.command.slice(0, item.typed)}\n                    {item.typed < item.step.command.length || Math.floor(item.local / 15) % 2 === 0 ? (\n                      <span\n                        style={{\n                          background: brand.colors.foreground,\n                          display: "inline-block",\n                          height: 30 * scale,\n                          marginLeft: 3 * scale,\n                          transform: `translateY(${5 * scale}px)`,\n                          width: 13 * scale,\n                        }}\n                      />\n                    ) : null}\n                  </span>\n                </div>\n                {item.outputProgress > 0\n                  ? (item.step.output ?? []).map((line, lineIndex) => (\n                      <div\n                        key={lineIndex}\n                        style={{\n                          color: brand.colors.muted,\n                          opacity: item.outputProgress,\n                          paddingLeft: 32 * scale,\n                          transform: `translateY(${(1 - item.outputProgress) * 6 * scale}px)`,\n                        }}\n                      >\n                        {line}\n                      </div>\n                    ))\n                  : null}\n              </div>\n            ) : null,\n          )}\n        </div>\n      </div>\n    </Fill>\n  );\n};\n',
+          target: "videos/components/terminal/terminal.tsx"
+        },
+        {
+          path: "components/terminal/terminal.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {Terminal} from "./terminal";\n\nexport default defineComponentPreview({\n  title: "Terminal",\n  category: "Developer proof",\n  description: "A typed command session with deterministic output reveals.",\n  component: Terminal,\n  canvas: {width: 1920, height: 1080, duration: "6s"},\n  controls: {\n    title: {type: "text", defaultValue: "zsh"},\n    prompt: {type: "text", defaultValue: "$", maxLength: 4},\n  },\n  examples: [\n    {\n      name: "Install and preview",\n      props: {\n        steps: [\n          {command: "pnpm create odori@latest product-stories", output: ["Created videos/launch/video.tsx"]},\n          {command: "pnpm odori dev", output: ["Odori Studio ready on http://127.0.0.1:4300"]},\n        ],\n      },\n    },\n    {\n      name: "Single command",\n      props: {steps: [{command: "pnpm odori export launch", output: ["out/launch.mp4"]}]},\n    },\n  ],\n});\n',
+          target: "videos/components/terminal/terminal.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Developer proof",
+        namespaced: "@odori/terminal",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 180,
+          minimumDurationInFrames: 60,
+          entranceFrames: 12,
+          exitFrames: 10,
+          contentLimits: {
+            commandLength: 58,
+            steps: 4
+          },
+          reducedMotion: "prints commands without typing",
+          requires: {
+            fonts: [
+              "mono"
+            ],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "timeline",
+      description: "Milestones revealed along a measured temporal axis.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/timeline/timeline.tsx",
+          content: 'import {Fill, Easing, interpolate, useBrand, useFrame, useDesignScale} from "odori";\n\nexport type Milestone = {label: string; detail?: string};\n\nexport type TimelineProps = {\n  milestones: Milestone[];\n  headline?: string;\n};\n\n/**\n * Milestones along one measured axis. The axis draws first and the markers\n * land on it in order, so the spacing reads as time rather than as a list.\n */\nexport const Timeline = ({milestones, headline}: TimelineProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n  const axis = interpolate(frame, [8, 44], [0, 1], {easing: Easing.standard});\n\n  return (\n    <Fill style={{gap: 60 * scale, justifyContent: "center", padding: `${110 * scale}px ${120 * scale}px`}}>\n      {headline ? (\n        <div style={{fontSize: 58 * scale, fontWeight: 560, letterSpacing: "-0.04em", opacity: interpolate(frame, [0, 16], [0, 1])}}>\n          {headline}\n        </div>\n      ) : null}\n      <div style={{position: "relative"}}>\n        <div\n          style={{\n            background: brand.colors.border,\n            height: 2 * scale,\n            transform: `scaleX(${axis})`,\n            transformOrigin: "left",\n            width: "100%",\n          }}\n        />\n        <div style={{display: "flex", justifyContent: "space-between", marginTop: -12 * scale}}>\n          {milestones.map((milestone, index) => {\n            const at = 24 + index * 12;\n            const enter = interpolate(frame, [at, at + 18], [0, 1], {easing: Easing.standard});\n            return (\n              <div key={milestone.label} style={{alignItems: "center", display: "grid", gap: 16 * scale, justifyItems: "center", opacity: enter}}>\n                <span\n                  style={{\n                    background: index === milestones.length - 1 ? brand.colors.accent : brand.colors.foreground,\n                    borderRadius: 999,\n                    height: 22 * scale,\n                    transform: `scale(${0.6 + enter * 0.4})`,\n                    width: 22 * scale,\n                  }}\n                />\n                <span style={{fontSize: 34 * scale, fontWeight: 540}}>{milestone.label}</span>\n                {milestone.detail ? (\n                  <span style={{color: brand.colors.muted, fontSize: 26 * scale}}>{milestone.detail}</span>\n                ) : null}\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </Fill>\n  );\n};\n',
+          target: "videos/components/timeline/timeline.tsx"
+        },
+        {
+          path: "components/timeline/timeline.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {Timeline} from "./timeline";\n\nexport default defineComponentPreview({\n  title: "Timeline",\n  category: "Narrative",\n  description: "Milestones revealed along a measured temporal axis.",\n  component: Timeline,\n  canvas: {width: 1920, height: 1080, duration: "5s"},\n  controls: {headline: {type: "text", defaultValue: "From idea to launch"}},\n  examples: [\n    {\n      name: "Launch",\n      props: {\n        milestones: [\n          {label: "Idea", detail: "one sentence"},\n          {label: "Draft", detail: "scenes in place"},\n          {label: "Review", detail: "contract tests"},\n          {label: "Launch", detail: "one export"},\n        ],\n      },\n    },\n  ],\n});\n',
+          target: "videos/components/timeline/timeline.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Narrative",
+        namespaced: "@odori/timeline",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 150,
+          minimumDurationInFrames: 75,
+          entranceFrames: 72,
+          exitFrames: 0,
+          contentLimits: {
+            milestones: 5,
+            labelLength: 18
+          },
+          reducedMotion: "the axis and markers appear at once",
+          requires: {
+            fonts: [
+              "sans"
+            ],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "title-reveal",
+      description: "A staggered, word-masked headline.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/title-reveal/title-reveal.tsx",
+          content: 'import {Fill, Easing, interpolate, useBrand, useFrame, useDesignScale} from "odori";\n\nexport type TitleRevealProps = {\n  title: string;\n  detail?: string;\n  align?: "left" | "center";\n};\n\n/**\n * A masked, word-staggered headline. Each word rises out of a clipped line\n * box, so the reveal reads as typography rather than a fade.\n */\nexport const TitleReveal = ({title, detail, align = "center"}: TitleRevealProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n  const lines = title.split("\\n");\n  let wordIndex = 0;\n\n  return (\n    <Fill\n      style={{\n        alignItems: align === "center" ? "center" : "flex-start",\n        gap: 34 * scale,\n        justifyContent: "center",\n        padding: `${120 * scale}px ${140 * scale}px`,\n        textAlign: align,\n      }}\n    >\n      <div style={{display: "grid", gap: 6 * scale, maxWidth: 1560 * scale}}>\n        {lines.map((line, lineNumber) => (\n          <div\n            key={`${line}-${lineNumber}`}\n            style={{\n              display: "flex",\n              flexWrap: "wrap",\n              gap: `0 ${26 * scale}px`,\n              justifyContent: align === "center" ? "center" : "flex-start",\n              overflow: "hidden",\n              paddingBottom: 12 * scale,\n            }}\n          >\n            {line.split(/\\s+/).map((word) => {\n              const delay = 4 + wordIndex * brand.motion.staggerFrames;\n              wordIndex += 1;\n              const progress = interpolate(frame, [delay, delay + 24], [0, 1], {easing: Easing.standard});\n              return (\n                <span\n                  key={`${word}-${wordIndex}`}\n                  style={{\n                    display: "inline-block",\n                    fontSize: 116 * scale,\n                    fontWeight: 560,\n                    letterSpacing: "-0.045em",\n                    lineHeight: 1.04,\n                    opacity: progress,\n                    transform: `translateY(${(1 - progress) * 78 * scale}px)`,\n                  }}\n                >\n                  {word}\n                </span>\n              );\n            })}\n          </div>\n        ))}\n      </div>\n\n      {detail ? (\n        <div\n          style={{\n            color: brand.colors.muted,\n            fontSize: 36 * scale,\n            letterSpacing: "-0.015em",\n            maxWidth: 1100 * scale,\n            opacity: interpolate(frame, [16, 34], [0, 1], {easing: Easing.standard}),\n            transform: `translateY(${interpolate(frame, [16, 34], [14 * scale, 0], {easing: Easing.standard})}px)`,\n          }}\n        >\n          {detail}\n        </div>\n      ) : null}\n    </Fill>\n  );\n};\n',
+          target: "videos/components/title-reveal/title-reveal.tsx"
+        },
+        {
+          path: "components/title-reveal/title-reveal.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {TitleReveal} from "./title-reveal";\n\nexport default defineComponentPreview({\n  title: "Title reveal",\n  category: "Typography",\n  description: "A staggered, word-masked headline.",\n  component: TitleReveal,\n  canvas: {width: 1920, height: 1080, duration: "4s"},\n  controls: {\n    title: {type: "text", defaultValue: "Ship the story.", maxLength: 64},\n    detail: {type: "text", defaultValue: "An independent React video framework."},\n    align: {type: "select", defaultValue: "center", options: ["left", "center"]},\n  },\n  examples: [\n    {name: "Default", props: {title: "Ship the story."}},\n    {name: "Two lines", props: {title: "Build videos\\nlike applications.", detail: "Author. Preview. Ship."}},\n    {name: "Long copy", props: {title: "Build videos like applications, not like exports.", align: "left"}},\n  ],\n});\n',
+          target: "videos/components/title-reveal/title-reveal.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Typography",
+        namespaced: "@odori/title-reveal",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 120,
+          minimumDurationInFrames: 45,
+          entranceFrames: 20,
+          exitFrames: 10,
+          contentLimits: {
+            title: 64
+          },
+          reducedMotion: "fades without translation",
+          requires: {
+            fonts: [
+              "sans"
+            ],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "toast-stack",
+      description: "Timed notifications with entry, hold, and dismissal.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/toast-stack/toast-stack.tsx",
+          content: 'import {Easing, Fill, interpolate, useBrand, useFrame, useDesignScale} from "odori";\n\nexport type Toast = {\n  /** Frame it arrives on. */\n  at: number;\n  title: string;\n  detail?: string;\n  /** Frames it stays before dismissing. */\n  hold?: number;\n  tone?: "neutral" | "positive" | "negative";\n};\n\nexport type ToastStackProps = {\n  toasts?: Toast[];\n  /** Which corner the stack grows from. */\n  corner?: "bottom-right" | "top-right" | "bottom-left" | "top-left";\n};\n\nconst CORNERS = {\n  "bottom-right": {bottom: 0, right: 0, column: "column-reverse" as const},\n  "top-right": {top: 0, right: 0, column: "column" as const},\n  "bottom-left": {bottom: 0, left: 0, column: "column-reverse" as const},\n  "top-left": {top: 0, left: 0, column: "column" as const},\n};\n\n/**\n * Notifications with the three phases they actually have: entry, hold, and\n * dismissal.\n *\n * Each toast carries its own frames, so the stack is authored as a sequence of\n * events rather than animated by hand. Ones that have dismissed leave the\n * layout, which is what makes the ones below slide up the way a real stack\n * does.\n */\nexport const ToastStack = ({toasts = [], corner = "bottom-right"}: ToastStackProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n  const place = CORNERS[corner];\n  const fromRight = corner.endsWith("right");\n\n  const tones = {\n    neutral: brand.colors.muted,\n    positive: brand.colors.accent,\n    negative: "#e5484d",\n  };\n\n  return (\n    <Fill style={{pointerEvents: "none"}}>\n      <div\n        style={{\n          display: "flex",\n          flexDirection: place.column,\n          gap: 14 * scale,\n          padding: 48 * scale,\n          position: "absolute",\n          ...place,\n        }}\n      >\n        {toasts.map((toast, index) => {\n          const hold = toast.hold ?? 70;\n          const enter = interpolate(frame, [toast.at, toast.at + 10], [0, 1], {easing: Easing.standard});\n          const leave = interpolate(frame, [toast.at + hold, toast.at + hold + 10], [1, 0], {easing: Easing.standard});\n          const visible = Math.min(enter, leave);\n          if (visible <= 0.001) return null;\n\n          return (\n            <div\n              key={index}\n              style={{\n                alignItems: "flex-start",\n                background: brand.colors.surface,\n                border: `1px solid ${brand.colors.border}`,\n                borderRadius: 16 * scale,\n                boxShadow: `0 ${18 * scale}px ${44 * scale}px rgba(0,0,0,0.45)`,\n                display: "flex",\n                gap: 14 * scale,\n                // Height collapses with the fade so the stack closes up\n                // instead of leaving a hole where a toast used to be.\n                maxHeight: 200 * scale * visible,\n                opacity: visible,\n                overflow: "hidden",\n                padding: `${20 * scale}px ${24 * scale}px`,\n                transform: `translateX(${(1 - visible) * (fromRight ? 40 : -40) * scale}px)`,\n                width: 520 * scale,\n              }}\n            >\n              <span\n                style={{\n                  background: tones[toast.tone ?? "neutral"],\n                  borderRadius: 999,\n                  flex: "none",\n                  height: 10 * scale,\n                  marginTop: 10 * scale,\n                  width: 10 * scale,\n                }}\n              />\n              <div style={{display: "flex", flexDirection: "column", gap: 6 * scale, minWidth: 0}}>\n                <strong\n                  style={{\n                    color: brand.colors.foreground,\n                    fontFamily: brand.typography.sans,\n                    fontSize: 26 * scale,\n                    fontWeight: 560,\n                  }}\n                >\n                  {toast.title}\n                </strong>\n                {toast.detail ? (\n                  <span style={{color: brand.colors.muted, fontFamily: brand.typography.sans, fontSize: 22 * scale}}>\n                    {toast.detail}\n                  </span>\n                ) : null}\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </Fill>\n  );\n};\n',
+          target: "videos/components/toast-stack/toast-stack.tsx"
+        },
+        {
+          path: "components/toast-stack/toast-stack.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {ToastStack} from "./toast-stack";\n\nexport default defineComponentPreview({\n  title: "Toast stack",\n  category: "Product UI",\n  description: "Timed notifications with entry, hold, and dismissal.",\n  component: ToastStack,\n  canvas: {width: 1920, height: 1080, duration: "6s"},\n  controls: {\n    corner: {\n      type: "select",\n      defaultValue: "bottom-right",\n      options: ["bottom-right", "top-right", "bottom-left", "top-left"],\n    },\n  },\n  examples: [\n    {\n      name: "Default",\n      props: {\n        toasts: [\n          {at: 10, title: "Build started", detail: "odori.dev \xB7 production", tone: "neutral"},\n          {at: 45, title: "Tests passed", detail: "142 checks", tone: "positive", hold: 60},\n          {at: 90, title: "Deployed", detail: "Live in 12s", tone: "positive", hold: 70},\n        ],\n      },\n    },\n    {\n      name: "Failure",\n      props: {\n        toasts: [\n          {at: 10, title: "Build started", tone: "neutral"},\n          {at: 50, title: "Build failed", detail: "Type error in schema.ts", tone: "negative", hold: 90},\n        ],\n      },\n    },\n  ],\n});\n',
+          target: "videos/components/toast-stack/toast-stack.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Product UI",
+        namespaced: "@odori/toast-stack",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 180,
+          minimumDurationInFrames: 40,
+          entranceFrames: 10,
+          exitFrames: 10,
+          contentLimits: {
+            title: 48,
+            detail: 72
+          },
+          reducedMotion: "toasts appear and disappear without sliding",
+          requires: {
+            fonts: [
+              "sans"
+            ],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "typewriter",
+      description: "Deterministic typing with a frame-driven caret.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/typewriter/typewriter.tsx",
+          content: 'import {Fill, interpolate, useBrand, useFrame, useDesignScale} from "odori";\n\nexport type TypewriterProps = {\n  text: string;\n  label?: string;\n  /** Characters revealed per second. */\n  charactersPerSecond?: number;\n};\n\n/**\n * Typing driven by the frame counter rather than a timer, so scrubbing to a\n * frame shows exactly the characters that frame will render. The caret blinks\n * on a frame cycle for the same reason.\n */\nexport const Typewriter = ({text, label, charactersPerSecond = 18}: TypewriterProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n  const visible = Math.min(text.length, Math.max(0, Math.floor(((frame - 8) / 30) * charactersPerSecond)));\n  const typed = text.slice(0, visible);\n  const done = visible >= text.length;\n  // A 30 frame cycle: on for the first half, off for the second.\n  const caretOn = done ? frame % 30 < 15 : true;\n\n  return (\n    <Fill\n      style={{\n        alignItems: "center",\n        gap: 26 * scale,\n        justifyContent: "center",\n        padding: `${120 * scale}px ${140 * scale}px`,\n      }}\n    >\n      {label ? (\n        <div\n          style={{\n            color: brand.colors.muted,\n            fontFamily: brand.typography.mono,\n            fontSize: 26 * scale,\n            opacity: interpolate(frame, [0, 12], [0, 1]),\n          }}\n        >\n          {label}\n        </div>\n      ) : null}\n      <div\n        style={{\n          alignItems: "center",\n          display: "flex",\n          fontFamily: brand.typography.mono,\n          fontSize: 76 * scale,\n          gap: 6 * scale,\n          letterSpacing: "-0.02em",\n        }}\n      >\n        <span style={{whiteSpace: "pre"}}>{typed}</span>\n        <span\n          style={{\n            background: brand.colors.accent,\n            display: "inline-block",\n            height: 76 * scale,\n            opacity: caretOn ? 1 : 0,\n            width: 10 * scale,\n          }}\n        />\n      </div>\n    </Fill>\n  );\n};\n',
+          target: "videos/components/typewriter/typewriter.tsx"
+        },
+        {
+          path: "components/typewriter/typewriter.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {Typewriter} from "./typewriter";\n\nexport default defineComponentPreview({\n  title: "Typewriter",\n  category: "Typography",\n  description: "Deterministic typing with a frame-driven caret.",\n  component: Typewriter,\n  canvas: {width: 1920, height: 1080, duration: "4s"},\n  controls: {\n    text: {type: "text", defaultValue: "pnpm odori dev", maxLength: 48},\n    label: {type: "text", defaultValue: "one command"},\n    charactersPerSecond: {type: "number", defaultValue: 18, min: 4, max: 40},\n  },\n  examples: [\n    {name: "Command", props: {text: "pnpm odori dev", label: "one command"}},\n    {name: "Export", props: {text: "pnpm odori export launch", charactersPerSecond: 26}},\n  ],\n});\n',
+          target: "videos/components/typewriter/typewriter.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Typography",
+        namespaced: "@odori/typewriter",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 120,
+          minimumDurationInFrames: 60,
+          entranceFrames: 8,
+          exitFrames: 0,
+          contentLimits: {
+            text: 48
+          },
+          reducedMotion: "the full string is shown with a static caret",
+          requires: {
+            fonts: [
+              "mono"
+            ],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "typing-loop",
+      description: "Keystrokes that repeat under a terminal scene.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/typing-loop/typing-loop.tsx",
+          content: 'import {defineCue, gain, highPass, mix, noise, normalize, seeded, sequence, shape, sine, type CueDefinition} from "odori";\n\nexport type TypingLoopOptions = {\n  /** Keystrokes per minute, as a tempo. */\n  bpm?: number;\n  /** How irregular the timing is, 0 to 1. Nobody types on a grid. */\n  human?: number;\n  /** Peak level before the mix normalizes the whole track. */\n  peak?: number;\n};\n\n/**\n * Someone typing: a bar of keystrokes that repeats for as long as the terminal\n * is on screen. Loops, so a scene of any length is one render.\n *\n * The timing and the tone of each key are jittered from a seeded generator.\n * Perfectly even keystrokes read as a machine, and a machine typing is the one\n * thing this sound must not suggest.\n */\nexport const typingLoop = ({bpm = 300, human = 0.35, peak = 0.5}: TypingLoopOptions = {}): CueDefinition => {\n  const random = seeded(19);\n  const keys = 16;\n  const samples = Math.round((60 / bpm) * keys * 48000);\n\n  return defineCue({\n    name: "ui.typing",\n    durationInFrames: Math.round((samples / 48000) * 30),\n    loops: true,\n    params: {bpm, human, peak},\n    render: () =>\n      normalize(\n        sequence(\n          Array.from({length: keys}, (_, index) => {\n            const jitter = (random() - 0.5) * human;\n            const tone = 260 + random() * 220;\n            return {\n              // The jitter is bounded so a key never crosses its neighbour.\n              at: index + Math.max(-0.4, Math.min(0.4, jitter)),\n              gain: 0.6 + random() * 0.4,\n              play: (length: number) =>\n                mix(\n                  shape(highPass(noise(length, index + 2), 2200), {attack: 0.001, decay: 0.035, sustain: 0}),\n                  gain(shape(sine(length, tone), {attack: 0.001, decay: 0.028, sustain: 0}), 0.5),\n                ),\n            };\n          }),\n          {bpm, samples},\n        ),\n        peak,\n      ),\n  });\n};\n',
+          target: "videos/components/typing-loop/typing-loop.tsx"
+        },
+        {
+          path: "components/typing-loop/typing-loop.preview.tsx",
+          content: 'import {CueWave, defineComponentPreview} from "odori/preview";\nimport {typingLoop, type TypingLoopOptions} from "./typing-loop";\n\nconst Wave = ({bpm, human, peak}: TypingLoopOptions) => <CueWave cue={typingLoop({bpm, human, peak})} />;\n\nexport default defineComponentPreview({\n  title: "Typing",\n  category: "Sound",\n  description: "Keystrokes that repeat under a terminal scene.",\n  component: Wave,\n  canvas: {width: 1920, height: 1080, duration: "5s"},\n  controls: {\n    bpm: {type: "number", defaultValue: 300, min: 120, max: 600},\n    human: {type: "number", defaultValue: 0.35, min: 0, max: 1, step: 0.05},\n    peak: {type: "number", defaultValue: 0.5, min: 0.1, max: 1, step: 0.05},\n  },\n  examples: [{name: "Default", props: {}}, {name: "Mechanical", props: {human: 0}}],\n});\n',
+          target: "videos/components/typing-loop/typing-loop.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "cue",
+        family: "Sound",
+        namespaced: "@odori/typing-loop",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 96,
+          minimumDurationInFrames: 96,
+          entranceFrames: 0,
+          exitFrames: 0,
+          contentLimits: {},
+          reducedMotion: "the waveform renders without a playhead",
+          requires: {
+            fonts: [
+              "mono"
+            ],
+            audio: []
+          },
+          loops: true
+        },
+        cue: {
+          name: "ui.typing",
+          export: "typingLoop"
+        }
+      }
+    },
+    {
+      name: "ui-key",
+      description: "A typed key: filtered noise with a short tone under it.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/ui-key/ui-key.tsx",
+          content: 'import {\n  defineCue,\n  mix,\n  noise,\n  normalize,\n  shape,\n  sine,\n  type CueDefinition,\n} from "odori";\n\nexport type UiKeyOptions = {\n  /** How much body the click keeps. Lower is duller, higher is sharper. */\n  tone?: number;\n  /** Peak level before the mix normalizes the whole track. */\n  peak?: number;\n};\n\n/**\n * A key press: filtered noise for the click, a short sine underneath for\n * weight. Six frames, so it lands inside a single typed character.\n *\n * A sound as source. Change the numbers, hear it in the next preview frame,\n * and the encoder mixes the samples you approved.\n */\nexport const uiKey = ({tone = 320, peak = 0.7}: UiKeyOptions = {}): CueDefinition =>\n  defineCue({\n    name: "ui.key",\n    durationInFrames: 6,\n    params: {tone, peak},\n    render: ({samples}) =>\n      normalize(\n        mix(\n          shape(noise(samples, 7), {attack: 0.001, decay: 0.05, sustain: 0, release: 0.02}),\n          shape(sine(samples, tone), {attack: 0.001, decay: 0.035, sustain: 0, release: 0.02}),\n        ),\n        peak,\n      ),\n  });\n',
+          target: "videos/components/ui-key/ui-key.tsx"
+        },
+        {
+          path: "components/ui-key/ui-key.preview.tsx",
+          content: 'import {CueWave, defineComponentPreview} from "odori/preview";\nimport {uiKey, type UiKeyOptions} from "./ui-key";\n\nconst Wave = ({tone, peak}: UiKeyOptions) => <CueWave cue={uiKey({tone, peak})} />;\n\nexport default defineComponentPreview({\n  title: "Key click",\n  category: "Sound",\n  description: "A typed key: filtered noise with a short tone under it.",\n  component: Wave,\n  canvas: {width: 1920, height: 1080, duration: "2s"},\n  controls: {\n    tone: {type: "number", defaultValue: 320, min: 80, max: 900},\n    peak: {type: "number", defaultValue: 0.7, min: 0.1, max: 1, step: 0.05},\n  },\n  examples: [\n    {name: "Default", props: {}},\n    {name: "Softer", props: {tone: 180, peak: 0.5}},\n  ],\n});\n',
+          target: "videos/components/ui-key/ui-key.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "cue",
+        family: "Sound",
+        namespaced: "@odori/ui-key",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 6,
+          minimumDurationInFrames: 6,
+          entranceFrames: 0,
+          exitFrames: 0,
+          contentLimits: {},
+          reducedMotion: "the waveform renders without a playhead",
+          requires: {
+            fonts: [
+              "mono"
+            ],
+            audio: []
+          },
+          loops: false
+        },
+        cue: {
+          name: "ui.key",
+          export: "uiKey"
+        }
+      }
+    },
+    {
+      name: "ui-reveal",
+      description: "A short upward sweep that settles, for an entrance.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/ui-reveal/ui-reveal.tsx",
+          content: 'import {\n  defineCue,\n  lowPass,\n  mix,\n  noise,\n  normalize,\n  shape,\n  sweep,\n  type CueDefinition,\n} from "odori";\n\nexport type UiRevealOptions = {\n  /** Where the sweep starts, in hertz. */\n  from?: number;\n  /** Where it lands. The distance is what makes it feel like an arrival. */\n  to?: number;\n  peak?: number;\n};\n\n/**\n * A reveal: a short sweep upward that settles on a tone, with a breath of\n * filtered noise behind it. Eighteen frames, matched to a typical entrance.\n */\nexport const uiReveal = ({from = 220, to = 660, peak = 0.75}: UiRevealOptions = {}): CueDefinition =>\n  defineCue({\n    name: "ui.reveal",\n    durationInFrames: 18,\n    params: {from, to, peak},\n    render: ({samples}) =>\n      normalize(\n        mix(\n          shape(sweep(samples, from, to), {attack: 0.02, decay: 0.22, sustain: 0.3, release: 0.2}),\n          shape(lowPass(noise(samples, 11), 2400), {attack: 0.05, decay: 0.25, sustain: 0.08, release: 0.25}),\n        ),\n        peak,\n      ),\n  });\n',
+          target: "videos/components/ui-reveal/ui-reveal.tsx"
+        },
+        {
+          path: "components/ui-reveal/ui-reveal.preview.tsx",
+          content: 'import {CueWave, defineComponentPreview} from "odori/preview";\nimport {uiReveal, type UiRevealOptions} from "./ui-reveal";\n\nconst Wave = ({from, to, peak}: UiRevealOptions) => <CueWave cue={uiReveal({from, to, peak})} />;\n\nexport default defineComponentPreview({\n  title: "Reveal",\n  category: "Sound",\n  description: "A short upward sweep that settles, for an entrance.",\n  component: Wave,\n  canvas: {width: 1920, height: 1080, duration: "2s"},\n  controls: {\n    from: {type: "number", defaultValue: 220, min: 80, max: 800},\n    to: {type: "number", defaultValue: 660, min: 200, max: 2000},\n  },\n  examples: [\n    {name: "Default", props: {}},\n    {name: "Wider", props: {from: 140, to: 1200}},\n  ],\n});\n',
+          target: "videos/components/ui-reveal/ui-reveal.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "cue",
+        family: "Sound",
+        namespaced: "@odori/ui-reveal",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 18,
+          minimumDurationInFrames: 18,
+          entranceFrames: 0,
+          exitFrames: 0,
+          contentLimits: {},
+          reducedMotion: "the waveform renders without a playhead",
+          requires: {
+            fonts: [
+              "mono"
+            ],
+            audio: []
+          },
+          loops: false
+        },
+        cue: {
+          name: "ui.reveal",
+          export: "uiReveal"
+        }
+      }
+    },
+    {
+      name: "value-swap",
+      description: "Replace one label or value while preserving alignment.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/value-swap/value-swap.tsx",
+          content: 'import {Fill, Easing, interpolate, useBrand, useFrame, useDesignScale} from "odori";\n\nexport type ValueSwapProps = {\n  label?: string;\n  from: string;\n  to: string;\n  /** Frame the swap happens on. */\n  swapFrame?: number;\n};\n\n/**\n * One value replaced by another in place. Both values occupy the same grid\n * cell, so the swap cannot shift anything around it, however wide the new\n * value is.\n */\nexport const ValueSwap = ({label, from, to, swapFrame = 45}: ValueSwapProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n  const out = interpolate(frame, [swapFrame - 10, swapFrame], [0, 1], {\n    easing: Easing.standard,\n    extrapolateLeft: "clamp",\n    extrapolateRight: "clamp",\n  });\n  const into = interpolate(frame, [swapFrame, swapFrame + 14], [0, 1], {\n    easing: Easing.standard,\n    extrapolateLeft: "clamp",\n    extrapolateRight: "clamp",\n  });\n\n  const cell = {gridColumn: 1, gridRow: 1} as const;\n\n  return (\n    <Fill\n      style={{\n        alignItems: "center",\n        gap: 24 * scale,\n        justifyContent: "center",\n        padding: `${120 * scale}px ${140 * scale}px`,\n      }}\n    >\n      {label ? (\n        <div\n          style={{\n            color: brand.colors.muted,\n            fontSize: 34 * scale,\n            opacity: interpolate(frame, [0, 14], [0, 1], {easing: Easing.standard}),\n          }}\n        >\n          {label}\n        </div>\n      ) : null}\n      <div style={{display: "grid", placeItems: "center"}}>\n        <span\n          style={{\n            ...cell,\n            fontSize: 120 * scale,\n            fontWeight: 570,\n            letterSpacing: "-0.05em",\n            opacity: 1 - out,\n            transform: `translateY(${out * -34 * scale}px)`,\n          }}\n        >\n          {from}\n        </span>\n        <span\n          style={{\n            ...cell,\n            color: brand.colors.accent,\n            fontSize: 120 * scale,\n            fontWeight: 600,\n            letterSpacing: "-0.05em",\n            opacity: into,\n            transform: `translateY(${(1 - into) * 34 * scale}px)`,\n          }}\n        >\n          {to}\n        </span>\n      </div>\n    </Fill>\n  );\n};\n',
+          target: "videos/components/value-swap/value-swap.tsx"
+        },
+        {
+          path: "components/value-swap/value-swap.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {ValueSwap} from "./value-swap";\n\nexport default defineComponentPreview({\n  title: "Value swap",\n  category: "Typography",\n  description: "Replace one label or value while preserving alignment.",\n  component: ValueSwap,\n  canvas: {width: 1920, height: 1080, duration: "3s"},\n  controls: {\n    label: {type: "text", defaultValue: "Status"},\n    from: {type: "text", defaultValue: "Draft", maxLength: 24},\n    to: {type: "text", defaultValue: "Ready", maxLength: 24},\n    swapFrame: {type: "number", defaultValue: 45, min: 12, max: 80},\n  },\n  examples: [\n    {name: "Status", props: {label: "Status", from: "Draft", to: "Ready"}},\n    {name: "Duration", props: {label: "Render time", from: "8 min", to: "40 s"}},\n  ],\n});\n',
+          target: "videos/components/value-swap/value-swap.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Typography",
+        namespaced: "@odori/value-swap",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 90,
+          minimumDurationInFrames: 60,
+          entranceFrames: 14,
+          exitFrames: 0,
+          contentLimits: {
+            from: 24,
+            to: 24
+          },
+          reducedMotion: "the values cross-fade without travel",
+          requires: {
+            fonts: [
+              "sans"
+            ],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "video-stage",
+      description: "Nested media seeked by frame, never played by clock.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/video-stage/video-stage.tsx",
+          content: 'import {Easing, Fill, interpolate, placeholderFrame, useFrame, useReadiness, useVideo} from "odori";\nimport {useEffect, useRef, useState} from "react";\n\nexport type VideoStageProps = {\n  /** Clip URL. Without one, a generated placeholder clip plays. */\n  src?: string;\n  /** Seconds into the clip that frame zero shows. */\n  trimStart?: number;\n  /** Playback rate relative to the composition\'s clock. */\n  rate?: number;\n  fit?: "contain" | "cover";\n  entranceFrames?: number;\n};\n\n/**\n * Nested media, seeked by frame rather than played by clock.\n *\n * A `<video>` element plays on wall time, which is the one thing a render\n * cannot use: four workers rendering four chunks would each be somewhere\n * different in the clip. So the element is never played. Every frame computes\n * the exact time it wants, seeks there, and holds the composition until the\n * decoder reports it has that picture \u2014 the same handshake an image decode\n * uses, and the reason a nested clip can be scrubbed backwards.\n *\n * With no `src` it draws a generated clip: a placeholder that visibly advances\n * and is still a pure function of the frame, so the component previews with no\n * file in the repository.\n */\nexport const VideoStage = ({src, trimStart = 0, rate = 1, fit = "cover", entranceFrames = 12}: VideoStageProps) => {\n  const frame = useFrame();\n  const {fps} = useVideo();\n  const readiness = useReadiness();\n  const element = useRef<HTMLVideoElement | null>(null);\n  const [ready, setReady] = useState(false);\n\n  const target = trimStart + (frame / fps) * rate;\n\n  useEffect(() => {\n    const media = element.current;\n    if (!media || !src) return;\n\n    const release = readiness.hold();\n    let cancelled = false;\n    const settle = () => {\n      if (cancelled) return;\n      setReady(true);\n      release();\n    };\n\n    // `seeked` is the only signal that the decoder has the requested picture.\n    media.addEventListener("seeked", settle, {once: true});\n    media.addEventListener("error", settle, {once: true});\n    if (Math.abs(media.currentTime - target) > 0.001) media.currentTime = target;\n    else settle();\n\n    return () => {\n      cancelled = true;\n      media.removeEventListener("seeked", settle);\n      media.removeEventListener("error", settle);\n      release();\n    };\n  }, [readiness, src, target]);\n\n  const appear = interpolate(frame, [0, entranceFrames], [0, 1], {easing: Easing.standard});\n\n  if (!src) {\n    // The generated clip is a still per frame, which is exactly what a\n    // frame-addressed video is anyway.\n    return (\n      <Fill style={{overflow: "hidden"}}>\n        <img\n          src={placeholderFrame(frame, {fps, label: "video-stage", seed: "clip"})}\n          alt=""\n          style={{height: "100%", objectFit: fit, opacity: appear, width: "100%"}}\n        />\n      </Fill>\n    );\n  }\n\n  return (\n    <Fill style={{overflow: "hidden"}}>\n      <video\n        ref={element}\n        src={src}\n        muted\n        playsInline\n        preload="auto"\n        style={{height: "100%", objectFit: fit, opacity: ready ? appear : 0, width: "100%"}}\n      />\n    </Fill>\n  );\n};\n',
+          target: "videos/components/video-stage/video-stage.tsx"
+        },
+        {
+          path: "components/video-stage/video-stage.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {VideoStage} from "./video-stage";\n\nexport default defineComponentPreview({\n  title: "Video stage",\n  category: "Media and canvas",\n  description: "Nested media seeked by frame, never played by clock.",\n  component: VideoStage,\n  canvas: {width: 1920, height: 1080, duration: "5s"},\n  controls: {\n    trimStart: {type: "number", defaultValue: 0, min: 0, max: 30},\n    rate: {type: "number", defaultValue: 1, min: 0.25, max: 3, step: 0.25},\n    fit: {type: "select", defaultValue: "cover", options: ["cover", "contain"]},\n  },\n  examples: [\n    {name: "Default", props: {}},\n    {name: "Half speed", props: {rate: 0.5}},\n  ],\n});\n',
+          target: "videos/components/video-stage/video-stage.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Media and canvas",
+        namespaced: "@odori/video-stage",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 150,
+          minimumDurationInFrames: 30,
+          entranceFrames: 12,
+          exitFrames: 0,
+          contentLimits: {},
+          reducedMotion: "the clip holds its first frame",
+          requires: {
+            fonts: [],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "whip-pan",
+      description: "A fast directional camera move with a clean settle.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/whip-pan/whip-pan.tsx",
+          content: 'import type {ReactNode} from "react";\nimport {Easing, Fill, interpolate, useFrame} from "odori";\n\nexport type WhipPanProps = {\n  children?: ReactNode;\n  /** Which way the camera travels. */\n  direction?: "left" | "right" | "up" | "down";\n  /** Frame the pan starts. */\n  at?: number;\n  /** Frames the whole move takes, including the settle. */\n  durationInFrames?: number;\n  /** How far the content overshoots, as a fraction of the frame. */\n  distance?: number;\n  /** Peak motion blur in pixels. Zero renders the move clean. */\n  blur?: number;\n};\n\n/**\n * A fast directional move with a clean settle.\n *\n * Two things make a whip pan read as a camera rather than a slide: the speed\n * is not constant \u2014 almost all the distance is covered in the first third \u2014\n * and the frame smears while it travels. The blur is the part people leave\n * out, and without it a fast translate looks like a dropped frame.\n *\n * The settle overshoots slightly and comes back, because a camera stopping\n * dead is the one thing a real one never does.\n */\nexport const WhipPan = ({\n  children,\n  direction = "left",\n  at = 0,\n  durationInFrames = 18,\n  distance = 1.15,\n  blur = 26,\n}: WhipPanProps) => {\n  const frame = useFrame();\n  const local = frame - at;\n  const end = durationInFrames;\n\n  // Distance is covered fast, then unwound past zero and settled back.\n  const travel = interpolate(local, [0, end * 0.45, end * 0.78, end], [1, 0.12, -0.035, 0], {\n    easing: Easing.standard,\n  });\n  // Blur follows speed, not position: it peaks mid-move and is gone by the\n  // settle, which is what keeps the last frame sharp.\n  const smear = interpolate(local, [0, end * 0.3, end * 0.7, end], [blur * 0.4, blur, blur * 0.25, 0], {\n    easing: Easing.standard,\n  });\n\n  const horizontal = direction === "left" || direction === "right";\n  const sign = direction === "left" || direction === "up" ? 1 : -1;\n  const offset = travel * distance * 100 * sign;\n\n  return (\n    <Fill\n      style={{\n        filter: smear > 0.5 ? `blur(${horizontal ? smear : 0}px)` : undefined,\n        transform: horizontal ? `translateX(${offset}%)` : `translateY(${offset}%)`,\n      }}\n    >\n      {children}\n    </Fill>\n  );\n};\n',
+          target: "videos/components/whip-pan/whip-pan.tsx"
+        },
+        {
+          path: "components/whip-pan/whip-pan.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {WhipPan} from "./whip-pan";\n\nconst Panel = () => (\n  <div\n    style={{\n      alignItems: "center",\n      background: "linear-gradient(135deg, #101010, #050505)",\n      color: "#f5f5f5",\n      display: "flex",\n      flexDirection: "column",\n      fontFamily: "ui-sans-serif, system-ui",\n      gap: 20,\n      inset: 0,\n      justifyContent: "center",\n      position: "absolute",\n    }}\n  >\n    <strong style={{fontSize: 92, letterSpacing: "-0.04em"}}>Next scene</strong>\n    <span style={{color: "#8f8f8f", fontSize: 34}}>arrived on the whip</span>\n  </div>\n);\n\nexport default defineComponentPreview({\n  title: "Whip pan",\n  category: "Motion",\n  description: "A fast directional camera move with a clean settle.",\n  component: WhipPan,\n  canvas: {width: 1920, height: 1080, duration: "2s"},\n  controls: {\n    direction: {type: "select", defaultValue: "left", options: ["left", "right", "up", "down"]},\n    at: {type: "number", defaultValue: 0, min: 0, max: 40},\n    durationInFrames: {type: "number", defaultValue: 18, min: 8, max: 45},\n    blur: {type: "number", defaultValue: 26, min: 0, max: 60},\n  },\n  examples: [\n    {name: "Default", props: {children: <Panel />}},\n    {name: "Upward", props: {direction: "up", children: <Panel />}},\n    {name: "No blur", props: {blur: 0, children: <Panel />}},\n  ],\n});\n',
+          target: "videos/components/whip-pan/whip-pan.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Motion",
+        namespaced: "@odori/whip-pan",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 45,
+          minimumDurationInFrames: 18,
+          entranceFrames: 18,
+          exitFrames: 0,
+          contentLimits: {},
+          reducedMotion: "the content is settled, with no travel and no blur",
+          requires: {
+            fonts: [],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "whoosh",
+      description: "Swept air across a cut, with a direction.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/whoosh/whoosh.tsx",
+          content: 'import {defineCue, gain, highPass, lowPass, mix, noise, normalize, shape, sweep, type CueDefinition} from "odori";\n\nexport type WhooshOptions = {\n  /** Where the sweep starts, in hertz. */\n  from?: number;\n  /** Where it ends. Above `from` rises, below it falls. */\n  to?: number;\n  /** Peak level before the mix normalizes the whole track. */\n  peak?: number;\n};\n\n/**\n * Air moving: filtered noise swept across the cut, with a tone under it for\n * direction. Half a second, which is a transition rather than an event.\n *\n * The noise is band limited on both ends. Unfiltered noise reads as a hiss and\n * sits on top of the picture; taking the extremes off puts it behind.\n */\nexport const whoosh = ({from = 400, to = 5200, peak = 0.6}: WhooshOptions = {}): CueDefinition => {\n  const samples = Math.round(48000 * 0.5);\n\n  return defineCue({\n    name: "ui.whoosh",\n    durationInFrames: 15,\n    params: {from, to, peak},\n    render: () =>\n      normalize(\n        mix(\n          gain(\n            shape(lowPass(highPass(noise(samples, 13), 500), 9000), {attack: 0.14, decay: 0.3, sustain: 0}),\n            0.8,\n          ),\n          // The tone is what gives a whoosh a direction rather than a texture.\n          gain(shape(sweep(samples, from, to), {attack: 0.12, decay: 0.34, sustain: 0}), 0.22),\n        ),\n        peak,\n      ),\n  });\n};\n',
+          target: "videos/components/whoosh/whoosh.tsx"
+        },
+        {
+          path: "components/whoosh/whoosh.preview.tsx",
+          content: 'import {CueWave, defineComponentPreview} from "odori/preview";\nimport {whoosh, type WhooshOptions} from "./whoosh";\n\nconst Wave = ({from, to, peak}: WhooshOptions) => <CueWave cue={whoosh({from, to, peak})} />;\n\nexport default defineComponentPreview({\n  title: "Whoosh",\n  category: "Sound",\n  description: "Swept air across a cut, with a direction.",\n  component: Wave,\n  canvas: {width: 1920, height: 1080, duration: "2s"},\n  controls: {\n    from: {type: "number", defaultValue: 400, min: 100, max: 4000},\n    to: {type: "number", defaultValue: 5200, min: 200, max: 12000},\n    peak: {type: "number", defaultValue: 0.6, min: 0.1, max: 1, step: 0.05},\n  },\n  examples: [{name: "Default", props: {}}, {name: "Falling", props: {from: 5200, to: 400}}],\n});\n',
+          target: "videos/components/whoosh/whoosh.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "cue",
+        family: "Sound",
+        namespaced: "@odori/whoosh",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 15,
+          minimumDurationInFrames: 15,
+          entranceFrames: 0,
+          exitFrames: 0,
+          contentLimits: {},
+          reducedMotion: "the waveform renders without a playhead",
+          requires: {
+            fonts: [
+              "mono"
+            ],
+            audio: []
+          },
+          loops: false
+        },
+        cue: {
+          name: "ui.whoosh",
+          export: "whoosh"
+        }
+      }
+    },
+    {
+      name: "word-cascade",
+      description: "Words enter in a paced vertical sequence.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/word-cascade/word-cascade.tsx",
+          content: 'import {Fill, Easing, interpolate, useBrand, useFrame, useDesignScale} from "odori";\n\nexport type WordCascadeProps = {\n  /** One word per line, revealed in order. */\n  words: string[];\n  detail?: string;\n  /** Frames between one word and the next. */\n  stagger?: number;\n};\n\n/**\n * Words arrive down a vertical column, each one lifting into place while the\n * one above settles. The cascade is derived from the frame, so the rhythm is\n * identical in preview and in the render.\n */\nexport const WordCascade = ({words, detail, stagger}: WordCascadeProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n  const step = stagger ?? brand.motion.staggerFrames * 4;\n\n  return (\n    <Fill\n      style={{\n        alignItems: "flex-start",\n        gap: 18 * scale,\n        justifyContent: "center",\n        padding: `${120 * scale}px ${150 * scale}px`,\n      }}\n    >\n      {words.map((word, index) => {\n        const delay = 6 + index * step;\n        const progress = interpolate(frame, [delay, delay + 26], [0, 1], {easing: Easing.standard});\n        return (\n          <div key={`${word}-${index}`} style={{overflow: "hidden", paddingBottom: 10 * scale}}>\n            <span\n              style={{\n                display: "inline-block",\n                fontSize: 128 * scale,\n                fontWeight: 570,\n                letterSpacing: "-0.05em",\n                lineHeight: 1,\n                opacity: progress,\n                transform: `translateY(${(1 - progress) * 96 * scale}px)`,\n              }}\n            >\n              {word}\n            </span>\n          </div>\n        );\n      })}\n      {detail ? (\n        <div\n          style={{\n            color: brand.colors.muted,\n            fontSize: 34 * scale,\n            marginTop: 14 * scale,\n            opacity: interpolate(frame, [6 + words.length * step, 6 + words.length * step + 20], [0, 1], {\n              easing: Easing.standard,\n            }),\n          }}\n        >\n          {detail}\n        </div>\n      ) : null}\n    </Fill>\n  );\n};\n',
+          target: "videos/components/word-cascade/word-cascade.tsx"
+        },
+        {
+          path: "components/word-cascade/word-cascade.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {WordCascade} from "./word-cascade";\n\nexport default defineComponentPreview({\n  title: "Word cascade",\n  category: "Typography",\n  description: "Words enter in a paced vertical sequence.",\n  component: WordCascade,\n  canvas: {width: 1920, height: 1080, duration: "4s"},\n  controls: {\n    detail: {type: "text", defaultValue: "One workflow, every launch."},\n    stagger: {type: "number", defaultValue: 12, min: 4, max: 30},\n  },\n  examples: [\n    {name: "Default", props: {words: ["Write.", "Preview.", "Ship."], detail: "One workflow, every launch."}},\n    {name: "Two beats", props: {words: ["Author.", "Render."], stagger: 18}},\n  ],\n});\n',
+          target: "videos/components/word-cascade/word-cascade.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Typography",
+        namespaced: "@odori/word-cascade",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 120,
+          minimumDurationInFrames: 48,
+          entranceFrames: 30,
+          exitFrames: 10,
+          contentLimits: {
+            words: 5,
+            wordLength: 18
+          },
+          reducedMotion: "all words fade in together",
+          requires: {
+            fonts: [
+              "sans"
+            ],
+            audio: []
+          }
+        }
+      }
+    },
+    {
+      name: "workflow-steps",
+      description: "Sequential process with one active focal point.",
+      registryDependencies: [],
+      files: [
+        {
+          path: "components/workflow-steps/workflow-steps.tsx",
+          content: 'import {Fill, Easing, interpolate, useBrand, useFrame, useDesignScale, useVideo} from "odori";\n\nexport type WorkflowStepsProps = {\n  steps: string[];\n  headline?: string;\n  /** Frames each step holds the focus. */\n  hold?: number;\n};\n\n/**\n * A sequential process with exactly one active step. Completed steps stay on\n * screen at reduced weight, so the viewer keeps the whole path in view while\n * the focus advances.\n */\nexport const WorkflowSteps = ({steps, headline, hold = 40}: WorkflowStepsProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n  const {width, height} = useVideo();\n  const stacked = height >= width;\n  const active = Math.min(steps.length - 1, Math.floor(Math.max(0, frame - 14) / hold));\n\n  return (\n    <Fill style={{gap: 46 * scale, justifyContent: "center", padding: `${110 * scale}px ${120 * scale}px`}}>\n      {headline ? (\n        <div style={{fontSize: 58 * scale, fontWeight: 560, letterSpacing: "-0.04em", opacity: interpolate(frame, [0, 16], [0, 1])}}>\n          {headline}\n        </div>\n      ) : null}\n      <div style={{alignItems: "stretch", display: "flex", flexDirection: stacked ? "column" : "row", gap: 20 * scale}}>\n        {steps.map((step, index) => {\n          const enter = interpolate(frame, [10 + index * 6, 10 + index * 6 + 18], [0, 1], {easing: Easing.standard});\n          const isActive = index === active;\n          const done = index < active;\n          return (\n            <div\n              key={step}\n              style={{\n                alignItems: "center",\n                background: isActive ? `color-mix(in srgb, ${brand.colors.accent} 14%, ${brand.colors.surface})` : brand.colors.surface,\n                border: `1px solid ${isActive ? brand.colors.accent : brand.colors.border}`,\n                borderRadius: 22 * scale,\n                display: "flex",\n                flex: 1,\n                gap: 18 * scale,\n                opacity: enter * (done ? 0.6 : 1),\n                padding: `${26 * scale}px ${28 * scale}px`,\n                transform: `translateY(${(1 - enter) * 16 * scale}px)`,\n              }}\n            >\n              <span\n                style={{\n                  alignItems: "center",\n                  background: isActive ? brand.colors.accent : "transparent",\n                  border: `${2 * scale}px solid ${isActive ? brand.colors.accent : brand.colors.border}`,\n                  borderRadius: 999,\n                  color: isActive ? brand.colors.background : brand.colors.muted,\n                  display: "flex",\n                  fontFamily: brand.typography.mono,\n                  fontSize: 24 * scale,\n                  height: 46 * scale,\n                  justifyContent: "center",\n                  width: 46 * scale,\n                }}\n              >\n                {index + 1}\n              </span>\n              <span style={{fontSize: 34 * scale, letterSpacing: "-0.02em"}}>{step}</span>\n            </div>\n          );\n        })}\n      </div>\n    </Fill>\n  );\n};\n',
+          target: "videos/components/workflow-steps/workflow-steps.tsx"
+        },
+        {
+          path: "components/workflow-steps/workflow-steps.preview.tsx",
+          content: 'import {defineComponentPreview} from "odori/preview";\nimport {WorkflowSteps} from "./workflow-steps";\n\nexport default defineComponentPreview({\n  title: "Workflow steps",\n  category: "Narrative",\n  description: "Sequential process with one active focal point.",\n  component: WorkflowSteps,\n  canvas: {width: 1920, height: 1080, duration: "6s"},\n  controls: {\n    headline: {type: "text", defaultValue: "From file to finished cut"},\n    hold: {type: "number", defaultValue: 40, min: 16, max: 90},\n  },\n  examples: [\n    {name: "Pipeline", props: {steps: ["Author", "Preview", "Test", "Export"]}},\n  ],\n});\n',
+          target: "videos/components/workflow-steps/workflow-steps.preview.tsx"
+        }
+      ],
+      meta: {
+        kind: "component",
+        family: "Narrative",
+        namespaced: "@odori/workflow-steps",
+        contract: {
+          aspectRatios: [
+            "16:9",
+            "9:16",
+            "1:1"
+          ],
+          recommendedDurationInFrames: 180,
+          minimumDurationInFrames: 90,
+          entranceFrames: 30,
+          exitFrames: 0,
+          contentLimits: {
+            steps: 5,
+            stepLength: 26
+          },
+          reducedMotion: "every step shows without a moving focus",
+          requires: {
+            fonts: [
+              "sans",
+              "mono"
+            ],
+            audio: []
+          }
+        }
+      }
+    }
+  ]
+};
+export {
+  registry_snapshot_default as default
+};