Claude Can Build Insane Cinematic 3D Websites

The complete Claude + Higgsfield workflow, from one creative brief to a website you can scroll through.

You can start this with a clothing brand, a restaurant, a product, or a completely fictional concept. Pick one clear subject and one thing you want the visitor to do. The rest of the page should support that.

What Creates the Cinematic Effect

Higgsfield generates an image and a short video of your scene. Claude builds a website that moves through the footage as you scroll, with real headings, buttons, and content layered around it. Scroll forward and the scene advances. Scroll backward and it reverses.

This can look three-dimensional even though the visual is a rendered video or a sequence of frames. A real-time 3D website is different: the browser renders a scene with a camera, lights, and objects. You need that when people must rotate an object freely or interact with it from different angles.

Start with the version you actually need

The master prompt is below. Fill in the brief, copy the whole prompt, and use the setup walkthrough afterward if anything is unfamiliar.

The Complete Master Prompt

Copy everything from START to END as one prompt. Replace the brackets. This is an original master prompt written for this workflow, informed by the documentation linked at the end. It is not a copied prompt or a claim that the reference sites were built with these tools.

Master Prompt: Copy From Start to End

START OF MASTER PROMPT

You are my creative director and senior front-end developer. Build a complete, original cinematic website in this project, not just a design description. Make the motion feel intentional, the typography confident, and the page useful to an actual visitor. 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 the website is for]

Main visitor action: [shop / reserve / inquire / join a waitlist / explore]

Visual subject: [product, space, landscape, object, or character]

Mood and palette: [three descriptive words and colors, or choose for me]

Actual content and assets: [attach logo, product photos, copy, and real facts, or say fictional concept]

Reference website: [paste a URL you like, or none]

What I like about that reference: [camera movement, lighting, typography, pacing, layout, or a specific section] Must-have sections: [list, or propose the best structure]

Primary button destination: [real URL or mark as not connected]

Generation budget: [maximum credits or ask before spending]

Existing stack: [use the current project / choose a simple stack]

2. INSPECT AND CHOOSE A DIRECTION

Read the project and preserve existing work. If this is a new folder, choose a small, maintainable front-end stack. React with TypeScript and GSAP ScrollTrigger is a suitable default. Add a framework or library only when it earns its place.

If I gave a reference, open it and inspect its visible desktop and mobile behavior with available browser tools. Study the entrance, scene transitions, text timing, contrast, and final call to action. You may inspect publicly served HTML, CSS, and JavaScript to understand techniques. Do not claim you recovered its private repository or backend. Do not copy its branding, text, proprietary media, or distinctive composition wholesale. If source reuse is appropriate, use an explicitly licensed repository and keep its license. If you cannot access the reference, say so and ask for screenshots or a short screen recording.

Propose one clear art direction and a short scene-by-scene plan, then continue building the local prototype. Ask only about missing information that materially changes the result. Choose sensible defaults for minor details. Keep a short record of assumptions. Don't invent customer reviews, statistics, business credentials, products, or live integrations.

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. Give each beat a purpose and keep the rest of the page easy to browse. Use generous spacing, a deliberate type scale, a restrained color system, and section layouts that fit this business.

Design the desktop and phone crops before generating assets. Keep the important subject and text-safe areas in mind. Keep all readable copy, logos, navigation, and buttons in the website rather than baked into the generated footage. Make the text readable throughout the camera move, using restrained gradients or solid backgrounds where needed.

4. USE HIGGSFIELD FOR THE ASSETS

First verify the Higgsfield tools actually available in this Code session. Check the current model options and parameters. Use an available image model for stills and Seedance 2.5 for video if this connection supports it. If that model is unavailable, explain the limitation and propose an available alternative before using it. Do not pretend a generation ran.

Start with one strong reference still, using my supplied product imagery when available. Create a short, continuous camera move from the approved visual direction. Favor a slow dolly, shallow orbit, or controlled reveal. Request consistent geometry, stable lighting, coherent reflections, no cuts, no sudden zooms, no unwanted text, and no morphing. Use supported duration, aspect-ratio, and resolution settings. Make no audio-dependent interactions.

Work within the generation budget I supplied. If it is blank or the cost is unknown, show the proposed asset batch and ask before spending. Reuse successful generations. Don't resubmit a job just because it is still processing. Keep the job IDs, prompts, settings, and returned asset references. If generation is blocked, continue with a clearly labeled local placeholder and tell me what is needed.

