@appinternalleads/ui 0.4.0 → 0.4.1

package/src/motion/promo/easing.ts

@@ -0,0 +1,36 @@
+import { springAt } from '../replication2/easing';
+import type { EasingName } from './controls';
+
+/**
+ * **The easing registry** — every curve the config can name. A curve is looked up here by name, never
+ * carried in the config as a function. Springs are Remotion-style damped springs in closed form, so
+ * any frame can be sampled on its own.
+ */
+const pow = (k: number) => ({
+  in: (t: number) => t ** k,
+  out: (t: number) => 1 - (1 - t) ** k,
+  inOut: (t: number) => (t < 0.5 ? 2 ** (k - 1) * t ** k : 1 - (-2 * t + 2) ** k / 2),
+});
+const quad = pow(2), cubic = pow(3), quart = pow(4);
+const SPRINGS = {
+  springSoft: { mass: 1, damping: 14, stiffness: 90, velocity: 0 },
+  springSnappy: { mass: 0.8, damping: 16, stiffness: 220, velocity: 0 },
+};
+
+const NAMED: Record<EasingName, (t: number, durationFrames: number) => number> = {
+  linear: (t) => t,
+  easeIn: quad.in, easeOut: quad.out, easeInOut: (t) => 0.5 - Math.cos(Math.PI * t) / 2,
+  easeInCubic: cubic.in, easeOutCubic: cubic.out, easeInOutCubic: cubic.inOut,
+  easeOutQuart: quart.out, easeInOutQuart: quart.inOut,
+  easeOutExpo: (t) => (t >= 1 ? 1 : 1 - 2 ** (-10 * t)),
+  easeOutBack: (t) => 1 + 2.70158 * (t - 1) ** 3 + 1.70158 * (t - 1) ** 2,
+  springSoft: (t, d) => (t >= 1 ? 1 : springAt((t * d) / 60, SPRINGS.springSoft)),
+  springSnappy: (t, d) => (t >= 1 ? 1 : springAt((t * d) / 60, SPRINGS.springSnappy)),
+};
+
+const clamp01 = (t: number) => (t < 0 ? 0 : t > 1 ? 1 : t);
+
+/** Progress `p` (0‥1, clamped) through a part lasting `durationFrames` (60 fps motion frames), shaped by `name`. */
+export function ease(name: string, p: number, durationFrames = 60): number {
+  return (NAMED[name as EasingName] ?? NAMED.linear)(clamp01(p), durationFrames);
+}

package/src/motion/promo/engine.ts

