creator-editing-studio 1.0.20260930

package/template/src/design/tokens.ts

@@ -0,0 +1,200 @@
+import {fontFamily, loadFont} from '@remotion/google-fonts/Inter';
+
+/**
+ * YOUR LOOK. Every colour, size, radius and shadow in every video comes from this file.
+ * Nothing else in the studio is allowed to hand-type a colour or a font size.
+ *
+ * This is the one file that is yours rather than the system's. Change these values and
+ * every component, every caption and every video changes with them. Everything else —
+ * the components, the motion laws, the checks — stays the same for everybody.
+ *
+ * To set it up from a brand you like, ask: "build my design system from <url>".
+ *
+ * Sizes are for a 1080-wide frame watched on a phone. Web body 16px ≈ video body 42px,
+ * which is roughly a 2.6x scale if you are translating a website.
+ */
+
+/**
+ * The starting font. It loads from Google Fonts, so there is no file to find and your
+ * first render works immediately.
+ *
+ * When you switch to your real brand font, put the files in `assets/fonts/` and swap
+ * these three lines for:
+ *
+ *   import {loadFont} from '@remotion/fonts';
+ *   import {staticFile} from 'remotion';
+ *   const fontFamily = 'YourFont';
+ *   loadFont({family: fontFamily, url: staticFile('fonts/YourFont.ttf'), weight: '100 900', style: 'normal'});
+ *
+ * A font that fails to load does not error — it silently falls back and nothing looks
+ * like your brand, so check a still after changing this.
+ */
+// Only the weights and characters actually used. Left unbounded this fires 126 network
+// requests on every render, which makes a customer's first video crawl for no reason.
+loadFont('normal', {weights: ['400', '500', '600', '700', '800'], subsets: ['latin']});
+
+export const FONT = {
+  sans: `${fontFamily}, -apple-system, "Helvetica Neue", Arial, sans-serif`,
+} as const;
+
+export const WEIGHT = {
+  regular: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+  black: 800,
+} as const;
+
+/**
+ * Your raw brand colours. Name them however your brand names them.
+ *
+ * These are deliberately plain placeholders — a neutral grey and one restrained blue.
+ * They are meant to be replaced, not shipped. Nothing here belongs to anyone else's
+ * brand, so a video made before you set your own look is obviously unbranded rather
+ * than quietly wearing somebody else's colours.
+ */
+export const PALETTE = {
+  ink900: '#14161a',
+  ink800: '#1d2026',
+  ink600: '#3c414b',
+  stone600: '#6b7280',
+  stone400: '#9ca3af',
+  stone200: '#e3e6ea',
+  cream: '#f4f5f7',
+  paper: '#fbfcfd',
+  white: '#ffffff',
+  accent: '#3b82f6',
+  accentStrong: '#2563eb',
+} as const;
+
+/**
+ * What each colour is FOR. Components read these, never PALETTE directly, so you can
+ * change your accent in one place. Keep one accent colour — two is already a design
+ * problem, three is a mess.
+ */
+export const COLOR = {
+  accent: PALETTE.accent,
+  accentStrong: PALETTE.accentStrong,
+  onAccent: PALETTE.ink900,
+  fg: PALETTE.ink800,
+  /** Secondary text. Must stay above 4.5:1 on your background or it is decoration, not text. */
+  fgSecondary: PALETTE.stone600,
+  /** Decoration only — too light to read. Never put words people must read in this. */
+  fgMuted: PALETTE.stone400,
+  fgOnDark: PALETTE.white,
+  surface: PALETTE.white,
+  surfaceAlt: PALETTE.cream,
+  surfaceDark: PALETTE.ink900,
+  paper: PALETTE.paper,
+  borderSubtle: PALETTE.stone200,
+  borderStrong: PALETTE.ink800,
+} as const;
+
+/** Display is capped so a long word still fits a 1080 frame. */
+export const TYPE = {
+  display: {size: 144, lineHeight: 1.05, tracking: '-0.03em', weight: WEIGHT.black},
+  h1: {size: 104, lineHeight: 1.08, tracking: '-0.025em', weight: WEIGHT.black},
+  h2: {size: 78, lineHeight: 1.1, tracking: '-0.02em', weight: WEIGHT.bold},
+  h3: {size: 57, lineHeight: 1.2, tracking: '-0.015em', weight: WEIGHT.semibold},
+  bodyLg: {size: 48, lineHeight: 1.4, tracking: '-0.005em', weight: WEIGHT.regular},
+  body: {size: 42, lineHeight: 1.45, tracking: '0em', weight: WEIGHT.regular},
+  caption: {size: 34, lineHeight: 1.3, tracking: '0em', weight: WEIGHT.medium},
+  eyebrow: {size: 30, lineHeight: 1.2, tracking: '0.06em', weight: WEIGHT.medium},
+  stat: {size: 120, lineHeight: 1, tracking: '-0.02em', weight: WEIGHT.black},
+} as const;
+
+/** 10px base. Use these, not arbitrary numbers. */
+export const SPACE = {
+  1: 10, 2: 20, 3: 30, 4: 40, 5: 50, 6: 60, 8: 80, 10: 100, 12: 120, 16: 160, 20: 200,
+} as const;
+
+export const RADIUS = {
+  sm: 20,
+  md: 36,
+  lg: 52,
+  xl: 72,
+  pill: 999,
+} as const;
+
+/** Soft, large-radius, low-contrast. Never a hard drop shadow. */
+export const SHADOW = {
+  card: '0 3px 6px rgba(23,23,20,0.04), 0 20px 60px -20px rgba(23,23,20,0.08)',
+  pop: '0 5px 10px rgba(23,23,20,0.06), 0 40px 100px -30px rgba(23,23,20,0.14)',
+} as const;
+
+/** The marker that wipes behind a key phrase. em units so it scales with the text. */
+export const HIGHLIGHT = {
+  color: PALETTE.accent,
+  padX: '0.12em',
+  radius: '0.12em',
+  top: '0.1em',
+  bottom: '-0.02em',
+} as const;
+
+export const BACKGROUND = {
+  heroGradient: `linear-gradient(135deg, ${PALETTE.accent} 0%, ${PALETTE.cream} 45%, ${PALETTE.paper} 100%)`,
+  creamGlow: `radial-gradient(60% 40% at 85% 12%, ${PALETTE.accent}55 0%, ${PALETTE.cream}00 70%), ${PALETTE.cream}`,
+  gridLine: 'rgba(255,255,255,0.6)',
+  gridSize: 108,
+  gridLineWidth: 2,
+  gridMask: 'radial-gradient(circle at 70% 28%, rgba(0,0,0,0.9) 0%, transparent 62%)',
+} as const;
+
+/** Captions: readable on light walls and dark footage alike. */
+export const CAPTION = {
+  size: 46,
+  weight: WEIGHT.bold,
+  lineHeight: 1.16,
+  tracking: '-0.01em',
+  color: PALETTE.white,
+  shadow: '0 2px 2px rgba(18,18,16,0.35), 0 4px 18px rgba(18,18,16,0.45)',
+} as const;
+
+/** Big headline text behind the subject. */
+export const HERO = {
+  size: 250,
+  color: PALETTE.accent,
+  /** RGB of the glow, so it can fade with the text. */
+  /** Must match `accent` above, as r,g,b. Change both together. */
+  glowRgb: '59,130,246',
+  /** Dark lift under the glow, so the colour separates from a light wall. */
+  liftRgb: '18,18,16',
+} as const;
+
+/** Dark fade at the bottom of a video card, so white captions sit on it. */
+export const SCRIM =
+  'linear-gradient(to top, rgba(18,18,16,0.72) 0%, rgba(18,18,16,0.35) 22%, rgba(18,18,16,0) 42%)';
+
+/** The browser window mockup. Light Mac-style chrome. */
+export const MOCKUP = {
+  bar: '#E9E9EB',
+  barDivider: '#DCDCDF',
+  close: '#E5484D',
+  minimize: '#F2B21B',
+  maximize: '#2EB67D',
+  navButton: '#FFFFFF',
+  navIcon: '#77777C',
+  urlField: '#FFFFFF',
+  urlText: '#8A8A8F',
+  content: '#FFFFFF',
+  barHeight: 64,
+  radius: 28,
+} as const;
+
+/** 9:16 — Reels, Shorts, TikTok. safeTop/safeBottom keep text out of the platform UI. */
+export const LAYOUT = {
+  width: 1080,
+  height: 1920,
+  fps: 30,
+  margin: 96,
+  safeTop: 250,
+  safeBottom: 420,
+} as const;
+
+/** 16:9 — YouTube and landscape deliverables. */
+export const WIDE = {
+  width: 1920,
+  height: 1080,
+  fps: 30,
+  margin: 96,
+} as const;