5. TURN THE FOOTAGE INTO SCROLL MOTION

Build the scroll sequence as a dedicated component. Use normal page scrolling with a bounded sticky or pinned scene. Map that section's scroll progress from 0 to 1 to the visual timeline so it moves correctly in both directions. Keep the scroll-to-scene mapping deterministic, including after resize, refresh, and a fast jump down the page.

Choose between a compressed video controlled through currentTime and an optimized image sequence drawn to canvas. Test the chosen method on desktop and mobile. If video seeking is uneven, try a seek-friendly encode or a measured frame-sequence approach. Do not assume an image sequence is automatically lighter. Explain the choice briefly.

Show a poster immediately while the motion assets load. Never hide the entire website behind a percentage loader. Keep the last decoded frame visible until the next one is ready. Bound frame loading, decoding, and memory usage, especially on phones. Avoid blank frames when a visitor scrolls ahead. Recalculate sizing and crop correctly when the viewport changes.

Use one animation system for this sequence. Start with native scroll. If you introduce smooth-scroll tooling, integrate it with the animation loop correctly and justify it. Avoid multiple smoothing layers, scroll hijacking, and long delays between a gesture and the visual response. Clean up listeners and animation instances when components unmount. Respect reduced-motion preferences with a strong static version and normal document flow.

6. MAKE IT A REAL WEBSITE

Build real semantic headings, text, links, and accessible controls around the scene. Keep the main offer understandable before someone scrolls. Include the relevant business sections, such as product details, menu, services, FAQ, contact, or booking, with editable content separated from animation logic.

Use responsive type, comfortable line lengths, adequate contrast, visible keyboard focus, descriptive image text where appropriate, and generous touch targets. Ensure the mobile menu opens, closes, and releases focus properly. Don't let a canvas or overlay block buttons. Keep essential content available when motion fails or is disabled.

Connect only destinations I supplied. If a form, checkout, reservation, or mailing-list service is not configured, make that clear instead of showing a fake success message. Never embed credentials in browser code. Generate assets during development and store approved production assets in a durable location. Visitors should not trigger AI generation merely by loading the site.

7. TEST AND REFINE

Run the project's available build and relevant checks. Open the actual preview and inspect it at phone, tablet, and desktop widths. Test forward and backward scrolling, fast scrolling, resizing, reloading halfway down, keyboard navigation, reduced motion, and asset-load failure. Check the console and network for errors. Identify the largest downloads and unnecessary work. Report measured results, not guessed performance scores.

Refine the weakest parts you observe: generic layout, awkward line breaks, hard-to-read text, distracting movement, crop problems, sticky-section jumps, and unfinished controls. Preserve successful sections while fixing specific problems. If you cannot run a check, say exactly what remains unverified.

8. HAND OVER THE FINISHED LOCAL PROJECT

Give me the working local preview and the complete source files. Save a short README with exact install, development, and production-build commands. Include an asset manifest, generation records, and notes explaining where to edit text, colors, media, and scroll timing.

List real integrations versus placeholders. Prepare the project for Vercel or the host I choose, including any asset-hosting and environment-variable requirements. Keep credentials out of the deliverable. Stop before uploading or publishing until I approve the destination. End with a concise summary of what works, what you tested, and any remaining launch steps.

END OF MASTER PROMPT

Make a place for the website

Create an empty folder with a simple name such as cinematic-website. This is where the website's files will live. Keep your logo, product photos, and written brief together so you can give Claude the actual material it needs.

Open the Claude desktop app, choose Code, select Local, and choose that project folder. Use the model picker near the prompt area to choose Fable. The desktop app can run and preview the website in the same session. [1]

Choose the model and effort

The video uses Fable 5. Anthropic's current model page also lists Fable 5.1, so use the Fable version available to your account. Access depends on your plan and organization. [2]

Set the separate effort control to Max for this initial build. Max is the deepest model reasoning level in Claude Code. Ultracode is a separate workflow setting, not another name for Max. If you're using the terminal version, /effort max sets the session's effort. [3]

Give it a useful starting point

For a first attempt, use a fictional concept if you don't have a business ready. Label it as a concept and keep invented business facts out of a real company's website.

MCP is the connection that lets Claude use another service's tools. Here, it lets Claude request images and videos from your Higgsfield account while it works on the website.

Desktop connector route

