creator-editing-studio 1.0.20260930

package/template/src/components/Captions.tsx

@@ -0,0 +1,141 @@
+import React from 'react';
+import {useCurrentFrame, useVideoConfig} from 'remotion';
+import {CAPTION, FONT} from '../design/tokens';
+import {CAPTION_PRESETS, type CaptionVariant} from '../design/presets';
+import {exitFrames, msToFrames} from '../lib/animate';
+import type {SpokenWord} from '../lib/spine';
+import {Presence} from './Presence';
+
+export type CaptionPlacement = {x: number; y: number; width: number; align: 'left' | 'center'; /** Font size (defaults to CAPTION.size). */ size?: number};
+
+type Chunk = {words: Array<{text: string; at: number}>; start: number; end: number};
+
+const MAX_WORDS = 6;
+const HOLD_MS = 350;
+const MAX_GAP_SEC = 0.6;
+
+/**
+ * Split the script into short caption chunks: at sentence ends, clauses, pauses, paragraph
+ * changes, forced breaks (e.g. layout moves), and around hidden words.
+ */
+export const buildChunks = (words: SpokenWord[], fps: number, hidden: Set<number>, breaks: number[]): Chunk[] => {
+  const chunks: Chunk[] = [];
+  let current: Chunk | null = null;
+  let prev: SpokenWord | null = null;
+
+  const close = () => {
+    if (current && current.words.length) chunks.push(current);
+    current = null;
+  };
+
+  words.forEach((w, i) => {
+    const at = Math.round(w.start * fps);
+    if (hidden.has(i)) {
+      close();
+      prev = w;
+      return;
+    }
+    if (current && prev) {
+      const first = current.words[0].at;
+      const shouldBreak =
+        current.words.length >= MAX_WORDS ||
+        /[.?!]$/.test(prev.text) ||
+        (/[,;:]$/.test(prev.text) && current.words.length >= 3) ||
+        w.start - prev.end > MAX_GAP_SEC ||
+        w.paragraph !== prev.paragraph ||
+        breaks.some((b) => b > first && b <= at);
+      if (shouldBreak) close();
+    }
+    if (!current) current = {words: [], start: at, end: at};
+    current.words.push({text: w.text, at});
+    current.end = Math.round(w.end * fps);
+    prev = w;
+  });
+  close();
+
+  return chunks.map((c, i) => {
+    const next = chunks[i + 1];
+    const natural = c.end + msToFrames(HOLD_MS, fps);
+    // A layout change (break) just after the last word ends the chunk there, so a caption never
+    // lingers into the next scene.
+    const nextBreak = breaks.find((b) => b > c.start && b < natural);
+    const end = Math.min(natural, nextBreak !== undefined ? nextBreak - 1 : natural, next ? next.start - 1 : natural);
+    return {...c, end: Math.max(c.start + 1, end)};
+  });
+};
+
+/**
+ * Word-by-word captions: each word sharpens into place as it is spoken, in short chunks.
+ * `placement` is evaluated once per chunk (at its start), so text never reflows mid-chunk.
+ */
+export const Captions: React.FC<{
+  words: SpokenWord[];
+  hidden?: number[];
+  breaks?: number[];
+  placement: (frame: number) => CaptionPlacement | null;
+  /** Named caption look from src/design/presets.ts. Defaults to the house style. */
+  variant?: CaptionVariant;
+}> = ({words, hidden = [], breaks = [], placement, variant = 'clean'}) => {
+  const frame = useCurrentFrame();
+  const {fps} = useVideoConfig();
+  const chunks = React.useMemo(() => buildChunks(words, fps, new Set(hidden), breaks), [words, fps, hidden, breaks]);
+
+  const preset = CAPTION_PRESETS[variant];
+  const chunk = chunks.find((c) => frame >= c.start - 1 && frame <= c.end);
+  if (!chunk) return null;
+  const place = placement(chunk.start);
+  if (!place) return null;
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        left: place.x,
+        top: place.y,
+        width: place.width,
+        display: 'flex',
+        flexWrap: 'wrap',
+        justifyContent: place.align === 'center' ? 'center' : 'flex-start',
+        fontFamily: FONT.sans,
+        fontSize: place.size ?? CAPTION.size,
+        fontWeight: CAPTION.weight,
+        lineHeight: CAPTION.lineHeight,
+        letterSpacing: CAPTION.tracking,
+        color: CAPTION.color,
+        textShadow: CAPTION.shadow,
+      }}
+    >
+      {chunk.words.map((w, i) => {
+        // "Being said now" runs from this word until the next one starts.
+        const next = chunk.words[i + 1];
+        const speaking = frame >= w.at && (!next || frame < next.at);
+        return (
+          <Presence
+            key={`${chunk.start}-${i}`}
+            as="span"
+            at={w.at - 1}
+            until={chunk.end - exitFrames('fast', fps)}
+            dur="fast"
+            distance={14}
+            blur={8}
+            scaleFrom={preset.scaleFrom}
+            style={{display: 'inline-block', marginRight: '0.26em'}}
+          >
+            <span
+              style={{
+                display: 'inline-block',
+                color: speaking && preset.activeColor ? preset.activeColor : undefined,
+                backgroundColor: preset.background,
+                padding: preset.padding,
+                borderRadius: preset.radius,
+                textShadow: preset.background ? 'none' : undefined,
+              }}
+            >
+              {w.text}
+            </span>
+          </Presence>
+        );
+      })}
+    </div>
+  );
+};

