The Breaking Point of Language
The story behind The Yield
Inspired by Yield (engineering) on Wikipedia
Built with Pure WebGL2 (no Three.js) · GLSL Fragment Shaders · opentype.js
Techniques Raymarched Distance Fields · Polynomial Smooth-Min Blending · Verlet Spring Physics · Per-Letter Hue Mapping · Multi-Pass Bloom · Subsurface Scattering Approximation
Direction Decompose letters into hundreds of metaballs, then subject them to gravity, pooling, and reformation — making language behave like a material with a yield point
Result Typography that wobbles, stretches like taffy when grabbed, collapses into a liquid pool every few seconds, and reforms as a new five-letter word
The Story
In materials science, the yield point is the exact moment a material stops being elastic and starts being plastic. Below it, stress is reversible — release the force and the material snaps back. Above it, the structure deforms permanently. The atom lattice slips. What was rigid becomes flow.
Every word has a yield point too. Push the letters far enough and they stop being language. They become shape, texture, weight. The recognition machinery in your visual cortex lets go, and what’s left is pure form.
The Take
Each letter is decomposed into hundreds of metaballs — small spheres placed along the glyph outline and interior using opentype.js to parse the font at runtime. The spheres overlap densely enough that smooth-min blending fuses them into a continuous surface. The result looks like a single solid object, but it’s actually a field — an implicit surface defined by the minimum distance to any sphere, smoothly blended.
Grab any letter and the surrounding balls follow through a smooth falloff function. The pull propagates like stretching putty — nearby balls move a lot, distant balls barely notice. Release, and the springs snap everything back. The smin blending handles all the visual magic: stretched balls create taffy-like bridges, compressed balls merge into blobs.
Every few seconds, the letters yield. Each ball receives a random delay, then falls straight down — accelerating like gravity. The staggered timing means balls drip and cascade rather than moving in lockstep. At the bottom, the smin blending merges everything with the ground plane into a convincing pool. After a pause, the pool reforms into a new word. Fifteen words cycle through: YIELD, CRACK, FORGE, STEEL, BREAK, CRUSH, SHEAR, BURST, PRESS, GRIND, PULSE, DRIFT, BLOOM, QUAKE, FROST. All five letters, all about force and transformation.
The Tech
Metaball Decomposition. opentype.js parses the font file and returns glyph outlines as bezier paths. The system samples points along these paths and floods the interior, producing 150–300 ball positions per letter. Ball positions are uploaded to a float texture each frame (one row per ball: x, y, radius, letter index).
Raymarching. The entire scene is raymarched in a fragment shader. Every pixel casts a ray through a perspective camera, steps through the distance field until it hits a surface, then computes lighting. There’s no geometry in the traditional sense — no triangles, no vertices, no mesh. Just math evaluated per-pixel.
Polynomial Smooth-Min. Standard min(d1, d2) produces sharp creases where two balls meet. Polynomial smin (k parameter ~0.4) smoothly blends the distance fields, creating the organic liquid look. The same smin blends balls with a ground plane at y = -0.85, producing a convincing puddle during collapse.
Verlet Spring Physics. Each ball has a rest position (where it belongs in the letter) and a current position. The difference creates a spring force (K = 8.0) that pulls it back. Damping (0.85) bleeds off velocity. The result is a soft-body system where every letter wobbles subtly at rest and responds to mouse interaction with taffy-like stretching.
Collapse Cycle. State machine: HOLD (2s, normal springs) → COLLAPSE (balls fall with quadratic ease, staggered random delay) → PUDDLE (brief pause, compute nearest-neighbor assignment for next word) → REFORM (balls rise to new positions with heavier damping). The nearest-neighbor assignment ensures each ball travels to the closest available target in the new layout, keeping motion organic.
Lighting. Five-term lighting model: Lambertian diffuse, Blinn-Phong specular (exponent 32), rim light (Fresnel pow(1-NdotV, 4)), ambient occlusion approximation (short-distance field re-evaluation), and subsurface scattering (back-light bleeding through thin regions). Each letter gets a distinct hue spread across blues, purples, pinks, and golds.
Post-Processing. Multi-pass bloom (brightness extraction → half-resolution Gaussian blur → additive composite), Reinhard tone mapping, film grain, and vignette. Everything runs in a single WebGL2 context — one quad, five shader passes.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.