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 #FFFFFF. Text and controls stay within the neutral palette. Keep footage monochrome and preserve its natural contrast; use a clean white frame when a capture needs separation from the canvas. Do not add decorative grids, textures, or color washes behind it.

Type scale at 1080p

General Sans carries titles, body copy, labels, and controls. Manrope is limited to dates, timestamps, and other small editorial metadata. Multiply by 1.5× for 4K and by 0.66× for 720p.

Motion primitives

Deterministic and Remotion-native. Three durations cover almost every beat. Default entrances are short fades with no more than four pixels of movement; springs, bounce, and ambient loops are outside the system.

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

The graphite rule

The web’s 40 × 3 graphite rule can become 120 × 3 at 1080p. Reveal it over six frames and use it once in an opening or section divider. It is emphasis, not a device to repeat under every title.

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

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

Text actions

Calls to action stay as underlined text with the Lucide arrow-up-right. Fade the whole action in with its scene. If movement helps, let the arrow travel no more than two pixels after the text settles. Filled controls belong only in form demonstrations.

Hover to preview the two-pixel nudge.

Canonical compositions

Five drop-in compositions in the remotion repo under src/compositions/brand/. Each should ship with the white canvas, neutral palette, and restrained transitions as defaults.

• SectionDivider

  Sentence-case label over a section heading on white. A thin divider appears once between scenes.

• TitleCard

  Title fades up, then the subtitle follows with a four-frame stagger.

• LowerThird

  General Sans name with Manrope role metadata over monochrome talking-head footage.

• EndCard

  Wordmark, URL, and quiet text action. The arrow may nudge two pixels on appear.

• CaptionTrack

  Subtitle burn-ins on white 8px panels, auto-break at 40ch. Compose with footage.

Rendering defaults

Don't

• × Dark, tinted, textured, or decorative backgrounds.
• × Gradients, glows, drop shadows, film grain.
• × Spring overshoot, bounce, rubber-banding.
• × Color accents or decorative color encodings.
• × Fonts other than General Sans, with Manrope for metadata.
• × Unicode arrows, emoji, or icon fonts.
• × Mixing framerates within a scene.
• × Color imagery or decorative grids behind footage.