Build guide · Site 03 of 25

Titanium, lit by a room that isn't there.

HELIODON is one of 25 sites built by Formwork. The metal object looks expensively lit — but there are no light probes or HDRIs, just a room three.js builds in memory.

The idea

An industrial-design studio should show a real object, turning slowly, catching light like the real thing would on a bench. So the hero is a machined titanium form that rotates as you scroll and leans toward your cursor.

The stack

• 3D three.js (r160) + its RoomEnvironment addon, via import-map.
• Material a metallic MeshStandardMaterial (metalness 1, low roughness).
• Motion GSAP scroll reveals; rAF for rotation + cursor lean.
• Type Space Grotesk + JetBrains Mono numerals.
• Host static files on GitHub Pages.

Signature technique: reflections with no HDRI

Convincing metal needs something to reflect. Instead of loading a big environment image, three.js ships a procedural RoomEnvironment — a tiny scene of glowing panels. We render it once into a pre-filtered cube map with PMREMGenerator and set it as the scene's environment; every metal surface then samples it for reflections, for free:

const pmrem = new THREE.PMREMGenerator(renderer);
scene.environment = pmrem.fromScene(new RoomEnvironment(), 0.04).texture;
const mat = new THREE.MeshStandardMaterial({ metalness: 1, roughness: 0.32 });

ACES filmic tone-mapping keeps the bright highlights from clipping, so the titanium rolls off to white the way real metal does. Two soft directional lights (one warm, one cool) add edge definition.

Details that matter

• Scroll = rotation — scrollY feeds straight into the object's Y rotation, so the page scroll is the turntable.
• Context safety — the WebGL context is acquired first and handed to the renderer, avoiding "existing context of a different type" errors.
• Legibility — the object sits right-of-centre on desktop and a soft scrim protects the left-aligned copy.
• Reduced motion / no WebGL — one still frame, or a CSS studio-gradient fallback.

Ship it on GitHub Pages

git init -b main && git add -A && git commit -m "ship"
gh repo create formwork-heliodon --public --source=. --push
gh api --method POST /repos/OWNER/formwork-heliodon/pages \
  -f 'source[branch]=main' -f 'source[path]=/'

One material, one procedural room, one scroll-driven rotation — and a slab of metal that behaves like the real thing.