You commented "sites". Here it is. The full setup from the Reel: the four steps, the inspo board prompt, the two Claude prompts I used, the tools for the video, and credit for the sites you saw. No course and no upsell. Copy the prompts and build it.
Leave your email and this guide opens right here. The same email opens every other guide on the shelf and signs you up for the weekly letter.
Already on the list? Enter the same email and it unlocks without subscribing you twice.
Claude Opus 5.5 can build the code. Your job is to hand it a brand, a reference and a piece of motion it can't make itself.
Claude makes AI slop when it has to guess your taste. Give it your taste in a file and a picture.
If you already have brand guidelines, paste them in: the colours, fonts, spacing and any rules. If you don't, go to Pinterest, save ten or twenty images you like, then use ChatGPT Images 2.5 to turn that mood into one reference image for your brand. Images 2.5 is on every ChatGPT plan, so it's included if you pay for ChatGPT already.
The inspo board prompt from the Reel
A brand inspo board for a 3D studio: glossy cobalt and black forms, cinematic project shots, bold grotesk type, cool off-white, five-colour palette.
Swap "a 3D studio" and the colours for your own. Attach your favourite Pinterest images to the same message so it has something to work from.
Attach your brand template and your reference image, paste this, and pick Opus 5.5.
Build a one-page website for my brand. Take the colours, type scale and spacing from the attached brand template, and take the mood from the inspo board. Design for mobile first at 390 wide, then scale up to desktop. Structure: a full-height hero with one bold line of copy and a single call to action. A short intro. Three feature cards that use real imagery from the board, not icons. A proof strip, an FAQ and a simple footer. Type: one display face for headings, one text face for body. Large headings, tight letter spacing, generous line height on body copy. Colour: the template's palette only. One accent colour, used sparingly for links, buttons and focus states. Motion: a subtle fade and rise on scroll, nothing that bounces. Respect reduced motion. Rules: no stock gradients, no emoji, no filler copy, no lorem ipsum. Write clean, semantic HTML and CSS in one file and check it at 390, 768 and 1440 wide before you finish.
You get a full, on-brand page with no motion gimmicks. Read it on your phone before you move on. If the type or colours are off, fix them now, because step 4 builds on top of this.
Claude writes the code, but it can't film your hero shot. So make the image, then animate it.
Generate a still in any image tool you like, framed the way you want the hero to look. Then put it through an AI video model and describe the movement you want: a camera push, light warming, a product turning. A few seconds is plenty, since the scroll stretches it.
| Tool | What to know |
|---|---|
| ChatGPT Images 2.5 | What I use for the still. It comes with my ChatGPT subscription and it's close to state of the art. |
| Gemini | What I use for video. Check your plan: Google now lists video in the Gemini app (Gemini Omni) as a paid-plan feature, with a free year for students. |
| Seedance 2.5 | The state of the art for video, from ByteDance. On fal.ai it cost about $1.54 for a seven-second clip at 480p and $3.31 at 720p when I checked on 30 September. |
Attach the video to the same chat where you built the foundations, then paste this.
Use this video as the hero of the page. Split it into frames at 30 per second and preload them all before the hero shows. Draw the frames on a full-screen canvas. Tie the current frame to the scroll position, so scrolling down plays the video forward and scrolling up rewinds it. Smooth the scroll with easing so it never stutters. Pin the hero while the video plays. When the last frame is reached, release the pin and let the rest of the page scroll in over it. Layer the hero copy on top of the canvas. Fade the headline in during the first quarter of the scroll and out before the final frames. On mobile, use a portrait crop of the frames and a lighter frame set so it loads fast on 4G, and keep the drawing at 60fps on a mid-range phone. Keep the brand template's colours and type for everything around the video. Check the full scroll at 390 and 1440 wide, forwards and backwards, before you finish.
Scroll it forwards and backwards on your phone. If it stutters, ask Claude for a lighter frame set on mobile. That's usually enough to fix it.
The cinematic studio site in the Reel is lusion.co, by Lusion. I used it as the reference for this look. I didn't build it, and I earn nothing from the link.
The opening clips are other creators' Opus 5.5 builds. Their videos walk through the whole process and are worth your time:
You'll learn more from one ugly first build than from ten saved Reels.