@@ -0,0 +1,587 @@
+import { getPath, sceneConfig, type PromoConfig } from './config';
+import { CONTROLS, LAYOUT_FOR, LISTS, PHASES, type AspectRatio, type PhaseId } from './controls';
+import { ease } from './easing';
+
+/**
+ * **The promo engine — a pure function from (config, frame, size) to everything on screen.** No
+ * clock, no unseeded randomness, no DOM: the same config, seeds and frame always give the same state, so
+ * Remotion can render frames in any order and in parallel, and the live player and the video agree
+ * frame for frame. The renderer (`PromoFrame`) only draws what this returns.
+ *
+ * Frames here are 60 fps motion frames; `outputFrameToMotion` maps an output frame (at canvas.fps)
+ * onto them. Geometry is in pixels of the render size, derived from normalized layout values and
+ * design units (1 du = 1/1080 of the short side), so the same config reflows for every size.
+ */
+export const MOTION_FPS = 60;
+
+type Obj = Record<string, unknown>;
+const clamp = (v: number, lo = 0, hi = 1) => (v < lo ? lo : v > hi ? hi : v);
+const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
+const TAU = Math.PI * 2;
+
+/** Typed reads of the config. */
+function reader(cfg: PromoConfig) {
+  return {
+    n: (p: string) => getPath(cfg, p) as number,
+    s: (p: string) => getPath(cfg, p) as string,
+    b: (p: string) => getPath(cfg, p) as boolean,
+    list: <T = Obj>(p: string) => (getPath(cfg, p) as T[]) ?? [],
+  };
+}
+
+export function mixHex(a: string, b: string, t: number) {
+  const pa = parseInt(a.slice(1), 16), pb = parseInt(b.slice(1), 16);
+  const ch = (s: number) => Math.round(lerp((pa >> s) & 255, (pb >> s) & 255, clamp(t)));
+  return `#${((ch(16) << 16) | (ch(8) << 8) | ch(0)).toString(16).padStart(6, '0')}`;
+}
+/** A config colour with an alpha, as CSS. */
+export function rgba(hex: string, alpha: number) {
+  const v = parseInt(hex.slice(1), 16);
+  // eslint-disable-next-line comppack/no-raw-colour -- builds a CSS colour from a config value; no colour literal
+  return `rgba(${(v >> 16) & 255}, ${(v >> 8) & 255}, ${v & 255}, ${Math.round(clamp(alpha) * 1000) / 1000})`;
+}
+/** Relative luminance (WCAG) of a #rrggbb colour, 0‥1. */
+export function luminance(hex: string) {
+  const v = parseInt(hex.slice(1), 16);
+  const lin = (c: number) => { const s = c / 255; return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4; };
+  return 0.2126 * lin((v >> 16) & 255) + 0.7152 * lin((v >> 8) & 255) + 0.0722 * lin(v & 255);
+}
+
+/** A small, fast, seeded PRNG (mulberry32). */
+export function seeded(seed: number) {
+  let a = seed >>> 0;
+  return () => {
+    a = (a + 0x6d2b79f5) >>> 0;
+    let t = a;
+    t = Math.imul(t ^ (t >>> 15), t | 1);
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+/* ─── time ────────────────────────────────────────────────────────────────────────────────────── */
+export type PhaseSpan = { start: number; end: number; holdEnd: number };
+export type SceneSpan = { index: number; id: string; start: number; end: number };
+export type Timeline = {
+  phases: Record<PhaseId, PhaseSpan>;
+  /** Where the phases end. */
+  timelineEnd: number;
+  scenes: SceneSpan[];
+  /** The motion length of the video (or of one loop). */
+  length: number;
+  loop: boolean;
+};
+
+export function timeline(cfg: PromoConfig): Timeline {
+  const { n, s, b, list } = reader(cfg);
+  const phases = {} as Record<PhaseId, PhaseSpan>;
+  let end = 0;
+  for (const id of PHASES) {
+    const start = Math.max(0, end + n(`timeline.${id}.delayFrames`));
+    const e = start + n(`timeline.${id}.durationFrames`);
+    phases[id] = { start, end: e, holdEnd: e + n(`timeline.${id}.holdFrames`) };
+    end = phases[id].holdEnd;
+  }
+  let t = 0;
+  const scenes = list<{ id: string; durationFrames: number }>('scenes').map((sc, index) => ({ index, id: sc.id, start: t, end: (t += sc.durationFrames) }));
+  const loop = b('loop.enabled');
+  const length = loop
+    ? (scenes.length ? t : n('loop.loopDurationFrames'))
+    : s('canvas.durationMode') === 'fixed' ? (n('canvas.durationFrames') * MOTION_FPS) / n('canvas.fps') : Math.max(end, t);
+  return { phases, timelineEnd: end, scenes, length, loop };
+}
+
+/** Output frames for one play of the video at canvas.fps. */
+export function outputDuration(cfg: PromoConfig): number {
+  const { n, s, b } = reader(cfg);
+  if (!b('loop.enabled') && s('canvas.durationMode') === 'fixed') return n('canvas.durationFrames');
+  return Math.max(1, Math.round((timeline(cfg).length * n('canvas.fps')) / MOTION_FPS));
+}
+export function outputFrameToMotion(cfg: PromoConfig, frame: number): number {
+  return (frame * MOTION_FPS) / (getPath(cfg, 'canvas.fps') as number);
+}
+
+/* ─── scenes: blend two configs over a transition ─────────────────────────────────────────────── */
+function blendLeaf(type: string, a: unknown, b: unknown, t: number) {
+  if (type === 'number' || type === 'integer') return lerp(a as number, b as number, t);
+  if (type === 'color') return mixHex(a as string, b as string, t);
+  return t < 0.5 ? a : b;
+}
+/** Numbers interpolate, colours mix, everything else switches half way. */
+export function blendConfigs(a: PromoConfig, b: PromoConfig, t: number): PromoConfig {
+  if (t <= 0) return a;
+  if (t >= 1) return b;
+  const out = JSON.parse(JSON.stringify(b)) as Obj;
+  const set = (path: string, v: unknown) => {
+    const keys = path.split('.');
+    let cur = out as Obj;
+    for (const k of keys.slice(0, -1)) cur = cur[k] as Obj;
+    cur[keys.at(-1)!] = v;
+  };
+  for (const c of CONTROLS) set(c.path, blendLeaf(c.type, getPath(a, c.path), getPath(b, c.path), t));
+  for (const l of LISTS) {
+    const la = getPath(a, l.path) as unknown[], lb = getPath(b, l.path) as unknown[];
+    if (la.length !== lb.length || (l.item.length === 1 && l.item[0]!.path === '')) continue;
+    set(l.path, lb.map((item, i) => Object.fromEntries(l.item.map((c) => [c.path, blendLeaf(c.type, (la[i] as Obj)[c.path], (item as Obj)[c.path], t)]))));
+  }
+  return out as PromoConfig;
+}
+
+/* ─── layout ──────────────────────────────────────────────────────────────────────────────────── */
+export type Rect = { x: number; y: number; width: number; height: number };
+export type UiLayout = {
+  topBar: number; header: number; content: Rect;
+  greeting?: Rect; greetingLines: number; response?: Rect; hero?: Rect; input?: Rect;
+  cards: Rect[]; fontSize: number;
+};
+export type Layout = {
+  unit: number;
+  text: { x: number; y: number; width: number; align: 'left' | 'center' | 'right'; titleScale: number };
+  slot: Rect;
+  /** The window's centre and unscaled size. */
+  window: { cx: number; cy: number; width: number; height: number };
+  ui: UiLayout;
+  cta: { x: number; y: number };
+  logo: { x: number; y: number };
+};
+
+/** Where everything sits on a canvas of this size, before any motion. */
+export function layout(cfg: PromoConfig, width: number, height: number): Layout {
+  const { n, s } = reader(cfg);
+  const unit = Math.min(width, height) / 1080;
+  const L = `layout.${LAYOUT_FOR[s('canvas.aspectRatio') as AspectRatio]}`;
+  const safe = n('canvas.safeArea') * Math.min(width, height);
+  const slot = { x: 0, y: 0, width: n(`${L}.product.width`) * width, height: n(`${L}.product.height`) * height };
+  slot.x = n(`${L}.product.x`) * width - slot.width / 2;
+  slot.y = n(`${L}.product.y`) * height - slot.height / 2;
+  const win = {
+    cx: slot.x + n('productWindow.x') * slot.width,
+    cy: slot.y + n('productWindow.y') * slot.height,
+    width: slot.width * n('productWindow.width'),
+    height: slot.height * n('productWindow.height'),
+  };
+  const textWidth = Math.min(n(`${L}.text.width`) * width, width - 2 * safe);
+  const align = s(`${L}.text.align`) as 'left' | 'center' | 'right';
+  const tx = clamp(n(`${L}.text.x`) * width, safe + textWidth / 2, width - safe - textWidth / 2);
+  const ctaH = n('typography.ctaSize') * unit * 2.6;
+  return {
+    unit,
+    text: { x: tx, y: Math.max(safe, n(`${L}.text.y`) * height), width: textWidth, align, titleScale: n(`${L}.titleScale`) },
+    slot,
+    window: win,
+    ui: uiLayout(cfg, win.width, win.height, unit, n(`${L}.uiColumns`)),
+    cta: { x: n(`${L}.cta.x`) * width, y: clamp(n(`${L}.cta.y`) * height, safe + ctaH / 2, height - safe - ctaH / 2) },
+    logo: { x: Math.max(safe, n(`${L}.logo.x`) * width), y: Math.max(safe, n(`${L}.logo.y`) * height) },
+  };
+}
+
+/** The product UI inside a window of this size: bars, content area, and each block in it. */
+export function uiLayout(cfg: PromoConfig, W: number, H: number, unit: number, columns: number): UiLayout {
+  const { n, b, s, list } = reader(cfg);
+  const chrome = b('window.showChrome');
+  const topBar = chrome && b('window.showTopBar') ? n('window.topBarHeight') * unit : 0;
+  const header = b('productHeader.showNavigation') ? n('productHeader.height') * unit : 0;
+  const pad = n('productContent.padding') * unit;
+  const fs = n('productContent.fontSize') * unit;
+  const gap = fs * 0.9;
+  const content = { x: pad, y: topBar + header + pad, width: Math.max(0, W - 2 * pad), height: Math.max(0, H - topBar - header - 2 * pad) };
+  let y = content.y;
+  const bottom = content.y + content.height;
+  const out: UiLayout = { topBar, header, content, greetingLines: 0, cards: [], fontSize: fs };
+  if (b('productContent.greeting.enabled') && s('productContent.greeting.text')) {
+    const maxW = content.width * 0.64;
+    const perLine = Math.max(8, Math.floor(maxW / (fs * 0.5)));
+    const len = s('productContent.greeting.text').length;
+    const lines = Math.min(3, Math.ceil(len / perLine));
+    const w = Math.min(maxW, len * fs * 0.5 + fs * 1.8);
+    const h = lines * fs * 1.4 + fs * 1.4;
+    const right = s('productContent.greeting.align') === 'right';
+    out.greeting = { x: right ? content.x + content.width - w : content.x, y, width: w, height: h };
+    out.greetingLines = lines;
+    y += h + gap;
+  }
+  if (b('productContent.response.enabled') && s('productContent.response.text')) {
+    const h = Math.max(fs * 2, fs * 1.4);
+    out.response = { x: content.x, y, width: content.width, height: h };
+    y += h + gap;
+  }
+  let inputH = 0;
+  if (b('productContent.input.enabled')) {
+    inputH = fs * 2.9;
+    out.input = { x: content.x, y: bottom - inputH, width: content.width, height: inputH };
+  }
+  const areaBottom = bottom - (inputH ? inputH + gap : 0);
+  if (b('productContent.hero.enabled')) {
+    const h = Math.max(0, (areaBottom - y) * n('productContent.hero.height'));
+    out.hero = { x: content.x, y, width: content.width, height: h };
+    y += h + gap;
+  }
+  const cards = list<Obj>('productContent.cards');
+  const area = { x: content.x, y, width: content.width, height: Math.max(0, areaBottom - y) };
+  if (s('productContent.cardLayout') === 'free') {
+    out.cards = cards.map((c) => {
+      const w = area.width * (c.width as number), h = area.height * (c.height as number);
+      return { x: area.x + (c.x as number) * area.width - w / 2, y: area.y + (c.y as number) * area.height - h / 2, width: w, height: h };
+    });
+  } else if (cards.length) {
+    const cols = Math.max(1, Math.min(columns, cards.length));
+    const rows = Math.ceil(cards.length / cols);
+    const cg = n('productContent.cardGap') * unit;
+    const cellW = (area.width - cg * (cols - 1)) / cols;
+    const cellH = Math.max(0, Math.min((area.height - cg * (rows - 1)) / rows, cellW * 1.1));
+    out.cards = cards.map((c, i) => {
+      const col = i % cols, row = Math.floor(i / cols);
+      // The last row is centred when it is not full.
+      const inRow = row === rows - 1 ? cards.length - row * cols : cols;
+      const offset = ((cols - inRow) * (cellW + cg)) / 2;
+      const w = cellW * (c.width as number), h = cellH * (c.height as number);
+      const x = area.x + offset + col * (cellW + cg) + (cellW - w) / 2 + (c.x as number) * cellW;
+      const yy = area.y + row * (cellH + cg) + (cellH - h) / 2 + (c.y as number) * cellH;
+      return { x, y: yy, width: w, height: h };
+    });
+  }
+  return out;
+}
+
+/* ─── animation states ────────────────────────────────────────────────────────────────────────── */
+export type Anim = { opacity: number; x: number; y: number; scale: number; rotation: number; blur: number; clip: number };
+const SETTLED: Anim = { opacity: 1, x: 0, y: 0, scale: 1, rotation: 0, blur: 0, clip: 1 };
+export const TEXT_ELEMENTS = ['eyebrow', 'title', 'subtitle', 'cta'] as const;
+export type TextElement = (typeof TEXT_ELEMENTS)[number];
+
+/** One text element (or one word / line of it) at `local` frames after its anchor. */
+export function textAnim(cfg: PromoConfig, el: TextElement, local: number, unit: number, index = 0): Anim {
+  const { n, s, b } = reader(cfg);
+  const p = `textAnimation.${el}`;
+  const endState: Anim = { opacity: n(`${p}.endOpacity`), x: 0, y: n(`${p}.endY`) * unit, scale: n(`${p}.endScale`), rotation: 0, blur: 0, clip: 1 };
+  const mode = s(`${p}.mode`);
+  if (!b(`${p}.enabled`) || mode === 'none') return endState;
+  const dur = n(`${p}.durationFrames`);
+  const start = n(`${p}.delayFrames`) + (s(`${p}.split`) === 'none' ? 0 : index * n(`${p}.staggerFrames`));
+  const e = ease(s(`${p}.easing`), (local - start) / dur, dur);
+  const eo = clamp(e);
+  const op = clamp(lerp(n(`${p}.startOpacity`), n(`${p}.endOpacity`), eo));
+  const y = lerp(n(`${p}.startY`), n(`${p}.endY`), e) * unit;
+  const scale = lerp(n(`${p}.startScale`), n(`${p}.endScale`), e);
+  const rotation = lerp(n(`${p}.rotation`), 0, e);
+  const blur = Math.max(0, lerp(n(`${p}.blur`), 0, eo)) * unit;
+  switch (mode) {
+    case 'fade': return { ...endState, opacity: op };
+    case 'slide': return { ...endState, opacity: op, y, rotation };
+    case 'scale': return { ...endState, opacity: op, scale, rotation, y: lerp(n(`${p}.startY`) * 0.3, n(`${p}.endY`), e) * unit };
+    case 'blur': return { ...endState, opacity: op, y, scale, rotation, blur };
+    case 'reveal': return { ...endState, opacity: n(`${p}.endOpacity`) * (eo > 0 ? 1 : 0), y, rotation, clip: eo };
+    default: return endState;
+  }
+}
+
+/** Split copy into the units a text animation staggers: words, or estimated lines. */
+export function splitText(text: string, split: string, widthPx: number, fontPx: number): string[] {
+  if (!text) return [];
+  const words = text.split(/\s+/).filter(Boolean);
+  if (split === 'words') return words;
+  if (split !== 'lines') return [text];
+  const perLine = Math.max(4, Math.floor(widthPx / (fontPx * 0.55)));
+  const lines: string[] = [];
+  let cur = '';
+  for (const w of words) {
+    if (cur && (cur + ' ' + w).length > perLine) { lines.push(cur); cur = w; } else cur = cur ? `${cur} ${w}` : w;
+  }
+  if (cur) lines.push(cur);
+  return lines;
+}
+
+function enterAnim(kind: string, local: number, dur: number, easingName: string, distance: number, startScale: number, startOpacity: number): Anim {
+  if (kind === 'none') return SETTLED;
+  const e = ease(easingName, local / dur, dur);
+  const eo = clamp(e);
+  const op = clamp(lerp(startOpacity, 1, eo));
+  switch (kind) {
+    case 'fade': return { ...SETTLED, opacity: op };
+    case 'slide-up': return { ...SETTLED, opacity: op, y: lerp(distance, 0, e), scale: lerp(1 - (1 - startScale) * 0.3, 1, e) };
+    case 'slide-left': return { ...SETTLED, opacity: op, x: lerp(distance, 0, e) };
+    case 'scale': case 'pop': return { ...SETTLED, opacity: op, scale: lerp(startScale, 1, e) };
+    default: return { ...SETTLED, opacity: op };
+  }
+}
+
+/* ─── the frame ───────────────────────────────────────────────────────────────────────────────── */
+export type TextBlock = { text: string; split: string; units: string[]; anims: Anim[] };
+export type FrameState = {
+  frame: number;
+  length: number;
+  phase: PhaseId | 'done';
+  scene: { index: number; id: string; transition: number };
+  size: { width: number; height: number; unit: number };
+  /** The config for this frame: the current scene's, blended with the previous scene's during a transition. */
+  cfg: PromoConfig;
+  layout: Layout;
+  camera: { scale: number; x: number; y: number; rotation: number; tilt: number; perspective: number; driftX: number; driftY: number };
+  exit: { opacity: number; toBase: number };
+  lightsIn: number;
+  lights: { x: number; y: number; radius: number; color: string; opacity: number; blur: number }[];
+  particles: { x: number; y: number; size: number; opacity: number }[];
+  logo: Anim;
+  text: { eyebrow: TextBlock; title: TextBlock; subtitle: TextBlock; cta: Anim; leaving?: { eyebrow: string; title: string; subtitle: string; anim: Anim } };
+  product: { visible: boolean; x: number; y: number; scale: number; rotation: number; tilt: number; tiltY: number; opacity: number };
+  badge: Anim;
+  ui: { greeting: Anim; response: Anim; hero: Anim; typed: string; caret: boolean; cards: Anim[] };
+  floating: (Anim & { x: number; y: number })[];
+  bloom: { product: number; title: number };
+};
+
+/** Fit a frequency to a whole number of cycles per loop, so the loop is seamless. */
+function periodic(freq: number, loopFrames: number | undefined) {
+  if (!loopFrames) return freq;
+  const seconds = loopFrames / MOTION_FPS;
+  return Math.max(1, Math.round(freq * seconds)) / seconds;
+}
+/** A −1‥1 wave shaped by an easing: easeInOut ≈ sine, linear = triangle. */
+function wave(t: number, easingName: string) {
+  const frac = ((t % 1) + 1) % 1;
+  const tri = frac < 0.5 ? frac * 2 : 2 - frac * 2;
+  return ease(easingName, tri) * 2 - 1;
+}
+
+export function frameState(config: PromoConfig, motionFrame: number, width: number, height: number): FrameState {
+  const tl = timeline(config);
+  const loopFrames = tl.loop ? tl.length : undefined;
+  const m = tl.loop ? ((motionFrame % tl.length) + tl.length) % tl.length : Math.min(motionFrame, Math.max(0, tl.length - 1e-6));
+  const secs = m / MOTION_FPS;
+
+  /* scenes */
+  let cfg = config, current = config, previous: PromoConfig | undefined, transition = 1, sceneIndex = 0, sceneId = 'main', sceneStart = 0;
+  const sceneFrames = reader(config).n('sceneTransition.durationFrames');
+  if (tl.scenes.length) {
+    const span = tl.scenes.find((sp) => m >= sp.start && m < sp.end) ?? tl.scenes.at(-1)!;
+    sceneIndex = span.index; sceneId = span.id; sceneStart = span.start;
+    current = sceneConfig(config, span.index);
+    const prevIndex = span.index > 0 ? span.index - 1 : tl.loop && tl.scenes.length > 1 ? tl.scenes.length - 1 : -1;
+    transition = prevIndex >= 0 ? clamp((m - span.start) / sceneFrames) : 1;
+    if (transition < 1) {
+      previous = sceneConfig(config, prevIndex);
+      cfg = blendConfigs(previous, current, ease('easeInOut', transition));
+    } else cfg = current;
+  }
+  const { n, s, b, list } = reader(cfg);
+  const ph = tl.phases;
+  const lay = layout(cfg, width, height);
+  const u = lay.unit;
+  const settled = tl.loop;
+  const since = (id: PhaseId) => (settled ? 1e6 : m - ph[id].start);
+
+  /* camera */
+  let camP: number;
+  if (tl.loop) camP = 0.5 - 0.5 * Math.cos((TAU * m) / tl.length);
+  else camP = ease(s('camera.easing'), (m - n('camera.delayFrames')) / n('camera.durationFrames'), n('camera.durationFrames'));
+  const driftF = periodic(n('camera.driftFrequency'), loopFrames);
+  const cam = b('camera.enabled');
+  const driftX = cam ? n('camera.driftAmplitude') * u * Math.sin(TAU * driftF * secs) : 0;
+  const driftY = cam ? n('camera.driftAmplitude') * u * 0.6 * Math.sin(TAU * driftF * 2 * secs + 1) : 0;
+  const exitStart = ph.outro.start + n('timeline.outro.durationFrames') / 2;
+  const exitKind = s('timeline.outro.exit');
+  const exitP = tl.loop || exitKind === 'none' ? 0 : ease('easeInOutCubic', (m - exitStart) / Math.max(1, tl.timelineEnd - exitStart));
+  const camera = cam ? {
+    scale: lerp(n('camera.startScale'), n('camera.endScale'), camP) * (exitKind === 'zoom' ? 1 + 0.6 * exitP : 1),
+    x: lerp(n('camera.startX'), n('camera.endX'), camP) * width,
+    y: lerp(n('camera.startY'), n('camera.endY'), camP) * height,
+    rotation: lerp(n('camera.startRotation'), n('camera.endRotation'), camP),
+    tilt: lerp(n('camera.startTilt'), n('camera.endTilt'), camP),
+    perspective: n('camera.perspective') * u,
+    driftX, driftY,
+  } : { scale: exitKind === 'zoom' ? 1 + 0.6 * exitP : 1, x: 0, y: 0, rotation: 0, tilt: 0, perspective: 3000 * u, driftX: 0, driftY: 0 };
+  const exit = { opacity: exitKind === 'fade' || exitKind === 'zoom' ? 1 - (exitKind === 'zoom' ? clamp((exitP - 0.4) / 0.6) : exitP) : 1, toBase: exitKind === 'fadeToBase' ? exitP : 0 };
+
+  /* lights and particles */
+  const lightsIn = settled ? 1 : 0.45 + 0.55 * ease('easeOutCubic', m / Math.max(1, ph.intro.end));
+  const short = Math.min(width, height);
+  const lights = list<Obj>('lights').map((l) => {
+    const f = periodic(l.frequency as number, loopFrames);
+    const ang = TAU * (f * secs + (l.phase as number));
+    const amp = (l.amplitude as number) * short;
+    let x = (l.x as number) * width, y = (l.y as number) * height, r = (l.radius as number) * short, op = l.opacity as number;
+    if (l.animation === 'drift') { x += amp * Math.sin(ang); y += amp * 0.7 * Math.sin(2 * ang + 0.5); }
+    else if (l.animation === 'orbit') { x += amp * Math.cos(ang); y += amp * Math.sin(ang); }
+    else if (l.animation === 'pulse') { r *= 1 + (l.amplitude as number) * 2 * Math.sin(ang); op *= 1 + (l.amplitude as number) * 3 * Math.sin(ang); }
+    return { x: x + driftX * n('camera.parallax'), y: y + driftY * n('camera.parallax'), radius: Math.max(0, r), color: l.color as string, opacity: clamp(op * lightsIn), blur: (l.blur as number) * u };
+  });
+  const particles: FrameState['particles'] = [];
+  if (b('particles.enabled')) {
+    const rnd = seeded(n('particles.seed'));
+    const margin = n('particles.sizeMax') * u * 4;
+    const spanX = width + 2 * margin, spanY = height + 2 * margin;
+    const fadeIn = settled ? 1 : clamp(m / Math.max(1, n('particles.fadeInFrames')));
+    for (let i = 0; i < n('particles.count'); i++) {
+      const x0 = rnd(), y0 = rnd(), sz = rnd(), op = rnd(), ang = rnd(), sp = rnd(), tw = rnd();
+      const a = ((n('particles.direction') + (ang - 0.5) * 2 * n('particles.spread')) * Math.PI) / 180;
+      const v = n('particles.speed') * u * (0.5 + sp);
+      let vx = v * Math.cos(a), vy = v * Math.sin(a);
+      if (loopFrames) {
+        // Whole wraps per loop on each axis, so the last frame leads into the first.
+        const T = loopFrames / MOTION_FPS;
+        vx = (Math.round((vx * T) / spanX) * spanX) / T;
+        vy = (Math.round((vy * T) / spanY) * spanY) / T;
+      }
+      const px = ((((x0 * spanX + vx * secs) % spanX) + spanX) % spanX) - margin;
+      const py = ((((y0 * spanY + vy * secs) % spanY) + spanY) % spanY) - margin;
+      const twF = periodic(0.3 + tw * 0.6, loopFrames);
+      const flicker = 1 - n('particles.twinkle') * (0.5 + 0.5 * Math.sin(TAU * (twF * secs + tw)));
+      particles.push({
+        x: px + driftX * n('camera.parallax') * 1.5, y: py + driftY * n('camera.parallax') * 1.5,
+        size: lerp(n('particles.sizeMin'), n('particles.sizeMax'), sz) * u,
+        opacity: clamp(lerp(n('particles.opacityMin'), n('particles.opacityMax'), op) * flicker * fadeIn),
+      });
+    }
+  }
+
+  /* copy */
+  const textLocal = tl.scenes.length && (sceneIndex > 0 || tl.loop) ? m - sceneStart : since('intro');
+  const block = (el: 'eyebrow' | 'title' | 'subtitle', sizePath: string): TextBlock => {
+    const text = reader(current).s(`content.${el}`);
+    const split = s(`textAnimation.${el}.split`);
+    const font = n(sizePath) * u * (el === 'title' ? lay.text.titleScale : 1);
+    const units = splitText(text, split, lay.text.width, font);
+    return { text, split: units.length > 1 ? split : 'none', units, anims: units.map((_, i) => textAnim(cfg, el, textLocal, u, i)) };
+  };
+  let leaving: FrameState['text']['leaving'];
+  if (previous && transition < 1) {
+    const t = ease('easeInOut', clamp(transition * 1.6));
+    const style = s('sceneTransition.style');
+    const r = reader(previous);
+    leaving = {
+      eyebrow: r.s('content.eyebrow'), title: r.s('content.title'), subtitle: r.s('content.subtitle'),
+      anim: { ...SETTLED, opacity: 1 - t, y: style === 'slide' ? -60 * u * t : style === 'blur' ? -24 * u * t : 0, blur: style === 'blur' ? 18 * u * t : 0 },
+    };
+  }
+  // A scene's copy waits for the old copy to leave.
+  const enterLocal = (anim: TextBlock) => (leaving ? { ...anim, anims: anim.anims.map((a) => ({ ...a, opacity: a.opacity * clamp(transition * 2.5 - 0.5) })) } : anim);
+  const text = {
+    eyebrow: enterLocal(block('eyebrow', 'typography.eyebrowSize')),
+    title: enterLocal(block('title', 'typography.titleSize')),
+    subtitle: enterLocal(block('subtitle', 'typography.subtitleSize')),
+    cta: textAnim(cfg, 'cta', since('outro'), u),
+    leaving,
+  };
+  const logo = textAnim(cfg, 'eyebrow', since('intro'), u);
+
+  /* product */
+  const pe = n('productEntrance.durationFrames');
+  const eP = !b('productEntrance.enabled') || settled ? 1 : ease(s('productEntrance.easing'), (m - ph.productEntrance.start - n('productEntrance.delayFrames')) / pe, pe);
+  const eOp = clamp(eP);
+  let fx = 0, fy = 0, fr = 0;
+  if (b('productFloat.enabled')) {
+    const ramp = settled ? 1 : ease('easeInOut', (m - ph.productSettle.start) / Math.max(1, n('productFloat.rampFrames')));
+    const f = periodic(n('productFloat.frequency'), loopFrames);
+    const t = f * secs + n('productFloat.phase');
+    const shape = s('productFloat.easing');
+    fx = n('productFloat.amplitudeX') * u * wave(t + 0.25, shape) * ramp;
+    fy = n('productFloat.amplitudeY') * u * wave(t, shape) * ramp;
+    fr = n('productFloat.rotationAmplitude') * wave(t + 0.5, shape) * ramp;
+  }
+  const product = {
+    visible: b('productWindow.enabled'),
+    x: fx,
+    y: lerp(n('productEntrance.startY'), n('productEntrance.endY'), eP) * u + fy,
+    scale: lerp(n('productEntrance.startScale'), n('productEntrance.endScale'), eP) * n('productWindow.scale'),
+    rotation: lerp(n('productEntrance.startRotation'), n('productEntrance.endRotation'), eP) + n('productWindow.rotation') + fr,
+    tilt: lerp(n('productEntrance.startTilt'), n('productEntrance.endTilt'), eP) + n('window.tiltX'),
+    tiltY: n('window.tiltY'),
+    opacity: clamp(lerp(n('productEntrance.startOpacity'), n('productEntrance.endOpacity'), eOp)) * n('productWindow.opacity'),
+  };
+
+  /* product UI */
+  const cr = since('contentReveal');
+  const cd = n('cardAnimation.durationFrames'), cEase = s('cardAnimation.easing'), dist = n('cardAnimation.distance') * u;
+  const kind = s('cardAnimation.entrance');
+  const reveal = (delay: number, k = kind) => enterAnim(k === 'none' ? 'none' : k, cr - delay, cd, cEase, dist, n('cardAnimation.startScale'), n('cardAnimation.opacity'));
+  const cards = list<Obj>('productContent.cards');
+  const cardAnims = cards.map((_, i) => reveal(n('cardAnimation.delayFrames') + i * n('cardAnimation.staggerFrames')));
+  if (b('cardAnimation.highlight.enabled') && cards.length) {
+    let every = n('cardAnimation.highlight.everyFrames');
+    if (loopFrames) every = loopFrames / (cards.length * Math.max(1, Math.round(loopFrames / (cards.length * every))));
+    const hs = settled ? m : m - ph.showcase.start;
+    const stop = settled ? 1 : 1 - clamp((m - ph.outro.start) / 20);
+    if (hs >= 0 && stop > 0) {
+      const k = hs / every;
+      const idx = Math.floor(k) % cards.length;
+      const bump = (0.5 - 0.5 * Math.cos(TAU * (k - Math.floor(k)))) * stop;
+      const a = cardAnims[idx]!;
+      cardAnims[idx] = { ...a, scale: a.scale * lerp(1, n('cardAnimation.highlight.scale'), bump), y: a.y - n('cardAnimation.highlight.lift') * u * bump };
+    }
+  }
+  let typed = '';
+  const full = s('productContent.input.typeText');
+  if (b('productContent.input.enabled') && full) {
+    const cps = n('productContent.input.typeSpeed');
+    if (loopFrames) {
+      const f = m / loopFrames;
+      const k = f < 0.45 ? f / 0.45 : f < 0.8 ? 1 : 1 - (f - 0.8) / 0.2;
+      typed = full.slice(0, Math.round(k * full.length));
+    } else {
+      const since0 = m - ph.showcase.start - 20;
+      typed = since0 > 0 ? full.slice(0, Math.floor((since0 / MOTION_FPS) * cps)) : '';
+    }
+  }
+  const ui = {
+    greeting: reveal(0, kind === 'slide-left' ? 'slide-left' : 'slide-up'),
+    response: reveal(n('cardAnimation.delayFrames') / 2, 'fade'),
+    hero: reveal(n('cardAnimation.delayFrames') / 2),
+    typed,
+    caret: Math.floor(m / 30) % 2 === 0,
+    cards: cardAnims,
+  };
+  const badge = enterAnim('pop', since('productSettle'), 36, 'springSoft', 0, 0.4, 0);
+
+  /* floating elements */
+  const floating = list<Obj>('floatingElements').map((f) => {
+    const local = cr - (f.delayFrames as number);
+    const a = enterAnim(f.enter === 'pop' ? 'pop' : (f.enter as string), local, Math.max(24, cd), f.enter === 'pop' ? 'springSoft' : cEase, 40 * u, 0.4, 0);
+    const fr2 = periodic(f.frequency as number, loopFrames);
+    const t = fr2 * secs + (f.phase as number);
+    const amp = (f.amplitude as number) * u;
+    // Anchored to the window's resting rect, then kept inside the safe area by its estimated size.
+    const win = lay.window;
+    const fs = (f.fontSize as number) * u * (f.scale as number);
+    const halfW = f.type === 'icon' ? fs * 1.2 : (String(f.content).length * 0.56 + (f.type === 'badge' ? 4.4 : 2)) * fs / 2;
+    const safe = n('canvas.safeArea') * short;
+    let x = clamp(win.cx + ((f.x as number) - 0.5) * win.width, safe + halfW, width - safe - halfW);
+    let y = clamp(win.cy + ((f.y as number) - 0.5) * win.height, safe + fs * 1.3, height - safe - fs * 1.3);
+    let rot = f.rotation as number, sc = (f.scale as number) * a.scale;
+    if (f.animation === 'float') { y += amp * Math.sin(TAU * t); x += amp * 0.3 * Math.sin(TAU * t * 2); }
+    else if (f.animation === 'drift') { x += amp * Math.sin(TAU * t); y += amp * 0.5 * Math.sin(TAU * t * 2 + 1); }
+    else if (f.animation === 'pulse') sc *= 1 + ((f.amplitude as number) / 100) * Math.sin(TAU * t);
+    else if (f.animation === 'spin') rot += 360 * (((t % 1) + 1) % 1);
+    const depth = (f.depth as number) * n('camera.parallax');
+    return { ...a, x: x + a.x + driftX * depth, y: y + a.y + driftY * depth, rotation: rot + a.rotation, scale: sc, opacity: a.opacity * (f.opacity as number) };
+  });
+
+  /* bloom: brighter elements glow more */
+  const bloomOf = (hex: string) => {
+    if (!b('glow.enabled')) return 0;
+    const th = n('glow.threshold');
+    return clamp((luminance(hex) - th) / Math.max(0.001, 1 - th)) * n('glow.intensity') * n('glow.opacity');
+  };
+
+  const phase: FrameState['phase'] = settled ? 'showcase' : ([...PHASES].reverse().find((id) => m >= ph[id].start) ?? 'intro');
+  return {
+    frame: m,
+    length: tl.length,
+    phase: !settled && m >= tl.timelineEnd ? 'done' : phase,
+    scene: { index: sceneIndex, id: sceneId, transition },
+    size: { width, height, unit: u },
+    cfg,
+    layout: lay,
+    camera,
+    exit,
+    lightsIn,
+    lights,
+    particles,
+    logo,
+    text,
+    product,
+    badge,
+    ui,
+    floating,
+    bloom: { product: bloomOf(s('productWindow.backgroundColor')), title: bloomOf(s('typography.titleColor')) },
+  };
+}

package/src/motion/promo/fonts.ts

@@ -0,0 +1,16 @@
+import { FONT_FAMILIES } from './controls';
+
+/**
+ * The registered typefaces (all OFL, from Google Fonts). Remotion loads them with
+ * `@remotion/google-fonts`; the web player adds this stylesheet once.
+ */
+export const PROMO_FONTS_CSS = `https://fonts.googleapis.com/css2?${FONT_FAMILIES.map((f) => `family=${f.replace(/ /g, '+')}:wght@${f === 'Space Grotesk' ? '300..700' : '300..800'}`).join('&')}&display=swap`;
+
+export function installPromoFonts(doc: Document | undefined = typeof document === 'undefined' ? undefined : document) {
+  if (!doc || doc.querySelector('link[data-promo-fonts]')) return;
+  const link = doc.createElement('link');
+  link.rel = 'stylesheet';
+  link.href = PROMO_FONTS_CSS;
+  link.setAttribute('data-promo-fonts', '');
+  doc.head.appendChild(link);
+}