3D website builder

A 3D website builder should give you a scene the visitor moves through or touches, rendered live in their browser, that explains your idea better than a photograph could. It should keep every word in the page as real text, load with honest progress on a phone, and give people who switch motion off a composed still version.

That is what Laarpi is built to make. You describe the site; SI, Laarpi's agent, decides in the brief whether 3D serves the idea, then designs the scene around it, writes it in three.js and checks it at desktop and phone size.

How SI approaches a 3D site

It asks what the 3D is for. Before any code, the brief names the centrepiece: what it is, how it answers scroll and cursor, and why it serves the story. If type and restraint tell the idea better, the brief says so and the site has no 3D.

It picks the kind of scene. An object to handle, an object as a metaphor, a journey through scroll, a process you watch. The structure follows the story.

It sources real assets. Lighting and materials come from open libraries such as Poly Haven and ambientCG, under CC0, CC-BY or MIT licences, and each one is credited on the site. When no good asset exists, SI's rules say to abstract the subject into light, particles, lines or type, and never to assemble a real thing, such as a flower, from cylinders.

It writes the code. Plain three.js in JavaScript modules, with GSAP for motion and Lenis for smooth scrolling. You can read and edit every file in the Code tab; downloading the site's code is planned.

Three sites, taken apart

These are concept sites the Laarpi team made with Laarpi's library and process, with people steering every step. Each write-up covers the idea, the interaction, the technique, every asset and its licence, and the load time. SI's own unedited builds will be published once the private beta produces them, with build time and cost from our logs.

BASALT Tapes: an LP as a slab of obsidian

• Idea. A record label's release page built around one object: an obsidian slab that stands for the album.
• Interaction. The pointer sweeps a strip of light across its facets; drag to turn it. Scroll into the tracklist and cracks run out from one impact point until the slab parts into eight shards, one per track.
• Technique. No model download at all. The glass and its light are computed in shaders, so the page stays small.

The BASALT write-up covers the shader, the sound and the keyboard controls.

Meridian M-01: a watch movement under a loupe

• Idea. A launch page for a watchmaker's first calibre.
• Interaction. The movement runs live at your own time, comes apart in service order as you scroll, shows its finishing under macro lenses and starts again when you wind it.
• Technique. A studio HDRI and CC0 metal materials give the steel and brass their finish. The movement needs many shader programs, which is why it is the slowest of the three on a phone.

The Meridian write-up covers the materials, the lenses and the loading pass that cut its shader count.

PATCH-01: a synth module you can play

• Idea. A launch page for a Eurorack synth module.
• Interaction. Turn the knobs, move the cables, press Power and hear it. Scroll and it separates along its screws into six layers, then the camera moves into its own screen.
• Technique. Real-time audio from your patch; the scope trace lifts into a 3D figure drawn from the signal.

The PATCH-01 write-up covers the audio, the exploded view and how the keyboard plays it.

How fast they load on a phone

Measured on 6 October 2026, cold, with an empty cache, on our phone profile: slow 4G (1.6 Mbps down, 150 ms round trip), CPU slowed four times, a 390 × 844 screen.

The pattern is the lesson. A scene computed in shaders is light; a scene that needs a lighting file, textures and dozens of shader programs takes longer on a slow phone, however well it is compressed. Each site shows a loader with real progress from its first paint, so the wait is never a blank screen.

A Laarpi Finish measures the same thing on an emulated 4G phone and doesn't pass a site that is too heavy or too slow to its first frame. A Draft times the first frame on a fast connection. The rules behind it:

• Text first. The words load and read before the scene appears.
• Light on the wire. Compressed models, capped texture sizes, and nothing loaded before it is needed.
• Quiet when unseen. Rendering pauses when the scene leaves the screen or the tab is hidden.
• Adaptive. Pixel density is capped on touch screens and drops when frames run long.

Fast websites with 3D explains each technique in depth.

Accessible 3D

A scene is a picture; the page around it must still work without it.

• Real text. Headings and copy are HTML, not pixels in a canvas.
• Reduced motion. With the setting on, smooth scrolling stops and each section holds a composed still state. A Finish checks this at desktop and phone width.
• Keyboard paths. Interactive objects get keyboard controls. BASALT's slab turns with arrow keys; PATCH-01's knobs are sliders that take arrow keys, and its jacks are buttons.
• Nothing flashes more than three times a second, and sound starts only when the visitor asks.

Free, no code, AI: the honest answers

• Free. The Free plan is $0 a month and includes Draft builds of 3D sites on a laarpi.site address. The Finish, which keeps revising until every check passes, comes with paid plans; see pricing.
• No code. You never have to write any. You describe the idea and direct changes in plain words or by pointing at the page.
• AI. Laarpi's agent, SI, writes the questions, the brief and the code, running on AI models from third-party providers. How Laarpi works shows every step.

When not to use 3D

• When the content is the product. Documentation, a menu people need in a hurry, long reading. Type and layout do it better.
• When the 3D would be decoration. If the scene could be dropped into another site unchanged, it doesn't belong in this one.
• When most visitors are on old phones and slow networks and the idea needs heavy assets. A site led by motion and type can still be striking; animated websites shows how.

Laarpi makes this call in the brief, and you can overrule it. For the craft in more depth, read how to build a 3D website and WebGL for designers.