The Beauty of Optical Failure
The story behind The Aberration
Inspired by Chromatic aberration on Wikipedia
Built with Canvas 2D
Techniques Additive RGB Blending · Cubic Easing Proximity Detection · Retina Display Scaling
Direction Turn the cursor into an imperfect lens that splits white light into RGB channels using physically-accurate additive color mixing
Result Forty white lines fracture into red, green, and blue as your cursor approaches, then recombine into white as you move away — the beauty of optical failure made interactive
The Story
Every lens has a flaw. Light enters as white, as unity, as a single thing. But the lens doesn’t treat all colors equally. Red bends less. Blue bends more. The refractive index varies with wavelength.
Physicists call this dispersion. Photographers call it chromatic aberration. Camera manufacturers spend millions engineering it away.
But if you’ve ever looked at a high-contrast edge through a cheap lens - the boundary between a dark building and a bright sky - you’ve seen the truth. Color fringes. Red on one side, blue on the other. The white light that entered the lens has been split apart, separated into its components, revealed for what it always was: not one thing, but many.
The flaw shows the truth.
The Take
White light is a lie we tell ourselves. A comfortable fiction that lets us move through the world without being overwhelmed by the rainbow hiding inside every photon.
This experience makes your cursor into an imperfect lens. As you move across the screen, white lines split apart. Red separates left. Blue separates right. Green holds the center. The closer you get, the more severe the aberration. The farther away, the more the colors recombine into that comfortable fiction of white.
There’s something meditative about it. Moving through a field of white lines, watching them fracture and heal as you pass. The effect radius is generous enough that you can’t hide from it. Wherever you go, you bring the aberration with you. Wherever you leave, the light reunites.
You are the imperfect lens. The world reveals itself around you.
The Tech
The experience uses Canvas 2D with additive blending to achieve physically-accurate color mixing. When red, green, and blue channels overlap at full intensity, they produce white - the same way light works in the physical world.
Forty vertical white lines span the screen. As the cursor approaches, each line’s white channel splits into three separate draws: red shifted left, green at center, blue shifted right. The offset distance follows a cubic easing curve based on proximity, creating a smooth falloff from maximum separation to none.
The key technical insight is the use of globalCompositeOperation: 'lighter' for the RGB channels. This enables additive blending, meaning overlapping colors combine toward white rather than muddying toward gray. Where the cursor moves away, the three channels naturally recombine into a single white line.
Device pixel ratio scaling ensures crisp rendering on retina displays. Touch support brings the experience to mobile, where your finger becomes the imperfect lens instead of your cursor.
The Experience
Move your cursor across the screen. Watch white light fail to hold together in your presence. See the red, green, and blue that were always there, just hidden inside the unity of white.
The lines heal behind you. The aberration is temporary. But now you know what’s inside.
Every light source you see for the rest of the day will carry this secret. White is not a color. It’s a truce.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.