package/template/src/index.ts

@@ -0,0 +1,4 @@
+import {registerRoot} from 'remotion';
+import {RemotionRoot} from './Root';
+
+registerRoot(RemotionRoot);

package/template/src/lib/animate.ts

@@ -0,0 +1,194 @@
+import type {CSSProperties} from 'react';
+import {interpolate, measureSpring, spring} from 'remotion';
+import {
+  DUR,
+  EASE,
+  EXIT_RATIO,
+  LIMITS,
+  OPACITY_LEAD,
+  READ,
+  SPRING,
+  STAGGER,
+  type Dur,
+  type SpringKind,
+  type StaggerKind,
+} from '../design/motion';
+
+const clamp = {extrapolateLeft: 'clamp', extrapolateRight: 'clamp'} as const;
+
+export const msToFrames = (ms: number, fps: number): number =>
+  Math.max(1, Math.round((ms / 1000) * fps));
+
+export const durFrames = (dur: Dur, fps: number): number => msToFrames(DUR[dur], fps);
+
+/** Exit length for an element that entered with `dur` (law 3). */
+export const exitFrames = (dur: Dur, fps: number): number =>
+  Math.max(1, Math.round(durFrames(dur, fps) * EXIT_RATIO));
+
+export const staggerFrames = (index: number, fps: number, kind: StaggerKind = 'normal'): number =>
+  index * msToFrames(STAGGER[kind], fps);
+
+/** How long a piece of text must stay fully visible (law 11). */
+export const readFrames = (text: string, fps: number): number => {
+  const words = text.trim().split(/\s+/).filter(Boolean).length;
+  return msToFrames(Math.max(READ.minHoldMs, READ.baseMs + READ.perWordMs * words), fps);
+};
+
+/** Sub-linear distance-to-duration coupling (law 9). */
+export const travelFrames = (px: number, fps: number): number => {
+  const ms = DUR.base * Math.sqrt(Math.abs(px) / LIMITS.referenceTravelPx);
+  return msToFrames(Math.min(DUR.scene, Math.max(DUR.fast, ms)), fps);
+};
+
+/** Spring driven by a token config; returns 0 to 1. */
+export const settle = (frame: number, fps: number, at: number, kind: SpringKind = 'snap'): number =>
+  spring({frame: frame - at, fps, config: SPRING[kind]});
+
+export const springFrames = (fps: number, kind: SpringKind = 'snap'): number =>
+  measureSpring({fps, config: SPRING[kind]});
+
+/** 0 to 1 progress for draw-ons, counters, wipes — always eased. */
+export const progress = (frame: number, at: number, frames: number, easing = EASE.out): number =>
+  interpolate(frame - at, [0, frames], [0, 1], {...clamp, easing});
+
+/** Rate of change per frame of any frame-driven value (drives velocity motion blur). */
+export const perFrame = (fn: (frame: number) => number, frame: number): number =>
+  fn(frame + 0.5) - fn(frame - 0.5);
+
+/**
+ * Vertical offset for text rising from behind a mask, as a fraction of the line height.
+ * 1.3 (not 1.0) so descenders (g, p, y, commas) fully clear the mask.
+ * Prefer the <MaskReveal> component, which adds the mask and motion blur.
+ */
+export const maskRevealOffset = ({
+  frame,
+  fps,
+  at,
+  until,
+  dur = 'slow',
+}: {
+  frame: number;
+  fps: number;
+  at: number;
+  until?: number;
+  dur?: Dur;
+}): number => {
+  const travel = 1.3;
+  let y = (1 - progress(frame, at, durFrames(dur, fps), EASE.out)) * travel;
+  if (until !== undefined) {
+    y -= progress(frame, until, exitFrames(dur, fps), EASE.in) * travel;
+  }
+  return y;
+};
+
+/**
+ * Left-to-right reveal mask with a motion-blurred leading edge: the edge softens in
+ * proportion to its speed (180-degree shutter), so fast wipes don't strobe.
+ * `p` is 0-1 progress; `pPerFrame` its change per frame (use perFrame()).
+ */
+export const wipeMask = (p: number, pPerFrame: number): CSSProperties => {
+  const feather = Math.abs(pPerFrame) * 100 * 0.5;
+  const edge = p * (100 + feather);
+  const mask = `linear-gradient(90deg, black ${(edge - feather).toFixed(3)}%, transparent ${edge.toFixed(3)}%)`;
+  return {maskImage: mask, WebkitMaskImage: mask};
+};
+
+export type Place = 'below' | 'above' | 'left' | 'right' | 'none';
+
+const placeOffset = (place: Place, px: number): [number, number] => {
+  switch (place) {
+    case 'below':
+      return [0, px];
+    case 'above':
+      return [0, -px];
+    case 'left':
+      return [-px, 0];
+    case 'right':
+      return [px, 0];
+    default:
+      return [0, 0];
+  }
+};
+
+export type PresenceOptions = {
+  frame: number;
+  fps: number;
+  /** Frame the entrance starts. */
+  at: number;
+  /** Frame the exit starts. Omit to stay on screen. */
+  until?: number;
+  dur?: Dur;
+  from?: Place;
+  exitTo?: Place;
+  /** Pixels of travel; clamped to LIMITS.maxTravelPx. */
+  distance?: number;
+  /** Clamped to >= LIMITS.minScaleFrom. */
+  scaleFrom?: number;
+  /** Pixels; clamped to LIMITS.maxBlurPx. */
+  blur?: number;
+};
+
+export type PresenceValues = {x: number; y: number; scale: number; opacity: number; blur: number};
+
+/**
+ * Standard entrance + exit values for any element, following the motion laws:
+ * ease-out in, ease-in out, exits faster than entrances, opacity leads the
+ * transform, never opacity alone, bounded scale and blur.
+ * Prefer the <Presence> component, which adds velocity motion blur.
+ */
+export const presenceValues = ({
+  frame,
+  fps,
+  at,
+  until,
+  dur = 'base',
+  from = 'below',
+  exitTo = 'above',
+  distance = LIMITS.defaultTravelPx,
+  scaleFrom = 1,
+  blur = 0,
+}: PresenceOptions): PresenceValues => {
+  const travel = Math.min(Math.abs(distance), LIMITS.maxTravelPx);
+  const s0 = Math.min(1, Math.max(LIMITS.minScaleFrom, scaleFrom));
+  const b0 = Math.min(LIMITS.maxBlurPx, Math.max(0, blur));
+
+  const inDur = durFrames(dur, fps);
+  const t = frame - at;
+  const p = interpolate(t, [0, inDur], [0, 1], {...clamp, easing: EASE.out});
+  let opacity = interpolate(t, [0, Math.max(1, Math.round(inDur * OPACITY_LEAD))], [0, 1], {
+    ...clamp,
+    easing: EASE.outSoft,
+  });
+  const blurPx = interpolate(t, [0, Math.max(1, Math.round(inDur * 0.8))], [b0, 0], {
+    ...clamp,
+    easing: EASE.out,
+  });
+
+  const [fx, fy] = placeOffset(from, travel);
+  let x = fx * (1 - p);
+  let y = fy * (1 - p);
+  const scale = s0 + (1 - s0) * p;
+
+  if (until !== undefined) {
+    const outDur = exitFrames(dur, fps);
+    const u = frame - until;
+    const q = interpolate(u, [0, outDur], [0, 1], {...clamp, easing: EASE.in});
+    const fade = interpolate(u, [Math.round(outDur * 0.4), outDur], [1, 0], {...clamp, easing: EASE.in});
+    const [ex, ey] = placeOffset(exitTo, travel);
+    x += ex * q;
+    y += ey * q;
+    opacity *= fade;
+  }
+
+  return {x, y, scale, opacity, blur: blurPx};
+};
+
+/** Style for presence values (no motion blur). */
+export const presenceStyle = (v: PresenceValues): CSSProperties => ({
+  opacity: v.opacity,
+  transform: `translate3d(${v.x.toFixed(3)}px, ${v.y.toFixed(3)}px, 0) scale(${v.scale.toFixed(4)})`,
+  filter: v.blur > 0.01 ? `blur(${v.blur.toFixed(2)}px)` : undefined,
+});
+
+/** Presence as a plain style, for elements that barely move. Prefer <Presence>. */
+export const presence = (options: PresenceOptions): CSSProperties => presenceStyle(presenceValues(options));

