The Prism
The story behind The Prism
Inspired by Chromatic aberration on Wikipedia
Built with Three.js r160 · pmndrs postprocessing · ChromaticAberrationEffect · VignetteEffect
Techniques Cursor-driven chromatic aberration · Interaction accumulator · Progressive object reveal · Emissive color development · Radial modulation
Direction White light is every color held together by stillness — your movement fractures it
Result Dark geometric forms on a white field that slowly develop spectral identity as you interact, edges splitting into color
The Story
Chromatic aberration is a failure of a lens to focus all colors to the same point. White light enters a prism and exits as a spectrum — not because the colors were created, but because they were always there, held together by the medium they passed through. The prism doesn’t add anything. It reveals.
Every lens has this flaw to some degree. The edges of photographs soften into color fringes. Cheap binoculars paint purple halos around trees. Even the human eye suffers from it — we just learned to ignore the rainbow edges of everything we see.
The question: is the unfractured white light the truth, or is the spectrum?
The Take
Three dark geometric forms sit on a pure white field — a torus knot, a sphere, an octahedron. At rest, they’re monochrome. Nearly invisible edges. The chromatic aberration is subtle, just a whisper of color at the boundaries.
Move, and the forms begin to respond. The sphere fades in. The octahedron appears. Each develops its own emissive tint — violet for the knot, warm red for the sphere, teal for the octahedron. The chromatic aberration grows with sustained interaction, and the directional offset follows your cursor’s movement, fracturing edges in the direction you drag.
The narrative arrives in fragments: “white light” → “is every color” → “held together by stillness” → “look what you’ve done.” You are the prism. Your attention is what separates the spectrum from the white.
The Tech
pmndrs Postprocessing: ChromaticAberrationEffect with radialModulation: true and modulationOffset: 0.15. The offset vector combines a growing base (0.004 → 0.008 over sustained interaction) with a directional speed component (smSpeed * 0.08), creating both a persistent fringe and dramatic motion-driven splitting.
Interaction Accumulator: Rather than thresholding on instantaneous speed, the experience tracks cumulative interaction — interactionAccum += dt * smSpeed when moving. This drives progressive reveals: sphere opacity at interactionAccum / 5, octahedron at (interactionAccum - 2) / 2.5, emissive color development at interactionAccum / 12. The result: the experience evolves with sustained engagement, not just fast movement.
Emissive Color Development: Each material’s emissive RGB is set per-frame based on a squared color phase: cp * cp where cp = min(interactionAccum / 12, 1). The ease-in curve means color appears slowly at first, then accelerates. Violet bias on the knot (0.06, 0.01, 0.14), warm/red on the sphere (0.14, 0.03, 0.01), teal on the octahedron (0.01, 0.12, 0.08) — three distinct spectral identities emerging from identical dark starting materials.
Cursor Embodiment: The torus knot tilts toward the cursor via smoothed rotation: tiltX += (targetTiltX - tiltX) * 0.03. The group auto-rotates at 0.35 rad/s while the knot’s individual tilt responds to pointer position. This dual motion — autonomous rotation plus cursor-responsive tilt — creates the feeling that the object is aware of you.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.