creator-editing-studio 1.3.8 → 1.4.1

package/template/src/lib/brand.tsx

@@ -0,0 +1,89 @@
+/**
+ * Brand on the fly: the font and colours of an edit, switchable in the browser editor and applied everywhere
+ * at once.
+ *
+ * Edits and components colour themselves with CSS variables (with the house look as the fallback):
+ *   var(--accent, your accent)   the highlight colour      var(--ink, #0f0f0d)   the dark of cards and scenes
+ *   var(--brand-font, …)     every text (FONT.sans in src/design/tokens.ts already reads it)
+ *   tints of the accent:     color-mix(in srgb, var(--accent, your accent) 30%, transparent)  — see tint()
+ * <LayoutProvider> sets the variables from layout.theme, so nothing in an edit has to know what was picked.
+ * A video with no theme looks exactly as built.
+ */
+import {loadFont as anton} from '@remotion/google-fonts/Anton';
+import {loadFont as archivoBlack} from '@remotion/google-fonts/ArchivoBlack';
+import {loadFont as bebasNeue} from '@remotion/google-fonts/BebasNeue';
+import {loadFont as dmSerifDisplay} from '@remotion/google-fonts/DMSerifDisplay';
+import {loadFont as instrumentSerif} from '@remotion/google-fonts/InstrumentSerif';
+import {loadFont as inter} from '@remotion/google-fonts/Inter';
+import {loadFont as manrope} from '@remotion/google-fonts/Manrope';
+import {loadFont as montserrat} from '@remotion/google-fonts/Montserrat';
+import {loadFont as oswald} from '@remotion/google-fonts/Oswald';
+import {loadFont as outfit} from '@remotion/google-fonts/Outfit';
+import {loadFont as playfairDisplay} from '@remotion/google-fonts/PlayfairDisplay';
+import {loadFont as poppins} from '@remotion/google-fonts/Poppins';
+import {loadFont as sora} from '@remotion/google-fonts/Sora';
+import {loadFont as spaceGrotesk} from '@remotion/google-fonts/SpaceGrotesk';
+import {loadFont as syne} from '@remotion/google-fonts/Syne';
+
+export type BrandTheme = {font?: string; accent?: string; ink?: string};
+
+export const HOUSE = {accent: 'your accent', ink: '#0f0f0d', font: 'your display typeface'} as const;
+
+/** The fonts on offer: name → how to load it. 'your display typeface' is the house font (loaded by tokens.ts). */
+type Loader = (style?: 'normal', opts?: {weights?: string[]; subsets?: string[]}) => {fontFamily: string};
+const GOOGLE: Record<string, {load: Loader; weights: string[]; kind: string}> = {
+  Inter: {load: inter as Loader, weights: ['400', '600', '700', '800'], kind: 'Clean sans'},
+  Manrope: {load: manrope as Loader, weights: ['400', '600', '700', '800'], kind: 'Clean sans'},
+  Poppins: {load: poppins as Loader, weights: ['400', '600', '700', '800'], kind: 'Friendly sans'},
+  Montserrat: {load: montserrat as Loader, weights: ['400', '600', '700', '800'], kind: 'Bold sans'},
+  Outfit: {load: outfit as Loader, weights: ['400', '600', '700', '800'], kind: 'Modern sans'},
+  Sora: {load: sora as Loader, weights: ['400', '600', '700', '800'], kind: 'Tech sans'},
+  'Space Grotesk': {load: spaceGrotesk as Loader, weights: ['400', '600', '700'], kind: 'Tech sans'},
+  Syne: {load: syne as Loader, weights: ['400', '600', '700', '800'], kind: 'Editorial sans'},
+  'Archivo Black': {load: archivoBlack as Loader, weights: ['400'], kind: 'Heavy'},
+  Anton: {load: anton as Loader, weights: ['400'], kind: 'Tall & loud'},
+  'Bebas Neue': {load: bebasNeue as Loader, weights: ['400'], kind: 'Tall & loud'},
+  Oswald: {load: oswald as Loader, weights: ['400', '600', '700'], kind: 'Tall & loud'},
+  'Playfair Display': {load: playfairDisplay as Loader, weights: ['400', '600', '700', '800'], kind: 'Serif'},
+  'DM Serif Display': {load: dmSerifDisplay as Loader, weights: ['400'], kind: 'Serif'},
+  'Instrument Serif': {load: instrumentSerif as Loader, weights: ['400'], kind: 'Serif'},
+};
+export const BRAND_FONTS: {name: string; kind: string}[] = [{name: 'your display typeface', kind: 'House'}, ...Object.entries(GOOGLE).map(([name, g]) => ({name, kind: g.kind}))];
+
+/** Colour sets that work on talking heads — one tap, or pick your own. */
+export const PALETTES: {name: string; accent: string; ink: string}[] = [
+  {name: 'House accent', accent: 'your accent', ink: '#0f0f0d'},
+  {name: 'Signal orange', accent: '#ff7a1a', ink: '#120c08'},
+  {name: 'Electric blue', accent: '#4d8dff', ink: '#0a0e18'},
+  {name: 'Hot pink', accent: '#ff4fa3', ink: '#140a10'},
+  {name: 'Gold', accent: '#f2c14e', ink: '#12100a'},
+  {name: 'Mint', accent: '#5ff2c1', ink: '#08120f'},
+  {name: 'Red', accent: '#ff3b3b', ink: '#120808'},
+  {name: 'Clean white', accent: '#ffffff', ink: '#111111'},
+];
+
+const loaded = new Map<string, string>();
+/** The CSS family for a font name — loading it the first time it's asked for. */
+export function familyFor(name?: string): string | null {
+  if (!name || name === HOUSE.font) return null;
+  const g = GOOGLE[name];
+  if (!g) return null;
+  if (!loaded.has(name)) loaded.set(name, g.load('normal', {weights: g.weights, subsets: ['latin']}).fontFamily);
+  return loaded.get(name)!;
+}
+
+/** The CSS variables for a theme — put them on the edit's outermost element. */
+export function themeVars(t?: BrandTheme): React.CSSProperties {
+  if (!t) return {};
+  const vars: Record<string, string> = {};
+  if (t.accent) vars['--accent'] = t.accent;
+  if (t.ink) vars['--ink'] = t.ink;
+  const family = familyFor(t.font);
+  if (family) vars['--brand-font'] = `"${family}", -apple-system, Arial, sans-serif`;
+  return vars as React.CSSProperties;
+}
+
+/** The accent at some strength, as a CSS colour: tint(0.3) → 30% accent over transparent. */
+export const tint = (amount: number, base = 'var(--accent, your accent)') => `color-mix(in srgb, ${base} ${Math.round(amount * 1000) / 10}%, transparent)`;
+export const ACCENT = 'var(--accent, your accent)';
+export const INK = 'var(--ink, #0f0f0d)';

