3D website examples
Sixteen real-time 3D websites, eight of them ours with how-they-were-made notes and measured phone load times, eight public sites worth studying.
A 3D website draws its scene live, in the browser, on the visitor's graphics chip. You can turn the object, move through the space, or change what happens by scrolling and pointing. That is the line we draw on this page: rendered live, not a video of a render.
Below are eight 3D sites we made and can explain from the inside, then eight public sites by other people that are worth studying. For each of ours: the idea, what you can do, how it's made, how it behaves with reduced motion, and how long it took to draw its first full frame on a phone. If you want to make one, start with how to build a 3D website or Laarpi's 3D website builder.
Our sites
All eight are concept sites, made by the Laarpi team with Laarpi's library and process. The brands are invented; the craft is real. They were not produced end to end by SI, Laarpi's website agent. Load times are cold loads on our phone profile, measured on 6 October 2026: slow 4G (1.6 Mbps down, 150 ms round trip), CPU slowed four times, a 390 × 844 screen.
BASALT Tapes: Obsidian Hours
A release page for an LP, where the record is a slab of obsidian. Move the pointer to sweep light across its facets, drag or use the arrow keys to turn it, and scroll into the tracklist to break it into eight shards, one per track. The glass is all maths: a custom shader traces each ray through the slab, and there are no images, models or lighting files at all. That is why it's the lightest page here. With reduced motion, each section cuts to a composed still.
Phone: first full frame in 3.1 s, 299 KB. How it was made.
Meridian M-01
A watch page with a hand-wound movement you wind, take apart part by part and inspect under five macro lenses. The movement is modelled in code at true millimetre scale, with real gear ratios and finishes computed per pixel: perlage, Côtes de Genève, heat-blued screws. The interface moves in whole beats of the escapement. With reduced motion you get three still movements and a flat lay of the parts.
Phone: 11.5 s, 1,712 KB; the movement needs 31 shader programs. How it was made.
PATCH-01
A product page for a synthesiser module you can play in the page: turn the knobs, patch cables between jacks, press Power and hear it. Scroll and it separates into six layers along its screw axes. The module is modelled in code at true scale, and the spec drawing is rendered from the same layout file as the 3D panel, so the two can't disagree. The knobs work with arrow keys and the jacks with Enter or Space.
Phone: 7.8 s, 933 KB, down from 15.7 s after a loading pass the same day. How it was made.
Aster & Kiln
A ceramics studio where scrolling throws a stoneware vase on the wheel and fires it to 1280 °C behind a kiln spyhole. It's one mesh, turned on the graphics card from a 256-point profile that morphs through eight states as you scroll, so the story rewinds cleanly. With reduced motion, the making becomes a catalogue of section drawings and still renders.
Phone: 11.8 s, 1,904 KB, mostly the lighting file and three clay maps. How it was made.
HADAL
A deep-sea expedition where scrolling is the dive, 10,047 metres down. The water's colour is computed from your depth, the animals are drawn in light only, and below 1,000 m your cursor, or your finger, becomes the submarine's lamp. The scanned seabed loads only as you approach the floor. With reduced motion, each depth zone is a still that still changes colour.
Phone: 3.8 s, 369 KB before the first frame. How it was made.
Hortus Nocturne
A night garden where a pressed gazania stands up and blooms only while you hold the cursor still, or touch and hold on a phone. The flower is a CC0 photoscan, and its pressed pose comes from the scan's own texture layout: each part's flat outline is the shape it would take pressed on paper. With reduced motion, the specimen appears already awake.
Phone: 13.1 s, 1,979 KB; the scan alone is about 1.1 MB. How it was made.
FLUOR 26
A festival site printed in ink you can stir. The wordmark is drawn into a fluid simulation running on the graphics card; drag through it and the letters smear, then re-form as the liquid calms. The lineup sets each act's name at a width that matches its tempo. With reduced motion, the page becomes a still print.
Phone: 4.6 s, 332 KB before the first frame; the hall photographs wait until after it. How it was made.
Salt & Smoke
A restaurant on a coastal bluff, told in one camera move from sunset to moonrise around a single fire. The smoke is a real-time 3D fluid simulation, and tonight's menu condenses out of it as you scroll. "Put a log on" changes the smoke by wood. It is the most ambitious scene here and the slowest on a phone, and we'd scope it down for a real restaurant on slow connections.
Phone: 31.1 s to the complete frame, behind a loader with real progress. How it was made.
Public 3D sites worth studying
Each links to the live site, credited to its makers. The notes are ours; we host no screenshots of other people's work.
Folio 2025 by Bruno Simon. A portfolio you explore by driving a small car around a 3D world, with keyboard, mouse, touch and gamepad controls. It runs on three.js with WebGPU, falling back to WebGL, and the code and Blender files are open source under MIT. The lesson: when navigation is the game, people stay to find every corner.
Igloo Inc. by Abeto with Bureaux. A company landing page built entirely in WebGL, from procedurally grown ice crystals to interface text driven by shaders. The makers wrote an algorithm that grows ice inside a chosen shape. It shows how far one material, carried through every element, can define a brand.
Messenger by Vicente Lucendo and Michael Sungaila, published by Abeto. A small multiplayer game in a browser tab: you deliver mail around a tiny planet and wave at other players. It is built on three.js and plays on phones and computers. Worth studying for how much warmth a tiny world can carry.
Portfolio 2022 by Henry Heffernan. A 3D desk scene whose old monitor runs a working, 90s-style computer, built with React and three.js. The screen's content is a real web page placed into the scene, which keeps it readable and clickable inside the 3D object.
Eyes on the Solar System by NASA/JPL. Planets, moons and spacecraft in real-time 3D, positioned from NASA's data, and you can move through time to see missions past and planned. It runs in an ordinary browser. The proof that 3D on the web can be a working tool, not only a mood.
Sébastien Lempens's portfolio. A scroll-driven tour of a 3D Paris in which the point of view keeps changing, from walking to riding a scooter to skydiving. A good reference for keeping a long scroll fresh by changing how the camera travels, not just where.
The Monolith Project by Ethan Chiu. A thirteen-scene scroll narrative where hand-drawn sketches turn into lit 3D worlds. The sketch-to-render handoff is the idea, and it's a clean example of a site whose transitions carry the story.
Jordan Breton's portfolio. A floating island with grass, waterfalls and butterflies, explored by moving between fixed camera points. Fixed viewpoints are a quiet answer to free-roaming cameras: every view is composed, and nobody gets lost.
What the best 3D sites share
- One idea, said in a sentence. Obsidian that breaks into eight hours. A dive where the light dies. A planet to deliver mail around. The 3D serves that sentence and nothing else.
- 3D only where it carries the story. HADAL's animals are light, not models, and its seabed only arrives at the floor. Restraint is what makes the moments land.
- Real text in the page. Headlines, copy and buttons are HTML, laid out on a grid, with the scene framed around them.
- A loader that tells the truth, when one is needed: real progress, part of the idea, and gone when the page is fast.
- A still for reduced motion, designed as carefully as the moving version. Accessible motion shows how.
- Respect for phones. Capped resolution, deferred assets and scope chosen for the connection the audience actually has. 3D website performance has our measured numbers and fixes.
If what you want is interaction more than depth, sites where the visitor plays, steers or stirs, see interactive website examples.
How to make one
Start from the sentence, then choose the smallest 3D that carries it. For a single object, a compressed glTF file and a viewer component get you there in an afternoon. For a site designed around 3D, plan the scene, the scroll, the loader and the reduced-motion stills together. How to build a 3D website covers both paths with code, and the 3D website builder page covers Laarpi's side of it.