package/template/src/components/Cursor.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import {useCurrentFrame, useVideoConfig} from 'remotion';
+import {EASE} from '../design/motion';
+import {COLOR, RADIUS} from '../design/tokens';
+import {durFrames, perFrame, progress, travelFrames} from '../lib/animate';
+import {Presence} from './Presence';
+import {VelocityBlur} from './VelocityBlur';
+
+/** A point the cursor ARRIVES at by frame `at` (the tip of the arrow). */
+export type CursorStop = {at: number; x: number; y: number; click?: boolean};
+
+const CLICK_FRAMES = 6;
+/** Pointer size and where its tip sits inside the 64px artwork. */
+const POINTER = 68;
+const TIP = 6 * (POINTER / 64);
+
+/**
+ * An arrow cursor that guides the eye: travels between stops on gentle arcs,
+ * arriving exactly on time, and clicks with a press + ripple.
+ */
+export const Cursor: React.FC<{stops: CursorStop[]; hideAt: number}> = ({stops, hideAt}) => {
+  const frame = useCurrentFrame();
+  const {fps} = useVideoConfig();
+
+  const positionAt = (f: number) => {
+    let x = stops[0].x;
+    let y = stops[0].y;
+    for (let i = 1; i < stops.length; i++) {
+      const from = stops[i - 1];
+      const to = stops[i];
+      const distance = Math.hypot(to.x - from.x, to.y - from.y);
+      const travel = Math.min(travelFrames(distance, fps), Math.max(1, to.at - from.at));
+      const depart = to.at - travel;
+      if (f <= depart) break;
+      const t = progress(f, depart, travel, EASE.inOut);
+      // Arc: bulge perpendicular to the path, peaking mid-way.
+      const bulge = Math.sin(Math.PI * t) * distance * 0.1;
+      const nx = distance ? -(to.y - from.y) / distance : 0;
+      const ny = distance ? (to.x - from.x) / distance : 0;
+      x = from.x + (to.x - from.x) * t + nx * bulge;
+      y = from.y + (to.y - from.y) * t + ny * bulge;
+    }
+    return {x, y};
+  };
+
+  const {x, y} = positionAt(frame);
+  const click = stops.find((s) => s.click && frame >= s.at && frame < s.at + durFrames('slow', fps));
+  const pressT = click ? progress(frame, click.at, CLICK_FRAMES, EASE.inOut) : 0;
+  const press = 1 - 0.14 * Math.sin(Math.PI * pressT);
+  const ripple = click ? progress(frame, click.at, durFrames('slow', fps)) : 0;
+
+  return (
+    <Presence at={stops[0].at} until={hideAt} dur="fast" from="none" style={{position: 'absolute', inset: 0}}>
+      {click ? (
+        <div
+          style={{
+            position: 'absolute',
+            left: click.x - 70 * ripple,
+            top: click.y - 70 * ripple,
+            width: 140 * ripple,
+            height: 140 * ripple,
+            borderRadius: RADIUS.pill,
+            border: `4px solid ${COLOR.accent}`,
+            opacity: 1 - ripple,
+          }}
+        />
+      ) : null}
+      <VelocityBlur
+        vx={perFrame((f) => positionAt(f).x, frame)}
+        vy={perFrame((f) => positionAt(f).y, frame)}
+        style={{
+          position: 'absolute',
+          left: x - TIP,
+          top: y - TIP,
+          transformOrigin: `${TIP}px ${TIP}px`,
+          transform: `scale(${press.toFixed(4)})`,
+          filter: `drop-shadow(0 8px 14px ${COLOR.fg}66)`,
+        }}
+      >
+        {/* Solid pointer (as in the reference): tip top-left, notched tail. */}
+        <svg width={POINTER} height={POINTER} viewBox="0 0 64 64">
+          <path
+            d="M6 6 L58 26 Q60 27 58 28 L35 35 L28 58 Q27 60 26 58 Z"
+            fill={COLOR.accent}
+            stroke={COLOR.fg}
+            strokeWidth={3}
+            strokeLinejoin="round"
+          />
+        </svg>
+      </VelocityBlur>
+    </Presence>
+  );
+};