1. In Claude, open Customize > Connectors. Some versions show Settings > Connectors. [4, 5]
2. Add a custom connector named Higgsfield and use https://mcp.higgsfield.ai/mcp.
3. Choose Connect, sign in to Higgsfield, and complete the authorization. [4]
4. Return to the local Code session. The + > Connectors menu lets you review available connections. [1]

Prompt 2: Check Access Before Generating

Check which Higgsfield tools are available in this session without generating anything. Confirm whether you can search image and video models, use Seedance 2.5, retrieve completed assets, and save them into this project. Tell me what still needs connecting. Do not spend credits on this check.

Higgsfield requires an active paid subscription for this integration. Connected generations use credits, including when the website offers some unlimited generations. A prompt budget is an instruction to the agent, not a hard spending cap. [5]

If you're using the standalone Claude Code terminal

Higgsfield also documents a CLI route. Ask Claude to follow Higgsfield's official connection instructions, install the official CLI and companion skills, then complete the browser sign-in yourself. You don't need both routes if one already works. [5]

Five Websites Worth Studying

These are visual references, not claimed Claude or Higgsfield builds. The first two are the examples supplied with this video. All five were opened and visually reviewed for this guide. Four use Vercel URLs. Study one specific design decision from each instead of combining every effect into one page.

1. DOORS: the portal entrance

Open DOORS

An electric-blue doorway sits behind oversized white lettering. Scrolling draws you toward the glowing opening. It gives the page an immediate destination and a reason to move forward.

Model this: One strong focal point, a clear forward camera move, and type that belongs to the composition.

Adapt it: For a hotel, move through an entrance toward the view. For a studio, move through an abstract portal into selected work. Use your own scene and identity.

2. PeachWeb: a whole visual world

Open PeachWeb

The opening uses a surreal fish, reflective forms, and a pastel landscape, with the offer and buttons placed over the scene. PeachWeb is itself a WebGL website builder, so treat this as inspiration rather than an extra tool required by this guide.

Model this: A coherent environment, a distinctive palette, and readable copy within an immersive scene.

Adapt it: Build one world around your subject. A skincare product could live in a soft mineral landscape. A restaurant might use warm light and a close-up tabletop scene.

3. Conoid: an abstract tech identity

Open Conoid

A purple wire-like form provides depth behind bold, sparse typography. The scene carries a consistent mood while the page introduces the idea and its features. This demo is linked from DOORS.

Model this: A single abstract motif repeated across the experience, with enough restraint to keep the message readable.

Adapt it: For a software concept, use a controlled stream of particles or a sculptural object to represent the product. Avoid filling the page with unrelated futuristic effects.

4. Uma Jewellers: the product is the hero

Open Uma Jewellers

A gold ring against a dark, warm background shares the first screen with large editorial type. The page then moves into collections and craftsmanship. Its creator describes the hero as a real-time WebGL ring. [6]

Model this: Product lighting, negative space, and the transition from spectacle to useful shopping content.

Adapt it: Put your actual product in the scene and keep material, shape, and proportions accurate. A generated orbit can give a similar cinematic impression, but it won't become an interactive product configurator.

5. The Cosmos Within: scrolling as a journey

Open The Cosmos Within

A dark starfield, luminous particles, and staged text create the feeling of moving through space. The creator documents a Three.js scene with scroll-driven camera waypoints. [7]

Model this: A sequence with a beginning, middle, and destination, rather than a single effect repeated forever.

Adapt it: Use a journey to explain a process, explore a place, or introduce a fictional world. Keep each text section short enough to read without fighting the motion.

A link gives Claude a target to inspect. It doesn't automatically provide the original source files, and it doesn't tell Claude which part you liked.

Give it the useful details

Prompt 3: Reference Breakdown

Study [reference URL] using the browser tools available to you. Explain its hero composition, camera movement, text timing, section transitions, and mobile treatment. Separate what you observed from what you're inferring about the implementation. Suggest how to apply those principles to [my business] with original assets and copy. If you cannot inspect the motion, say so and tell me which screenshots or screen recording would help.

What "pull the code" really means

Claude may be able to inspect files a website sends to the browser. Those files are often bundled or minified, and they are not the same as the author's original project. A URL also doesn't expose server-side code or private data.

Use the reference to understand a technique. If you want reusable code, provide your own project or an explicitly licensed template and keep the required attribution. For this workflow, a clean original implementation is usually easier to maintain than reconstructing somebody else's bundle.

