A full-bleed video hero is the single fastest way to make a site look expensive, and it is also the reason most small sites don't have one. Stock footage looks like stock footage, and shooting something yourself is a day you don't have.
This build generates the footage instead. A still image is prepared in ChatGPT, Gemini's Veo 3 turns it into a subtle cinematic loop, Cloudinary serves it, and Claude Code builds the site around it one section at a time.
The section-by-section part matters. Asking for an entire multi-section site in one message gets you a site where every section is slightly wrong; asking for one section at a time gets you one you can correct as you go.
01Collect references for the whole page, not just the hero
Pull references for every section you intend to build, not only the top of the page. The hero is the part everyone plans and the part that sets expectations for everything under it — a cinematic hero above four flat sections reads worse than four consistent ones.
Keep them in one place. You will paste them back in repeatedly.
From the library
Get the prompt for this build
The designs used in this lesson live in the library. Open one to copy the prompt behind it.
02Prep the still in ChatGPT
Generate or adapt the hero image, then get it into the aspect ratio the hero will actually use. Doing this now rather than cropping later is what keeps the composition intact — a crop applied after animation throws away framing the video was built around.
Widescreen and a clear area where the headline will sit. The image has to survive having text on top of it.
- Set the aspect ratio before animating, never after
- Leave deliberate negative space for the headline
- Keep the contrast low where text will land
03Animate it with Gemini Veo 3
Feed the still into Veo 3 and ask for restrained motion: drifting cloud, a slow push, light moving across a surface. The goal is a loop that reads as atmosphere rather than a clip that demands to be watched.
Anything with a clear beginning and end fights the page. Anything that loops disappears into it, which is what you want behind a headline.
04Clean up the generated clip
Generated video usually arrives watermarked and longer than needed. Remove the watermark, trim to the loopable section, and check the seam between the last frame and the first.
Then compress. A hero video is the largest asset on the page and the one blocking first paint, so this is a performance decision as much as a visual one.
- Trim to the cleanest loop, not the longest usable stretch
- Compress before uploading — the hero is your largest asset
- Always ship a poster image for the frames before playback starts
05Host it on Cloudinary
Upload the clip to Cloudinary — the free tier is enough — and take the delivery URL. Serving video out of a repo is slow and, past a certain size, simply refused by most hosts.
Hand the URL to the model rather than the file. It is a much more reliable instruction.
06Build the site around it, one section at a time
Give Claude Code the video URL and the hero reference, and ask for the hero alone. Get it right — the overlay darkness, the type scale, the mobile behaviour — before mentioning any other section.
Then repeat for each section below it, pasting that section's reference as you go. It is slower than one big prompt and it produces a site you don't have to unpick.
- Hero first, and finished, before anything else exists
- One reference image per section, sent with that section's request
- Set `muted`, `loop`, `playsInline` and `preload` deliberately
What you end up with
A site with a hero video nobody else has, because it did not come from a stock library and was never filmed.
The reusable idea is the asset pipeline: prepare, animate, clean, host, then build. Each step has one job, and the build step goes smoothly precisely because the four before it were done separately.
