A fictional architectural-light studio whose entire identity is the idea that light is the first material. The site needed one moment of genuine visual invention and otherwise get out of its own way with editorial typography on a dark-premium token set. Everything here — the studio, the works, the cities — is invented; it exists to demonstrate craft, not to sell anything real.
The hero is a particle cathedral — roughly 6,000 additive-blended points distributed across seven arched nave ribs, parametrically placed with radial scatter so the ribs read as soft volumes rather than lines. The cloud idles in slow rotation, nudged horizontally by cursor position. A small fraction of points (4%) are warm sparks; the rest grade from teal at the apex to deep blue at the base, mirroring the way real cathedrals pool colour through stained glass.
Two layers deepen the mechanic. A visiting light — a soft additive shaft — walks the nave: it follows the cursor, and when no pointer is present (touch devices, or three seconds of stillness) it sweeps on its own, like a visitor carrying a lamp. And an hour cycle drifts the whole nave's colour temperature warm and back over ninety seconds, so no two moments of the hero are quite the same colour.
Engineering guardrails: devicePixelRatio capped at 2, rAF paused when the tab is hidden and when the hero scrolls out of view (IntersectionObserver), WebGL feature-detected, and the whole motion layer gated behind an html.js class. The resting state is designed, not blank: a static inline-SVG nave — seven gradient arch ribs with warm sparks — sits under the canvas and shows whenever ?noanim, prefers-reduced-motion, a blocked CDN, or a missing WebGL context leaves the scene unbooted. When WebGL does boot, the page renders one frame synchronously and crossfades from the SVG to the live canvas.
top 88%.clamp() for fluid type and spacing; 100dvh heroes.html.js / ?noanim / reduced-motion) with a designed static state for all three.None. The concept is pure light; generated photography would dilute it. Every visual on the page is typography, CSS gradients, inline SVG, or WebGL.
Match every detail below exactly. Build a single-file site (inline
CSS/JS) for a fictional architectural-light studio, LUMEN ATELIER.
Stack: Three.js r160 + GSAP 3.12.5 + ScrollTrigger + Lenis 1.1.13,
all pinned CDN; fonts self-hosted variable woff2 (Unbounded 200-900
display, Space Grotesk 300-700 body, IBM Plex Mono 400 captions).
Palette: bg #040910, surface #0b1a2e, text #e8f1f5, dim #8fa3b8,
accent #3ff2e0.
Signature mechanic (the only one): a hero particle cathedral —
6000 additive points (3000 under 768px) in 7 parametric arch ribs,
naveRadius 5.2, ribHeight 7.5, scatter 0.35, 4% warm sparks, teal->
blue vertical colour grade, fog FogExp2 0.055, camera z=14. Slow
rotation t*0.06 nudged by cursor X; vertical drift sin(t*0.25)*0.25.
Deepenings: (1) a "visiting light" additive beam sprite, 3x12 plane
at y 2.4 z 1.6, lerped to cursor X * 9 with 1-exp(-2.5dt) damping,
self-sweeping sin(t*0.12)*4.2 after 3 s idle; (2) a 90-second hour
cycle lerping the material tint between cool (0.86,0.97,1.0) and
warm (1.0,0.92,0.80). dpr capped at 2; rAF stopped when tab hidden
or hero off-screen; one synchronous frame then crossfade from a
static inline-SVG nave (7 gradient arch paths + sparks) that is the
default state for no-JS, ?noanim, reduced-motion, and CDN failure.
Sections: hero (100dvh, whole-headline luminous gradient on
"We compose with photons."), philosophy (2-col: manifesto lede +
3 dot-marked mono tenets), three works as editorial rows — each an
arch-shaped pure-CSS "light study" (stained-glass repeating-linear
strands / concentric ripple rings / dusk band with a warm horizon
line) beside name, lowercase mono medium line, one sensory
sentence — then four process steps as nodes of rising glow on a
beam line, atelier statement, contact CTA. Thin gradient "beam
rules" open sections; no uppercase eyebrows, no numbered folios,
no accent-word headlines. GSAP reveals gated behind html.js with
final values in markup. No fake stats, no phone numbers, no
addresses. Voice: hushed exhibition copy, short declarative
sentences.