I Made a 12-Second Product Video With Claude Code in 40 Minutes (Full Prompt)

TL;DR: I turned one detailed prompt into a 12.075-second, 1080×1080 product film with 720 frames at 59.94 fps. I used Claude Code, HTML, Playwright, ffmpeg and Python. The build took about 40 minutes, the music cost nothing, and the source remains editable. That matters because 91% of businesses now use video, while cost and lack of time remain two of the main reasons other teams avoid it.

A bootstrapped founder rarely needs a cinematic brand film. She needs one sharp asset that can open a launch post, sit above a landing-page fold, wake up a pitch deck and close a product demo. A 12-second sting is short enough to reuse and specific enough to make a product feel real.

LinkedIn says video viewing grew 36% in a year, video creation grew at twice the rate of other original post formats, and members are 20 times more likely to share video than other post types. HubSpot also ranks short-form video first among ROI-driving content formats. My video content strategy for startups explains how to turn that attention into a repeatable system instead of isolated posts.

The 12-second result

• One social-ready master: 1080×1080, 12.075 seconds and 59.94 fps for LinkedIn, landing pages and pitch decks.
• Eight purposeful shots: the logo rises into an app window, a cursor clicks, an icon assembles, a prompt types, the answer page arrives, feature cards stack, the logo holds and a wordmark closes.
• A keynote-grade motion language: soft light, frosted glass, camera drift, velocity-linked blur and no accidental dead frames.
• Sound built around the cut: a licence-free 124 BPM house track, clicks, whooshes, transition hits, key ticks and a final shimmer.
• Editable source: change a word, colour, frame or easing curve and render again in under a minute.

This is not an explainer video. It is a product sting: a compact proof of taste and momentum. Wyzowl reports that 93% of video marketers say video improves product understanding, 85% say it generates leads and 83% say it has directly increased sales. The film does not need to explain everything; it needs to make the next click feel worthwhile. For more, see Short-Form Video Marketing Trends: October 2026.

The lean tool stack

• Claude Code in the desktop app or terminal.
• Node.js and Playwright to open the composition and capture each exact frame.
• ffmpeg to encode the frames and add the finished soundtrack.
• Python 3 with numpy to synthesise clicks, whooshes, impacts, key ticks and the shimmer.
• A folder containing your logo as a square PNG of at least 400 px and a brand file with colour values and type rules.
• Your website URL, so Claude uses your real positioning instead of invented SaaS copy.

My direct asset cost was zero: Mixkit supplied the track under its free licence, and every effect was synthesised. The real input was one Claude Code session and 40 focused minutes. If you are new to the agent, start with Claude Code for Startups.

Step 1: Pick the story before the software

A 12-second film cannot carry five messages. Decide these four inputs before you prompt anything:

1. The one line a user types. Mine was: “Startup platform for female founders bootstrapping in Europe.” When the query and answer belong together, the product tells its own story.
2. The answer page. Reduce it to a title, two or three sentences and one phrase worth emphasising. Mine was “the no-fluff operating desk.”
3. Two feature words. Short, concrete words survive at cinematic scale. I chose “Validate” and “Growth.”
4. A track with a readable drop. At 124 BPM, one beat lasts about 0.484 seconds, which gives the edit a clean grid.

If an input is fuzzy, ask Claude to research your site before it writes a frame. Let the product supply the nouns; do not let the model invent a second brand.

Step 2: Direct the film by frame

The prompt below is the difference between “make something cool” and a controllable production. It specifies the timeline, eight-shot story, coordinates, cut frames, easing, blur, audio, banned choices and delivery settings. The 59.94 fps master renders every half-frame, producing 720 images.

Copy the structure, replace the inputs and resist the urge to make it shorter. Creative specificity is cheaper than revision.

<inputs>
website: https://blog.mean.ceo/;
a logo is in the working folder;
brand colours and type rules are in DESIGN.md;
prompt line: Startup platform for female founders bootstrapping in Europe;
answer page: the homepage;
feature names: pull two short names from the website;
sound: Mixkit house track "Rising Forest" at 124 BPM.
</inputs>

<direction>
Create a 12-second square product sting at 1080x1080.
Use frame numbers at 29.97 fps, f0-f359, and render the master at 59.94 fps.
The look is soft, bright, glassy and keynote-like.
Every shot enters in motion and leaves on acceleration or a blur ramp.
Blur must follow speed and direction.
Map my brand colours to page, haze, navy and three accents.
Use Inter 400, 500, 600 and 700 inside the film.

