Motion

When it applies

Any time the brand is rendered in video: Remotion compositions, After Effects exports, screen-recording tutorials, social clips, stingers. The static system is the floor, not the ceiling — motion extends it without contradicting anything.

The canonical tool is Remotion. The canonical compositions live in the companion remotion project under src/compositions/brand/.

Formats

Three canonical aspects cover every platform. Pick one per piece — never mix aspects within a single piece, and never mix framerates within a single scene.

Framerate is 30 fps by default. Use 60 fps only for high-motion content or UI capture that would otherwise judder. Safe-area margin is 6% of the shorter edge — about 64 px on 1080, 115 px on 1920.

Canvas

Background is always #F8F7F2. No pure white, no pure black, ever — the warmth is the brand. When overlaying footage, wrap it in a 48 px cream frame rather than letting it bleed edge-to-edge. Never tint or grade footage to match the cream; frame it instead.

Type scale at 1080p

Inter variable, self-hosted from the fonts/ folder. Multiply by 1.5× for 4K, by 0.66× for 720p. Caveat is reserved for the single homepage greeting and rarely shows up in video.

Motion primitives

Deterministic, Remotion-native. No CSS transitions on rendered frames. Four durations cover every beat; two easings cover every ramp. Springs are allowed only when damped past overshoot.

// enter primitive (Remotion)
const opacity = interpolate(frame, [0, 12], [0, 1], {
  easing: Easing.out(Easing.cubic),
  extrapolateRight: "clamp",
});
const translateY = interpolate(frame, [0, 12], [12, 0], {
  easing: Easing.out(Easing.cubic),
  extrapolateRight: "clamp",
});

The accent line — motion signature

Web's 40 × 3 accent line becomes 120 × 9 at 1080p (pixel density at playback distance is about 3× the web reading distance). It draws left→right under any hero title over 12 frames, holds for the title's lifetime, fades with the title. This is the brand gesture in motion — the one thing an off-brand video will always be missing.

const scale = interpolate(frame, [0, 12], [0, 1], {
  easing: Easing.out(Easing.cubic),
  extrapolateRight: "clamp",
});

<div style={{
  width: 120, height: 9, borderRadius: 999,
  backgroundColor: "var(--accent)",
  transformOrigin: "left center",
  transform: `scaleX(${scale})`,
}} />

Blinking cursor in motion

Same rule as web: the indigo cursor appears only after the word "AI" in any restatement of the tagline. Nowhere else. At 1080p it's 9 px wide × 1.1em tall, step-end timing, opacity flips every 15 frames (1 s period).

The arrow

Lucide arrow-up-right, outline only, currentColor. Stroke weight 2 at video resolution — not 1.5 as on web. Thin 1.5 px strokes subpixel-shimmer during mobile playback; 2 px renders stably. The web "nudge" gesture survives: on a CTA reveal the arrow slides translate(6px, -6px) over 12 frames after the button fades in. That's the final beat of the shot.

Hover to preview the nudge.

Canonical compositions

Six drop-in compositions in the remotion repo under src/compositions/brand/. Each ships brand-correct defaults so a fresh render with no props is on-brand. Copy and modify only for one-offs.

• SectionDivider

  Uppercase label over a section heading on cream. 45f hold. Use between scenes.

• TitleCard

  Accent line draws → title fades up → subtitle fades up with a 4f stagger.

• LowerThird

  Overlay. 3 × 40 vertical accent line left of the name + role. Use over talking-head footage.

• EndCard

  Wordmark + URL + arrow. Arrow performs the nudge on appear. Use as the last scene.

• CaptionTrack

  Subtitle burn-ins on cream pills, auto-break at 40ch. Compose with footage.

• TypedHero

  Typewriter tagline with the blinking cursor armed only after "AI". Use sparingly.

Rendering defaults

Don't

• × Dark backgrounds, pure white, or pure black.
• × Gradients, glows, drop shadows, film grain.
• × Spring overshoot, bounce, rubber-banding.
• × Secondary accent colors or semantic encodings.
• × Fonts other than Inter + Caveat.
• × Unicode arrows, emoji, or icon fonts.
• × Mixing framerates within a scene.
• × Tinting or grading footage to match cream.