creator-editing-studio 1.3.8 → 1.4.1

package/template/scripts/plan-sheet.mjs

@@ -0,0 +1,99 @@
+#!/usr/bin/env node
+/**
+ * The motion sheet for a plan: one real rendered frame per beat, numbered and labelled, as one PNG.
+ *
+ *   npm run plan-sheet -- <CompositionId> --beats <beats.json> [--entry src/index.ts] [--public-dir assets]
+ *
+ * beats.json: [{"frame": 105, "says": "same handful of tools", "what": "...", "beat": "Text behind me"}, ...]
+ * (or just a list of frame numbers).
+ *
+ * WHY THIS IS A COMMAND AND NOT A SENTENCE IN THE RULEBOOK. The rule "show a motion sheet with the plan"
+ * existed for weeks, and on 2026-10-22 the plan still went out as a table only — a rule that is only text
+ * gets skipped. This makes the sheet one command, and remotion.config.ts refuses a render until the person
+ * has approved the sheet this command made (scripts/approve.mjs). See "The plan gate" in the rulebook.
+ *
+ * Renders every still in ONE browser session (one copy of the assets — a copy per still filled a disk).
+ * Writes work/plans/<Comp>/motion-sheet.png and work/plans/<Comp>/sheet.json (with the sheet's hash).
+ */
+import {createHash} from 'node:crypto';
+import {existsSync, mkdirSync, readFileSync, readdirSync, rmSync, statSync, writeFileSync} from 'node:fs';
+import {tmpdir} from 'node:os';
+import {dirname, join, resolve} from 'node:path';
+import {spawnSync} from 'node:child_process';
+import {createRequire} from 'node:module';
+import {bundle} from '@remotion/bundler';
+import {openBrowser, renderStill, selectComposition} from '@remotion/renderer';
+
+const args = process.argv.slice(2);
+const flag = (name, fallback) => (args.includes(`--${name}`) ? args[args.indexOf(`--${name}`) + 1] : fallback);
+const comp = args.find((a, i) => !a.startsWith('--') && !(i > 0 && args[i - 1].startsWith('--')));
+const beatsFile = flag('beats', null);
+if (!comp || !beatsFile) {
+  console.error('Usage: npm run plan-sheet -- <CompositionId> --beats <beats.json> [--entry src/index.ts] [--public-dir assets]');
+  process.exit(1);
+}
+const raw = JSON.parse(readFileSync(beatsFile, 'utf8'));
+const beats = raw.map((b) => (typeof b === 'number' ? {frame: b} : b));
+const entry = resolve(flag('entry', 'src/index.ts'));
+const publicDir = resolve(flag('public-dir', 'assets'));
+const dir = resolve('work', 'plans', comp);
+const stillsDir = join(dir, 'stills');
+rmSync(stillsDir, {recursive: true, force: true});
+mkdirSync(stillsDir, {recursive: true});
+
+// The CLI file is not in the package's exports map, so find it next to the package's main entry.
+const CLI = join(dirname(createRequire(import.meta.url).resolve('@remotion/cli')), '..', 'remotion-cli.js');
+const STARTED = Date.now() - 1000;
+/** Remotion copies the media into a fresh temp folder for EVERY still (400 MB each for a long clip) and never
+ *  removes it — 15 stills filled a disk on 2026-10-22. Delete the copies this run made, after each still. */
+const cleanTemp = () => {
+  for (const d of readdirSync(tmpdir())) {
+    const full = join(tmpdir(), d);
+    try {
+      if (/^remotion-v[0-9.]+-assets/.test(d) && statSync(full).mtimeMs >= STARTED) rmSync(full, {recursive: true, force: true});
+    } catch {
+      /* still in use — the next pass gets it */
+    }
+  }
+};
+const tc = (frame, fps) => {
+  const s = frame / fps;
+  return `${Math.floor(s / 60)}:${(s % 60).toFixed(1).padStart(4, '0')}`;
+};
+
+console.log(`Bundling ${entry}…`);
+// Bundles go next to the sheet and are deleted at the end: each one copies the whole assets folder, and
+// leaving them behind is how a nearly full disk ran out mid-render.
+const serveUrl = await bundle({entryPoint: entry, publicDir, outDir: join(dir, '.bundle')});
+const browser = await openBrowser('chrome');
+try {
+  const composition = await selectComposition({serveUrl, id: comp, puppeteerInstance: browser});
+  const tiles = [];
+  for (const [i, b] of beats.entries()) {
+    const file = `s${String(i + 1).padStart(2, '0')}.jpg`;
+    // Each still in its own short process: Remotion copies the media into temp for every still and holds the
+    // copy until the process ends, so one process for all stills piled up 14 x 400 MB and filled the disk.
+    const r = spawnSync(process.execPath, [CLI, 'still', serveUrl, comp, join(stillsDir, file), `--frame=${b.frame}`, '--scale=0.5', '--log=error'], {stdio: ['ignore', 'ignore', 'pipe'], encoding: 'utf8'});
+    if (r.status !== 0 || !existsSync(join(stillsDir, file))) throw new Error(`still at frame ${b.frame} failed: ${(r.stderr || '').slice(0, 400)}`);
+    cleanTemp();
+    tiles.push({file, n: i + 1, time: tc(b.frame, composition.fps), frame: b.frame, says: b.says, what: b.what, beat: b.beat});
+    console.log(`  ${i + 1}/${beats.length}  frame ${b.frame}`);
+  }
+
+  // The sheet itself, drawn by Remotion with the stills folder as its public dir.
+  const sheetUrl = await bundle({entryPoint: resolve('src/plan/entry.tsx'), publicDir: stillsDir, outDir: join(dir, '.bundle-sheet')});
+  const props = {title: flag('title', comp), subtitle: flag('subtitle', 'One real rendered frame per beat. Point at a number to change it.'), tiles, vertical: composition.height > composition.width};
+  const sheetComp = await selectComposition({serveUrl: sheetUrl, id: 'PlanSheet', inputProps: props, puppeteerInstance: browser});
+  const out = join(dir, 'motion-sheet.png');
+  await renderStill({serveUrl: sheetUrl, composition: sheetComp, frame: 0, output: out, imageFormat: 'png', inputProps: props, puppeteerInstance: browser});
+
+  const hash = createHash('sha256').update(readFileSync(out)).digest('hex').slice(0, 16);
+  writeFileSync(join(dir, 'sheet.json'), JSON.stringify({composition: comp, hash, beats: beats.length, frames: beats.map((b) => b.frame), at: new Date().toISOString()}, null, 2) + '\n');
+  // A new sheet means a new plan: any earlier approval no longer covers it.
+  if (existsSync(join(dir, 'approved.json'))) console.log('A new sheet replaces the approved one — ask for a yes on this sheet before rendering.');
+  console.log(`\nMotion sheet: ${out}\nShow it to them with the plan table, then wait for a yes and record it: npm run approve -- ${comp} --said "<their words>"`);
+} finally {
+  await browser.close({silent: true});
+  for (const b of ['.bundle', '.bundle-sheet']) rmSync(join(dir, b), {recursive: true, force: true});
+  cleanTemp();
+}