Story:
1. Product header rises inside a light app window.
2. Cursor glides in and clicks the logo.
3. Hard cut to the app icon with four squares orbiting into a cross.
4. Icon collapses into a menu bar; a frosted prompt opens and types.
5. Whip upward into the answer page.
6. A card rises, then two feature cards appear.
7. A single logo disc holds.
8. Hard cut to a black end card with a glowing wordmark.

Banned: crossfades, accidental frozen frames, stock UI kits,
glows on UI text, Math.random and anything that looks like a template.
</direction>

<structure>
Stage: 1080x1080.
Beat k = 0.048 + 0.4838 * k seconds at 124 BPM.
Keep hard cuts at f72, f101 and f159.

S1 f0-f71: header, window and click.
- Haze fades into the page by f28.
- Header rises from y932 to y536 through explicit keyframes.
- Window appears from f14 to f24.
- Cursor enters at f27, rotates toward the logo and clicks at f71.
- Camera zooms from 1.0 to 1.2, then accelerates out.

S2 f72-f100: icon and orbit.
- App icon shrinks from 276 px to 178 px.
- Four 92 px squares orbit counter-clockwise and lock into a cross by f86.
- From f88, icon and squares collapse into a menu-bar cluster.

S3 f101-f158: menu bar and prompt.
- Menu bar settles by f110.
- Cursor presses the product mark at f113-f117.
- Frosted prompt box springs open from f116.
- Prompt types from f121 to f150.
- Scene accelerates upward into a whip at f158.

S4 f159-f186: answer page.
- Page arrives 420 px low with 24 px vertical blur.
- It scrolls into place by f180.
- Cursor rides the move and stops under the key phrase.

S5 f187-f214: single card.
- White card rises over the page.
- It becomes sharp by f201.
- From f207, it shrinks, rises and blurs into the cut.

S6 f215-f244: two feature cards.
- Cards enter staggered and settle by f230.
- Each has abstract brand-colour cover art and one large glass title.
- They drift, accelerate upward and blur out.

S7 f245-f300: logo disc.
- Disc rises into the centre.
- Hold only from f269 to f287.
- Shrink into the end-card cut.

S8 f301-f359: end card.
- Black radial background.
- White wordmark enters oversized with zoom streaks.
- It settles, slowly shrinks, then collapses mid-motion at f359.
</structure>

<build>
1. Use one 1080x1080 HTML page drawn by seek(frame).
2. Make each frame a pure function of the frame number.
3. Use keyframe tables with continuous interpolation; do not floor motion.
4. Link blur strength and direction to velocity.
5. Reuse one SVG cursor across shots.
6. Create a 12.075-second soundtrack with music and synthesised effects.
7. Target -14 LUFS integrated and -1 dBTP true peak.
8. Render with Playwright, then encode H.264 yuv420p at 60000/1001.
</build>

<gotchas>
Wait for fonts before measuring text.
Scale the entire lockup if the product name is long.
Give white shapes a thin edge on white backgrounds.
Do not use cover images that already contain text.
Keep cut frames exact.
Nothing freezes except the planned S7 hold.
Reduce blur if a fast-moving object disappears completely.
</gotchas>

<start>
Ask me for missing inputs.
Then show four stills: f40, f86, f150 and f230.
Do not render the full film until I approve them.
</start>

Why this works:

• Frames remove ambiguity. “At f72” has one meaning. “Around 2.4 seconds” invites drift.
• The banned list protects taste. It prevents the easiest template-like defaults.
• The gotchas block stores production memory. Every line is a bug you only need to pay for once.
• The checkpoint limits waste. Four stills expose composition, type and brand problems before 720 frames are rendered.

Step 3: Lock the brand before the build

Claude opened my brand file, read blog.mean.ceo and surfaced four conflicts. This was useful: a good agent should not silently average contradictory instructions.

1. Logo versus palette. My logo photo contains purple and sunset orange, while the brief banned both. I tested a flat monogram, rejected it and returned to the original photo inside a frosted app icon.
2. Platform language. The starter pill said “on Whop”; my version changed it to “Blog.” Generic leftovers matter.
3. Music source. Claude could synthesise an original track or work from the Mixkit download. I chose the real track and saved the licence with the project.
4. Type system. The brief called for Inter; my editorial brand uses Work Sans and Lato. I kept Inter inside the film for the cleaner keynote feel.