The biggest improvement often happens before generation. Decide what the camera is doing and where the text will sit. One continuous move is easier to connect to scrolling than a montage of unrelated shots.

A simple three-beat storyboard

1. Establish. Give the subject room.
2. Explore. Move closer to a detail.
3. Resolve. Land on the main action.

Choose one kind of movement

Dolly: The camera travels toward or away from the subject. Useful for entrances, spaces, and product reveals.

Orbit: The camera moves around the subject. Useful for a shoe, bottle, watch, or sculptural object. A shallow arc is often easier to keep consistent than a full revolution.

Reveal: Something moves aside or the camera passes an obstruction. Useful when the final view is the payoff.

Write the shot in one sentence

That sentence gives you a subject, setting, move, ending, and place for the copy. Add lighting and materials next. Don't ask for five camera moves in a single short clip.

A strong still gives the video a clear visual target. If you're showing a real product, attach clean product photos and ask Claude to preserve its identity. Check the output before using it as the basis for motion.

Prompt 4: Starting Image

Using the connected Higgsfield image tools, create a cinematic starting frame for [business or concept]. Main subject: [subject]. Setting: [environment]. Materials and lighting: [details]. Palette: [colors]. Composition: [subject position] with clear negative space at [text area]. Use the attached product reference accurately if supplied. Keep logos and website text out of the image. Plan a crop that also keeps the subject visible on a phone. First show the chosen model, supported settings, and credit estimate, then follow my approved budget.

Check the still at website size

Look at the image wide, then imagine a narrow phone crop through its center. Is the subject still recognizable? Is there enough space for the title? Does the lighting give the background depth without swallowing the product?

Ask Claude to animate the starting image through Higgsfield using Seedance 2.5, where it is available in the connected tools. Higgsfield documents both reference-based video generation and a separate editing model. Supported settings can differ between the website and the connected tool, so have Claude check them first. [8, 9]

Prompt 5: Scroll-Sequence Video

Use this approved image as the visual reference for one continuous cinematic shot with Seedance 2.5 through Higgsfield, if supported here. The camera [describe one controlled move] from [starting view] to [ending view]. Preserve the subject's identity, geometry, materials, and lighting throughout. Keep [area] visually calm for website text. No cuts, transitions, sudden acceleration, handheld shake, morphing, new objects, logos, or baked-in words. Favor clean, steady motion that still looks good when paused or scrubbed backward. Aim for a short 5-8 second shot using supported settings. No audio is needed for the website. Stay within my approved generation budget.

Watch it more than one way

Play the clip normally, then pause at several points. Scrub backward. Check whether the product changes shape, the room shifts, the camera jumps, or the subject exits the mobile crop. The website will expose intermediate frames that a normal video viewer might barely notice.

Keep a record of the asset

Save the approved original, generation prompt, model/settings, and job reference. Keep a separate optimized web version so you can revise compression without losing the original quality. An asset URL returned by a generation tool may not be the durable public URL you want on a finished website.

This is the step that turns a nice background into the effect from the video. A looping background plays on its own. A scroll-controlled sequence follows the visitor's position through a specific section.

How the connection works

Claude calculates how far the visitor has moved through the scene, from 0% to 100%. It maps that progress to a timestamp or frame. GSAP ScrollTrigger supports scroll-linked animation and pinned sections. Browser video elements expose a playback position through currentTime. [10, 11]

Scroll forward to advance. Scroll backward to reverse.

Two implementation choices

Prompt 6: Motion Implementation

Turn the approved hero media into a reversible scroll sequence. Keep native page scrolling and one bounded sticky scene. Use the same progress value for visual position and text cues. Show a poster immediately and preserve the last available frame during loading. Test video seeking first, then explain whether an optimized frame sequence would improve this specific asset. Check fast scroll, reverse scroll, resize, and reload midway. Keep readable HTML content outside the canvas and provide a static reduced-motion version.

When You Actually Need Real 3D

Use the video approach when the visitor follows a fixed camera path. Choose real-time 3D when the experience needs new views or object behavior that wasn't already rendered into the clip.

Three.js is a JavaScript library for rendering 3D scenes in the browser. It provides the building blocks, such as scenes, cameras, geometry, materials, and lights. React Three Fiber is an option when you want to work with Three.js in a React project. [12, 13]