package/template/src/components/CommentBox.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import {AbsoluteFill, useCurrentFrame} from 'remotion';
+import {EASE} from '../design/motion';
+import {FONT} from '../design/tokens';
+import {progress} from '../lib/animate';
+
+/**
+ * Comment box — the "comment WORD" call to action as a real comment field: it rises over a soft bottom
+ * gradient, the word types itself in (accent colour), and "Post" lights up when it's complete.
+ * Sound: a key click per letter, a click on Post.
+ *
+ *   <CommentBox from={2474} to={2545} typeAt={2496} word="EDIT" />
+ */
+export const CommentBox: React.FC<{from: number; to: number; typeAt: number; word: string; accent?: string}> = ({from, to, typeAt, word, accent = 'var(--accent, your accent)'}) => {
+  const f = useCurrentFrame();
+  if (f < from || f >= to) return null;
+  const a = progress(f, from, 12, EASE.out);
+  const o = Math.min(a, 1 - progress(f, to - 6, 6, EASE.in));
+  const typed = word.slice(0, Math.max(0, Math.min(word.length, Math.floor((f - typeAt + 3) / 3))));
+  const done = typed.length === word.length;
+  return (
+    <>
+      <AbsoluteFill style={{background: 'linear-gradient(to top, rgba(15,15,13,0.85), rgba(15,15,13,0) 45%)', opacity: o}} />
+      <div style={{position: 'absolute', left: 50, right: 50, bottom: 300 - (1 - a) * 24, opacity: o, borderRadius: 999, padding: '22px 30px', display: 'flex', alignItems: 'center', gap: 18, background: 'rgba(28,28,25,0.92)', border: '1px solid rgba(255,255,255,0.09)', boxShadow: '0 30px 60px rgba(0,0,0,0.45)', fontFamily: FONT.sans}}>
+        <div style={{width: 60, height: 60, borderRadius: 999, background: 'linear-gradient(135deg,#f9ce34,#ee2a7b,#6228d7)'}} />
+        <div style={{flex: 1, fontSize: 52, fontWeight: 800, color: typed ? accent : 'rgba(255,255,255,0.35)', letterSpacing: '0.02em'}}>{typed || 'Add a comment…'}</div>
+        <div style={{fontSize: 34, fontWeight: 700, color: done ? accent : 'rgba(255,255,255,0.3)', transform: `scale(${done ? 1.06 : 1})`}}>Post</div>
+      </div>
+    </>
+  );
+};