package/template/src/lib/camera.ts

@@ -0,0 +1,58 @@
+import type {CSSProperties} from 'react';
+import {interpolate} from 'remotion';
+import {EASE, type Dur} from '../design/motion';
+import {durFrames} from './animate';
+
+/**
+ * Virtual camera over one large canvas. Scenes are regions of the canvas and the
+ * camera glides between them, so the viewer's eye is carried instead of cut.
+ * A shot is the canvas point at the centre of the frame, plus zoom.
+ */
+
+export type Shot = {x: number; y: number; zoom?: number};
+export type CameraMove = {at: number; to: Shot; dur?: Dur};
+
+const clamp = {extrapolateLeft: 'clamp', extrapolateRight: 'clamp'} as const;
+
+const moveFrames = (move: CameraMove, fps: number) => durFrames(move.dur ?? 'scene', fps);
+
+const sorted = (moves: CameraMove[], fps: number): CameraMove[] => {
+  const list = [...moves].sort((a, b) => a.at - b.at);
+  list.forEach((move, i) => {
+    const prev = list[i - 1];
+    if (prev && move.at < prev.at + moveFrames(prev, fps)) {
+      throw new Error(`Camera move at frame ${move.at} starts before the previous move finishes.`);
+    }
+  });
+  return list;
+};
+
+export const cameraShot = (frame: number, fps: number, start: Shot, moves: CameraMove[]): Required<Shot> => {
+  let shot = {x: start.x, y: start.y, zoom: start.zoom ?? 1};
+  for (const move of sorted(moves, fps)) {
+    if (frame <= move.at) break;
+    const p = interpolate(frame - move.at, [0, moveFrames(move, fps)], [0, 1], {...clamp, easing: EASE.inOut});
+    const to = {x: move.to.x, y: move.to.y, zoom: move.to.zoom ?? 1};
+    shot = {
+      x: shot.x + (to.x - shot.x) * p,
+      y: shot.y + (to.y - shot.y) * p,
+      // Geometric zoom interpolation so zoom speed feels even.
+      zoom: Math.exp(Math.log(shot.zoom) + (Math.log(to.zoom) - Math.log(shot.zoom)) * p),
+    };
+    if (p < 1) break;
+  }
+  return shot;
+};
+
+/** Apply to the canvas element (positioned at 0,0). */
+export const cameraTransform = (shot: Required<Shot>, width: number, height: number): CSSProperties => ({
+  position: 'absolute',
+  left: 0,
+  top: 0,
+  transformOrigin: '0 0',
+  transform: `translate3d(${width / 2}px, ${height / 2}px, 0) scale(${shot.zoom.toFixed(5)}) translate3d(${(-shot.x).toFixed(3)}px, ${(-shot.y).toFixed(3)}px, 0)`,
+});
+
+/** True while any move is in progress (plus a frame of padding) — use to enable motion blur. */
+export const cameraMoving = (frame: number, fps: number, moves: CameraMove[], pad = 1): boolean =>
+  moves.some((move) => frame >= move.at - pad && frame <= move.at + moveFrames(move, fps) + pad);

