Where You Stand: Anamorphic Projection as Revelation
The story behind The Sweet Spot
Inspired by Anamorphosis on Wikipedia
Built with Three.js · ShaderMaterial · opentype.js · EffectComposer (UnrealBloomPass) · Web Audio API
Techniques Voronoi Tessellation · Fresnel · FBM Nebula · Chromatic Aberration · Bloom · Vignette
Direction Build Felice Varini’s room-scale anamorphic illusion as a scroll-driven 3D web experience — shatter the word TRUTH into Voronoi fragments and make one exact camera depth the only key that reassembles them
Result Scroll through a field of indigo shards with violet rim glow until, at one precise depth, perspective projection snaps 200 fragments into the word TRUTH — warm gold, specular facets, and a Cmaj9 chord that swells and dissolves
The Story
In a corridor of the Palazzo Spada in Rome, an architect named Francesco Borromini built a colonnade that appears thirty-seven meters long. It is eight. The columns shrink, the floor rises, the ceiling drops — forced perspective compresses real space into an illusion that only works from the entrance. Step inside and the trick dissolves. Stand at the threshold and the geometry is perfect.
Felice Varini paints geometric shapes across the surfaces of entire rooms — walls, ceilings, pillars, stairwells. From almost every angle, his work looks like random fragments of color splashed haphazardly across architecture. From one precise point, the fragments snap into a circle, or a triangle, or a series of concentric squares. The art exists in exactly one place. Move a foot to the left and it’s gone.
This is anamorphosis: a distorted projection that resolves into a coherent image only from one specific vantage point. The undistorted image doesn’t exist in the object. It exists in the relationship between the object and the viewer. Truth, in the anamorphic sense, is a function of where you stand.
We wanted to build that relationship with a scroll bar.
The Take
A dark screen. The word THE SWEET SPOT in white, center-justified. Click to begin. The overlay dissolves and you’re looking into deep space — deep indigo, a slow-drifting nebula of noise behind everything, and scattered through the volume, fragments. Shards. Hundreds of them, at different depths, tilted at odd angles, catching violet rim-light along their edges. They look like the debris of something broken.
Scroll down. The camera moves forward through the field. The shards don’t move — but their apparent positions shift as parallax does its work. Some fragments drift across each other. Some cluster. The color temperature is cold — indigo and blue-violet — and the edges of your screen darken into a purple-tinged vignette. There’s chromatic aberration pulling red and blue apart at the periphery. A low drone hums underneath everything. Dust motes drift through the space, glowing faintly in additive blending.
Keep scrolling. Something is happening. The shards are starting to look like they might belong together. The letter T, maybe — or was that an R? The rim glow is shifting from cool blue to warm gold. The vignette is loosening. The aberration is fading. And then, at one exact scroll position, every shard snaps into alignment. TRUTH. The word is whole. Warm cream-gold, specular highlights catching across faceted surfaces, a glowing amber ghost outline breathing gently underneath, bloom softening the edges. A chord swells — an open Cmaj9, sine waves spread wide across three octaves — and then dissipates, even as you hold still, leaving the word glowing in silence.
Scroll past it and the word shatters again. Cold indigo returns. The drone comes back. The truth was only visible from one place.
The Tech
The pipeline has five stages: font parsing, Voronoi sharding, anamorphic projection, shader-driven atmosphere, and post-processing.
Font parsing uses opentype.js to load Space Mono Bold at 200px and extract each letter’s path commands. The commands are converted into THREE.Shape objects with proper winding-order detection — outer contours separated from holes (like the counter of an R or the interior of a U) using signed-area calculation. Each letter’s shapes are triangulated via THREE.ShapeGeometry.
Voronoi sharding breaks each letter into approximately 40 fragments. For each letter shape, seed points are distributed across triangle centroids, then every triangle is assigned to its nearest seed using squared-distance comparison. Each cluster becomes a shard — a BufferGeometry containing its group of triangles, with positions centered on the shard’s own centroid. This produces around 200 shards total, each with an alignedPos that records where it belongs in the complete word.
Anamorphic projection is the core mechanic. Each shard is placed at a random Z depth between -250 and +80 (the word plane is at Z=0). The key equation: at the target camera Z of 300, a shard at depth zShard must project to the same screen coordinates as its aligned position at Z=0. The scattered position is alignedPos * (TARGET_Z - zShard) / TARGET_Z. From any other camera distance, the perspective scaling is wrong and the shards appear scattered. From exactly Z=300, the projection factors cancel and every shard appears at its correct position. The camera Z is driven by scroll through a sigmoid easing function that creates magnetic deceleration near the sweet spot — the scroll “sticks” slightly, giving you a moment to notice the alignment forming.
Shard materials use a custom ShaderMaterial with Fresnel rim glow, Blinn-Phong specular highlights, per-shard color variation, and three-point lighting baked directly into the fragment shader. The key light is warm white from upper right. The fill is cool blue from lower left. The rim light is violet from behind. A Fresnel term — pow(1.0 - abs(dot(viewDir, normal)), 2.5) — produces edge glow that shifts from blue-violet (scattered) to warm gold (aligned) based on the uAlignment uniform. A hash function on quantized world position gives each shard a unique tint offset within the palette, preventing the flat “construction paper” look of uniform color across all fragments.
Atmosphere comes from three layers. A nebula background plane at Z=-300 runs 4-octave FBM noise in a fragment shader — slow-drifting, deep indigo when scattered, warming to dark amber at alignment, with radial falloff so the center is brighter. Colored FogExp2 tints the depth from purple-black to warm amber. Particles use THREE.Points with AdditiveBlending — 85% are dust motes (0.5-1.5 size), 15% are larger sparkles (2.0-5.0), with color split across blue-violet, silver-white, and warm amber. Their opacity inverts with alignment: visible debris in chaos, clean and dim at revelation.
Post-processing runs four passes through EffectComposer. UnrealBloomPass at threshold 0.75 catches the Fresnel rim glow, with strength ramping quadratically from 0.15 to 0.75 at full alignment, and radius tightening from 0.6 to 0.4 for a focused crystalline look. Chromatic aberration applies quadratic falloff: 0.008 * (1 - alignment)^2 — heavy distortion when scattered, dropping sharply near the sweet spot. A combined vignette/grain pass darkens edges toward purple-black (loosening at alignment for an “opening up” sensation) and overlays animated film grain that’s grittier when scattered and nearly clean at alignment.
Audio runs two layers. A sine-wave drone at 80Hz is loud when scattered and fades to silence at alignment. At >95% alignment, an open Cmaj9 chord swells in over 500ms — C3, G3, D4, E4, B4 on sine oscillators, spread wide for an ethereal voicing — then dissipates over 4 seconds regardless of whether you stay, leaving the visual revelation to stand on its own.
The ghost outline of the complete word appears at 60% alignment as an HDR-bright LineBasicMaterial (color values above 1.0 so bloom catches it) that breathes with a slow sine pulse above 85% alignment.
The Experience
You scroll into the field. Indigo shards, violet edges, purple vignette, chromatic distortion. Noise and dust. Something broken.
You scroll further. The fragments tighten. Color warms. The drone quiets. A shape is forming — almost legible — you can feel the word before you can read it.
One more scroll tick. Everything aligns. TRUTH. Warm gold, specular facets, the ghost outline breathing underneath, bloom softening the whole image into something luminous. A chord rises and dissolves. The vignette opens. The grain cleans.
You hold still. The chord fades. The word stays.
You scroll past, and every shard flies apart. Cold returns. The word you just read is unreadable again. It’s still there — every fragment is exactly where it was — but the viewpoint is wrong now, and the truth is a function of where you stand.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.