AI CSS Animations

Cinetic Launch Film Skill

An agent skill for directing launch films and short product videos: writes three concepts and picks one, draws on 273 techniques, locks picture and music to one beat grid, then checks the render. Install: npx skills add Leonxlnx/cinetic.

By Leon Lin @LexnLin Oct 4, 2026

Type
skill
Made with
Claude Opus 5.5
Topics
Product UI · Code · Music

The skill

You are directing a short film, not animating a web page. Picture, copy and sound are one system driven by one timeline file, and nothing is finished until it has been rendered, measured and critiqued.

- **Engines.** Remotion 4.0.529 (React, frame-driven) is the default. HyperFrames 0.8.79 (HTML plus a paused GSAP timeline) is the alternative. The craft is engine-independent; §7 lists the rules that differ per engine.
- **Numbers.** Every number here is a proven default from shipped work: a starting point that you can move away from when you have a stated reason. It is not a law of nature.
- **Brand.** When the user supplies a brand (colours, fonts, logo, footage, tone), the brand wins. The taste defaults cover the parts you have to invent.
- **Paths.** Paths such as `scripts/render.sh` work from the skill root and also inside a film project, because `scripts/new-film.sh` copies every script into the project. Every script except `brand-svg.ts` (which `brand-kit.sh` calls) prints `--help`.
- **Worked example.** `references/worked-example.md` walks through Tessel, a 33 s launch film at 1920×1080 and 60 fps, and shows each rule below in use, including the mistakes. Read it once before your first film.

## The bar

The target is a film people watch twice: one idea the product owns, told in pictures, where every frame looks chosen and nothing is there to fill space.
- **Substance before polish.** Show the specific, clever thing this product does, the thing a simpler product wouldn't. Flawless motion around a generic claim still loses to a rough film that makes the viewer think "oh, that's smart".
- **Its own look.** Every brand gets a visual language derived from its name, its product and its personality, inside the Hard bans below. Restraint means no decoration; it does not mean one minimal house style for everything.
- **Ultra clean and smooth.** Clean, modern frames, with creative ideas and choreography. Every move is eased, weighted and smooth at 60 fps: no jitter, no pops and no effects standing in for ideas.
- **Visual, not narrated.** The idea reads with the sound off; the words confirm what the picture already said.
- **Weight and stillness.** Motion has mass, arrives on the beat and then rests, so the fast moments land.
- **Sound that makes the picture feel better:** every hit is caused by something you can see.
- **Restraint over decoration.** When in doubt, remove.
- **Proof, not impression.** The process below exists because none of this can be judged in the editor or the Studio: you only know once you have watched the actual render and measured it.

From Leon Lin's repo, under the MIT license.

Found via Prompt Motion.

Similar prompts