package/template/src/components/FilmBurn.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import {AbsoluteFill, interpolate, useCurrentFrame} from 'remotion';
+
+/**
+ * Film burn — a warm light leak that flares across the frame and burns out, the old "end of the reel" flash.
+ * Use it to hide a join or a short pause: the eye goes to the flare, and the shot after it reads as a new one.
+ * First built (2026-10-22) over a 0.3 s hesitation after the hook, with a camera shutter on it.
+ *
+ *   <FilmBurn at={138} frames={20} />          // above the footage and the graphics, below the captions
+ *
+ * Peak brightness lands at 40% of its length — put the join or the pause there. Sound: a shutter click at
+ * `at`, a soft whoosh under the peak.
+ */
+export const FilmBurn: React.FC<{at: number; frames?: number; from?: 'left' | 'right'}> = ({at, frames = 20, from = 'left'}) => {
+  const f = useCurrentFrame();
+  const t = (f - at) / frames;
+  if (t < 0 || t > 1) return null;
+  const peak = 0.4;
+  const a = t < peak ? interpolate(t, [0, peak], [0, 1]) : interpolate(t, [peak, 1], [1, 0]);
+  const ease = a * a * (3 - 2 * a);
+  const dir = from === 'left' ? 1 : -1;
+  // the leak travels across the frame while it burns
+  const x = 50 + dir * interpolate(t, [0, 1], [-45, 45]);
+  return (
+    <AbsoluteFill style={{pointerEvents: 'none'}}>
+      {/* the burn: hot core, orange body, deep red edge — screened onto the picture */}
+      <AbsoluteFill
+        style={{
+          mixBlendMode: 'screen',
+          opacity: ease,
+          background: `radial-gradient(ellipse 55% 70% at ${x}% 45%, rgba(255,246,214,1) 0%, rgba(255,170,70,0.95) 28%, rgba(226,72,24,0.75) 55%, rgba(120,20,10,0) 80%)`,
+          filter: 'blur(18px)',
+        }}
+      />
+      {/* a second, offset flare so it never looks like one clean circle */}
+      <AbsoluteFill
+        style={{
+          mixBlendMode: 'screen',
+          opacity: ease * 0.8,
+          background: `radial-gradient(ellipse 35% 45% at ${100 - x}% 75%, rgba(255,214,140,0.9) 0%, rgba(240,110,40,0.6) 40%, rgba(0,0,0,0) 75%)`,
+          filter: 'blur(28px)',
+        }}
+      />
+      {/* the burnt-out moment: everything goes warm white for a beat */}
+      <AbsoluteFill style={{background: 'rgb(255,236,205)', opacity: Math.max(0, ease - 0.55) * 1.6}} />
+    </AbsoluteFill>
+  );
+};

