remotion-skill

Remotion Skill

Architecture Rules

File structure (non-negotiable)

project-video/
├── src/
│   ├── Root.tsx              — all Composition registrations
│   ├── brand.ts              — single source of truth for all tokens
│   └── compositions/
│       ├── x/                — 1080×1080 square
│       ├── substack/         — 1456×816 landscape
│       └── linkedin/         — 1200×628 landscape

brand.ts is the only place for tokens

Never hardcode a hex value inside a composition file. Every color, font, spring config, and timing constant lives in brand.ts. If you find yourself typing #00d4aa inside a .tsx file, stop and move it to brand.ts first.

// brand.ts structure
export const BRAND = {
  // Backgrounds — never pure black
  bg: "#080810",
  bgCard: "rgba(255,255,255,0.03)",
  
  // Accent — one accent, one glow
  accent: "#00d4aa",
  accentGlow: "rgba(0,212,170,0.12)",
  
  // Text hierarchy
  white: "#ffffff",
  white80: "rgba(255,255,255,0.80)",
  white50: "rgba(255,255,255,0.50)",
  white20: "rgba(255,255,255,0.20)",
  
  // Surfaces
  border: "rgba(255,255,255,0.07)",
  
  // Typography
  mono: "'SF Mono','Fira Code','Cascadia Code',monospace",
  sans: "-apple-system,'SF Pro Display','Segoe UI',sans-serif",
  
  // Spring configs — named by feel, not numbers
  spring: {
    snappy:  { stiffness: 400, damping: 28 },  // UI feedback, small elements
    smooth:  { stiffness: 200, damping: 22 },  // Standard entrances
    gentle:  { stiffness: 120, damping: 18 },  // Full-screen transitions
    bouncy:  { stiffness: 300, damping: 12 },  // Only for icons, never text
  },
} as const;

---

The Spring Pattern

This is how every animated element is written. No exceptions.

// THE PATTERN — memorise this
import { useCurrentFrame, useVideoConfig, spring, interpolate } from "remotion";

const frame = useCurrentFrame();
const { fps } = useVideoConfig();

// 1. Spring value (0 → 1)
const entrance = spring({
  frame: Math.max(0, frame - DELAY),  // DELAY = when this element starts (in frames)
  fps,
  config: BRAND.spring.smooth,
});

// 2. Use interpolate to drive transform and opacity separately
const opacity = interpolate(entrance, [0, 1], [0, 1]);
const translateY = interpolate(entrance, [0, 1], [20, 0]);  // enters from below