Product Film — Design skill for Claude Code

product-film

An agent skill that makes motion films in code for a product or brand: launch films, teasers, feature demos, explainers, social cuts, landing loops, partner co-launches, event openers and data stories. The film is built from the product's own design system, components and voice, cut to a voiceover, music and sound design, and checked by measurement rather than by eye.

Every frame is a pure function of time, rendered by headless Chrome (or Remotion) and encoded by ffmpeg, so a film is a folder of code you can diff, re-render and change.

What it does

1. Reads the product's code and site for its colors, type, components, logo and copy rules.
2. Interviews you for the film type, the brief, the sound and the engine.
3. Pitches ideas, then writes a beat sheet with an energy curve, a camera plan and a planned first frame (the cover most players show), and checks the peak in a short motion test before building everything.
4. Generates the voice with word timings (one voice or several, directed with audio tags and a pronunciation dictionary, or your own read turned into the voice), music and sound design with ElevenLabs, or uses your own. It measures the beat with a beat-tracking model and cuts the music on bars onto the film's cues. Partners appear in their official identity via Brandfetch.
5. Choreographs with GSAP (letter reveals, drawn lines, flights along a path) and plays Lottie animation, generated footage (fal.ai) and Blender renders, all driven frame by frame so every render is identical.
6. Builds the scenes keyed to words and beats. Camera holds are fitted to the text being read and kept on the content, so lines are never cropped and the frame never drifts into empty space.
7. Reviews drafts by measurement and by fresh eyes: energy.py finds dead stretches and loud hits that land on still frames, film.mjs check finds text that is too small at phone size, covered, overlapping or cropped by the camera, and critic.py packs the draft for a r