package/template/src/lib/continuity.ts

@@ -0,0 +1,86 @@
+import {interpolate} from 'remotion';
+import {EASE, TRANSITION, type Dur} from '../design/motion';
+import {durFrames, msToFrames, type Place} from './animate';
+
+/**
+ * Continuity helpers — what keeps beats feeling connected instead of cut together.
+ */
+
+const clamp = {extrapolateLeft: 'clamp', extrapolateRight: 'clamp'} as const;
+
+/** How many frames consecutive beats overlap. */
+export const overlapFrames = (fps: number): number => msToFrames(TRANSITION.idealOverlapMs, fps);
+
+/** Start of the next beat: before the previous one has settled, never after. */
+export const nextBeatAt = (prevSettledAt: number, fps: number): number => prevSettledAt - overlapFrames(fps);
+
+/**
+ * Velocity handoff: where the next entrance should come from so it continues
+ * the direction of the previous exit. Exit upward -> next enters from below.
+ */
+export const handoff = (exitTo: Place): Place =>
+  ({above: 'below', below: 'above', left: 'right', right: 'left', none: 'none'} as const)[exitTo];
+
+export type Keyframe<K extends string> = {at: number; to: Record<K, number>; dur?: Dur};
+
+const checkOrder = <K extends string>(keys: Keyframe<K>[], fps: number): Keyframe<K>[] => {
+  const list = [...keys].sort((a, b) => a.at - b.at);
+  list.forEach((k, i) => {
+    const prev = list[i - 1];
+    if (prev && k.at < prev.at + durFrames(prev.dur ?? 'scene', fps)) {
+      throw new Error(`Keyframe at frame ${k.at} starts before the previous move finishes.`);
+    }
+  });
+  return list;
+};
+
+/**
+ * A value that moves through a series of states over time (e.g. a video that goes
+ * full screen -> card -> full screen). Each move eases in-out from wherever the
+ * previous move ended, so the element is never reset or re-entered.
+ */
+export const sequence = <K extends string>(
+  frame: number,
+  fps: number,
+  start: Record<K, number>,
+  keys: Keyframe<K>[],
+): Record<K, number> => {
+  let current = start;
+  for (const k of checkOrder(keys, fps)) {
+    if (frame <= k.at) break;
+    current = morph(frame, fps, k.at, current, k.to, k.dur);
+    if (frame < k.at + durFrames(k.dur ?? 'scene', fps)) break;
+  }
+  return current;
+};
+
+/** Where a sequence is heading: its destination if a move is in progress, else its current state. */
+export const sequenceTarget = <K extends string>(
+  frame: number,
+  fps: number,
+  start: Record<K, number>,
+  keys: Keyframe<K>[],
+): Record<K, number> => {
+  const moving = checkOrder(keys, fps).find((k) => frame >= k.at && frame < k.at + durFrames(k.dur ?? 'scene', fps));
+  return moving ? moving.to : sequence(frame, fps, start, keys);
+};
+
+/**
+ * Shared-element morph: interpolate any numeric properties (x, y, width, radius...)
+ * between two layouts. The element never exits and re-enters.
+ */
+export const morph = <K extends string>(
+  frame: number,
+  fps: number,
+  at: number,
+  from: Record<K, number>,
+  to: Record<K, number>,
+  dur: Dur = 'scene',
+): Record<K, number> => {
+  const p = interpolate(frame - at, [0, durFrames(dur, fps)], [0, 1], {...clamp, easing: EASE.inOut});
+  const out = {} as Record<K, number>;
+  for (const key of Object.keys(from) as K[]) {
+    out[key] = from[key] + (to[key] - from[key]) * p;
+  }
+  return out;
+};

