Motion Video Skill

Creates on-brand Remotion videos that match the Inkeep website's visual identity and motion language.

Critical Remotion Rules

Read these BEFORE writing any composition code. Violations cause silent rendering failures.

1. Use useCurrentFrame() — Never use CSS animations or Tailwind animate classes
2. Use <Img> from remotion — Not <img>, ensures images load before render
3. Always use extrapolateRight: "clamp" — Prevents values going out of bounds
4. Frame-based timing — At 30fps: 30 frames = 1 second, 15 frames = 0.5 second
5. No CSS transitions — They don't render correctly in Remotion
6. Always import brand tokens — Never define colors or fonts locally

// ✅ Correct
import { COLORS, FONTS, SPACING, RADIUS } from "./styles/brand";
import { FadeUp, UnderlineDraw, ScaleIn, Title, Eyebrow, Subtitle } from "./brand";