Customize this prompt for your product

Code-driven animation prompt for Claude Opus, shared as a text post

Prompt from @xelandre__ on X · made with Claude Opus, Ffmpeg, Playwright

Why it works

Time-driven rendering: each frame is computed from its timestamp, so the output is deterministic and can be reproduced frame by frame.
Frame-by-frame capture: headless Chrome with Playwright records each rendered frame, which keeps timing exact rather than relying on real-time recording.
Motion blur is named in the prompt as a finishing step, giving movement a smoother, more filmed look.
Code-generated sound is part of the same pipeline, so audio is produced alongside the visuals instead of being added separately.

Reference prompt

Remix template

Code-driven animation for [PRODUCT]: an HTML/JS page showing [FEATURES], where every frame is calculated from the time, captured frame by frame with headless Chrome (Playwright), then assembled with ffmpeg into an MP4 with motion blur and code-generated sound.

Your brief

Only the product name is required. Blank fields become questions Claude asks you. Nothing here is uploaded.

Product

Product name

One-line promise

What does it do for the user, in one sentence?

UI moments or features

One per line, in the order they appear in the video. 3–5 work best.

Call to action

The last line of the video, for example: Try it free at acme.app

Assets

Logo

PNG, JPG, WebP or SVG. Up to 5 MB.

Brand colors

For example: #0B5FFF and white

Font

Name of the font, for example: Inter

Files stay on your device. They are only put into the ZIP you download; nothing is uploaded.

Goal

Where will it be posted?

For example: X or Product Hunt

Length (seconds)

For example: 30

Aspect ratio

Any16:99:161:1

Key message

The one thing a viewer should remember.

AudioMusic or beatVoiceover

Constraints

Text that must appear exactly

One line per text, exactly as it should be spelled on screen.

Things to avoid

For example: stock footage, emojis

Style reference: this video

Asset paths in the copied text refer to the ZIP download. Copy brief gives you the text only.

Fill in the product name to see your brief here.

Run it in your terminal

Open your product's project folder in the terminal, then run this. If your browser saves downloads somewhere else, change ~/Downloads.

claude "Unzip ~/Downloads/code-driven-animation-prompt-for-claude-brief.zip into this folder, then read code-driven-animation-prompt-for-claude-brief/BRIEF.md and make the video"