package/template/src/components/DrawnCircle.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import {useCurrentFrame, useVideoConfig} from 'remotion';
+import {EASE} from '../design/motion';
+import {COLOR} from '../design/tokens';
+import {durFrames, progress} from '../lib/animate';
+
+const SEGMENTS = 72;
+
+/**
+ * A hand-drawn loop that draws itself around a rectangle (the emphasis stroke from the
+ * references). Slightly irregular and overshoots its start, like a real pen stroke.
+ * Coordinates are in the parent's space.
+ */
+export const DrawnCircle: React.FC<{
+  rect: {x: number; y: number; w: number; h: number};
+  at: number;
+  pad?: number;
+  strokeWidth?: number;
+  color?: string;
+}> = ({rect, at, pad = 14, strokeWidth = 5, color = COLOR.fg}) => {
+  const frame = useCurrentFrame();
+  const {fps} = useVideoConfig();
+  const draw = progress(frame, at, durFrames('slow', fps), EASE.inOut);
+  if (draw <= 0) return null;
+
+  const cx = rect.x + rect.w / 2;
+  const cy = rect.y + rect.h / 2;
+  const rx = rect.w / 2 + pad;
+  const ry = rect.h / 2 + pad;
+  const startAngle = -0.62 * Math.PI;
+  const sweep = 2.1 * Math.PI;
+  const points = Array.from({length: SEGMENTS + 1}, (_, i) => {
+    const t = i / SEGMENTS;
+    const a = startAngle + sweep * t;
+    // Gentle wobble + a slow spiral outward, so the end overshoots the start.
+    const wobble = 1 + 0.03 * Math.sin(2 * a + 1) + 0.015 * Math.sin(5 * a) + 0.05 * t;
+    return `${(cx + Math.cos(a) * rx * wobble).toFixed(2)},${(cy + Math.sin(a) * ry * wobble).toFixed(2)}`;
+  });
+
+  return (
+    <svg style={{position: 'absolute', left: 0, top: 0, width: 1, height: 1, overflow: 'visible'}}>
+      <polyline
+        points={points.join(' ')}
+        pathLength={1}
+        fill="none"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeDasharray={1}
+        strokeDashoffset={1 - draw}
+      />
+    </svg>
+  );
+};

package/template/src/components/FilmOverlay.tsx