package/template/src/lib/project.ts

@@ -0,0 +1,13 @@
+/**
+ * Every video keeps its own files in assets/projects/<name>/ (footage, screenshots, processed,
+ * cutouts, audio). Use the helper so a video can never pick up another video's assets:
+ *
+ *   const asset = projectAssets('my-first-video');
+ *   staticFile(asset('footage/talk-original.mp4'))
+ *
+ * Shared brand files (fonts, logos) stay at the top of assets/ and are referenced directly.
+ */
+export const projectAssets =
+  (project: string) =>
+  (path: string): string =>
+    `projects/${project}/${path}`;

package/template/src/lib/spine.ts

@@ -0,0 +1,37 @@
+/**
+ * Script-timed words: every animation start comes from when a word is spoken.
+ * Words come from scripts/align_script.py (script text + WhisperX timing).
+ */
+
+export type SpokenWord = {text: string; start: number; end: number; paragraph: number; matched: boolean};
+
+const key = (s: string) => s.toLowerCase().replace(/[^a-z0-9]/g, '');
+
+export const createSpine = (words: SpokenWord[], fps: number) => {
+  const find = (phrase: string, occurrence = 1): {first: number; last: number} => {
+    const target = phrase.split(/\s+/).map(key).filter(Boolean);
+    let seen = 0;
+    for (let i = 0; i + target.length <= words.length; i++) {
+      if (target.every((k, j) => key(words[i + j].text) === k) && ++seen === occurrence) {
+        return {first: i, last: i + target.length - 1};
+      }
+    }
+    throw new Error(`Phrase not found in script: "${phrase}" (occurrence ${occurrence})`);
+  };
+
+  return {
+    words,
+    find,
+    /** Frame the phrase starts being spoken. */
+    at: (phrase: string, occurrence = 1) => Math.round(words[find(phrase, occurrence).first].start * fps),
+    /** Frame the phrase finishes. */
+    until: (phrase: string, occurrence = 1) => Math.round(words[find(phrase, occurrence).last].end * fps),
+    /** Word indexes covered by a phrase, e.g. to hide them from captions. */
+    indexes: (phrase: string, occurrence = 1): number[] => {
+      const {first, last} = find(phrase, occurrence);
+      return Array.from({length: last - first + 1}, (_, i) => first + i);
+    },
+  };
+};
+
+export type Spine = ReturnType<typeof createSpine>;

