AI CSS Animations

Product Launch Video Workflow

A Claude Code skill and Remotion scaffold for 15-30 s launch videos: shot-list storyboard first, real UI copy only, product on screen within three seconds, then four parallel critic agents.

By Every @EveryInc Apr 20, 2026

Type
skill
Made with
Claude Code
Built in
Remotion
Topics
Product UI · Kinetic type

The skill

### 2. Storyboard before any code

Write a shot-list table. Resist the urge to start coding.

| Beat | Time | Visual | Text overlay |
|------|------|--------|-------------|

**Rules that save you from re-rendering:**

- **Use real product UI copy.** Screenshot the actual app and mirror what's there. Invented labels are the #1 reason launches feel fake.
- **Lead with the viewer's problem** (hook), not the product name.
- **Product must appear within 3 seconds** (a16z Speedrun research on launch videos).
- **Before/after is the money shot** — design the whole video around it.
- **All text must be readable at 720p** (phone feed). Minimum 18px equivalent.
- **85%+ of social views are muted** — burn all captions in. No VO unless explicitly requested.

[…]

## Hard-won lessons

- **Never invent product UI labels.** Screenshot the real app and mirror the copy exactly. This is the single biggest source of launch video cringe.
- **Find the one moment only your product can deliver — give it the most screen time.** Every launch video has a differentiating beat. The rest of the video should set it up. Don't spread the runtime evenly across features.
- **Before/after stagger beats simultaneous.** Land the "before" first for 0.7-1s, then crash in the "after" with a spring overshoot and a color flash. Much more dramatic than both appearing together.
- **Counter animations**: match per-frame digit rate to whatever feels natural. A bigger target number shouldn't fit in the same animation window — stretch it.
- **Endcard: one headline + CTA.** Don't stack 3 lines of copy. Use the landing page's actual tagline — not something you invented to sound punchier.
- **Ground your "problem state" in something viewers recognize without explanation.** If they need a sentence to understand what's wrong, the hook is too abstract.

From Every's repo, under the MIT license.

Similar prompts