package/template/src/components/FlashBloom.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import {AbsoluteFill, Img, useCurrentFrame} from 'remotion';
+import {EASE} from '../design/motion';
+import {progress} from '../lib/animate';
+
+/**
+ * Flash bloom — the opening hit: the SPEAKER blooms to white (not the whole screen) while the camera zooms out
+ * from very close, then the glow drains off them and the shot settles. Measured from a reference opener
+ * (references.md 19, 00:00–00:01): ~2 frames of full bloom, glow gone by ~frame 10, zoom settled by ~16.
+ *
+ * Two parts, because the zoom has to move EVERYTHING and the bloom sits on the speaker only:
+ *   const z = flashZoom(frame);                       // wrap footage + graphics in transform: scale(z.scale)
+ *   <FlashBloom cutout={(f) => cutoutUrl(f)} />       // above the footage, from the speaker's cutout matte
+ *
+ * Needs a cutout for the first ~14 frames (scripts/make_cutout.py). Sound: a short bright swoosh on frame 0.
+ */
+export const flashZoom = (frame: number, at = 0, frames = 16) => {
+  const p = progress(frame, at, frames, EASE.outDecisive);
+  return {scale: 1 + 0.42 * (1 - p), blur: 6 * (1 - p)};
+};
+
+export const FlashBloom: React.FC<{
+  /** URL of the speaker's cutout at a composition frame, or null when there is none. */
+  cutout: (frame: number) => string | null;
+  at?: number;
+  frames?: number;
+}> = ({cutout, at = 0, frames = 12}) => {
+  const f = useCurrentFrame();
+  if (f < at || f > at + frames + 2) return null;
+  const src = cutout(f);
+  // full white for two frames, then drains
+  const glow = f - at < 2 ? 1 : 1 - progress(f, at + 2, frames - 2, EASE.inOut);
+  const z = flashZoom(f, at);
+  return (
+    <AbsoluteFill style={{transform: `scale(${z.scale})`, transformOrigin: '50% 38%'}}>
+      {/* a soft lift over the whole frame, much weaker than the bloom on the person */}
+      <AbsoluteFill style={{background: `rgba(255,252,240,${0.35 * glow})`}} />
+      {src ? (
+        <AbsoluteFill style={{opacity: glow}}>
+          <Img src={src} style={{position: 'absolute', inset: 0, width: '100%', height: '100%', filter: `brightness(0) invert(1) blur(${2 + 10 * (1 - glow)}px) drop-shadow(0 0 ${40 * glow}px rgba(255,255,255,0.95))`}} />
+        </AbsoluteFill>
+      ) : null}
+    </AbsoluteFill>
+  );
+};

package/template/src/components/MergeToPill.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {EASE} from '../design/motion';
+import {progress} from '../lib/animate';
+
+/**
+ * Merge to pill — scattered items (logos, chips) drift apart, then rush to the centre, blur together and BECOME
+ * one pill (₹0, FREE, ONE SYSTEM…). Morph, not swap: the eye follows the items into the thing they become
+ * (references.md pattern 11 "one thing becomes the next").
+ *
+ *   <MergeToPill items={[<Logo/>, …]} from={0} mergeAt={34} pill={<span>₹0</span>} />
+ * Frames are local to the parent (use inside a WhipScene). Sound: a quick swoosh into the merge, a pop on the pill.
+ */
+export const MergeToPill: React.FC<{
+  items: React.ReactNode[];
+  from: number;
+  mergeAt: number;
+  pill: React.ReactNode;
+  pillStyle?: React.CSSProperties;
+  cx?: number;
+  cy?: number;
+  /** frame override — pass the parent's local frame when used inside a scene */
+  frame?: number;
+}> = ({items, from, mergeAt, pill, pillStyle, cx = 540, cy = 960, frame}) => {
+  const raw = useCurrentFrame();
+  const f = frame ?? raw;
+  const spots = [
+    [-300, -420, -12],
+    [290, -300, 10],
+    [-310, 260, 9],
+    [300, 400, -8],
+    [0, -560, 4],
+    [0, 560, -4],
+  ];
+  const drift = progress(f, from, mergeAt - from, EASE.out);
+  const pull = progress(f, mergeAt, 12, EASE.in);
+  const pop = progress(f, mergeAt + 10, 14, EASE.overshoot);
+  return (
+    <>
+      {items.map((item, i) => {
+        const [sx, sy, r] = spots[i % spots.length];
+        const k = 0.75 + drift * 0.25;
+        const x = sx * k * (1 - pull);
+        const y = sy * k * (1 - pull);
+        return (
+          <div key={i} style={{position: 'absolute', left: cx, top: cy, transform: `translate(-50%,-50%) translate(${x}px, ${y}px) rotate(${r * (1 - pull)}deg) scale(${1 - pull * 0.7})`, opacity: Math.min(progress(f, from + i * 2, 10, EASE.out), 1 - pull * 0.9), filter: `blur(${pull * 10}px)`}}>
+            {item}
+          </div>
+        );
+      })}
+      {pop > 0 ? (
+        <div style={{position: 'absolute', left: cx, top: cy, transform: `translate(-50%,-50%) scale(${pop})`, ...pillStyle}}>{pill}</div>
+      ) : null}
+    </>
+  );
+};

