creator-editing-studio 1.3.7 → 1.4.0

package/template/src/lib/recolor.ts

@@ -0,0 +1,173 @@
+/**
+ * Recolouring from the live preview (2026-11-05, his ask: "the option to change colors directly from the preview").
+ *
+ * A swap is {from: to}, e.g. {'#a88538': '#e2382f'}: gold → red. It moves the whole SHADE FAMILY of `from`, not one
+ * exact value — a gold medallion is five golds (highlight, mid, edge, shadow, glow) and they all turn red with their
+ * shading kept: hue moves by the same amount, saturation scales, lightness shifts. `from` itself lands exactly on `to`.
+ *
+ * It works on what the edit drew: inline styles (color, backgrounds, gradients, borders, shadows, filters) and SVG
+ * fill / stroke / stop-color, in hex or rgb(a). Footage, cut-outs and images are untouched. The original values are
+ * remembered per element, so running it every frame never drifts (gold → darker gold would otherwise darken again
+ * each frame).
+ */
+export type Swap = Record<string, string>;
+type RGB = [number, number, number];
+type HSL = [number, number, number];
+
+const TOKEN = /#(?:[0-9a-fA-F]{8}|[0-9a-fA-F]{6}|[0-9a-fA-F]{3,4})\b|rgba?\(\s*[\d.]+\s*,\s*[\d.]+\s*,\s*[\d.]+\s*(?:,\s*[\d.]+%?\s*)?\)/g;
+
+export const hex = ([r, g, b]: RGB) => '#' + [r, g, b].map((v) => Math.round(Math.max(0, Math.min(255, v))).toString(16).padStart(2, '0')).join('');
+
+/** A colour token → [rgb, alpha], or null. */
+export function parse(tok: string): [RGB, number] | null {
+  if (tok.startsWith('#')) {
+    let h = tok.slice(1);
+    if (h.length <= 4) h = h.split('').map((c) => c + c).join('');
+    const n = (i: number) => parseInt(h.slice(i, i + 2), 16);
+    return [[n(0), n(2), n(4)], h.length === 8 ? n(6) / 255 : 1];
+  }
+  const v = tok.replace(/rgba?\(|\)|\s/g, '').split(',');
+  if (v.length < 3) return null;
+  const a = v[3] === undefined ? 1 : v[3].endsWith('%') ? parseFloat(v[3]) / 100 : parseFloat(v[3]);
+  return [[+v[0], +v[1], +v[2]], a];
+}
+
+function toHsl([r, g, b]: RGB): HSL {
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+  if (max === min) return [0, 0, l];
+  const d = max - min;
+  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+  const h = max === r ? (g - b) / d + (g < b ? 6 : 0) : max === g ? (b - r) / d + 2 : (r - g) / d + 4;
+  return [h * 60, s, l];
+}
+function toRgb([h, s, l]: HSL): RGB {
+  h = (((h % 360) + 360) % 360) / 360;
+  if (s === 0) return [l * 255, l * 255, l * 255];
+  const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+  const p = 2 * l - q;
+  const f = (t: number) => {
+    t = (t + 1) % 1;
+    return t < 1 / 6 ? p + (q - p) * 6 * t : t < 1 / 2 ? q : t < 2 / 3 ? p + (q - p) * (2 / 3 - t) * 6 : p;
+  };
+  return [f(h + 1 / 3) * 255, f(h) * 255, f(h - 1 / 3) * 255];
+}
+const clamp = (x: number) => Math.max(0, Math.min(1, x));
+const hueGap = (a: number, b: number) => Math.min(Math.abs(a - b), 360 - Math.abs(a - b));
+/** Greys, whites and near-blacks have no reliable hue: they only match greys of a similar lightness. */
+const GREY = 0.1;
+
+/** Does `c` belong to the shade family of `from`? */
+export function inFamily(c: RGB, from: RGB): boolean {
+  const [h, s, l] = toHsl(c);
+  const [fh, fs, fl] = toHsl(from);
+  if (fs < GREY || s < GREY) return fs < GREY && s < GREY && Math.abs(l - fl) < 0.12;
+  return hueGap(h, fh) <= 24;
+}
+
+/** `c` moved the way `from` moves to `to`. */
+export function shift(c: RGB, from: RGB, to: RGB): RGB {
+  const [h, s, l] = toHsl(c);
+  const [fh, fs, fl] = toHsl(from);
+  const [th, ts, tl] = toHsl(to);
+  const s2 = fs < GREY ? ts : clamp(s * (fs ? ts / fs : 1));
+  return toRgb([h + (th - fh), s2, clamp(l + (tl - fl))]);
+}
+
+const rules = (swap: Swap) => Object.entries(swap).map(([a, b]) => [parse(a)?.[0], parse(b)?.[0]] as [RGB | undefined, RGB | undefined]).filter((r): r is [RGB, RGB] => !!r[0] && !!r[1]);
+
+/** Every colour in a style or attribute value, swapped. Alpha is kept. */
+export function swapIn(value: string, swap: Swap): string {
+  const rs = rules(swap);
+  if (!rs.length) return value;
+  return value.replace(TOKEN, (tok) => {
+    const p = parse(tok);
+    if (!p) return tok;
+    const r = rs.find(([from]) => inFamily(p[0], from));
+    if (!r) return tok;
+    const c = shift(p[0], r[0], r[1]);
+    return p[1] < 1 ? `rgba(${c.map(Math.round).join(',')},${+p[1].toFixed(3)})` : hex(c);
+  });
+}
+
+const ATTRS = ['fill', 'stroke', 'stop-color', 'color', 'flood-color'];
+/** el → attribute or style property → [what the edit drew, what we wrote]. React sets style properties one by one,
+ * so they are remembered one by one: a property we wrote is read back as its original. */
+const memo = new WeakMap<Element, Map<string, [string, string]>>();
+const SKIP = new Set(['VIDEO', 'IMG', 'CANVAS', 'IFRAME']);
+const hasColor = (v: string) => /#|rgb/.test(v);
+
+/** [key, value the edit drew] for every coloured attribute and style property of an element. */
+function drawn(el: Element): [string, string][] {
+  const m = memo.get(el);
+  const out: [string, string][] = [];
+  const back = (k: string, now: string) => {
+    const p = m?.get(k);
+    return p && now === p[1] ? p[0] : now;
+  };
+  for (const a of ATTRS) {
+    const v = el.getAttribute(a);
+    if (v && hasColor(v)) out.push([a, back(a, v)]);
+  }
+  const st = (el as HTMLElement).style;
+  if (st) for (let i = 0; i < st.length; i++) {
+    const p = st[i];
+    const v = st.getPropertyValue(p);
+    if (v && hasColor(v)) out.push(['style:' + p, back('style:' + p, v)]);
+  }
+  return out;
+}
+
+/** Apply a swap to an element and everything inside it. Safe to call every frame. Skips footage and images. */
+export function recolorTree(root: Element, swap: Swap, skipParts = false) {
+  for (const el of [root, ...Array.from(root.querySelectorAll('*'))]) {
+    if (SKIP.has(el.tagName)) continue;
+    // the whole-video pass leaves graphics that run their own (they include the whole video's swaps)
+    if (skipParts && el !== root && el.closest('[data-lp-recolor]')) continue;
+    for (const [k, base] of drawn(el)) {
+      const out = swapIn(base, swap);
+      let m = memo.get(el);
+      if (out === base && !m?.has(k)) continue;
+      if (!m) memo.set(el, (m = new Map()));
+      m.set(k, [base, out]);
+      if (k.startsWith('style:')) {
+        const st = (el as HTMLElement).style;
+        const p = k.slice(6);
+        if (st.getPropertyValue(p) !== out) st.setProperty(p, out, st.getPropertyPriority(p));
+        m.set(k, [base, st.getPropertyValue(p)]); // the browser may normalise what we wrote
+      } else if (el.getAttribute(k) !== out) el.setAttribute(k, out);
+    }
+  }
+}
+
+/** The distinct colours drawn inside an element (original values), most used first — the preview's swatches. */
+export function colorsIn(root: Element, max = 8): string[] {
+  const count = new Map<string, number>();
+  for (const el of [root, ...Array.from(root.querySelectorAll('*'))]) {
+    if (SKIP.has(el.tagName)) continue;
+    for (const [, v] of drawn(el)) {
+      for (const tok of v.match(TOKEN) ?? []) {
+        const p = parse(tok);
+        if (!p || p[1] < 0.2) continue;
+        const k = hex(p[0]);
+        count.set(k, (count.get(k) ?? 0) + 1);
+      }
+    }
+  }
+  // one swatch per shade family: the most used member stands for it
+  const out: string[] = [];
+  for (const [k] of [...count].sort((a, b) => b[1] - a[1])) {
+    const c = parse(k)![0];
+    if (!out.some((o) => inFamily(c, parse(o)![0]))) out.push(k);
+    if (out.length >= max) break;
+  }
+  return out;
+}
+
+// The live preview's player is a separate bundle: it lists swatches through the edit's own copy (which remembers the
+// originals), so a swapped graphic still shows the colours it was built with.
+if (typeof window !== 'undefined') (window as unknown as {__lpRecolor?: unknown}).__lpRecolor = {colorsIn};

