AI CSS Animations

Product Film Prompt Template

A fill-in prompt template for beat-mapped product films in Remotion: the product's own surfaces and brand element, a bar-by-bar structure, closed-form springs, and style frames before any code.

By Anthony Riera @Rieranthony Sep 26, 2026

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

The skill

<context>
<Product> <does what, for whom, in one or two sentences>.
This film plays <where, from the interview>. It must read <with the sound off, if it plays muted>.
Read `videos/BRAND.md` first. It holds the brief, the look, the brand element, the components, the product owner's rulings and what we may claim. This prompt only adds the story.
</context>

<inputs>
Decided: <width>x<height>, 60 fps, <dark|light>, <N> bars at <BPM> BPM, <seconds> s. Music: <title, artist, license | silent>, in `public/audio/<film>/music/` (gitignored). Edit: song bars <a-b>, <c-d> (`edit.json`).
</inputs>

<direction>
<The feel in 3 short lines, in the product's own voice.>
Ingredients (from the interview): <brand element> · <how words appear> · <how scenes connect> · <extras>.
Only the product's own surfaces, colors, borders and effects.
Banned: <from BRAND.md, plus: anything the product's language does not use, words the product avoids, false claims>.
</direction>

<cast>
- The brand element: <the logo, a wordmark, a mascot the product has, or none>, and where it appears.
- Cursors: <the user's OS arrow, the product's own cursor, or none>.
- Demo world, from the landing page: <names, data, placeholders like (your product)>.
</cast>

<structure>
<BPM>, 4/4, <N> bars. One beat is <s> s. Something happens on every beat.

Bars 1 and 2, opening. <how the brand element or hero screen comes alive>.
Bar 3, <punchline or caption>: "<words>".
Bars .., <feature 1>. <what moves, beat by beat>.
Bars .., <the strongest moment, on the drop>.
Bars .., <proof, if chosen>.
Bars .., ending. "<tagline>" <call to action>.
Bars .., loop. <how it folds back into the first frame>.
</structure>

[…]

<start>
Read `videos/BRAND.md`. Before any scene code, show the beat sheet on the measured grid and three style frames: the opening, one feature scene, the strongest moment. Wait for OK.
</start>

From Anthony Riera's repo, under the MIT license.

Similar prompts