All case studies
WebGL experiment · self-directedWeb Development

EIDOLON

eidolon-musuem.vercel.app
Three.js r160WebGLGLSLNative ES modules
EIDOLON, WebGL experiment · self-directed
Scroll to play

Brief

A deliberately useless website, and the only brief I set myself: find out how much atmosphere a browser can hold. EIDOLON is a museum whose entire collection doesn't exist: four artifacts (a maker's mark, a suspended chess endgame, a trefoil knot, an hourglass mid-pour), each rendered as 60,000 drifting grains of light that assemble as you descend through the halls.

Decisions

01The collection is computed, not downloaded

Every artifact is sampled at runtime into a Float32Array rather than shipped as a model file: the trefoil from its knot equation, the hourglass as a surface of revolution. That one decision is why a four-room museum of roughly 240,000 particles weighs 330 KB in total: there is no geometry to download, because there is no geometry until the page runs.

02One draw call per exhibit

All 60,000 grains of an artifact live in a single BufferGeometry drawn as THREE.Points, with drift and depth handled in a vertex shader and additive blending doing the glow. Sixty thousand scene objects would have buried the main thread; one buffer and a pair of shaders holds Total Blocking Time at 0 ms even on throttled mobile.

03No bundler, no framework

The whole site is native ES modules with an importmap pulling Three.js r160 straight from a CDN, plus 13 KB of application code. For a single-page piece with four scenes, a build toolchain would have been more machinery than the thing it was building, and it would not have made the result one byte smaller.

04The canvas is invisible to screen readers

The WebGL canvas is marked aria-hidden, and every exhibit carries a real heading, accession number and written description in the DOM. With the graphics off the museum still reads as a document, and that is why a page that is visually nothing but particles still scores 100 on SEO and 94 on accessibility.

Result

Total page payload330 KB
Application code13 KB
Performance (desktop)99
Largest Contentful Paint (desktop)0.9 s
Total Blocking Time (mobile)0 ms
Cumulative Layout Shift0
Performance (mobile)71
SEO100

Mobile

Performance71
Accessibility94
Best Practices96
SEO100

Desktop

Performance99
Accessibility94
Best Practices96
SEO100

Mobile performance is 71, and the cost is first paint (4.5 s) while the particle field initialises on a throttled CPU, not page weight. That is the trade an experiment like this makes knowingly: nothing blocks (0 ms) and nothing shifts (CLS 0), but the first frame has real work to do.

All figures are real Lighthouse measurements (v12.8.2) taken against the live site on July 2026. Nothing is estimated.

Want results like these?

Tell me what you're building and I'll tell you honestly what it needs.

Start a project