package/template/src/lib/tweaks.tsx

@@ -13,26 +13,52 @@
  *  - Layers locked to the footage (a subject cutout) use <Tweaked move={false}> and read the tweak with
  *    useHereTweak() to move only their graphics.
  */
-import React, {createContext, useContext} from 'react';
+import React, {createContext, useCallback, useContext, useLayoutEffect, useMemo, useRef, useState} from 'react';
+import {createPortal} from 'react-dom';
 import {AbsoluteFill, Sequence, useCurrentFrame} from 'remotion';
 import {followTransform, type TrackFile} from './track';
+import {recolorTree, type Swap} from './recolor';
 
 /**
  * One beat's adjustments. All optional.
- *   scale  size of text and graphics, 0.7–1.4          dy     up (−) / down (+), px, ±300
+ *   scale  size of text and graphics, 0.7–1.4          dy     up (−) / down (+), px, ±300 (dragged: further)
+ *   dx     left (−) / right (+), px — set by dragging on the video
  *   shift  frames later (+) / earlier (−), ±12          gain   that beat's sound effects, dB, −12…+6
  *   mute   that beat's sound effects off                icon   swap a 3D icon: {cart: 'shop'}
  *   follow the beat's graphics move, scale and partly tilt with the speaker's head (needs a head track)
  */
