The Chain Is Literal: Spring Physics Meets 4D Typography
TL;DR Nine characters hang in a spring-physics chain as instanced particle grids. A kick drum fires a pulse at S that propagates physically through the springs to N. Each character snaps flat when the pulse hits, then folds back — S barely rotates, N goes deep into the fourth dimension
Inspired by Ducking on Wikipedia
Built with WebGL2 · GLSL Vertex Shaders · Instanced Rendering · Verlet Integration · Web Audio API · 4D Projection Math
Techniques Verlet Chain Physics · Spring Constraint Solving · Canvas Pixel Extraction · WebGL2 Instanced Quads · Vertex-Shader 4D Rotation (XW/YW/XZ planes) · Two-Stage Perspective Projection (4D→3D→2D) · Progressive Deformation Depth · Additive Particle Blending · SDF Spring Lines · Multi-Pass Gaussian Bloom · Kick Drum Synthesis
Direction Make sidechain compression physically literal — the kick fires a pulse that travels through a chain, and each link yields in sequence
Result A beat-driven typographic chain where legibility travels as a wave, characters are visible particle grids that scatter into 4D point clouds, and the last character folds deepest into the fourth dimension
The Story
In the 1930s, Douglas Shearer at MGM invented ducking — an audio circuit that automatically reduced music volume when dialogue played. Decades later, electronic music producers turned this utility into an aesthetic: sidechain compression. A kick drum fires, and everything else ducks. The pumping, breathing effect that defines electronic dance music isn’t music theory. It’s signal suppression.
But ducking was always described as a chain. Signal chains. Effects chains. The kick triggers a compressor, which attenuates the bus, which reshapes the mix. Each link in the chain yields to the one before it.
The human truth: force propagates. The kick doesn’t suppress everything simultaneously — it travels through the chain, and each link yields a moment after the last.
The Take
The chain is literal. Nine characters — S, I, D, E, C, H, A, I, N — hang in a Verlet-integrated spring chain, draping under gravity with visible spring connections between each node. Each character isn’t a texture — it’s a cloud of hundreds of tiny particles extracted from the actual font geometry. A synthetic kick drum fires at 118 BPM, applying a sharp downward impulse to the first node. The pulse propagates physically through the spring constraints, arriving at each character when the physics delivers it.
When the pulse hits a character, its particles snap flat into a readable letter shape. Between pulses, every particle in the character rotates through 4D space in the vertex shader — the grid loosens, shifts, scatters. S barely rotates. N goes deep. The word is only readable as a travelling wave of particle alignment.
Click anywhere to fire additional kicks. Move the cursor to curve the chain with a radial force field. Leave it idle and the chain breathes with a gentle sine-wave breeze.
The Tech
Characters are real instanced geometry — no atlas texture, no fragment-shader character lookup. Five shader programs, six render passes, with Verlet physics on the CPU driving per-character uniforms.
Pixel Extraction. Each of the nine characters is rendered to a 48x48 offscreen canvas using the Anton typeface. getImageData() extracts every filled pixel (alpha > 128). Each filled pixel becomes one instanced quad — roughly 700-900 per character, ~7000 total across the word. Per-instance attributes encode local position (vec2), character index (float), and source alpha (float).
Instanced Rendering. One unit quad (4 vertices, 6 indices) drawn ~7000 times in a single drawElementsInstanced call. WebGL2’s vertexAttribDivisor separates per-vertex data (quad corners) from per-instance data (pixel positions). The entire word renders in one draw call.
Vertex-Shader 4D. The 4D rotation math runs per-vertex, not per-pixel. Each instance’s local position is transformed through three rotation matrices (XW, YW, XZ planes), then projected 4D→3D→2D through two perspective divisions. The quad corner offset scales with the combined perspective factor, so particles appear smaller when deep in 4D space and larger when flat.
Verlet Integration. Nine nodes connected by eight springs. Each frame: compute velocity from position delta, apply gravity, apply damping (0.985), then iteratively solve spring constraints (4 iterations for stability). No explicit velocity storage — Verlet stores velocity implicitly in the position/old-position delta. Weak anchor restoration springs prevent drift.
Impulse Propagation. The kick applies a sharp downward velocity impulse to node 0 (S). This displaces S, which stretches the spring to I, which pulls I, which stretches the spring to D — and so on. The wave travel time is emergent from the spring physics, not an artificial delay.
Progressive 4D Depth. Each character’s maximum rotation angle increases linearly: maxAngle = 0.04 + i * 0.055. S barely moves. N folds deeper. The rotation angle is maxAngle * (1.0 - pulse), so high velocity = flat, at rest = folded. The physics naturally creates a bell-curve pulse at each node as the wave passes through.
Additive Particle Blending. Characters use SRC_ALPHA, ONE blending. When flat, overlapping particle quads accumulate into bright, readable letter shapes. When scattered in 4D, sparse areas dim naturally. The 4D depth varying colors particles: warm red at positive W, cool blue at negative W, neutral white when flat. Overlapping warm and cool particles blend to white at intersections.
Spring Line Rendering. A separate fullscreen-quad program computes signed distance to each spring segment. Lines render as thin glowing strokes. Stretched springs glow blue, compressed springs glow red. Tension intensity is proportional to the stretch ratio.
Rendering Pipeline. Six passes per frame: (1) background FBM noise → mainFBO, (2) SDF spring lines → mainFBO (additive), (3) instanced character particles → mainFBO (additive), (4) horizontal Gaussian blur → half-res blurFBO1, (5) vertical Gaussian blur → blurFBO2, (6) composite with bloom + grain + vignette → screen.
Kick Drum Synthesis. Pure Web Audio: sine oscillator 150Hz→40Hz in 50ms (body) + 15ms highpass noise burst (transient). Manual clicks produce a longer sub-bass ring (0.5s vs 0.25s for auto-kicks).
The Experience
You open the page. Dark. The word SIDECHAIN in Anton, large and still. Below it: One signal fires. Everything else ducks. And a hint: Move to curve the chain. Click to fire.
You click Enter. The characters dissolve from solid text into particle grids — hundreds of tiny glowing dots arranged in letter shapes. They sag under gravity as a chain, connected by thin spring lines. An arc from S on the left to N on the right.
A kick hits. S lurches downward. The spring to I stretches, pulls taut — the connection line flashes blue with tension. I yanks down a moment later, pulling D with it. As each character’s node accelerates, its particle cloud snaps flat — the dots align into a readable letter for an instant. Then the pulse passes and the particles scatter back into 4D space, the grid loosening as rotation returns.
S recovers quickly — it barely rotates to begin with, its particle grid always nearly readable. But N, at the end of the chain, folds its particles deep into the fourth dimension. Warm red dots drift in one direction, cool blue in another. When the pulse finally reaches N, the snap from scattered cloud to legible letter is dramatic — a swarm of particles suddenly aligning into geometry, then dissolving again.
Move your cursor toward the chain. The characters curve away, bending around your position like a wire around a magnet. The spring lines stretch and glow. Click for a manual kick — heavier, with deeper sub-bass. Two pulses travelling through the springs, interfering. Characters flip between particle alignment and scatter in complex patterns.
Leave your hands still. After three seconds, a gentle breeze picks up — the chain breathes, swaying in a slow sine wave, each character’s particle cloud drifting slightly out of phase with its neighbors.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.