Keep the brand file beside the logo and build files. A model can follow exact hex values, type rules and exclusions; it cannot recover a system that only exists in your head. See How to Build a Startup With Claude Code for the wider project workflow.

Step 4: Build deterministic motion

The technical idea is simple: treat the film as a webpage that can answer one question perfectly: “What should frame 230 look like?”

• One HTML page is the set. Every visual is positioned by seek(frame).
• Keyframe tables are the choreography. Curves connect deliberate decisions; they do not replace them.
• Velocity drives blur. Fast whips smear along their direction, while slow drifts remain readable.
• Frosted glass samples its background. A blurred, lightened copy is clipped to the box or letters.
• Generated SVG art stays clean. Brand-colour abstractions create texture without stock photos or baked-in words.

A normal export gives you a video. A deterministic webpage gives you a reusable motion system. For a hands-on look at this kind of agent workflow, read I Gave Claude Code My Laptop for a Week.

Step 5: Review cheaply, then review motion

Before the first full export, Claude rendered f40, f86, f150 and f230, then inspected about 80 more frames on contact sheets. That pass found three defects:

• menu-bar items colliding with the Wi-Fi and battery icons
• the enlarged cursor covering the logo after the click
• slow card movement inheriting too much blur from a rule tuned for whips

Then I used a silent 720 px draft at 30 fps and a live browser preview. Start a local server:

python3 -m http.server 8765

Open http://localhost:8765/index.html?preview&f=0. Give feedback like a director: “At f40, the lockup is too far right” is better than “make it pop.”

Step 6: Cut to the real drop

1. Measure the tempo. Claude measured the track at 124.00 BPM, so the requested slowdown was unnecessary.
2. Locate the actual drop. Energy analysis found an eight-bar breakdown, then the kick and bass returning at 46.47 seconds in the source.
3. Trim to the timeline. The source was offset so the drop lands at 2.467 seconds, immediately after the f72 cut.
4. Audit the beat grid. The planned spacing is about 483.9 ms. Every measured beat landed within 5 ms.

The first automatic guess was one beat wrong. A per-beat bass-energy check caught it. Beat detection can find a pulse, but only the arrangement tells you which beat feels like “one.”

Step 7: Make 12 seconds sound expensive

Every effect was synthesised in Python, which kept the sound design editable and removed sample-licensing questions:

• a soft low impact at 0.10 seconds
• four whooshes peaking on the major transitions
• two designed hits at 6.240 and 8.175 seconds
• mouse clicks at 2.33 and 3.83 seconds
• quiet key ticks about every 32 ms during typing
• a shimmer at 10.05 seconds, tuned to E major

The target was -14 LUFS integrated and -1 dBTP true peak, with only a 60 ms fade at the end. The finished master measured -14.1 LUFS and -1.5 dBTP.

Step 8: Render 720 frames and ship

Playwright opens the HTML, waits for fonts and images, and captures all 720 half-frames required for the 59.94 fps master. Those images go to ffmpeg:

node render.mjs film

The delivery settings were H.264, yuv420p, BT.709 colour, CRF 14 and 60000/1001 fps, followed by 320 kbps AAC audio. On my MacBook, the full-resolution picture render took about 35 seconds.

The final check covered duration, frozen stretches and cut positions. Only the planned logo hold at f269-f287 stays still; every other shot enters or leaves in motion.

Mistakes that make it look AI-made

• Prompting for a vibe instead of a timeline. Specify shots, frames, motion and exclusions.
• Rendering before reviewing stills. Fix composition on four PNGs, not after 720 frames and a mastered soundtrack.
• Using images with words baked in. Existing text fights captions and glass titles.
• Trusting the first detected downbeat. Check bass and kick energy beat by beat.
• Blurring every object equally. Blur should follow speed and direction.
• Forgetting asset provenance. Save the music licence with the project.

Copy-this checklist

1. Put the logo, brand rules and licence file in one project folder.
2. Choose one user prompt, one answer page, two feature words and one track with a clear drop.
3. Paste the full prompt and replace the inputs first.
4. Resolve conflicts in the logo, labels, colours, type and music.
5. Approve f40, f86, f150 and f230 before the full render.
6. Watch a low-resolution silent draft and give feedback by frame number.
7. Verify the downbeat, add effects and measure the master.
8. Render the 59.94 fps version, inspect the cuts and publish it in more than one place.

If you build one, send it to me. I want to publish a gallery of what bootstrapped founders can make without a studio. For more founder-focused examples, see Short-Form Video Marketing Trends: September 2026.