-export type Tweak = {scale?: number; dy?: number; shift?: number; gain?: number; mute?: boolean; icon?: Record<string, string>; follow?: boolean};
-export type Tweaks = Record<string, Tweak>; // keyed by beat index
+export type Tweak = {
+  scale?: number; dx?: number; dy?: number; shift?: number; gain?: number; mute?: boolean; icon?: Record<string, string>; follow?: boolean;
+  /** a <Part>'s text colour, its layer against the speaker, or hidden */
+  color?: string; layer?: 'front' | 'behind'; hide?: boolean;
+  /** colour swaps, {from: to}: each moves the whole shade family of `from` (src/lib/recolor.ts). Under the key
+   * ALL they apply to the whole video; on a <Part> they apply to that graphic first. */
+  recolor?: Swap;
+};
+export type Tweaks = Record<string, Tweak>; // keyed by beat index, or a <Part>'s id
+/** The tweaks key whose `recolor` applies to the whole video. */
+export const ALL = '__all';
+/** Runs a swap on an element after every render (once one was ever set, so taking it off restores the colours). */
+const useRecolor = (swap: Swap | undefined, skipParts: boolean) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const used = useRef(false);
+  useLayoutEffect(() => {
+    if (swap && Object.keys(swap).length) used.current = true;
+    if (ref.current && used.current) recolorTree(ref.current, swap ?? {}, skipParts);
+  });
+  return ref;
+};
 
+/** Where scale grows from, as a share of the frame. The preview's resize handle works from the same point. */
+export const TWEAK_ORIGIN = '50% 55%';
 export const TWEAK_LIMITS = {scale: [0.7, 1.4], dy: [-300, 300], shift: [-12, 12], gain: [-12, 6]} as const;
 
 /** track/toSource: optional head track for the "follow" tweak — the clip's source frame at a composition frame. */
 type Ctx = {tweaks: Tweaks; beatAt: (frame: number) => number; beatStarts: number[]; track?: TrackFile; toSource?: (frame: number) => number | null};
 const All = createContext<Ctx>({tweaks: {}, beatAt: () => 0, beatStarts: [0]});
 const Here = createContext<Tweak>({});