package/template/src/components/NotificationDrop.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {EASE} from '../design/motion';
+import {FONT} from '../design/tokens';
+import {progress} from '../lib/animate';
+
+/**
+ * Notification drop — a phone-style notification slides down from the top over the talking head, holds, and
+ * lifts away. "UI in the room" (references.md 15): the product's moment shows up in the shot instead of a
+ * cutaway. Sound: a soft click/ding on arrival.
+ *
+ *   <NotificationDrop from={2040} to={2140} icon="E" title="Creator Editing OS" body="New update ready — v1.3.8" />
+ */
+export const NotificationDrop: React.FC<{from: number; to: number; icon: React.ReactNode; title: string; body: string; accent?: string}> = ({from, to, icon, title, body, accent = 'var(--accent, your accent)'}) => {
+  const f = useCurrentFrame();
+  if (f < from || f >= to) return null;
+  const drop = progress(f, from, 16, EASE.outDecisive);
+  const lift = progress(f, to - 10, 10, EASE.in);
+  const y = -180 + drop * 250 - lift * 250;
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        left: 40,
+        right: 40,
+        top: y,
+        display: 'flex',
+        alignItems: 'center',
+        gap: 22,
+        padding: '26px 30px',
+        borderRadius: 36,
+        background: 'rgba(28,28,25,0.86)',
+        backdropFilter: 'blur(18px)',
+        border: '1px solid rgba(255,255,255,0.09)',
+        boxShadow: '0 30px 60px rgba(0,0,0,0.45)',
+        fontFamily: FONT.sans,
+        color: '#fff',
+        opacity: 1 - lift,
+      }}
+    >
+      <div style={{width: 84, height: 84, borderRadius: 22, background: accent, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 44, fontWeight: 800, color: '#0f0f0d', flexShrink: 0}}>{icon}</div>
+      <div style={{flex: 1}}>
+        <div style={{fontSize: 31, fontWeight: 700}}>{title}</div>
+        <div style={{fontSize: 29, color: 'rgba(255,255,255,0.68)', marginTop: 2}}>{body}</div>
+      </div>
+      <div style={{fontSize: 25, color: 'rgba(255,255,255,0.4)'}}>now</div>
+    </div>
+  );
+};

