GUIDE · WAVE 8 “FORM” · SITE 197 · REACT THREE FIBER
How the bottle was blown.
Build notes for KLEIN — a fictional topology lab with one exhibit and one job: make a visitor feel, in seven seconds, that a surface can have no inside. Everything on the page argues that single sentence.
01 · CONCEPTThe bottle with no inside
A glass Klein bottle — the figure-8 immersion, computed in code as a raw BufferGeometry — turns slowly in a dark lab. Beside it, the rehearsal: an arrow walks the midline of a Möbius strip and comes home mirrored, its flag through the floor it left from, with a live instrument readout keeping score of laps and orientation. The faint ring where the surface passes through itself is annotated honestly: it is a scar of projection, not part of the bottle — in four dimensions the neck clears the wall entirely.
The audience is anyone who has ever been told topology is dry. The page's single job is proof by transit: not to state one-sidedness but to perform it, live, with a score-keeper.
02 · PALETTELab dark, glass cold, orientation hot
Per the collection's ink/line rule, aqua and orange never set body text — they mark geometry and instrument readouts. Panel surfaces sit one step up at #151B22 so cards read as equipment, not decoration.
03 · TYPEOutfit + Kode Mono
The bottle with no inside.
Outfit (300–700) — a geometric sans with lab-clean counters; the display cut at 600 with −2% tracking gives the headline the confidence of etched glassware. Weight, not colour, separates the claim ("The bottle") from the paradox ("no inside", set thin).
LAP 02 · ORIENTATION ⊖ MIRRORED · u 3.41 RAD
Kode Mono — instrument voice. Everything measured (the HUD, section labels, the self-intersection annotation, the χ = 0 footnotes) speaks mono, so the reader always knows whether the page is talking or the lab equipment is.
04 · TECHNIQUER3F without a build step
The whole scene is React Three Fiber 8.17 + drei 9.114, loaded through a pinned ES-module importmap (react 18.3.1 with both jsx-runtime subpaths mapped, fiber and drei with ?external= singleton params, three 0.160 from jsdelivr) and written as htm tagged templates — no JSX, no bundler, one HTML file. If any module fails or WebGL is absent, a CSS-drawn bottle takes over; the canvas also listens for webglcontextlost.
The bottle is the figure-8 immersion K → ℝ³ evaluated on a 196 × 64 grid into a raw BufferGeometry: a figure-8 cross-section swept around a circle with a half-twist, f = r + cos(u/2)·sin v − sin(u/2)·sin 2v. Its glass is drei's MeshTransmissionMaterial at deliberately modest cost (resolution 256, 5 samples, double-sided, no backside pass); a frame-rate sentinel watches the first four seconds and, under 26 fps, swaps in an equivalent MeshPhysicalMaterial transmission build so the scene never chugs. The self-intersection circle — the crossing point of the figure-8 section swept around the axis — is a thin additive torus that pulses, brightens when you hover its annotation, and is captioned as what it is: a scar of the projection, absent in ℝ⁴.
The proof is frame transport. The arrow's basis is computed each frame from the strip's parametrisation — tangent along travel, width vector W(u) = (cos(u/2)cos u, sin(u/2), cos(u/2)sin u), normal by cross product — so nothing is keyframed: the mirroring at lap's end falls out of the geometry, W(u+2π) = −W(u). A drawRange window over a doubled centreline circle draws the fading trail; the strip's single 4π boundary edge is drawn as one aqua line loop. The HUD reads the same state the verifier asserts on: after exactly one lap the flag's local direction reverses (dot ≈ −1) and the orientation glyph flips — the readout itself renders mirrored on odd laps.
Discipline: DPR capped at 2, the loop halts on document.hidden and under prefers-reduced-motion (which renders one settled frame — bottle mid-turn, arrow mid-lap), resize is R3F-native, and the clock advances by clamped delta so tab-switches never jump the arrow.
05 · ITERATION LOGThree passes
PASS 1 · CRAFT
Drove the signature end-to-end: advanced the clock one full lap and asserted the flag's local direction reversed (dot −1.000) and the HUD glyph flipped to ⊖ MIRRORED. Found the arrow's cone pointing off-tangent (cone axis is +Y; rotated −90° about Z), the trail's drawRange window wrapping to zero length at u ≈ 0, and the hero sub-copy fighting the Möbius strip at 1440 — capped the copy block at 660px and moved the readout card clear of the header. Retimed the bottle to 1 turn ≈ 63 s so the glass reads as exhibit, not carousel. The glass itself first rendered as a silhouette — transmission was sampling a near-black field — so the radial backdrop behind it was lifted to a #31465C core with envMapIntensity 1.25, the transit arrow scaled up 22%, and the bottle raised clear of the headline.
PASS 2 · DEPTH
Second-read details: the orientation value in the HUD now renders scaleX(−1) on odd laps — the instrument itself comes home mirrored; hovering or focusing the self-intersection annotation brightens the honesty ring in the scene (DOM event feeding the render loop); the motto section carries a mirrored ghost of itself at 5% opacity. Added the strip's single boundary edge as one continuous 4π aqua loop — the quiet proof that the strip has one edge as well as one side.
PASS 3 · HARDENING
375px: annotation card hidden (its copy lives in section 03), HUD compacted, scene relaid vertically (bottle above, strip below) with a scrim under the hero copy. Verified reduced-motion renders the settled mid-lap frame with zero animation, focus rings on every link and the annotation, and the fps sentinel's physical-glass fallback. Chanel rule: removed a planned second halo ring set and a floating caption sprite — the one ring, annotated once, says it better.
06 · LINKSWhere next
See the exhibit itself at KLEIN, or browse the whole Generative Assets index. If your business could use this level of care in its software, Sapience Analytics takes commissions.