Best 3D websites, and the prompt for each technique

The best 3D websites right now are Bruno Simon's drivable island, abeto's Messenger and Igloo Inc, Lusion's Oryzo and the Lando Norris site by OFF+BRAND. Each one gives its 3D a single job. You drive, you make a delivery, or you scroll past a block of ice that holds a project.

What makes them work is a short list of values, and the same list decides whether your own 3D page holds its frame rate on a phone. Below are those values, the eight sites worth studying, the techniques grouped by what they cost, and the prompt each technique needs when an AI model writes the code.

The six values behind a good 3D page#

Strip away the subject matter and a good 3D page comes down to six numbers and rules. None of them is about style, and each one is something a visitor feels within the first few seconds, usually as smoothness or as its absence.

• A frame budget of 16.7ms. That is one frame at 60Hz, and 8.3ms on a 120Hz phone. Everything the scene does per frame has to fit inside it.
• A capped pixel ratio. Math.min(window.devicePixelRatio, 2). The Three.js manual points out that a phone with a pixel ratio of 3 asks the GPU for nine times the pixels.
• Text before the scene. The headline is HTML and paints first. The canvas arrives after it, never instead of it.
• One interaction the 3D exists for. Drive, turn, scroll through, look around. A scene that does four things reads as a demo.
• A trigger with a distance. Scroll-driven scenes are pinned for a stated length, such as 300vh, so the reader knows how long the moment lasts.
• A still for everyone else. Reduced motion, no WebGL and a slow network all get a finished picture, not a spinner.

These six are decisions rather than effects, so they apply whatever the stack. They are also the decisions a model leaves at its default when a brief does not state them, which is the mechanism behind every generated page looking related.

Eight 3D websites worth studying#

The list below was chosen on three tests. Each site is live today, each has been recognized by Awwwards since 2023, and each one's maker or award page says what it was built with, so nothing in the stack column is a guess. Where the stack comes from Awwwards' technology tags rather than the makers' own write-up, the table says so.

Read across the rows and none of the 3D is decoration. What each site teaches, in one line:

• Bruno Simon: real-time 3D pays off when the visitor steers. More pages like it are in 3D portfolio websites.
• Messenger: a game can be a website, if it runs with one finger on a phone.
• Igloo Inc: one material, ice, used to hold every project.
• Oryzo: a product launch can be the 3D piece itself, played completely straight.
• Lando Norris: a site-builder base can carry WebGL; its Awwwards tags list Webflow, WebGL and GSAP.
• Ponpon Mania and Why Zero: 3D as a way to tell a story, one scene at a time.

Real-time 3D the visitor steers#

Real-time 3D earns its cost when the visitor, not you, chooses the angle. Bruno Simon's 2025 portfolio is the clearest case. You drive a small car around an island that has a day and night cycle, seasons and weather, with achievements that earn car skins and controls for mouse, keyboard, touch and gamepad. His Awwwards case study says it is built on Three.js, runs on WebGPU where the browser supports it and uses TSL for its shaders. A film could not do this, because no film knows where you will steer.

Messenger, by abeto, goes further. Its case study describes a roughly fifteen-minute game on a tiny planet where you play a teenage messenger across seven areas, see up to ten other players and talk through 3D emojis, with one finger on a phone or a mouse on a desktop. The stack it names is Three.js and three-mesh-bvh, with C++ compiled to WebAssembly.

Both sites are games wearing a website, and that is the honest test for real-time 3D on a commercial page. If the visitor's choice changes what they see, render live. If it does not, render once and play it back. The stacks behind these pages, and how to rebuild each kind with a model, are in Three.js website examples.

Kickflip is the real-time case in the Thanor library. The shop is drawn by hand-written WebGL 1 on a single canvas, with no 3D library, its buffer capped at a pixel ratio of 2, and a complete page for browsers without WebGL. Octavo shows the other kind of live 3D: real geometry made of CSS 3D transforms, which the browser composites without a shader in sight.

3D you scroll through#

Scroll is the most common trigger on a 3D page, and it splits into two techniques that look alike and cost very different amounts.

The first renders live. Igloo Inc, made by abeto with Bureaux, turns each project into a uniquely shaped block of ice you scroll past, and ends in a particle simulation that plays sound. abeto's case study names Three.js, three-mesh-bvh, Svelte and GSAP for the build, with Houdini and Blender for the assets. Every frame of it is computed on the visitor's GPU as they scroll.

The second plays back. The scroll position picks a frame from a film or an image sequence rendered in advance. CSS-Tricks documented the pattern in 2020 in a walkthrough of Apple-style product pages: numbered JPEG frames, preloaded, drawn onto a fixed canvas as the reader scrolls. Today a single video file does the same job with less code, as long as every frame is a keyframe so a seek lands at once.

Ardente and Verdier are both played back, never rendered live. The car and the watch were rendered as films with lighting a phone could not compute at 60 frames a second, and the page only decides which frame to show. For more of the pattern without the 3D, see scroll animation website examples.

The values that make a scrubbed film feel directed are distances, not effects. Ardente's hero stays pinned for 3.6 screens of scroll and Verdier's film stage for 4.6, long enough to read the copy that rides with each move and short enough that nobody feels trapped. The other value worth stating is smoothing: ease the raw scroll toward its target before picking a frame, at about 0.12 of the distance per frame, and a flick of the wheel glides instead of jumping.

The 3D look without a 3D engine#

A page can read as 3D without containing any. The object was rendered once, offline, and the page moves pictures of it. This is the cheapest way to get a cinematic object on screen, and it is the one a brief that only says 3D never asks for.