Prompt 7: If Your Concept Needs That Route

This website needs [free rotation / material choices / another real interaction]. Explain which parts require real-time 3D and build those with Three.js or React Three Fiber if appropriate for the project. Use [my supplied 3D model] or clearly identify any missing model. Higgsfield video can remain supporting media, but don't describe it as an interactive 3D model. Keep a static fallback and test touch controls, keyboard access, loading, and performance.

A generated video does not automatically give you a usable 3D model. If you don't already have the model, decide whether a simple original shape is enough or whether the product needs proper modeling. This changes the scope of the build.

Make It Work on a Phone

The desktop reveal is only half the job. On a phone, the camera crop is narrower, the screen has less room for copy, and the device has less room for expensive visual work.

Make a deliberate mobile version

1. Keep the subject inside a safe crop throughout the shot, or use a separate portrait asset.
2. Shorten the sticky scene if it makes visitors scroll too far before reaching useful content.
3. Move the headline or supporting copy into a solid section when an overlay becomes hard to read.
4. Use appropriately sized assets and avoid holding an entire large frame sequence in memory.
5. Keep the main action reachable even if motion never loads.

Prompt 8: Mobile and Accessibility Repair

Review this site on a narrow phone viewport and, where available, a real mobile browser. Fix subject cropping, horizontal overflow, tiny text, inaccessible menus, blocked buttons, and excessive scroll distance. Measure the largest media downloads and reduce waste. When prefers-reduced-motion is enabled, show a deliberate static layout with the same content and working actions. Check keyboard focus and a failed-media state. Report what you actually tested and what still needs a device check.

Reduced-motion preferences let a visitor ask for less animation. The browser exposes that preference so the website can provide a calmer version. [14]

A useful performance check

Ask Claude for actual download sizes and observed problems before asking for a perfect score. A page can look smooth on a powerful laptop and still struggle on a phone. Test an initial visit, a slow connection, and a visitor who immediately scrolls to the bottom.

Example Build 1: A Clothing Brand

Fictional concept: STONE / FORM, a small technical outerwear label. The goal is to explore the collection. Use your real product and store details if adapting it for an actual brand.

Fill the master prompt with this direction

Suggested page flow

Start with the full silhouette and a short brand line. Move toward the material as the visitor scrolls. End the scene before introducing a clean product grid, sizing information, delivery details, and a direct route to the real store.

Prompt 9: Add This to Your Brief

Build this as a tactile outerwear launch. Keep the jacket the clear subject, with subtle motion and accurate fabric detail from my reference images. Use one hero sequence, then let the product information breathe. Put garment names, prices, and labels in HTML. Connect only the store links I provide. A cinematic launch page is the goal, not a pretend checkout.

Example Build 2: A Restaurant

Fictional concept: EMBER HOUSE, an intimate wood-fired restaurant. The main action is to reserve a table. The page needs to communicate the food, atmosphere, location, and how to book.

Fill the master prompt with this direction

Suggested page flow

Open on a scene with room for the restaurant name and reservation button. Let the camera move closer as a short food philosophy appears. Then release the visitor into the menu, location, hours, dietary information, and booking details.

Prompt 10: Add This to Your Brief

Make the restaurant feel warm and inviting. Use one continuous tabletop shot with a gentle camera push, stable crockery, and restrained steam. Keep the actual menu, hours, address, and booking link easy to find without watching the full sequence. Use supplied food photography for real dishes and label concept visuals appropriately. Don't invent awards, reviews, or a working reservation system.

Example Build 3: A Business That Doesn't Exist Yet

Fictional concept: ORBIT, a speculative software product for planning ambitious projects. The goal is to explain the concept and invite interest. There are no real customers or product claims to imply.

Fill the master prompt with this direction

Suggested page flow

Use the opening to introduce the idea. Let three short scenes explain the intended problem, approach, and outcome. Then show a clearly labeled concept interface and a concise FAQ. A waitlist needs an actual configured destination before you call it live.

Prompt 11: Add This to Your Brief

Build an original concept site for ORBIT. Use one luminous abstract object as the visual thread through the experience. Make three concise story beats, then show a clearly labeled concept interface. Keep all benefits framed as the proposed product vision. No invented users, funding, partners, testimonials, or usage numbers. If the waitlist isn't connected, show that clearly in the local preview.

The Polish Pass That Makes the Difference