package/template/src/components/PillCaptions.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {EASE} from '../design/motion';
+import {FONT} from '../design/tokens';
+import {progress} from '../lib/animate';
+
+/**
+ * Pill captions — a small dark-pill subtitle, up to 4 words, the word being said in the accent; words still to
+ * come wait faint. The launch-film / premium talking-head look (references.md 13, 14, pattern 14: "small
+ * captions, big ideas") — big type is saved for the moments that matter.
+ *
+ *   <PillCaptions words={[{text, f, t}]} quiet={[[0, 14], [2470, 2600]]} top={1600} />
+ *
+ * look="clean": the same timing with no pill — bigger white words on a soft shadow (his first named style
+ * request, 2026-10-22: "captions without the pill"). More looks plug in here as CAPTION_LOOKS grows.
+ *
+ * Breaks at pauses (> 8 frames), at sentence/clause ends and every 4 words, so no word is ever left alone on
+ * screen (a lone word held ~0.5s reads as a repeat — STYLE.md §7).
+ */
+type Word = {text: string; f: number; t: number};
+export const CAPTION_LOOKS = ['pill', 'clean'] as const;
+export type CaptionLook = (typeof CAPTION_LOOKS)[number];
+
+export const chunkWords = (words: Word[], max = 4) => {
+  const out: Word[][] = [];
+  let cur: Word[] = [];
+  words.forEach((w, i) => {
+    const prev = words[i - 1];
+    if (cur.length && (cur.length >= max || w.f - prev.t > 8 || /[.?!,]$/.test(prev.text))) {
+      out.push(cur);
+      cur = [];
+    }
+    cur.push(w);
+  });
+  if (cur.length) out.push(cur);
+  return out;
+};
+
+export const PillCaptions: React.FC<{words: Word[]; quiet?: [number, number][]; top?: number; accent?: string; size?: number; look?: CaptionLook}> = ({words, quiet = [], top = 1600, accent = 'var(--accent, your accent)', size = 46, look = 'pill'}) => {
+  const f = useCurrentFrame();
+  const chunks = React.useMemo(() => chunkWords(words), [words]);
+  if (quiet.some(([a, b]) => f >= a && f < b)) return null;
+  const ci = chunks.findIndex((c, k) => f >= c[0].f - 2 && f < Math.min((chunks[k + 1]?.[0].f ?? 1e9) - 1, c[c.length - 1].t + 16));
+  if (ci < 0) return null;
+  const chunk = chunks[ci];
+  const pop = progress(f, chunk[0].f - 2, 6, EASE.out);
+  return (
+    <div style={{position: 'absolute', left: 0, right: 0, top, display: 'flex', justifyContent: 'center', pointerEvents: 'none'}}>
+      <div style={{...(look === 'pill' ? {background: 'rgba(12,12,10,0.66)', backdropFilter: 'blur(14px)', borderRadius: 22, padding: '12px 24px', boxShadow: '0 12px 30px rgba(0,0,0,0.25)'} : {padding: '0 40px', flexWrap: 'wrap', justifyContent: 'center', textShadow: '0 2px 18px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.6)'}), display: 'flex', gap: look === 'pill' ? 14 : 16, fontFamily: FONT.sans, transform: `translateY(${(1 - pop) * 10}px) scale(${0.96 + pop * 0.04})`, opacity: pop}}>
+        {chunk.map((w, i) => {
+          const said = f >= w.f;
+          const active = said && f < (chunk[i + 1]?.f ?? w.t + 6);
+          return (
+            <span key={i} style={{fontSize: look === 'pill' ? size : size * 1.3, fontWeight: look === 'pill' ? 700 : 800, letterSpacing: '-0.01em', color: active ? accent : said ? '#fff' : look === 'pill' ? 'rgba(255,255,255,0.38)' : 'rgba(255,255,255,0.55)'}}>
+              {w.text.replace(/[,.]$/, '')}
+            </span>
+          );
+        })}
+      </div>
+    </div>
+  );
+};

