The Boundary
The story behind The Boundary
Inspired by Surface plasmon polariton on Wikipedia
Built with WebGL2 · GLSL Fragment Shader · Fullscreen Quad
Techniques Exponential decay field · Chromatic channel separation · FBM noise · SPP wave propagation · SDF text atlas
Direction The space between two materials is not empty — it’s a luminous field where light becomes something else
Result A scroll-driven zoom from a thin golden line into a full-screen evanescent glow, with text that fades based on field intensity
The Story
When light hits a metal surface, most of it bounces back. But at certain angles, something extraordinary happens: the light couples with free electrons in the metal, creating a hybrid wave — part photon, part electron oscillation — that propagates along the interface. This is a surface plasmon polariton, and it exists only at the boundary between two materials. Not in the metal. Not in the air. At the interface itself.
What makes this phenomenon haunting is the evanescent field. The electromagnetic intensity doesn’t stop at the surface — it leaks into both materials, decaying exponentially with distance. The strongest signal lives in the thinnest space. Within a few hundred nanometers, the field is gone. Everything that matters about the interaction happens right at the point of contact, and it vanishes almost immediately as you move away.
The Romans stumbled onto this physics 1,600 years ago. The Lycurgus Cup, embedded with gold and silver nanoparticles, appears jade green in reflected light and ruby red when light passes through it. The same physics — plasmon resonance — producing different colors depending on which side of the glass you stand on. It’s the oldest known nanotechnology, and nobody understood it until the 20th century.
The Take
The Boundary translates the evanescent field into a scroll-driven experience. The screen is divided by a luminous horizontal line — the interface between a dark metal and a cool blue dielectric. As you scroll, you zoom into this line, crossing twelve orders of magnitude from macro to nano scale. The line thickens, reveals internal structure, and eventually becomes a luminous golden field that fills the screen with exponential decay.
Four text fragments live inside the field: “everything that matters lives at the interface,” “the strongest signal occupies the thinnest space,” “what you become at the boundary is neither one thing nor the other,” and “the field decays but the contact was real.” Each line’s legibility is governed by the evanescent decay function — text near the boundary is bright and readable, text further away fades into ghostly fragments. The physics decides what you can read.
The Tech
Single Fullscreen Fragment Shader
The entire experience is a single WebGL2 fragment shader — no Three.js, no scene graph, no draw calls beyond one fullscreen quad. Every pixel is computed from the scroll position and time uniforms. The shader runs at 60fps on any GPU because there’s no geometry, no textures to sample (beyond the text atlas), and no post-processing passes.
Exponential Decay Field
The evanescent field is computed per-pixel as exp(-distance / skinDepth) where distance is the pixel’s distance from the boundary and skinDepth is a scroll-driven parameter that grows from 0.004 to 0.35 UV units. At macro scale, the field is invisible — the skin depth is too small. At nano scale, the field fills most of the viewport with a smooth exponential gradient from bright gold to darkness.
Chromatic Channel Separation
In real surface plasmon polaritons, longer wavelengths penetrate further into the evanescent zone. The shader implements this by giving each color channel a different skin depth: red uses skinDepth * 1.2, green uses skinDepth * 1.0, and blue uses skinDepth * 0.8. This creates a physically motivated chromatic gradient — warm gold near the boundary, cooling through amber as the blue channel decays first.
SPP Wave Propagation
Surface plasmon polariton waves propagate laterally along the interface. The shader renders these as sin(kx * x * aspect - omega * time) modulated by the evanescent envelope, with a second harmonic at 1.7x frequency for visual complexity. The wave crests are sharpened with a power function (pow(sin(), 2.0)) to create distinct luminous pulses rather than smooth sinusoidal undulation.
Text in the Decay Zone
Text is pre-rendered to a 2048px canvas atlas as white-on-black monospace glyphs, uploaded as a WebGL texture. The shader samples this atlas for each text line, multiplying the glyph alpha by pow(fieldIntensity, 2.2) — a steep power curve that keeps distant text nearly invisible while making near-boundary text legible. Text color uses the same chromatic separation as the field, making the text feel like it’s made of the same light.
Micro-Behaviors
Three subtle behaviors add life: a breathing boundary oscillation (sinusoidal amplitude modulation that slows from 0.4Hz to 0.08Hz as you zoom in), stochastic electron cascades (small ring-shaped pulses that fire along the boundary at meso scale), and FBM crystalline refraction patterns in the dielectric field that drift slowly with time.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.