One prompt built this whole videovideoand it is yours to copycopy

This is what it made from the Blinkz site in one run

How to run it

1. 01

   Gather what you have

   Your website, a product doc or a few screenshots. The more real material it can read, the less it has to invent.

2. 02

   Paste the prompt into Claude Code

   Run it on Opus from your project folder. Fill in the brackets: the source, the focus, the length and the ratio.

3. 03

   Let it build, then look at the frames

   It writes the plan, builds every frame in code, checks its own stills and renders the video with a poster and a caption.

Everything in square brackets is yours to fill in. The brand section is where your own rules go, like words you never use or anything that must never appear on screen.

<role>
You are a motion designer and creative developer. You turn a live website into a UI motion video made entirely in code: one shape that morphs through the site's real components on the beat of a song, driven by a cursor. You judge the result by editing standards, not web standards. You check your own frames before you call anything done.
</role>

<inputs>
Source: [your live URL, or your project folder]
Focus: [the one thing the video is about, or "pick the strongest angle yourself"]
Extra material: [product doc, screenshots, or none]
Song: [path to an MP3 around 120 BPM, or none and score it yourself in code]
Length: [14-second loop / 20 to 25 seconds / 42-second tour of the page]
Ratio: [landscape 1920x1080 / portrait 1080x1920 / square 1440x1440]
Show me the plan before you build: [yes / no, just build it]
</inputs>

<brand>
Read the site's CSS, components and copy before designing anything. Use its exact fonts, colours, shadows, radii, buttons, pills and icons. Use its real copy only. [Add your own rules here: headline style, words to avoid, anything that must never appear on screen.]
</brand>

<direction>
One shape, never cut. Every state is the same element changing its size, corner radius and colour while its content swaps with a short blur. Every element keeps a lineage: a warning becomes a list, the list becomes a checklist, the card becomes a phone, the phone becomes the final button.
A cursor drives each change with real clicks, hovers and drags. The camera zooms so each state fills the frame.
Springs everywhere, a tiny overshoot at most. For a loop, the last frame is the first frame.
Hook in the first 2 seconds. Someone watching once should know what it is, who it is for, and how to get it. Any line meant to be read stays on screen about 0.3 seconds per word.
Banned: bouncy easing, particle bursts, invented glows, gradients on UI chrome the site does not already have, hard cuts, muddy crossfades, invented copy, numbers or testimonials, filler.
</direction>

<sound>
Music and sound effects are one piece: same key, same room. Every state change lands on a beat. Effects sit under the music, and small repeated sounds stay in the background. Peak normalize to about -1 dBFS.
</sound>

<process>
1. Setup. Check for Node with Playwright and Chromium, Python 3 with numpy and scipy, and ffmpeg. Install what is missing. Put everything in a new output folder, with intermediates in work/.
2. Inspect. Answer: what it is, who it is for, what sets it apart, the strongest real claim, the visual hook, the real UI to show, a one-line caption.
3. Plan. Write plan.md: the angle, the hook, each state with its time and beat, how the one shape changes from state to state, and the sound cues.
4. Build. Render in headless Chromium, either the real page or a composition rebuilt from its real CSS and copy. Every frame must be a pure function of time. Pause every running animation and seek it to its own elapsed time, and wait for fonts and images. Capture at 1.5x scale so the camera zooms stay sharp.
5. Check. Before the full render, look at stills of every state and mid-transition. Fix overflow, collisions, leftovers from the previous state, text touching the edge, low contrast.
6. Deliver. Encode H.264 and add the audio. Pick the best settled frame as poster.jpg and bake it in as frame 0. Write a short share caption. Tell me where the files are.
</process>

Why it looks clean

• One shape, never cut. Every state is the same element changing size, corners and colour, so the video reads as one continuous move instead of a slideshow.
• A cursor drives it. Real clicks, hovers and drags give every change a cause, which is what makes UI motion feel alive.
• Only real copy. It reads your site and uses your own words, colours and components, so it never looks like a template.
• It checks its own frames. Leftover text, clipped edges and low contrast get caught before the render, not after you post it.

Where it comes from

• Jens Heitmann on Instagram

  The role and direction lines build on his motion video prompt.

• The brag skill on GitHub

  The Claude Code skill his workflow points to. Install it if you want a ready-made version of this process.