package/template/src/components/ReelRing.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import {AbsoluteFill, Loop, OffthreadVideo, useCurrentFrame} from 'remotion';
+import {EASE} from '../design/motion';
+import {progress} from '../lib/animate';
+
+/**
+ * Reel ring — phone-shaped clips orbiting the speaker on a tilted ellipse, turning and easing to a stop as the
+ * line lands. First built for "every Claude-edited reel you've seen…" (2026-10-22).
+ *
+ * A real orbit is split around the speaker: the far half of the ring goes BEHIND the cutout, the near half
+ * IN FRONT of it, so the cards pass behind him and come round in front — "revolving around me" (his words,
+ * 2026-10-22; all-behind read as a flat backdrop, all-in-front as clips stuck over him). A card changes side
+ * at the ring's left/right ends, clear of the body, so the switch never shows.
+ *
+ *   <ReelRing side="back" reels={…} from={0} to={230} />
+ *   <Cutout />
+ *   <ReelRing side="front" reels={…} from={0} to={230} />
+ *
+ * Reels: muted proxies (~360x640, a few seconds) looped; they are played, not rendered from originals.
+ */
+export const ReelRing: React.FC<{
+  reels: string[];
+  from: number;
+  to: number;
+  cx?: number;
+  cy?: number;
+  rx?: number;
+  ry?: number;
+  tileW?: number;
+  turns?: number;
+  /** which half to draw: 'back' (far side, before the cutout), 'front' (near side, after it), or 'all' */
+  side?: 'all' | 'back' | 'front';
+  /** resolve a reel path to a URL (staticFile) */
+  url: (path: string) => string;
+}> = ({reels, from, to, cx = 540, cy = 860, rx = 480, ry = 150, tileW = 230, turns = 0.55, side = 'all', url}) => {
+  const f = useCurrentFrame();
+  if (f < from || f >= to) return null;
+  const n = reels.length;
+  const spin = progress(f, from, to - from, EASE.out) * Math.PI * 2 * turns;
+  const tiles = reels
+    .map((r, i) => {
+      const a = (i / n) * Math.PI * 2 + spin - Math.PI / 2;
+      return {r, i, a, depth: Math.sin(a)};
+    })
+    .filter(({depth}) => side === 'all' || (side === 'back' ? depth < 0 : depth >= 0))
+    .sort((p, q) => p.depth - q.depth);
+  const tileH = (tileW * 16) / 9;
+  return (
+    <AbsoluteFill style={{perspective: 1500}}>
+      {tiles.map(({r, i, a, depth}) => {
+        const near = (depth + 1) / 2; // 0 far … 1 near
+        const s = 0.6 + 0.4 * near;
+        const fade = Math.min(progress(f, from + 2 + i * 2, 12, EASE.out), 1 - progress(f, to - 10, 10, EASE.in));
+        return (
+          <div
+            key={i}
+            style={{
+              position: 'absolute',
+              left: cx + Math.cos(a) * rx,
+              top: cy + depth * ry,
+              width: tileW,
+              height: tileH,
+              transform: `translate(-50%,-50%) scale(${s}) rotateY(${Math.cos(a) * -32}deg)`,
+              opacity: fade,
+              filter: `brightness(${0.55 + 0.45 * near}) blur(${(1 - near) * 2.5}px)`,
+              borderRadius: 26,
+              overflow: 'hidden',
+              boxShadow: '0 24px 50px rgba(0,0,0,0.45)',
+              border: '3px solid rgba(255,255,255,0.9)',
+              background: '#111',
+            }}
+          >
+            <Loop durationInFrames={240}>
+              <OffthreadVideo src={url(r)} muted style={{width: '100%', height: '100%', objectFit: 'cover'}} />
+            </Loop>
+          </div>
+        );
+      })}
+    </AbsoluteFill>
+  );
+};