The first generation gives you material to work with. The next pass should be specific. Don't ask Claude to redesign the whole thing every time one transition feels wrong.

Review it in this order

Prompt 12: Focused Refinement

Review the actual preview against our brief and reference notes. Identify the three most visible weaknesses, then fix them without replacing the successful parts. Focus on [specific issue]. Use screenshots or browser observations to explain the before-and-after difference. Keep the approved asset unless it is the source of the problem. Run the relevant checks again and tell me what remains unfinished.

Better feedback examples

From Local Preview to a Live Website

A local preview runs on your computer. Deployment puts the built website on a host so other people can visit it. Vercel supports preview and production deployments from a connected Git repository or its CLI, and each deployment has its own URL. [15]

Prompt 13: Ask for the Launch Package First

Prepare this project for deployment to Vercel. Verify the production build, include all required assets, and document exact setup and build commands. Identify missing integrations, placeholder content, environment variables, media-hosting needs, and any hosting-plan limits I should check. Keep generation credentials out of browser code and the repository. Show me the proposed project and destination, but don't upload or publish until I approve it.

The basic launch sequence

1. Review the local site and approve its content and assets.
2. Choose the Vercel account and project. Confirm the site's intended audience and access settings.
3. Deploy using the supported project workflow. If you use the CLI, vercel deploy creates a deployment and vercel deploy --prod targets production. [15]
4. Open the resulting URL and check it again. Local success is not proof the hosted assets and links work.
5. Connect a custom domain if you want one, then verify that domain too.

Before you share the URL

Check the phone layout, every primary button, media loading, page title, social preview, and contact details. Submit a test form only to a destination you control and confirm what actually arrived. If payments or reservations are involved, use the provider's test workflow before going live.

Mistakes and Fixes

One prompt is the starting brief

The master prompt is designed to carry the whole project, including generation, coding, review, and handoff. You may still need to sign in, approve a generation batch, provide missing business details, or choose between creative options. Judge the working website, not whether the entire process fit into one uninterrupted response.

Research and Setup Links

Verified against official sources on September 24, 2026. The website references were also opened in a browser. This guide's master prompt was authored for the workflow and has not been claimed as an end-to-end tested build. No paid generations or website deployment were performed to create the guide.

1. Claude Code desktop: local projects, model picker, connectors, and previews. The live desktop UI also showed separate Model: Fable 5 and Effort: Max controls during this review.
2. Claude Fable: current model availability. The video says Fable 5, while the model page now describes Fable 5.1.
3. Claude Code model and effort configuration: Max effort and the separate Ultracode setting.
4. Higgsfield's Claude creative-studio setup: MCP URL, Customize route, and connected creative tools.
5. Connect Higgsfield to your AI agent: account requirements, Settings route, CLI alternative, and credit behavior.
6. Uma Jewellers creator case study: the creator's description of the live WebGL ring.
7. The Cosmos Within creator write-up: the creator's description of the Three.js scene and scroll-driven camera.
8. Seedance on Higgsfield: current generation options and the separate edit model.
9. Seedance 2.5 API reference: reference inputs and supported parameters for that endpoint. A website-only option isn't automatically available through every integration.
10. GSAP ScrollTrigger: scroll-linked timelines, pinning, and scrub behavior.
11. MDN: video currentTime: controlling a video's playback position.
12. Three.js: creating a scene: the basic real-time scene, camera, and renderer.
13. React Three Fiber introduction: Three.js in React.
14. MDN: reduced-motion preferences: responding to the visitor's motion preference.
15. Vercel deployment documentation: preview and production deployments and verification.

What this guide's design advice means

The three-beat storyboard, short initial clip, one-scene starting point, and three fictional brand recipes are creative recommendations for this workflow. They are not vendor requirements or promises of identical results.

The five linked sites illustrate different techniques. They are not evidence of the tools their creators used unless a creator source explicitly says so. Their current appearance may change after this guide is published.

About the agency comparison

This guide doesn't assign a dollar value to an AI-generated page. A visual prototype, a finished marketing site, and a production business system have different scopes. Use the workflow to build something strong, then verify the details your actual business needs.

Quick Reference

The whole build, in order

Three combinations to try

Clothing: Product still + shallow orbit + clean collection section.

Restaurant: Warm tabletop scene + gentle push + easy reservations.

Concept business: Abstract object + staged journey + honest concept copy.

Make the scene worth watching. Make the website worth using.