+type SlotMap = {behind: HTMLElement | null; front: HTMLElement | null};
+const Slots = createContext<{slots: SlotMap; set: (name: keyof SlotMap, el: HTMLElement | null) => void}>({slots: {behind: null, front: null}, set: () => {}});
 
 /** beatStarts: the first frame of each beat, in order. */
 export const TweaksProvider: React.FC<{tweaks?: Tweaks; beatStarts: number[]; track?: TrackFile; toSource?: (frame: number) => number | null; children: React.ReactNode}> = ({
@@ -46,7 +72,20 @@ export const TweaksProvider: React.FC<{tweaks?: Tweaks; beatStarts: number[]; tr
     for (let i = beatStarts.length - 1; i >= 0; i--) if (frame >= beatStarts[i]) return i;
     return 0;
   };
-  return <All.Provider value={{tweaks, beatAt, beatStarts, track, toSource}}>{children}</All.Provider>;
+  const [slots, setSlots] = useState<SlotMap>({behind: null, front: null});
+  const set = useCallback((name: keyof SlotMap, el: HTMLElement | null) => setSlots((s) => (s[name] === el ? s : {...s, [name]: el})), []);
+  const slotCtx = useMemo(() => ({slots, set}), [slots, set]);
+  // the whole video's colour swaps; a graphic with its own swaps does both itself (see Part)
+  const whole = useRecolor(tweaks[ALL]?.recolor, true);
+  return (
+    <All.Provider value={{tweaks, beatAt, beatStarts, track, toSource}}>
+      <Slots.Provider value={slotCtx}>
+        <div ref={whole} data-lp-root="" style={{display: 'contents'}}>
+          {children}
+        </div>
+      </Slots.Provider>
+    </All.Provider>
+  );
 };
 
 /** The tweak of the beat at any frame — for things placed by frame number, like sound cues. */
@@ -58,6 +97,52 @@ export const useTweakAt = () => {
 /** The tweak of the beat being drawn, inside a <Tweaked>. */
 export const useHereTweak = () => useContext(Here);
 
+/**
+ * Where a part goes when it is sent in front of / behind the speaker. An edit with a cut-out of the person puts
+ * <Layer name="behind" /> just before the cut-out and <Layer name="front" /> just after it, in the same container.
+ */
+export const Layer: React.FC<{name: 'behind' | 'front'}> = ({name}) => {
+  const {set} = useContext(Slots);
+  const ref = useCallback((el: HTMLDivElement | null) => set(name, el), [name, set]);
+  return <div ref={ref} data-lp-slot={name} style={{position: 'absolute', inset: 0}} />;
+};
+
+/**
+ * One graphic the person can grab on the preview: a word, an icon, an image, a card, the captions. Its own tweak is
+ * saved under its id (tweaks["word-nobody"]): moved, resized, recoloured (text), sent in front of / behind the
+ * speaker, or hidden — and the final render reads the same file. Wrap each thing separately, so one moves alone;
+ * never wrap the speaker, the room or a full-screen card that hides a cut.
+ *   <Part id="word-nobody"><Giant …>Nobody</Giant></Part>
+ */
+export const Part: React.FC<{id: string; children: React.ReactNode}> = ({id, children}) => {
+  const all = useContext(All).tweaks;
+  const t = all[id] ?? {};
+  const {slots} = useContext(Slots);
+  // its own swaps first, then the whole video's (a graphic moved out by a portal is outside the root's pass)
+  const own = t.recolor && Object.keys(t.recolor).length ? t.recolor : null;
+  const swap = own || t.layer ? {...(all[ALL]?.recolor ?? {}), ...(own ?? {})} : undefined;
+  const order = own ? {...own, ...Object.fromEntries(Object.entries(all[ALL]?.recolor ?? {}).filter(([k]) => !(k in own)))} : swap;
+  const ref = useRecolor(order, false);
+  const placed = t.scale || t.dy || t.dx;
+  // display: contents with nothing applied — the layout is exactly as built. Always the same <div>, so a drag never
+  // rebuilds what is inside it.
+  const style: React.CSSProperties = placed
+    ? {position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', transform: `translate(${t.dx ?? 0}px, ${t.dy ?? 0}px) scale(${t.scale ?? 1})`, transformOrigin: TWEAK_ORIGIN}
+    : {display: 'contents'};
+  if (t.hide) style.visibility = 'hidden';
+  const el = (
+    <div ref={ref} data-lp-key={id} data-lp-recolor={order ? '' : undefined} style={style}>
+      {t.color ? <style>{`[data-lp-key="${id}"], [data-lp-key="${id}"] * { color: ${t.color} !important; }`}</style> : null}
+      {children}
+    </div>
+  );
+  const to = t.layer ? slots[t.layer] : null;
+  return to ? createPortal(el, to) : el;
+};
+
+/** The captions (or any layer through the whole video) — the same as a Part. */
+export const Movable = Part;
+
 /**
  * Applies the current beat's size, position and timing to what is inside it. `move={false}` only hands the
  * tweak down (see the rules above).
@@ -81,9 +166,26 @@ export const Tweaked: React.FC<{move?: boolean; children: React.ReactNode}> = ({
     }
     follow = src !== null && src0 !== null ? followTransform(track, src, src0) : null;
   }
+  // data-lp-beat lets the preview find which beat's graphics are under the pointer, so they can be dragged on the
+  // video. With nothing to apply it is display: contents — no box, so the layout is exactly as built. Both are the
+  // same <div>, so starting a drag never rebuilds what is inside it (the preview's selection would lose it).
+  const beat = ctx.beatAt(f);
   const placed = (
     <Here.Provider value={t}>
-      {move && (t.scale || t.dy) ? <AbsoluteFill style={{transform: `translateY(${t.dy ?? 0}px) scale(${t.scale ?? 1})`, transformOrigin: '50% 55%'}}>{children}</AbsoluteFill> : children}
+      {move ? (
+        <div
+          data-lp-beat={beat}
+          style={
+            t.scale || t.dy || t.dx
+              ? {position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', transform: `translate(${t.dx ?? 0}px, ${t.dy ?? 0}px) scale(${t.scale ?? 1})`, transformOrigin: TWEAK_ORIGIN}
+              : {display: 'contents'}
+          }
+        >
+          {children}
+        </div>
+      ) : (
+        children
+      )}
     </Here.Provider>
   );
   const inner = follow ? <AbsoluteFill style={follow}>{placed}</AbsoluteFill> : placed;

package/template/src/plan/entry.tsx

@@ -0,0 +1,66 @@
+/**
+ * The motion sheet, drawn by Remotion itself so it renders the same on every machine (no browser or font
+ * setup to depend on). scripts/plan-sheet.mjs bundles this with the stills folder as its public dir and
+ * renders one still of it.
+ *
+ * Props: {title, subtitle, tiles: [{file, n, time, frame, says?, what?, beat?}]}
+ */
+import React from 'react';
+import {Composition, Img, registerRoot, staticFile} from 'remotion';
+
+type Tile = {file: string; n: number; time: string; frame: number; says?: string; what?: string; beat?: string};
+type Props = {title: string; subtitle: string; tiles: Tile[]; vertical: boolean};
+
+const COLS = 4;
+const W = 2000;
+const PAD = 40;
+const GAP = 22;
+const TILE_W = (W - PAD * 2 - GAP * (COLS - 1)) / COLS;
+const tileImgH = (vertical: boolean) => (vertical ? (TILE_W * 16) / 9 : (TILE_W * 9) / 16);
+const LABEL_H = 170;
+const HEAD_H = 140;
+
+const Sheet: React.FC<Props> = ({title, subtitle, tiles, vertical}) => (
+  <div style={{width: W, background: '#121210', color: '#fff', fontFamily: '-apple-system, "Segoe UI", Helvetica, Arial, sans-serif', minHeight: '100%'}}>
+    <div style={{padding: `34px ${PAD}px 0`, height: HEAD_H, boxSizing: 'border-box'}}>
+      <div style={{fontSize: 40, fontWeight: 800}}>
+        {title} <span style={{color: 'your accent'}}>— motion sheet</span>
+      </div>
+      <div style={{fontSize: 20, color: '#b9b8ad', marginTop: 8}}>{subtitle}</div>
+    </div>
+    <div style={{display: 'grid', gridTemplateColumns: `repeat(${COLS}, ${TILE_W}px)`, gap: GAP, padding: `0 ${PAD}px ${PAD}px`}}>
+      {tiles.map((t) => (
+        <div key={t.n} style={{background: '#1d1d1a', borderRadius: 16, overflow: 'hidden'}}>
+          <Img src={staticFile(t.file)} style={{display: 'block', width: TILE_W, height: tileImgH(vertical), objectFit: 'cover'}} />
+          <div style={{display: 'flex', gap: 14, padding: '14px 16px 18px', height: LABEL_H, boxSizing: 'border-box'}}>
+            <div style={{flex: 'none', width: 44, height: 44, borderRadius: 999, background: 'your accent', color: '#121210', fontWeight: 800, fontSize: 22, display: 'flex', alignItems: 'center', justifyContent: 'center'}}>{t.n}</div>
+            <div style={{minWidth: 0}}>
+              <div style={{fontSize: 15, color: '#9a9989', fontWeight: 600}}>
+                {t.time} · frame {t.frame}
+              </div>
+              {t.says ? <div style={{fontSize: 18, fontWeight: 800, margin: '3px 0 4px'}}>{t.says}</div> : null}
+              {t.what ? <div style={{fontSize: 16, color: '#d9d8cf', lineHeight: 1.35}}>{t.what}</div> : null}
+              {t.beat ? <div style={{marginTop: 8, display: 'inline-block', fontSize: 13, fontWeight: 700, color: '#121210', background: '#e4fc9e', borderRadius: 999, padding: '3px 10px'}}>{t.beat}</div> : null}
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  </div>
+);
+
+registerRoot(() => (
+  <Composition
+    id="PlanSheet"
+    component={Sheet}
+    fps={30}
+    durationInFrames={1}
+    width={W}
+    height={1000}
+    defaultProps={{title: '', subtitle: '', tiles: [], vertical: true}}
+    calculateMetadata={({props}) => {
+      const rows = Math.ceil(props.tiles.length / COLS);
+      return {height: Math.ceil(HEAD_H + rows * (tileImgH(props.vertical) + LABEL_H) + (rows - 1) * GAP + PAD)};
+    }}
+  />
+));

package/template/src/videos/whats-new/WhatsNewEdit.tsx

@@ -0,0 +1,177 @@
+import React from 'react';
+import {AbsoluteFill, useCurrentFrame} from 'remotion';
+import {Captions} from '../../components/Captions';
+import {HeadPin} from '../../components/HeadPin';
+import {DataLine} from '../../components/DataLine';
+import {MorphState} from '../../components/MorphState';
+import {TypeAhead} from '../../components/TypeAhead';
+import {EASE} from '../../design/motion';
+import {COLOR, FONT, WEIGHT} from '../../design/tokens';
+import {progress} from '../../lib/animate';
+import {sampleTrack, type TrackFile} from '../../lib/track';
+import {Movable, TweaksProvider, Tweaked, type Tweaks} from '../../lib/tweaks';
+import {BEATS, FRAMES, WORDS} from './beats';
+import headTrack from './head-track.json';
+import SAVED_TWEAKS from './tweaks.json';
+
+/**
+ * whats-new — the demo every studio carries: 25 seconds, one new effect per beat, each named by a small
+ * label. It opens in the live preview after an update so the person SEES what arrived and can try the
+ * buttons on something that is not their own work.
+ *
+ * NO REAL PERSON. No footage and no voice ship — only the words (as captions) and the motion of a head
+ * recorded once (head-track.json: positions, nothing else). A plain stand-in silhouette rides that path,
+ * so motion tracking and "Follow head" have something to follow. Colours and type are the studio's own
+ * tokens, so it appears in the customer's brand.
+ *
+ * 1280×720, the size the track was recorded at, so its pixels are the composition's pixels.
+ */
+export {FRAMES};
+export const WIDTH = 1280;
+export const HEIGHT = 720;
+const TRACK = headTrack as TrackFile;
+/** One unbroken clip: composition frame = source frame. */
+export const toSource = (f: number) => (f >= 0 && f < FRAMES ? f : null);
+
+const W = (i: number) => WORDS[i].f;
+const SHADOW = '0 2px 18px rgba(0,0,0,0.45)';
+
+/** The stand-in: a soft head-and-shoulders shape on the recorded head path (the track sits at the hairline). */
+const StandIn: React.FC = () => {
+  const f = useCurrentFrame();
+  const p = sampleTrack(TRACK, f);
+  if (!p) return null;
+  const fill = 'rgba(255,255,255,0.10)';
+  return (
+    <div style={{position: 'absolute', left: p.x, top: p.y, transform: `translate(-50%, 0) scale(${p.s}) rotate(${p.r}deg)`, transformOrigin: '50% 140px'}}>
+      <div style={{position: 'absolute', left: -125, top: -10, width: 250, height: 310, borderRadius: '50% 50% 46% 46%', background: fill}} />
+      <div style={{position: 'absolute', left: -330, top: 330, width: 660, height: 420, borderRadius: '300px 300px 0 0', background: fill}} />
+    </div>
+  );
+};
+
+/** In over 8 frames at `from`, out over 6 before `to`. */
+const useInOut = (from: number, to: number) => {
+  const f = useCurrentFrame();
+  if (f < from || f >= to) return 0;
+  return Math.min(progress(f, from, 8, EASE.out), 1 - progress(f, to - 6, 6, EASE.in));
+};
+
+/** The effect's name, top left, for the length of its beat. */
+const Label: React.FC<{text: string; from: number; to: number}> = ({text, from, to}) => {
+  const o = useInOut(from, to);
+  if (!o) return null;
+  return (
+    <div style={{position: 'absolute', left: 48, top: 40, opacity: o, transform: `translateY(${(1 - o) * -10}px)`, display: 'flex', alignItems: 'center', gap: 10, fontFamily: FONT.sans}}>
+      <span style={{background: COLOR.accent, color: COLOR.onAccent, fontSize: 15, fontWeight: WEIGHT.bold, letterSpacing: '0.08em', padding: '5px 10px', borderRadius: 999}}>NEW</span>
+      <span style={{color: COLOR.fgOnDark, fontSize: 24, fontWeight: WEIGHT.semibold, textShadow: SHADOW}}>{text}</span>
+    </div>
+  );
+};
+
+/** Beat 4: the jobs, landing one by one as they are named. */
+const JOBS: [string, number][] = [
+  ['Cut the gaps', W(41)],
+  ['Add captions', W(44)],
+  ['Bring in b-roll', W(46)],
+  ['Zooms', W(49)],
+  ['Motion graphics', W(53)],
+];
+const Jobs: React.FC<{to: number}> = ({to}) => {
+  const f = useCurrentFrame();
+  const out = 1 - progress(f, to - 6, 6, EASE.in);
+  if (f >= to || f < JOBS[0][1] - 2) return null;
+  return (
+    <div style={{position: 'absolute', left: 930, top: 170, display: 'flex', flexDirection: 'column', gap: 18, fontFamily: FONT.sans, opacity: out}}>
+      {JOBS.map(([text, at]) => {
+        const p = progress(f, at - 2, 9, EASE.overshoot);
+        if (p <= 0) return null;
+        return (
+          <div key={text} style={{display: 'flex', alignItems: 'center', gap: 14, opacity: Math.min(1, p * 1.6), transform: `translateX(${(1 - Math.min(1, p)) * 40}px)`}}>
+            <span style={{width: 14, height: 14, borderRadius: 999, background: COLOR.accent, boxShadow: SHADOW}} />
+            <span style={{color: COLOR.fgOnDark, fontSize: 34, fontWeight: WEIGHT.bold, textShadow: SHADOW}}>{text}</span>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+/** A slow push-in on "zooms", easing back out before the next beat. */
+const zoomAt = (f: number) => {
+  const inP = progress(f, W(52) - 4, 18, EASE.inOut);
+  const outP = progress(f, W(56) - 16, 14, EASE.inOut);
+  return 1 + 0.07 * inP * (1 - outP);
+};
+
+export const WhatsNewEdit: React.FC<{tweaks?: Tweaks}> = ({tweaks = SAVED_TWEAKS as Tweaks}) => {
+  const f = useCurrentFrame();
+  const [hook, simple, , list, morph, data] = BEATS;
+  const words = React.useMemo(() => WORDS.map((w) => ({text: w.text, start: w.f / 30, end: w.t / 30, paragraph: 0, matched: true})), []);
+  return (
+    <TweaksProvider tweaks={tweaks} beatStarts={BEATS.map((b) => b.fromF)} track={TRACK} toSource={toSource}>
+      <AbsoluteFill style={{background: COLOR.surfaceDark}}>
+        <AbsoluteFill style={{transform: `scale(${zoomAt(f)})`, transformOrigin: '50% 40%', background: 'radial-gradient(ellipse at 50% 30%, rgba(255,255,255,0.07), transparent 65%)'}}>
+          <StandIn />
+        </AbsoluteFill>
+
+        <Tweaked>
+          {BEATS.map((b) => (
+            <Label key={b.name} text={b.name} from={b.fromF} to={b.toF} />
+          ))}
+
+          {/* 1 · Motion tracking: the tag is pinned to the head. */}
+          <HeadPin track={TRACK} toSource={toSource} from={W(2)} to={hook.toF} dx={350} dy={90}>
+            <div style={{fontFamily: FONT.sans, color: COLOR.onAccent, background: COLOR.accent, fontSize: 28, fontWeight: WEIGHT.bold, padding: '8px 18px', borderRadius: 999, boxShadow: SHADOW, whiteSpace: 'nowrap'}}>
+              ← this follows your head
+            </div>
+          </HeadPin>
+
+          {/* 2 · Type-ahead */}
+          {f >= simple.fromF && f < simple.toF ? (
+            <div style={{position: 'absolute', left: 60, top: 300, opacity: 1 - progress(f, simple.toF - 6, 6, EASE.in)}}>
+              <TypeAhead text="The idea is pretty simple." at={W(16)} speed={1.1} colour={COLOR.onAccent} ghost="rgba(0,0,0,0.28)" background={COLOR.accent} fontSize={34} fontFamily={FONT.sans} fontWeight={WEIGHT.bold} />
+            </div>
+          ) : null}
+
+          {/* 4 · The list that builds */}
+          <Jobs to={list.toF} />
+
+          {/* 5 · Morph: the same pill relabels itself */}
+          {f >= W(59) - 4 && f < morph.toF ? (
+            <div style={{position: 'absolute', left: 70, top: 300, opacity: Math.min(progress(f, W(59) - 4, 8, EASE.out), 1 - progress(f, morph.toF - 6, 6, EASE.in))}}>
+              <MorphState
+                at={W(66)}
+                from={{width: 210, height: 64, background: 'rgba(255,255,255,0.92)', colour: '#111', children: <span style={{fontFamily: FONT.sans, fontSize: 28, fontWeight: WEIGHT.bold}}>Raw clip</span>}}
+                to={{width: 300, height: 64, background: COLOR.accent, colour: COLOR.onAccent, children: <span style={{fontFamily: FONT.sans, fontSize: 28, fontWeight: WEIGHT.bold}}>Ready to post ✓</span>}}
+              />
+            </div>
+          ) : null}
+
+          {/* 6 · Live data line: time spent editing, dropping on "saves" */}
+          {f >= data.fromF ? (
+            <div style={{position: 'absolute', left: 900, top: 190, fontFamily: FONT.sans, opacity: progress(f, data.fromF, 8, EASE.out)}}>
+              <div style={{color: COLOR.fgOnDark, fontSize: 24, fontWeight: WEIGHT.semibold, textShadow: SHADOW, marginBottom: 10}}>Hours spent editing</div>
+              <DataLine
+                from={[0.85, 0.8, 0.88, 0.78, 0.84, 0.8]}
+                to={[0.85, 0.62, 0.44, 0.3, 0.18, 0.1]}
+                drawAt={data.fromF + 2}
+                drawFrames={14}
+                at={W(70)}
+                width={320}
+                height={150}
+                colour={COLOR.fgOnDark}
+                toColour={COLOR.accent}
+              />
+            </div>
+          ) : null}
+        </Tweaked>
+
+        {/* 3 · Captions, word by word, all the way through */}
+        <Movable id="captions">
+          <Captions words={words} placement={() => ({x: 240, y: 610, width: 800, align: 'center', size: 34})} />
+        </Movable>
+      </AbsoluteFill>
+    </TweaksProvider>
+  );
+};

package/template/src/videos/whats-new/beats.ts

@@ -0,0 +1,44 @@
+/**
+ * whats-new — the short demo every studio carries, so the person can see the newest effects working on a
+ * short sample and try the live preview's buttons on it before they edit anything of their own.
+ *
+ * Each beat shows one effect and names it in a small label, so nobody needs the vocabulary to follow.
+ * A beat runs from its first word to the next beat's first word.
+ */
+import data from './words.json';
+
+export const WORDS = data.words as {text: string; f: number; t: number}[];
+export const FRAMES = data.frames;
+
+/** [first word, name, what is on screen (and the effect it shows)] */
+const PLAN: [number, string, string][] = [
+  [0, 'Motion tracking', 'A label rides with the head — moves, scales and tilts with it'],
+  [15, 'Type-ahead', 'The sentence types into a pill that grows with it, the rest already faint'],
+  [21, 'Word-by-word captions', 'Captions sharpen in word by word, on the spoken timing'],
+  [32, 'A list that builds', 'Each job lands as it is named; a slow zoom on "zooms"'],
+  [56, 'Morph', 'One pill turns from "Raw clip" into "Ready to post" — the same object, relabelled'],
+  [68, 'Live data line', 'A line draws on, then drops on "saves"'],
+];
+
+const mmss = (s: number) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(2, '0')}`;
+
+export const BEATS = PLAN.map(([a, name, beat], i) => {
+  const fromF = i === 0 ? 0 : WORDS[a].f;
+  const next = PLAN[i + 1];
+  const toF = next ? WORDS[next[0]].f : FRAMES;
+  const last = next ? next[0] - 1 : WORDS.length - 1;
+  return {
+    name,
+    beat,
+    icons: [] as string[],
+    fromF,
+    toF,
+    from: fromF / 30,
+    to: toF / 30,
+    time: `${mmss(fromF / 30)}–${mmss(toF / 30)}`,
+    says: WORDS.slice(a, last + 1).map((w) => w.text).join(' '),
+  };
+});
+
+export type {Tweak, Tweaks} from '../../lib/tweaks';
+export {TWEAK_LIMITS as LIMITS} from '../../lib/tweaks';