@@ -0,0 +1,139 @@
+import React from 'react';
+import {AbsoluteFill, useCurrentFrame, useVideoConfig} from 'remotion';
+import {
+  FILM_PRESETS,
+  GRAIN,
+  HALATION,
+  LEAK,
+  LETTERBOX,
+  WEAVE,
+  strengthScale,
+  type FilmLook,
+} from '../design/overlays';
+
+/**
+ * Film texture over any scene, driven by tokens.
+ *
+ *   <FilmOverlay look="film">{<Footage />}</FilmOverlay>
+ *
+ * Layers, outside in: gate weave moves the whole frame, halation blooms the highlights,
+ * a light leak washes across, grain sits on top, letterbox bars crop the result.
+ * Every layer is off by default at 'none' and every one of them is frame-driven — no CSS
+ * animation, no Math.random — so a re-render is identical to the last one.
+ *
+ * Individual layers can be overridden per shot when a look is nearly right:
+ *   <FilmOverlay look="film" grain="strong" />
+ */
+export const FilmOverlay: React.FC<{
+  look?: FilmLook;
+  grain?: (typeof FILM_PRESETS)[FilmLook]['grain'];
+  halation?: (typeof FILM_PRESETS)[FilmLook]['halation'];
+  leak?: (typeof FILM_PRESETS)[FilmLook]['leak'];
+  weave?: (typeof FILM_PRESETS)[FilmLook]['weave'];
+  letterbox?: (typeof FILM_PRESETS)[FilmLook]['letterbox'];
+  /** Shifts the leak and weave phase, so two shots with the same look do not drift in step. */
+  seed?: number;
+  children: React.ReactNode;
+}> = ({look = 'film', seed = 0, children, ...override}) => {
+  const frame = useCurrentFrame();
+  const {fps, width, height} = useVideoConfig();
+  const preset = FILM_PRESETS[look];
+
+  const grain = strengthScale(override.grain ?? preset.grain);
+  const halation = strengthScale(override.halation ?? preset.halation);
+  const leak = strengthScale(override.leak ?? preset.leak);
+  const weave = strengthScale(override.weave ?? preset.weave);
+  const letterbox = override.letterbox ?? preset.letterbox;
+
+  const seconds = frame / fps;
+  /** Sum of two slow sines: smooth, continuous, and never on an obvious loop. */
+  const wobble = (hz: number, phase: number) => Math.sin(2 * Math.PI * hz * seconds + phase + seed);
+
+  /* ------------------------------------------------------------------ gate weave */
+
+  const weaveX = weave * WEAVE.translatePx * wobble(WEAVE.hz[0], 0);
+  const weaveY = weave * WEAVE.translatePx * wobble(WEAVE.hz[1], 1.7);
+  const weaveR = weave * WEAVE.rotateDeg * wobble(WEAVE.hz[0] * 0.7, 3.1);
+  const weaveStyle: React.CSSProperties = weave
+    ? {transform: `translate(${weaveX.toFixed(3)}px, ${weaveY.toFixed(3)}px) rotate(${weaveR.toFixed(4)}deg) scale(1.01)`}
+    : {};
+
+  /* ------------------------------------------------------------------ halation */
+
+  // Crush to a highlight-only plate, warm it, blur it, then screen it back on. Screening
+  // with black is a no-op, so everything that is not a highlight comes through untouched.
+  // motion-ok: a static blur radius on a bloom plate, not motion blur — the 12px cap is about moving edges.
+  const bloomFilter = [
+    `contrast(${HALATION.contrast})`,
+    `brightness(${HALATION.brightness})`,
+    `sepia(${HALATION.sepia})`,
+    `saturate(${HALATION.saturate})`,
+    `blur(${HALATION.blurPx.toFixed(1)}px)`,
+  ].join(' ');
+
+  /* ------------------------------------------------------------------ light leak */
+
+  const leakX = 50 + 32 * wobble(1 / LEAK.cycleSeconds, 0.4);
+  const leakY = 12 + 14 * wobble(1 / (LEAK.cycleSeconds * 1.6), 2.2);
+  const leakStyle: React.CSSProperties = {
+    background: `radial-gradient(45% 34% at ${leakX.toFixed(1)}% ${leakY.toFixed(1)}%, ${LEAK.warm} 0%, ${LEAK.cool} 26%, transparent 66%)`,
+    mixBlendMode: 'screen',
+    opacity: LEAK.opacity * leak,
+  };
+
+  /* ------------------------------------------------------------------ grain */
+
+  // A small noise plate scaled up: full-frame turbulence every frame is far too slow to render.
+  const plateW = Math.round(width * GRAIN.renderScale);
+  const plateH = Math.round(height * GRAIN.renderScale);
+  const grainSeed = Math.floor(frame / GRAIN.framesPerSeed);
+
+  /* ------------------------------------------------------------------ letterbox */
+
+  const barHeight = letterbox === 'off' ? 0 : Math.round(height * LETTERBOX.ratio[letterbox]);
+
+  return (
+    <AbsoluteFill>
+      <AbsoluteFill style={weaveStyle}>
+        <AbsoluteFill>{children}</AbsoluteFill>
+
+        {halation > 0 ? (
+          <AbsoluteFill style={{filter: bloomFilter, mixBlendMode: 'screen', opacity: HALATION.opacity * halation}}>
+            {children}
+          </AbsoluteFill>
+        ) : null}
+
+        {leak > 0 ? <AbsoluteFill style={leakStyle} /> : null}
+
+        {grain > 0 ? (
+          <AbsoluteFill style={{opacity: GRAIN.opacity * grain}}>
+            <svg width="100%" height="100%" viewBox={`0 0 ${plateW} ${plateH}`} preserveAspectRatio="none">
+              <filter id={`grain-${grainSeed}`} x="0" y="0" width="100%" height="100%">
+                <feTurbulence
+                  type="fractalNoise"
+                  baseFrequency={GRAIN.frequency}
+                  numOctaves={1}
+                  seed={grainSeed}
+                  stitchTiles="stitch"
+                />
+                <feColorMatrix type="saturate" values="0" />
+                {/* Turbulence varies alpha as well as colour; flatten it so only brightness grains. */}
+                <feComponentTransfer>
+                  <feFuncA type="linear" slope="0" intercept="1" />
+                </feComponentTransfer>
+              </filter>
+              <rect width={plateW} height={plateH} filter={`url(#grain-${grainSeed})`} />
+            </svg>
+          </AbsoluteFill>
+        ) : null}
+      </AbsoluteFill>
+
+      {barHeight > 0 ? (
+        <>
+          <AbsoluteFill style={{height: barHeight, top: 0, backgroundColor: LETTERBOX.color}} />
+          <AbsoluteFill style={{height: barHeight, top: height - barHeight, backgroundColor: LETTERBOX.color}} />
+        </>
+      ) : null}
+    </AbsoluteFill>
+  );
+};

