creator-editing-studio 1.3.7 → 1.4.0

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;
 

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>;
+};