From one brief to a website you scroll through
This is the workflow behind those cinematic, scroll-driven websites you've probably seen floating around — the ones where a video or 3D-looking scene moves as you scroll, with real buttons and copy layered on top. You don't need to be a developer to build one. You need three things: Claude Code for the build, Higgsfield for the generated visuals, and one clear creative brief.
The plan
- Give Claude your business, your visual direction, and a reference site you like.
- Generate a starting image and a short video of your scene with Higgsfield, then wire that footage to scrolling.
- Polish the site, check it on a phone, and prep it for launch.
Important distinction: this technique makes a rendered video feel three-dimensional as you scroll through it. A true real-time 3D website — where a visitor can freely rotate an object or walk around a space — is a different, heavier build using an actual 3D engine. Know which one you actually need before you start:
| Your idea | Best starting point | |---|---| | A cinematic camera move controlled by scrolling | A Higgsfield video turned into a scroll sequence | | A subtle moving background | A short looping video, not a scroll sequence | | A product people can rotate or configure | A real, interactive 3D scene with a proper 3D model |
The master prompt
Copy this whole thing into Claude Code, fill in the brackets, and let it run. This is an original prompt built for this workflow — not a copy of any specific site's source code.
You are my creative director and senior front-end developer. Build a complete, original cinematic website in this project, not just a design description. Use Claude Code for the implementation and Higgsfield for generated visual assets.
1. MY BRIEF
Business or concept: [name and what it does]
Audience: [who this is for]
Main visitor action: [shop / reserve / inquire / join a waitlist / explore]
Visual subject: [product, space, landscape, object, or character]
Mood and palette: [three words and colors, or choose for me]
Actual content and assets: [logo, product photos, real copy — or say "fictional concept"]
Reference website: [a URL you like, or none]
What I like about it: [camera movement, lighting, typography, pacing, a specific section]
Must-have sections: [list, or propose the best structure]
Primary button destination: [real URL, or mark as not connected yet]
Generation budget: [max credits, or ask me before spending]
2. INSPECT AND PLAN
Read the project and preserve existing work. Default to React with TypeScript and GSAP ScrollTrigger unless there's a good reason to add something else. If I gave a reference, study its visible desktop and mobile behavior — entrance, transitions, text timing, final CTA — without claiming to access its private source or copying its branding, copy, or media. Propose one clear art direction and a short scene-by-scene plan before building. Never invent reviews, stats, or credentials.
3. BUILD THE VISUAL STORY
Default to one cinematic hero sequence with three beats: establish the subject, move closer or reveal a detail, then resolve into a clean composition for the main action. Keep all real copy, logos, navigation, and buttons in the website — not baked into the generated footage.
4. USE HIGGSFIELD FOR THE ASSETS
First confirm which Higgsfield tools and models are actually available in this session before generating anything. Start with one strong reference still using my supplied photos if I have them. Generate one continuous camera move — a slow dolly, shallow orbit, or controlled reveal. No cuts, no morphing, no unwanted text. Stay inside my generation budget and ask before spending if it's unclear.
5. TURN THE FOOTAGE INTO SCROLL MOTION
Build the scroll sequence as its own component with a bounded sticky scene, mapping scroll progress from 0 to 1 in both directions. Show a poster immediately while assets load. Respect reduced-motion preferences with a real static fallback.
6. MAKE IT A REAL WEBSITE
Build real headings, text, links, and accessible controls around the scene. Include the actual business sections this needs — product details, services, FAQ, contact, or booking. Only connect destinations I've actually supplied; never fake a success message for something that isn't wired up.
7. TEST AND REFINE
Check the live preview at phone, tablet, and desktop widths. Test forward/backward scrolling, resizing, reloading mid-page, and reduced motion. Report what you actually tested, not a guessed performance score.
8. HAND IT OVER
Give me the working local preview, the full source, a short README with real setup commands, and a clear list of what's a real integration versus a placeholder. Don't publish anything until I approve it.
Step 1 — set up Claude Code
Create a project folder, open it in Claude Code (Local mode), and pick your model. Set the effort level to Max for this first build — it burns more usage but gives the deepest reasoning for a from-scratch build. You can drop back down for small copy or color tweaks later.
Bring these four things and the first build goes noticeably better: your business name and one-line description, your actual logo and product photos, one reference URL and what specifically you like about it, and a generation budget so experimentation stays bounded. No real business yet? Build against a clearly labeled fictional concept instead.
Step 2 — connect Higgsfield
Higgsfield connects to Claude through MCP — the protocol that lets Claude call another service's tools mid-session. Add it as a custom connector inside Claude, sign in to your Higgsfield account, and authorize the connection. It requires an active Higgsfield plan, and connected generations spend real credits, so run this no-spend check first:
Check which Higgsfield tools are available in this session without generating anything. Confirm whether you can search image and video models, use the current video model, and save assets into this project. Tell me what still needs connecting. Do not spend credits on this check.
Step 3 — plan the shot before you generate anything
The single biggest quality jump happens before you touch the video generator: decide exactly what the camera is doing and where the text will sit. A simple three-beat storyboard covers almost every use case:
| Beat | Visual | Website content | |---|---|---| | Establish | Show the full subject with room around it | Brand name, short promise, main action | | Explore | Move closer, orbit slightly, or reveal a detail | One useful benefit or story point | | Resolve | Land on a stable, deliberate final composition | Product detail or invitation to continue |
Pick one movement — a dolly (toward/away, good for entrances and reveals), an orbit (around the subject, good for a product), or a reveal (something moves aside to expose the payoff) — and write the shot as one sentence: "Move slowly toward a charcoal running shoe on a black stone platform, ending close enough to see the knit texture, with empty space on the left for the headline." That single sentence gives Claude a subject, a setting, a move, an ending, and a place to put your copy.
Step 4 — generate the starting image, then the clip
Ask for one strong still first — if you're showing a real product, attach clean reference photos and tell Claude to preserve the exact shape, logo, and material. Check it at both desktop and phone crop before moving on: is the subject still readable narrow? Is there room for your headline? Only once that still is approved do you generate the short video clip from it, using the shot sentence you wrote in step 3. Watch the result scrubbed both forward and backward — a website will expose jumps and identity drift a normal video viewer would barely notice.
Step 5 — connect scrolling to the footage
This is what actually creates the cinematic effect. Claude maps how far a visitor has scrolled through a section (0% to 100%) to a point in the video's timeline, so scrolling forward advances the scene and scrolling backward reverses it — using GSAP ScrollTrigger and the video's native playback position. Ask Claude to keep it to one bounded sticky section, show a poster frame immediately while it loads, and never hide the whole page behind a loading percentage.
Three quick example briefs to steal
A clothing brand — one charcoal jacket suspended in a dark studio, tactile and restrained mood, a slow shallow orbit ending on a seam detail, main action: explore the collection.
A restaurant — a plated dish on a warm stone table, intimate mood, a gentle push toward the dish with subtle steam, main action: reserve a table. Keep the real menu, hours, and booking link easy to find without watching the full sequence.
A concept product that doesn't exist yet — one luminous abstract object as the visual thread, three short story beats explaining the idea, main action: join a real waitlist (or clearly label it as not connected if it isn't).
Make it actually work on a phone
The desktop version is only half the job. Keep the subject inside a safe crop on narrow screens (or generate a dedicated portrait asset), shorten the sticky scene if it forces too much scrolling before useful content appears, and make sure the main button is reachable even if the motion never loads. Ask Claude directly: "Review this on a narrow phone viewport, fix cropping and overflow issues, and show me a deliberate static layout for reduced-motion visitors."
Before you publish anything
Deploy to a host like Vercel only after you've approved the content and checked it live — a local preview succeeding is not proof the hosted version works. Check every button, the phone layout, and page title before sharing the URL. If a form or reservation isn't actually wired to anything real, say so on the page instead of faking a success message.
Common problems and quick fixes
| What went wrong | What to ask Claude to fix | |---|---| | The background plays on its own, ignoring scroll | Tie scene position to section scroll progress, not autoplay | | Motion jumps when scrolling backward | Check seek behavior, encoding, and competing animation loops | | A blank or black scene flashes in | Render a poster frame immediately, preserve the last valid frame while loading | | The phone crop cuts off the subject | Reframe the scene or generate a dedicated mobile asset | | Every button leads nowhere | Connect real destinations or clearly mark features as unfinished |
Build one excellent cinematic section first. Once it works forward, backward, and on a phone, you can always add more.