package/template/src/components/Hero.tsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import {useCurrentFrame, useVideoConfig} from 'remotion';
+import {EASE} from '../design/motion';
+import {heroGlow} from '../design/glow';
+import {CAPTION, FONT, HERO, TYPE, WEIGHT} from '../design/tokens';
+import {durFrames, perFrame, progress, wipeMask, type Place} from '../lib/animate';
+import {Presence} from './Presence';
+
+const labelStyle: React.CSSProperties = {
+  fontWeight: WEIGHT.bold,
+  letterSpacing: TYPE.eyebrow.tracking,
+  textTransform: 'uppercase',
+  color: CAPTION.color,
+  textShadow: CAPTION.shadow,
+};
+
+/**
+ * Big glowing accent headline, centred horizontally. Place it between the stage video and the
+ * stage cutout to sit behind the subject. `children` is the headline (HeroWords, a RollingNumber...).
+ * The block itself only moves on exit — its words bring their own entrance.
+ */
+export const HeroBlock: React.FC<{
+  at: number;
+  until?: number;
+  top: number;
+  exitTo?: Place;
+  size?: number;
+  /** Font size of the eyebrow / subline labels. */
+  labelSize?: number;
+  /** Small white label above the headline. */
+  eyebrow?: {text: string; at: number};
+  /** White line below the headline. */
+  subline?: {text: string; at: number};
+  children: React.ReactNode;
+}> = ({at, until, top, exitTo = 'above', size = HERO.size, labelSize, eyebrow, subline, children}) => (
+  <Presence
+    at={at}
+    until={until}
+    from="none"
+    exitTo={exitTo}
+    dur="base"
+    distance={40}
+    style={{position: 'absolute', left: 0, right: 0, top, textAlign: 'center', fontFamily: FONT.sans}}
+  >
+    {eyebrow ? (
+      <Presence at={eyebrow.at} dur="base" blur={8} style={{...labelStyle, fontSize: labelSize ?? TYPE.eyebrow.size + 8, marginBottom: 10}}>
+        {eyebrow.text}
+      </Presence>
+    ) : null}
+    <div
+      style={{
+        fontSize: size,
+        fontWeight: TYPE.display.weight,
+        letterSpacing: TYPE.display.tracking,
+        lineHeight: 1,
+        color: HERO.color,
+        textShadow: heroGlow(),
+        whiteSpace: 'nowrap',
+      }}
+    >
+      {children}
+    </div>
+    {subline ? (
+      <Presence at={subline.at} dur="base" blur={8} style={{...labelStyle, fontSize: labelSize ?? TYPE.h3.size, marginTop: 18}}>
+        {subline.text}
+      </Presence>
+    ) : null}
+  </Presence>
+);
+
+/** Words of a hero headline, each rising out of a blur on its spoken frame. */
+export const HeroWords: React.FC<{words: Array<{text: string; at: number}>; from?: Place}> = ({words, from = 'below'}) => (
+  <>
+    {words.map((w, i) => (
+      <Presence
+        key={`${w.text}-${i}`}
+        as="span"
+        at={w.at}
+        from={from}
+        dur="slow"
+        distance={40}
+        blur={12}
+        style={{display: 'inline-block', marginRight: i < words.length - 1 ? '0.24em' : 0}}
+      >
+        {w.text}
+      </Presence>
+    ))}
+  </>
+);
+
+/** A line drawn through a headline, left to right with a motion-blurred leading edge. */
+export const Strike: React.FC<{at: number; color: string; children: React.ReactNode}> = ({at, color, children}) => {
+  const frame = useCurrentFrame();
+  const {fps} = useVideoConfig();
+  const drawAt = (f: number) => progress(f, at, durFrames('slow', fps), EASE.emphasis);
+  return (
+    <span style={{position: 'relative', display: 'inline-block'}}>
+      {children}
+      <span
+        style={{
+          position: 'absolute',
+          left: '-0.04em',
+          right: '-0.04em',
+          top: '50%',
+          height: '0.09em',
+          borderRadius: '0.05em',
+          backgroundColor: color,
+          boxShadow: `0 0 0.12em ${color}`,
+          ...wipeMask(drawAt(frame), perFrame(drawAt, frame)),
+        }}
+      />
+    </span>
+  );
+};

