3D Landing Playbook

Almost every award-winning 3D landing page is the same three things done carefully: a scroll story with one idea per section, an asset that is lit and shaded like a product photo, and a boring, reliable stack that keeps it at 60 fps on a phone.

Budgets that keep you honest: hero GLB under 1–3 MB (the reference model is 0.2 MB), under ~100 draw calls, textures at most 2K and KTX2-compressed, device pixel ratio capped at 1.5–2, and the page's Largest Contentful Paint is the headline text, never the canvas.

28 live sites, 22 of them service or business sites, checked on 9 October 2026. The three.js revision was read from each live page (window.__THREE__), libraries from the shipped bundles, hosting from response headers, and awards from Awwwards' own pages. Stack items are what was found, not guessed; anything unconfirmed says so.

What the winners actually use

Renderer

three.js on 25 of 28

Shell

Nuxt 7 · Astro 6 · Next 4 · Svelte 3

React Three Fiber

2 of 28

GSAP · Lenis

19 · ~13 of 28

WebGPU live

2 of 28

• Plain three.js inside a content framework is the norm; React Three Fiber appears on Shopify Editions and basement only. Lusion even ships a patched three.js build; Active Theory runs its own engine; Kriss.ai uses the tiny OGL.
• Realism is prepared offline. Baked lightmaps (basement ships ~20 KTX2 lightmaps, IVRESS a packed EXR bake), studio HDRIs (Lando Norris and Shopify use Poly Haven's studio_small_08/09), camera paths exported from Blender or Cinema 4D (Oryzo, IVRESS, Cerebrium), and Houdini or VDB data (Hubtown, Igloo).
• Draco or meshopt + KTX2 is near-universal; top studios add custom binary formats.
• WebGPU ships with a WebGL path. Cerebrium built in WebGPU + TSL, then shipped WebGL because first-load shader compilation took about 20 seconds.
• SaaS sites keep copy in the DOM and confine WebGL to the hero and section intros (Stripe, GitHub, Cerebrium, Floema), which keeps SEO and readability intact.

The sites

The flow they share

Across the business sites the same sequence keeps appearing, and it is the sequence chapter 03 turns into code:

1. A gated or percentage preloader, often with a sound opt-in (Hatom, Alche, IVRESS, Why Zero).
2. A 3D hero that is the brand metaphor: an igloo, a coaster, a helmet, a mountain, a shield.
3. One scroll chapter per offering (Montfort's divisions, Shopify's categories, Hatom's phases).
4. Proof: a project grid, often with small WebGL thumbnails or in-world objects.
5. One interactive "toy" moment: click-and-hold, a hover gag, a seasons toggle, a force field.
6. A particle or interactive footer, then the call to action.

Making-of case studies

Checked but left out: Prometheus Fuels and Opal Tadpole (award pages no longer live), Linear, Vercel, Raycast, Ramp, Mercury, Exo Ape and Dogstudio (no WebGL on the current sites), and Cartier, Locomotive, Coinbase and Kraken (blocked automated checks).

Award sites feel cinematic because the scroll is storyboarded like a film: each section owns one idea and one camera move, and the 3D object is the actor that carries you between them.

How the scroll drives the 3D

The pattern below is what the reference build uses, and it is the pattern behind most GSAP-driven 3D sites. The DOM never touches three.js directly: sections write numbers into one plain object, and the render loop eases the scene toward those numbers every frame.

src/choreography.js

const DESKTOP = {
  hero:     { x: 0.47,  y: -0.05, scale: 1,    rotY: -0.4,  spin: 1,    explode: 0, glow: 1 },
  services: { x: -0.55, y: 0,     scale: 0.92, rotY: 0.55,  spin: 0.55, explode: 0, glow: 0.8 },
  process:  { x: 0.16,  y: -0.02, scale: 0.74, rotY: -1.22, spin: 0,    explode: 0, glow: 1 },
  /* … work, stack, contact */
};

sections.forEach((section, i) => {
  if (i > 0) gsap.fromTo(target, { ...exitOf(previousPose) }, {
    ...poses[section.dataset.pose], ease: 'none', immediateRender: false,
    scrollTrigger: { trigger: section, start: 'top bottom', end: 'top 25%', scrub: true },
  });
  if (section.dataset.pose === 'process') pinProcess(target);   // keep page order!
});

src/scene/stage.js (inside the frame loop)

// Frame-rate independent easing: smooth even on a jerky trackpad.
for (const key in target) now[key] = MathUtils.damp(now[key], target[key], 4.2, dt);

// Pose x is a fraction of the visible width, so layouts hold at any aspect ratio.
const halfWidth = Math.tan(MathUtils.degToRad(camera.fov / 2)) * (now.camZ - now.z) * camera.aspect;
rig.position.set(now.x * halfWidth, now.y, now.z);

Rules that prevent the classic bugs

• Use fromTo with immediateRender: false for scrubbed pose tweens, so reloading halfway down the page lands in the right pose.
• Create ScrollTriggers in page order. A pinned section adds height; triggers created before the pin but placed after it are measured without that height and fire early. (This bug showed up in the reference build and is fixed in choreography.js.)
• Drive Lenis from GSAP's ticker (gsap.ticker.add(t => lenis.raf(t * 1000)), lagSmoothing(0)) so the DOM and the WebGL frame update together.
• Scale velocity, not angle, when slowing an idle spin, and unwind to the nearest whole turn before an exploded view. Otherwise parts snap or spin backwards.
• Labels on 3D parts are plain HTML moved each frame by projecting a 3D anchor with vector.project(camera). They stay crisp, selectable and accessible.
• Phones get their own poses via gsap.matchMedia(): centred, smaller, a vertical exploded view, and the canvas dims behind text-heavy sections.

"Looks real" is the sum of seven layers. Skip one and the eye notices. Each layer below lists what it is, the values that work, and where it lives in the reference build.

new EffectComposer(renderer, { frameBufferType: HalfFloatType, multisampling: 4 });
composer.addPass(new RenderPass(scene, camera));
composer.addPass(new EffectPass(camera,
  new BloomEffect({ mipmapBlur: true, luminanceThreshold: 1, intensity: 0.7, radius: 0.72 }),
  new ToneMappingEffect({ mode: ToneMappingMode.AGX }),
  new VignetteEffect({ offset: 0.32, darkness: 0.62 }),
  new NoiseEffect({ premultiply: true, blendFunction: BlendFunction.SCREEN, opacity: 0.045 }),
));

Pick the path that matches your team, not the one with the flashiest demo. All five ship award-level work; they differ in control, cost and who maintains the 3D. Of the 28 reference sites, most run plain three.js inside Nuxt, Astro or Svelte (paths A and C); two use React Three Fiber.

WebGL or WebGPU?

Default to WebGLRenderer. The three.js manual still calls WebGPURenderer experimental, and pmndrs postprocessing, onBeforeCompile and custom ShaderMaterial do not run on it. Choose WebGPU + TSL for compute-heavy work (hundreds of thousands of particles) or a fresh TSL project; it ships in Chrome/Edge 113+, Android Chrome 121+, Safari 26 and Firefox 141+ (Windows), and falls back to WebGL 2 automatically.

Versions this playbook was verified against

Everything below was checked on 9 October 2026: repos with gh repo view (stars, last push, licence), versions on npm, every link fetched. Stale or abandoned projects are listed at the end so you do not build on them by accident.

Libraries

No-code and low-code

Making the 3D

Assets and licences

Pipeline and debugging

Hosting: what hosts do with a .glb

Compress at build time (meshopt or Draco for geometry, KTX2 for textures), set Content-Type and caching yourself, and use immutable only on hashed or versioned paths. Self-host the Draco and Basis decoders from three/examples/jsm/libs/ so their version matches three.js; the meshopt decoder is plain JS and needs no hosting.

Skip these

• Theatre.js: no public release since May 2024, and @theatre/r3f only declares R3F 8.
• pmndrs/react-three-next (last push 2024): use satus instead.
• mkkellogg/GaussianSplats3D and lumalabs/luma-web-examples: abandoned or archived; use Spark.
• Discover three.js: good concepts, but written for r132 (2021); check every API against r186.

Coding agents build good 3D pages when they get three things: skills (how-to knowledge loaded on demand), MCP servers (live docs and tools such as Blender or a browser), and instruction files (your project's rules). All of them were checked on 9 October 2026.

Skills

Install a skill by copying its folder (the one containing SKILL.md) into .claude/skills/ in your project, or ~/.claude/skills/ for every project. Repos without a licence file are all-rights-reserved by default: read them, but check before redistributing.

MCP servers

claude mcp add --transport http threejsresources https://threejsresources.com/api/mcp

Instruction files

• Point agents at three.js's own llms.txt (and llms-full.txt, which includes TSL). It tells models to use import maps and when to pick WebGL or WebGPU.
• Keep a CLAUDE.md / AGENTS.md with commands, where things live and the rules that must not break. This repo's CLAUDE.md is a working example.
• Prefer scripts the agent writes and you can read (like tools/blender/build_orrery.py) over unguarded live control of desktop apps.

Starter prompt

Paste this into Claude Code inside a clone of the repo, and fill in the brackets.

Read playbook/playbook.html and .claude/skills/3d-landing-page/SKILL.md first.
Build a 3D landing page for [brand], a [what they sell] for [audience].
1. Propose the scroll story as a table (section, idea, model pose) and wait for my OK.
2. Model the hero object as a headless Blender script in tools/blender/, export a GLB and a
   Cycles poster, and compress it with the optimize script.
3. Reuse src/scene/* and src/choreography.js; change poses, materials and copy, not the guards.
4. Verify with npm run build, npm run preview and npm run shoot at 1440x900 and 375x812,
   and show me the screenshots before you call it done.

Twelve steps from an empty folder to a deployed site. Each step names the file in the reference repo that already does it, so you can copy the working version instead of starting from a blank page. The fastest route is step 02: clone the repo, then replace the model and the copy.

1. Install the tools

   Node 22+, Git, the GitHub CLI, Blender 5.x and Chrome. On macOS with Homebrew:

   brew install node git gh webp
   brew install --cask blender google-chrome
   gh auth login

   Accounts: GitHub, and Netlify or Vercel for hosting. Optional: Poly Haven (no account needed) for HDRIs and textures.

2. Start from the reference build (or scaffold)

   gh repo clone 1MrHad1/3d-landing-playbook my-3d-site
   cd my-3d-site && npm install && npm run dev

   Or from zero:

   npm create vite@latest my-3d-site -- --template vanilla
   cd my-3d-site
   npm i three@0.186.1 postprocessing@6.39.5 gsap@3.15.0 lenis@1.3.26
   npm i -D @gltf-transform/cli@4.5.1

3. Write the scroll story before any 3D

   One line per section: the idea, the pose of the object, the one camera move. If you cannot write it as a table, the page will feel random. The reference build's story:

   Section	Idea	Object
   Hero	3D websites that feel real	Right side, idle gimbal spin, pointer parallax
   Services	One studio, whole pipeline	Swings left, slows down
   Process (pinned)	Four layers, taken apart	Exploded view, labels on parts, steps highlight
   References	Studied from the best	Recedes far right, dims
   Stack	The reliable stack	Returns left, glows
   Contact	Start from zero	Centres above the CTA, brightest glow

4. Build the hero model in Blender

   • Real scale, applied transforms, bevels on hard edges, named objects (code finds parts by name).
   • Principled BSDF only: its inputs map 1:1 to glTF PBR. Custom node networks do not export.
   • Parent moving parts the way they move in reality (the reference gimbal is outer → middle → inner → core).
   • Script it if you can: a Python script is repeatable and reviewable. Hand-modelled is fine too.

   tools/blender/build_orrery.py

   npm run model   # blender -b -P tools/blender/build_orrery.py -- assets/orrery.raw.glb assets/orrery-poster.png

5. Export glTF and render a poster

   Export GLB with +Y up and Apply Modifiers; skip UVs if there are no textures; leave compression off in Blender. In the same script, render a Cycles poster (transparent PNG, AgX) for the no-WebGL fallback and social image. On an Apple-silicon GPU it renders in about 12 seconds.

6. Compress with gltf-transform

   npx gltf-transform optimize assets/orrery.raw.glb public/models/orrery.glb \
     --compress meshopt --palette false --join false --flatten false \
     --instance false --simplify false
   npx gltf-transform inspect public/models/orrery.glb

   The defaults merge nodes and materials (palette, join, flatten), which breaks code that targets named parts: the reference build hit exactly this and turned them off. Result: 955 KB → 203 KB. Add --texture-compress ktx2 (or webp) when the model has textures.

7. Set up the stage

   Renderer without its own antialiasing or depth (the composer handles both), sRGB output, no renderer tone mapping, a PMREM environment, a 32° camera, and the model inside a rig group that scroll moves.

   src/scene/stage.js · src/scene/studio.js

   const renderer = new WebGLRenderer({ canvas, powerPreference: 'high-performance', antialias: false, stencil: false, depth: false });
   renderer.setPixelRatio(Math.min(devicePixelRatio, 1.75));
   renderer.toneMapping = NoToneMapping;               // AgX happens in the effect pass
   scene.environment = createStudioEnvironment(renderer); // softboxes → PMREM
   const camera = new PerspectiveCamera(32, aspect, 0.1, 60);
   await renderer.compileAsync(scene, camera);          // no hitch on reveal

8. Load the model and finish the materials

   const loader = new GLTFLoader().setMeshoptDecoder(MeshoptDecoder);
   const gltf = await loader.loadAsync('/models/orrery.glb', (e) => onProgress(e.loaded / e.total));
   nodes.Core.material = new MeshPhysicalMaterial({ transmission: 1, thickness: 0.9, ior: 1.5, dispersion: 0.4, roughness: 0.04 });

   glTF carries the PBR basics; tune physical extras and envMapIntensity in code against the live lighting.

9. Add post-processing

   HalfFloat composer with MSAA, then Bloom (threshold 1) → AgX → vignette → grain, as in chapter 04. Check that only genuinely bright pixels bloom: in the reference build the chrome ring bloomed like neon until the threshold went from 0.92 to 1.0.

10. Choreograph the scroll

    Lenis on GSAP's ticker, a pose table per breakpoint, one scrubbed fromTo per section, one pinned timeline for the exploded view, damping in the render loop, and HTML labels projected onto 3D anchors.

    src/main.js · src/choreography.js

    const lenis = new Lenis({ lerp: 0.1, anchors: true });
    lenis.on('scroll', ScrollTrigger.update);
    gsap.ticker.add((t) => lenis.raf(t * 1000));
    gsap.ticker.lagSmoothing(0);
    choreograph(target);   // gsap.matchMedia(): desktop and phone pose tables

11. Guard performance and accessibility

    • Load three.js with a dynamic import() after first paint; the headline is the LCP.
    • Cap DPR (1.75 desktop, 1.25 low-power) and adapt it from measured FPS.
    • Pause the loop in hidden tabs; start the load timeout only once the tab is visible.
    • prefers-reduced-motion or no WebGL 2 → the Cycles poster, no smooth scroll.
    • On phones, dim the canvas behind long text and use a vertical exploded view.

12. Test, then deploy

    Build, serve the production bundle and capture every section at 1440×900 and 375×812 with real GPU Chrome. The script also reports LCP, the 3D-ready mark, the model size, horizontal overflow and console errors.

    npm run build && npm run preview &
    npm run shoot          # tools/shoot.mjs → .shots/*.png + timings
    git init && git add -A && git commit -m "First 3D landing page"
    gh repo create my-3d-site --public --source . --push

    Then on Netlify: Add new project → Import from GitHub (build npm run build, publish dist; netlify.toml already says so), or npx netlify-cli deploy --prod. Long-cache /assets/*.

    Measured on Netlify, October 2026Netlify brotli-compresses application/wasm and application/json responses but not model/gltf-binary. Meshopt files are designed to be compressed in transit, so the reference model drops from 203 KB to 65 KB when labelled application/wasm (Draco would be 116 KB plus a 75 KB decoder). GLTFLoader reads the bytes as an ArrayBuffer, so the label does not affect loading. If your host compresses model/gltf-binary, or strict MIME types matter more to you, keep the correct type.

Tick these off before you call it done. Your ticks are saved in this browser only.

Everything in this playbook is in 1MrHad1/3d-landing-playbook.

index.html                   the reference landing page (sections carry data-pose)
src/main.js                  boot: Lenis + GSAP, text reveals, loader, lazy 3D, poster fallback
src/choreography.js          pose tables (desktop / phone), scrubbed tweens, pinned exploded view
src/scene/stage.js           renderer, composer (bloom, AgX, vignette, grain), loop, adaptive DPR
src/scene/studio.js          generated softbox environment → PMREM (no HDRI download)
src/scene/orrery.js          GLB load, material finishing, gimbal joints, explode, label anchors
src/data/references.js       the reference sites shown on the landing page
src/style.css                layout and type for the landing page
tools/blender/build_orrery.py headless Blender: model, bevels, materials, GLB export, Cycles poster
tools/shoot.mjs              headless GPU Chrome: screenshots + LCP + 3D timing + overflow check
tools/build-playbook.mjs     wraps this playbook into /playbook/index.html for Netlify
playbook/playbook.html       this document
public/models/orrery.glb     the compressed model (203 KB, meshopt)
public/img/                  Cycles poster (WebP), social image, favicon
netlify.toml                 build command, publish dir, cache headers, GLB served compressed

npm run dev        # local dev server
npm run model      # rebuild the GLB + poster in Blender (headless)
npm run optimize   # compress the GLB with gltf-transform
npm run build      # playbook + production bundle into dist/
npm run shoot      # screenshots and timings (needs `npm run preview` running)

Primary sources first. Numbers marked as measured were taken on the reference build (Apple M4, Chrome with the GPU enabled) or with the npm packages on 9 October 2026.

Not verified: Cinema 4D, Houdini Indie, Tripo and Needle Pro prices (third-party sources only), Womp glTF export, TRELLIS.2 weight licences, and the default .glb content type on Vercel and Cloudflare.