How to build impossible light

Start with three concepts that would genuinely produce different sites. For each, name the emotional thesis, the memorable moment, the scroll beats, the technique, and the failure mode. LUCENT selected a porcelain gallery and rejected both a dark aperture theatre and a scientific atlas.

Then freeze the palette, typography, motion vocabulary, accessibility pairings, fallbacks, and banned patterns in a design file. This stops each new component from quietly inventing a different visual language.

The sculpture is not a downloaded model. Two icosahedrons create nested crystalline shells. A smaller stretched icosahedron forms the coral core. Thin torus geometries become incomplete-feeling orbital traces, and an edge geometry adds a precise cobalt skeleton.

Primitive geometry is useful here because the object stays light, original, and easy to transform in code. The important work is not polygon count. It is silhouette, scale, spacing between shells, and how the object behaves against type.

The shader gives each brand colour a job. Porcelain is room light, cobalt is structure, and coral is energy escaping the centre. A Fresnel term brightens edges facing away from the camera. Facet normals control the porcelain-to-cobalt mix. Scroll progress lets a narrow coral spectral band enter later.

Transparency and depth writing need restraint. The shell is translucent with depth writing disabled, the core is opaque, and the edge lines remain quiet. There is no bloom pass. The absence of glow is part of the art direction.

Measure one normalised progress value across the four early beats. Smooth it with a small interpolation factor, then map it to a few meaningful properties: shell opening, sculpture rotation, core scale, and ring alignment. Do not map every pixel of scroll to a new surprise.

The text remains ordinary semantic HTML. CSS scroll timelines add a compressed title and observation entrances only where supported. Without that feature, the final layout is already present.

A local SVG sculpture is visible before JavaScript runs. The canvas only replaces it after the first successful WebGL frame. If WebGL context creation fails, nothing is hidden and no error state interrupts the experience.

Reduced motion keeps the SVG, removes continuous rendering and CSS timelines, and shows all copy in its final position. No JavaScript still leaves working route links, semantic beats, and an intentional first viewport.

• Lazy-load the scene module after the static page exists.
• Cap device pixel ratio instead of rendering every physical pixel.
• Resize the drawing buffer without mutating inline canvas styles.
• Pause the render loop when the page is hidden.
• Use only the font files and weights the design actually needs.
• Keep the 3D scene transparent so hard CSS colour fields can art-direct it cheaply.

1. Defect and mobile: fix overflow, overlap, contrast, focus, failed rendering, and reduced-motion gaps.
2. Depth and tactility: state one hypothesis for making the signature more physical, then test a targeted change.
3. Cohesion and reduction: remove any detail that competes with the sculpture, retune rhythm, and compare the result with the design lock.

Keep a short written record of what changed. The point is not to generate three different versions. The point is to make three different kinds of decisions.

Astro renders the pages, Three.js draws the one real-time object, a custom GLSL shader supplies the optical surface, and ordinary CSS handles the rest. Fonts are self-hosted through Fontsource. Playwright and axe verify routes, responsive widths, keyboard access, evidence captures, and fallbacks.

The exact creative prompts are published on the prompt ledger.