package/template/src/components/HeroTag.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import {interpolateColors, useCurrentFrame, useVideoConfig} from 'remotion';
+import {withAlpha} from '../design/color';
+import {heroGlow} from '../design/glow';
+import {COLOR, FONT, HERO, RADIUS, TYPE} from '../design/tokens';
+import {perFrame} from '../lib/animate';
+import {morph} from '../lib/continuity';
+import {Presence} from './Presence';
+import {VelocityBlur} from './VelocityBlur';
+
+/**
+ * A big glowing accent headline that later shrinks into a small corner pill and stays on screen
+ * as a section label (the element is never removed and re-added — it becomes the tag).
+ * Place it between the stage video and the stage cutout to sit behind the subject.
+ */
+export const HeroTag: React.FC<{
+  words: string[];
+  /** Frame each word appears (spoken time). */
+  wordAt: number[];
+  shrinkAt: number;
+  big: {centerX: number; top: number; size?: number};
+  pill: {x: number; y: number; scale: number};
+  until?: number;
+}> = ({words, wordAt, shrinkAt, big, pill, until}) => {
+  const frame = useCurrentFrame();
+  const {fps} = useVideoConfig();
+  const stateAt = (f: number) =>
+    morph(
+      f,
+      fps,
+      shrinkAt,
+      {left: big.centerX, top: big.top, shift: -50, scale: 1, chrome: 0},
+      {left: pill.x, top: pill.y, shift: 0, scale: pill.scale, chrome: 1},
+    );
+  const s = stateAt(frame);
+  const border = 2 / pill.scale;
+
+  return (
+    <Presence at={wordAt[0]} until={until} dur="fast" from="none" style={{position: 'absolute', inset: 0}}>
+      <VelocityBlur
+        vx={perFrame((f) => stateAt(f).left, frame)}
+        vy={perFrame((f) => stateAt(f).top, frame)}
+        style={{
+          position: 'absolute',
+          left: s.left,
+          top: s.top,
+          transformOrigin: '0 0',
+          transform: `translateX(${s.shift.toFixed(3)}%) scale(${s.scale.toFixed(5)})`,
+          display: 'inline-flex',
+          alignItems: 'center',
+          whiteSpace: 'nowrap',
+          padding: `${(0.22 * s.chrome).toFixed(4)}em ${(0.55 * s.chrome).toFixed(4)}em`,
+          borderRadius: RADIUS.pill,
+          border: `${border}px solid ${withAlpha(COLOR.borderSubtle, s.chrome)}`,
+          backgroundColor: withAlpha(COLOR.paper, s.chrome),
+          fontFamily: FONT.sans,
+          fontSize: big.size ?? HERO.size,
+          fontWeight: TYPE.display.weight,
+          letterSpacing: TYPE.display.tracking,
+          lineHeight: 1,
+          color: interpolateColors(s.chrome, [0, 1], [HERO.color, COLOR.fg]),
+          textShadow: heroGlow(1 - s.chrome),
+        }}
+      >
+        <span
+          style={{
+            display: 'inline-block',
+            width: `${(0.3 * s.chrome).toFixed(4)}em`,
+            height: `${(0.3 * s.chrome).toFixed(4)}em`,
+            marginRight: `${(0.3 * s.chrome).toFixed(4)}em`,
+            borderRadius: RADIUS.pill,
+            backgroundColor: COLOR.fg,
+            boxShadow: `0 0 0 ${(0.08 * s.chrome).toFixed(4)}em ${COLOR.accent}`,
+          }}
+        />
+        {words.map((word, i) => (
+          <Presence
+            key={word}
+            as="span"
+            at={wordAt[i]}
+            dur="slow"
+            distance={40}
+            blur={12}
+            style={{display: 'inline-block', marginRight: i < words.length - 1 ? '0.24em' : 0}}
+          >
+            {word}
+          </Presence>
+        ))}
+      </VelocityBlur>
+    </Presence>
+  );
+};