package/template/src/videos/sample/Sample.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import {AbsoluteFill, useVideoConfig} from 'remotion';
+import {HighlightMark} from '../../components/HighlightMark';
+import {RollingNumber} from '../../components/RollingNumber';
+import {durFrames} from '../../lib/animate';
+import {COLOR, FONT, LAYOUT, TYPE} from '../../design/tokens';
+
+/**
+ * Your first video. It exists to prove the studio works end to end and to show the
+ * shape of every video you will make: timing comes from token helpers, never from
+ * hand-typed frame numbers, and everything visual comes from design/tokens.ts.
+ *
+ * Render it with:  npm run render Sample out/sample.mp4
+ * Then delete it and make your own:  npm run new-video -- my-first-reel
+ */
+
+export const Sample: React.FC = () => {
+  const {fps} = useVideoConfig();
+
+  // Timing comes from the motion tokens, so it stays right at 30fps or 60fps.
+  const headlineAt = durFrames('base', fps);
+  const numberAt = headlineAt + durFrames('scene', fps);
+
+  return (
+    <AbsoluteFill style={{backgroundColor: COLOR.surfaceAlt, justifyContent: 'center', padding: LAYOUT.margin}}>
+      <span
+        style={{
+          fontFamily: FONT.sans,
+          fontSize: TYPE.h1.size,
+          fontWeight: TYPE.h1.weight,
+          lineHeight: TYPE.h1.lineHeight,
+          letterSpacing: TYPE.h1.tracking,
+          color: COLOR.fg,
+        }}
+      >
+        Your studio <HighlightMark at={headlineAt}>works</HighlightMark>
+      </span>
+
+      <div style={{marginTop: 60, display: 'flex', alignItems: 'baseline', gap: 20}}>
+        {/* No `from` — digits roll up from zero on their own. from="0" against value="100"
+            throws, because RollingNumber requires both to have the same shape. */}
+        <RollingNumber value="100" at={numberAt} sizePx={TYPE.stat.size} />
+        <span
+          style={{
+            fontFamily: FONT.sans,
+            fontSize: TYPE.bodyLg.size,
+            fontWeight: TYPE.bodyLg.weight,
+            color: COLOR.fgSecondary,
+          }}
+        >
+          percent yours
+        </span>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+export const SAMPLE_FRAMES = 150;