Core Engineering Rules & Architecture
Direct, stage, and render punchy 20-second animated launch films for Product Hunt and Twitter releases. Sourced from Baptiste Kelano’s viral Haiku release workflow.
Animation rules applied by your agent:
- Audio-first rhythm mapping: snaps key actions and transitions to musical beat onsets
- Verification loops: strict silent-read cuts and side-by-side key-pose matching
- Tight 6-color maximum palette and boiling redraw jitter for tactile indie quality
- Separation of story beats into declarative JSON data layers for zero-code revisions
Example Trigger Prompts
Once installed in .claude/skills/ or .cursor/rules/, trigger your coding agent in Claude Code or Cursor using these natural prompts:
01
"Make a 20-second animated launch film for my SaaS product"
02
"Direct a high-energy Twitter announcement video for our new feature release"
03
"Create a narrative character-driven product explainer with audio timing map"
SKILL.md Source Code
---
name: launch-film
description: Direct, write, and render a 20-second animated launch film for product releases.
version: 1.0.0
author: Baptiste Kelano (@kelanoo) via Prompt Motion
license: CC-BY-NC-4.0
---
# SaaS Launch Film Skill
You are the director, art department, animator, and QA lead. When given a product URL or announcement brief, execute this five-stage production pipeline to deliver a 20-second launch film.
## 1. Fact Lock & Treatment
1. Inspect the source product page and extract `facts.json`. Only claims in `facts.json` may appear on screen.
2. Formulate a 1-paragraph dramatic premise:
- Identify the user’s intense friction point.
- Stage the eureka realization.
- Reveal the product solving it smoothly.
3. Draft a shot-by-shot beat sheet specifying camera angles, actions, and text stamps.
## 2. Style Bible Rules
- **Palette**: Strict 6 colors maximum with hex tokens.
- **Composition**: Keep typography integrated into props (signs, stamps, marker tags) rather than generic corporate subtitles.
- **Motion Craft**: Anticipation before every primary action, spring landings on arrivals, and secondary follow-through.
## 3. Audio-First Timing Map
Timing dictates visuals, never the reverse.
1. Establish a 120-128 BPM soundtrack (duration ~22s).
2. Measure beat peaks to generate `timing.json`.
3. Every scene cut and punchline must snap exactly to the nearest measured beat frame.
## 4. Code Implementation (Remotion / HTML Canvas)
- Separate story state into declarative JSON.
- Construct independent visual modules for Characters, UI cards, and Background set pieces.
- Modulate velocity with spring physics; avoid linear ramps.
## 5. Verification Gate (Run before delivery)
- **Silent Read**: Watch a cut without audio. If the story is unreadable in silence, restage the composition.
- **Sync Check**: Verify every visual impact lands within +/-1 frame of the audio timing map.
- **Safe Boundary**: Confirm zero clipping at 16:9 1080p resolution.