package/template/src/lib/layout.tsx

@@ -0,0 +1,113 @@
+/**
+ * The browser editor's layer: things on screen the person can grab, and effects they can switch.
+ *
+ * An edit names its movable pieces and its effect slots; the person drags, resizes, retimes and switches in
+ * the browser editor (editor/), which saves the result to the video's layout.json; the render reads the same
+ * file. No layout = the edit exactly as built.
+ *
+ *   <LayoutProvider layout={layout}>
+ *     <Movable id="hook-words" label="Hook words"><HookWords /></Movable>
+ *     {useEffectChoice('opener', 'FlashBloom') === 'FlashBloom' ? <FlashBloom …/> : null}
+ *   </LayoutProvider>
+ *
+ * The edit also exports EDITOR = {elements, slots} so the editor can list them (see a preview.tsx that exports it).
+ * Rule from <Tweaked>: never put a full-screen card that hides a join inside a Movable — move what's ON it.
+ */
+import React, {createContext, useContext} from 'react';
+import {AbsoluteFill, Img, OffthreadVideo, Sequence, interpolate, staticFile, useCurrentFrame} from 'remotion';
+import {themeVars, type BrandTheme} from './brand';
+
+/**
+ * One piece's adjustments: x/y in px of the 1080×1920 frame, scale 0.3–3, shift in frames (+ later), hide,
+ * and start/end — composition frames outside which it isn't shown (trimmed on the editor's timeline).
+ */
+export type Placement = {x?: number; y?: number; scale?: number; shift?: number; hide?: boolean; start?: number; end?: number};
+/** A clip or picture the person dropped on the editor's B-roll row. src is a staticFile path. */
+export type Broll = {id: string; src: string; kind: 'video' | 'image'; from: number; to: number; offset?: number; mode?: 'full' | 'card'};
+export type Layout = {elements?: Record<string, Placement>; effects?: Record<string, string>; broll?: Broll[]; theme?: BrandTheme};
+
+/** What the editor lists: the pieces it can move and the effect slots it can switch. */
+export type EditorSpec = {
+  elements: {id: string; label: string; from: number; to: number}[];
+  slots: {id: string; label: string; at: number; options: string[]; default: string}[];
+};
+
+const Ctx = createContext<Layout>({});
+
+/** Also applies the picked font and colours (layout.theme) to everything inside — see src/lib/brand.tsx. */
+export const LayoutProvider: React.FC<{layout?: Layout; children: React.ReactNode}> = ({layout = {}, children}) => (
+  <Ctx.Provider value={layout}>{layout.theme ? <AbsoluteFill style={themeVars(layout.theme)}>{children}</AbsoluteFill> : children}</Ctx.Provider>
+);
+
+/** The effect chosen for a slot, or its default. */
+export const useEffectChoice = (slot: string, fallback: string) => useContext(Ctx).effects?.[slot] ?? fallback;
+
+/** The placement of one piece (for pieces that must apply it themselves, e.g. a split layer). */
+export const usePlacement = (id: string): Placement => useContext(Ctx).elements?.[id] ?? {};
+
+/**
+ * A piece the person can grab. Moves, scales (around the middle of the frame's upper half, where text sits)
+ * and retimes what's inside. data-movable lets the editor find it on screen.
+ */
+export const Movable: React.FC<{id: string; label?: string; origin?: string; children: React.ReactNode}> = ({id, origin = '50% 40%', children}) => {
+  const p = usePlacement(id);
+  const f = useCurrentFrame();
+  if (p.hide) return null;
+  if (p.start !== undefined && f < p.start) return null;
+  if (p.end !== undefined && f >= p.end) return null;
+  // a trimmed edge fades over 4 frames instead of popping
+  const fade = Math.min(p.start !== undefined ? interpolate(f, [p.start, p.start + 4], [0, 1], {extrapolateRight: 'clamp'}) : 1, p.end !== undefined ? interpolate(f, [p.end - 4, p.end], [1, 0], {extrapolateLeft: 'clamp'}) : 1);
+  const moved = p.x || p.y || (p.scale && p.scale !== 1);
+  const body = (
+    <AbsoluteFill data-movable={id} style={{pointerEvents: 'none', opacity: fade < 1 ? fade : undefined, transform: moved ? `translate(${p.x ?? 0}px, ${p.y ?? 0}px) scale(${p.scale ?? 1})` : undefined, transformOrigin: origin}}>
+      {children}
+    </AbsoluteFill>
+  );
+  return p.shift ? (
+    <Sequence from={p.shift} layout="none">
+      {body}
+    </Sequence>
+  ) : (
+    body
+  );
+};
+
+/**
+ * The B-roll the person dropped on the editor's timeline: full screen over the talking head, or a card
+ * (draggable/resizable like any piece, id "broll:<id>"). Muted — the voice carries on underneath.
+ * Put it above the footage and below the captions:  <BrollLayer />
+ */
+export const BrollLayer: React.FC = () => {
+  const list = useContext(Ctx).broll ?? [];
+  return (
+    <>
+      {list.map((b) => (
+        <Sequence key={b.id} from={b.from} durationInFrames={Math.max(1, b.to - b.from)} premountFor={45}>
+          <Movable id={`broll:${b.id}`} origin="50% 50%">
+            <BrollClip b={b} />
+          </Movable>
+        </Sequence>
+      ))}
+    </>
+  );
+};
+
+const BrollClip: React.FC<{b: Broll}> = ({b}) => {
+  const f = useCurrentFrame(); // local to the clip
+  const len = b.to - b.from;
+  const fade = Math.min(interpolate(f, [0, 5], [0, 1], {extrapolateRight: 'clamp'}), interpolate(f, [len - 5, len], [1, 0], {extrapolateLeft: 'clamp'}));
+  const media =
+    b.kind === 'video' ? (
+      <OffthreadVideo src={staticFile(b.src)} startFrom={b.offset ?? 0} muted style={{width: '100%', height: '100%', objectFit: 'cover'}} />
+    ) : (
+      <Img src={staticFile(b.src)} style={{width: '100%', height: '100%', objectFit: 'cover'}} />
+    );
+  if (b.mode === 'card')
+    return (
+      <AbsoluteFill style={{alignItems: 'center', justifyContent: 'center', opacity: fade}}>
+        <div style={{width: 820, height: 1000, borderRadius: 40, overflow: 'hidden', boxShadow: '0 40px 90px rgba(0,0,0,0.55)', border: '3px solid rgba(255,255,255,0.85)', transform: `scale(${0.94 + 0.06 * fade})`}}>{media}</div>
+      </AbsoluteFill>
+    );
+  // full screen: a slight push so stills don't sit dead
+  return <AbsoluteFill style={{opacity: fade, transform: `scale(${1.04 + 0.04 * (f / Math.max(1, len))})`}}>{media}</AbsoluteFill>;
+};

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

@@ -9,7 +9,7 @@ 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 {TweaksProvider, Tweaked, type Tweaks} from '../../lib/tweaks';
+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';
@@ -168,7 +168,9 @@ export const WhatsNewEdit: React.FC<{tweaks?: Tweaks}> = ({tweaks = SAVED_TWEAKS
         </Tweaked>
 
         {/* 3 · Captions, word by word, all the way through */}
-        <Captions words={words} placement={() => ({x: 240, y: 610, width: 800, align: 'center', size: 34})} />
+        <Movable id="captions">
+          <Captions words={words} placement={() => ({x: 240, y: 610, width: 800, align: 'center', size: 34})} />
+        </Movable>
       </AbsoluteFill>
     </TweaksProvider>
   );