There are three common forms, each with its own trigger.

1. A cut-out with a separate light layer. The object is a transparent WebP; a second file holds only its highlights. CSS moves both, so the object can hover, flare and cast a reflection with no canvas.
2. A set of still renders. Several angles or several products, switched by the visitor, with a color flood or a crossfade between them.
3. A film whose frame is picked by the pointer. A head turn recorded as video, where the cursor's position chooses the frame, so a character seems to look at you.

Caravan is the first form: a hero that reads as a 3D product shot and weighs, at the time of writing, a 133 KB cut-out over a 73 KB studio plate. What sells it is the ground contact: a shadow that pales and widens as the craft rises, and a reflection that slides away, both driven by the same CSS loop. Vesperion is the third: the cursor seeks a recorded film, and the character is masked on a plain 2D canvas so it stands in front of the type. For more cursor-led pages, see interactive website examples.

Why a film often beats a live scene on a phone#

A live scene pays twice: once to download the engine and the model, and again on every frame, on the visitor's GPU, for as long as it is on screen. A film pays once, in bandwidth, and the phone's video decoder does the rest. That is the whole trade, and it is why the smarter choice for a hero you direct is usually a film or a set of cut-outs.

The lighting argument matters as much as the speed. A film carries soft shadows, bounced light and depth of field that a renderer spent seconds or minutes computing for each frame, once, before anyone visited. A real-time scene has to approximate all of it in 16.7ms, which is why so many live heroes look like plastic.

Films are not free, and it is worth being exact about it. Measured on 9 November 2026, Ardente's first frame is a 45 KB WebP that paints at once, while its film is 3.7 MB in the light cut and 6.1 MB in the wide one. What makes that acceptable is the order: the still and the headline arrive first, and the film streams in behind them.

Video backgrounds follow the same economics when nothing needs to be scrubbed at all.

What the prompt has to specify#

The first line of a 3D brief names the technique, because every later value depends on it. Asked for "a 3D hero", a model reaches for a live Three.js scene with a spinning mesh, whatever the subject. Asked for a scrubbed film, it has no reason to load a 3D library at all.

For a live scene, the fields are the ones set out in what a 3D website AI prompt must contain: subject, camera, light, material, motion, ceiling and refusals, and the Claude walkthrough gives the Three.js values.

CSS 3D, the Octavo route, needs a different handful of values, and a model will honor each one because each is a single property:

• perspective on the parent, for example 1600px. Lower values exaggerate depth; below about 800px a book on a shelf starts to look like a fisheye.
• transform-style: preserve-3d on every wrapper between the parent and the faces, or the depth silently flattens.
• The thickness of the object in pixels, built from separate faces with translateZ and rotateY(90deg).
• backface-visibility: hidden on faces that turn away.
• The pointer range, such as a tilt of 8deg at most, eased over 600ms.

If you would rather place the object in an editor than describe it, the tools are compared in Spline alternatives and, for shader effects, Unicorn Studio alternatives. For a played-back hero, the fields change again. Here is an illustrative fragment, written for this article:

Technique: one H.264 film, 24 fps, every frame a keyframe, no audio.
Trigger: hero pinned for 300vh; frame = round(progress * (frames - 1)).
Seeking: one seek at a time, the next only after "seeked" fires.
First paint: the poster (frame 1) as WebP under 60 KB; headline in HTML.
Phones: a 4:5 cut under 4 MB, chosen by aspect ratio, not user agent.
Reduced motion: the last frame, still, with every word on the page.
Refuse: WebGL, scroll hijacking, a loading screen.

The encoding line is the one people miss. A film exported with the default keyframe interval stutters when scrubbed backwards, because each seek has to decode from the last keyframe. Exporting all-intra fixes it:

ffmpeg -i render.mov -c:v libx264 -pix_fmt yuv420p -r 24 -g 1 -crf 24 -movflags +faststart -an film.mp4

Mistakes that make a 3D site feel cheap#

Most 3D pages that disappoint fail on one of a short list of decisions, and each has a value that fixes it.

• A turntable for a hero. OrbitControls hands the visitor a model viewer. Bind the camera to scroll or to a narrow pointer range instead.
• An uncapped pixel ratio. It is one of the largest frame-rate losses on phones and the cheapest fix: one Math.min call.
• Text inside the canvas. It cannot be read by search engines or screen readers, and it waits for the scene to load.
• A loader in front of a picture. A walkable shop like Kickflip earns its loader. A product hero does not: if the sentence that sells the page waits for a 6 MB asset, the visitor meets a progress bar first.
• A scene that never sleeps. Pause the render loop with an IntersectionObserver once the canvas leaves the viewport.
• No reduced-motion branch. prefers-reduced-motion: reduce should land on a finished still, usually the film's last frame.
• Live 3D for a path you already chose. If every visitor sees the same camera move, it is a film, and it should be shipped as one.

The scroll distances themselves are covered in the scroll animation prompt, and the whole category of loaders in loading animations for websites.

Start with a free one#

The fastest way to see the difference between a 3D scene and a 3D look is to build one of each from a full specification. Start with the free one.

Open Vesperion and copy its prompt; it is free with a free account. Paste it into Claude, ChatGPT or Cursor and you get a character that tracks the cursor in front of its own headline, built from a film and a 2D canvas, with every value written down. Then compare it with the real-time pages above and decide which technique your own subject needs. If you would rather pull designs into your assistant without copying, the Thanor MCP does that on every paid plan, and the library holds the rest.