The Thin Layer Between Control And Collapse
The story behind The Veneer
Inspired by Entropy on Wikipedia
Built with Three.js · ShaderMaterial · Raycaster · CanvasTexture
Techniques Simplex Noise · Chromatic Aberration · Vertex Displacement · Glitch Effects · Scanlines
Direction Visualize entropy as a proximity-driven shader — ORDER corrupts into CHAOS the closer your cursor gets, then heals when you retreat
Result A subdivided plane where simplex noise, UV distortion, and chromatic aberration tear the word ORDER apart into CHAOS based on cursor distance alone
The Story
Entropy. The second law of thermodynamics. The tendency of isolated systems to evolve toward thermodynamic equilibrium - the state with maximum disorder.
Order inevitably gives way to chaos.
The Wikipedia article on entropy describes this in clinical terms: closed systems tend toward higher entropy states. Heat flows from hot to cold. Structures break down. Patterns dissolve.
But what does entropy look like? What happens at the boundary between order and chaos?
The Take
We present our best selves. Clean. Controlled. Ordered.
The word ORDER sits at the center of the screen, rendered in crisp Inter Bold. A statement of control. A declaration of stability.
But move closer - move your cursor or finger toward the center - and something else emerges.
CHAOS.
The letters warp. The surface buckles. Chromatic aberration tears the image into red and cyan ghosts. Scanlines flicker. The word itself transforms from ORDER to CHAOS, not as a clean replacement but as a corruption.
This is the veneer. The thin layer of order we maintain on the surface. And like all veneers, it can’t survive close examination.
The metaphor works personally and cosmically. We maintain facades. We present control while chaos churns beneath. And on the longest timescales, the universe itself is headed toward maximum entropy - toward the heat death where all order dissolves.
The Tech
Three.js with custom GLSL shaders. This experience is built on a displacement shader approach inspired by Codrops’ animated letter experiments.
The geometry is a highly subdivided plane (128 x 32 segments) that allows for smooth vertex displacement. Two canvas textures contain the words ORDER (cream, Inter Bold) and CHAOS (red, Rubik Glitch font).
The vertex shader does the heavy lifting:
- Proximity detection: Calculate distance from each vertex to the mouse position
- Falloff function: Cubic easing creates a smooth influence zone
- Simplex noise: Two octaves of 3D simplex noise add organic turbulence
- Displacement: Combine proximity and noise to push vertices along Z-axis
- XY jitter: Additional noise creates lateral movement for instability
The fragment shader handles the visual corruption:
- UV distortion: Random per-frame jitter based on chaos amount
- Texture blending: Mix ORDER and CHAOS textures based on displacement magnitude
- Chromatic aberration: Sample red and blue channels with offset UVs
- Glow: Add warm gold (order) to purple (chaos) gradient based on blend state
- Scanlines: Subtle horizontal lines intensify with chaos
- Vignette: Gentle darkening at edges
The chaos amount smoothly interpolates based on cursor proximity to center. When you’re far away, ORDER remains pristine. As you approach, the corruption intensifies. Back away, and order gradually reasserts itself.
The Experience
Move your cursor (or finger on touch devices) toward the center of the screen.
Watch what happens.
There’s no click required. No buttons. Just proximity. Your presence is enough to destabilize the order.
The closer you get, the more violent the transformation. At maximum proximity, you’re seeing pure CHAOS - the text fully corrupted, the surface violently displaced, chromatic aberration at maximum.
Pull away and the surface heals. But you know it’s temporary. The veneer has been exposed.
The hint text fades after first interaction. Once you’ve seen behind the curtain, you don’t need instructions.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.