package/template/src/components/HighlightMark.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import {useCurrentFrame, useVideoConfig} from 'remotion';
+import {EASE} from '../design/motion';
+import {HIGHLIGHT} from '../design/tokens';
+import {durFrames, perFrame, progress, wipeMask} from '../lib/animate';
+
+/**
+ * Brand signature emphasis: a flat accent marker that wipes in left to right
+ * behind a phrase, after the phrase has landed. The wipe edge is motion-blurred
+ * by its speed. `at` is in the frame space of the enclosing Sequence.
+ */
+export const HighlightMark: React.FC<{at: number; children: React.ReactNode}> = ({at, children}) => {
+  const frame = useCurrentFrame();
+  const {fps} = useVideoConfig();
+  const wipeAt = (f: number) => progress(f, at, durFrames('slow', fps), EASE.emphasis);
+
+  return (
+    <span style={{position: 'relative', display: 'inline-block', padding: `0 ${HIGHLIGHT.padX}`}}>
+      <span
+        style={{
+          position: 'absolute',
+          left: 0,
+          right: 0,
+          top: HIGHLIGHT.top,
+          bottom: HIGHLIGHT.bottom,
+          backgroundColor: HIGHLIGHT.color,
+          borderRadius: HIGHLIGHT.radius,
+          ...wipeMask(wipeAt(frame), perFrame(wipeAt, frame)),
+        }}
+      />
+      <span style={{position: 'relative'}}>{children}</span>
+    </span>
+  );
+};