add-animation

name	add-animation
description	Scaffold a new on-brand Remotion animation (or reuse an existing one) and register it so it can be previewed and rendered. Use when the user wants a title card, lower-third, stat/count-up, transition, or other motion graphic for a video.

Add an on-brand animation

Goal: produce a Remotion composition that follows the brand and is registered for preview.

Steps

1. Clarify intent if vague: what kind of animation (title card, lower-third, count-up stat, list reveal, transition, avatar shot), the text/numbers, and where it's used (full-screen scene vs. overlay on footage).

2. Reuse first. Check src/compositions/ — TitleCard, LowerThird, CountUp, and Background (light/dark) already exist. If one fits, just update its defaultProps in src/Root.tsx.

3. Otherwise scaffold a new file in src/compositions/:

   • Pull all colors/fonts/easings from src/brand/tokens.ts — never hard-code hex.
   • Honor the brand rule: teal leads, coral earned, navy-teal grounds dark scenes, Inter type, content legible first (./design.md).
   • Define a zod schema + export it; type props from it.
   • Use useCurrentFrame + spring/interpolate with EASING.entrance / EASING.spring.
   • For overlays meant to sit on footage, keep the background transparent.

4. Register it in src/Root.tsx with a <Composition> (id, durationInFrames, fps, width/height from VIDEO, schema, defaultProps).

5. Preview: tell the user to run npm run studio and open the composition. Iterate on their feedback.

6. Render when approved via the /render skill.