package/template/src/components/WhipScene.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import {AbsoluteFill, useCurrentFrame} from 'remotion';
+import {EASE} from '../design/motion';
+import {progress} from '../lib/animate';
+import {VelocityBlur} from './VelocityBlur';
+
+/**
+ * Whip scene — a full-screen graphics scene cut into a talking head with the join hidden inside the move:
+ * the whole frame whips in from the right and out to the left, motion-blurred, behind a thin bright light
+ * streak (references.md 9 & 13: "joins hide inside motion or light"). A wide coloured smear was tried and read
+ * as a green curtain; keep the streak thin.
+ *
+ *   <WhipScene from={232} to={330}>{(local) => <MyScene local={local} />}</WhipScene>
+ *
+ * StudioSpace is the backdrop every scene of one video should share — ink, a slow accent glow, a dot floor in
+ * perspective, a breath of grain — so the graphics read as one film (references.md pattern 15).
+ * Sound: a short swoosh ~3 frames before `from` and ~6 before `to`.
+ *
+ * mode (switchable in the browser editor): 'whip' (default), 'zoom' (scales in from 115% and fades, out the
+ * reverse), 'cut' (hard cut — pair it with a FilmBurn on the join for the film-burn look).
+ */
+export type SceneMode = 'whip' | 'zoom' | 'cut';
+export const WHIP_FRAMES = 9;
+
+export const StudioSpace: React.FC<{local: number; accent?: string; ink?: string; children: React.ReactNode}> = ({local, accent = 'var(--accent, your accent)', ink = 'var(--ink, #0f0f0d)', children}) => (
+  <AbsoluteFill style={{background: ink, overflow: 'hidden'}}>
+    <AbsoluteFill style={{background: `radial-gradient(60% 40% at ${50 + Math.sin(local / 40) * 6}% 38%, color-mix(in srgb, ${accent} 16%, transparent), transparent 70%)`}} />
+    <AbsoluteFill style={{perspective: 900}}>
+      <div
+        style={{
+          position: 'absolute',
+          left: -400,
+          right: -400,
+          top: 1180,
+          height: 1400,
+          transform: 'rotateX(72deg)',
+          transformOrigin: '50% 0%',
+          backgroundImage: 'radial-gradient(rgba(255,255,255,0.16) 1.6px, transparent 1.8px)',
+          backgroundSize: '46px 46px',
+          backgroundPosition: `0 ${-local * 1.2}px`,
+          maskImage: 'linear-gradient(to bottom, #000 0%, transparent 70%)',
+          WebkitMaskImage: 'linear-gradient(to bottom, #000 0%, transparent 70%)',
+        }}
+      />
+    </AbsoluteFill>
+    {children}
+    <AbsoluteFill style={{opacity: 0.05, backgroundImage: 'repeating-radial-gradient(circle at 17% 31%, #fff 0 1px, transparent 1px 3px)', mixBlendMode: 'overlay'}} />
+  </AbsoluteFill>
+);
+
+export const WhipScene: React.FC<{from: number; to: number; accent?: string; children: (local: number) => React.ReactNode; backdrop?: boolean; mode?: SceneMode}> = ({from, to, accent = 'var(--accent, your accent)', children, backdrop = true, mode = 'whip'}) => {
+  const f = useCurrentFrame();
+  if (f < from || f >= to) return null;
+  if (mode !== 'whip') {
+    const inP = progress(f, from, 7, EASE.outDecisive);
+    const outP = progress(f, to - 6, 6, EASE.in);
+    const zoom = mode === 'zoom';
+    const plain = children(f - from);
+    return (
+      <AbsoluteFill style={zoom ? {transform: `scale(${1 + 0.15 * (1 - inP) - 0.08 * outP})`, opacity: Math.min(inP, 1 - outP), filter: `blur(${(1 - inP) * 8 + outP * 8}px)`} : undefined}>
+        {backdrop ? <StudioSpace local={f - from} accent={accent}>{plain}</StudioSpace> : plain}
+      </AbsoluteFill>
+    );
+  }
+  const xAt = (g: number) => {
+    const i = 1 - progress(g, from, WHIP_FRAMES, EASE.outDecisive);
+    const o = progress(g, to - WHIP_FRAMES, WHIP_FRAMES, EASE.in);
+    return (i - o) * 1080;
+  };
+  const x = xAt(f);
+  const vx = x - xAt(f - 1);
+  const streak = Math.max(0, 1 - Math.abs(x) / 1080) * Math.min(1, Math.abs(vx) / 60);
+  const body = children(f - from);
+  return (
+    <AbsoluteFill>
+      <VelocityBlur vx={vx} bleed={0} style={{position: 'absolute', inset: 0, transform: `translateX(${x}px)`}}>
+        {backdrop ? (
+          <StudioSpace local={f - from} accent={accent}>
+            {body}
+          </StudioSpace>
+        ) : (
+          body
+        )}
+      </VelocityBlur>
+      {streak > 0.02 ? (
+        <AbsoluteFill style={{background: `linear-gradient(90deg, transparent 40%, color-mix(in srgb, ${accent} ${35 * streak}%, transparent) 47%, rgba(255,255,255,${0.9 * streak}) 50%, color-mix(in srgb, ${accent} ${35 * streak}%, transparent) 53%, transparent 60%)`, transform: `translateX(${x}px)`, filter: 'blur(10px)', mixBlendMode: 'screen'}} />
+      ) : null}
+    </AbsoluteFill>
+  );
+};

package/template/src/design/motion.ts

@@ -14,6 +14,7 @@ export const DUR = {
   slow: 600, // hero elements, long travel, line draws
   scene: 800, // camera moves, scene handoffs
   drift: 2400, // slow push-ins on the footage
+  letterTurn: 1300, // Moving Letters #10: individual letter Y turn
 } as const;
 export type Dur = keyof typeof DUR;
 
@@ -45,11 +46,18 @@ export const SPRING = {
 } as const;
 export type SpringKind = keyof typeof SPRING;
 
+// Tobias Ahlin Moving Letters #10 (MIT): staggered rotateY, elastic settle.
+export const LETTER_TURN = {
+ angle: -90,
+ ease: (t:number) => t===0||t===1?t:Math.pow(2,-10*t)*Math.sin((t-.125)*2*Math.PI/.5)+1,
+} as const;
+
 /** Delay between items in a group. */
 export const STAGGER = {
   tight: 67, // ~2 frames @30fps
   normal: 100, // ~3 frames @30fps
   dramatic: 167, // ~5 frames @30fps
+  letter: 45, // Moving Letters #10
 } as const;
 export type StaggerKind = keyof typeof STAGGER;