Seven Letters, One Storm | Blog | Artificial Noodles

Inspired by Tornado on Wikipedia

Built with Three.js · ShaderMaterial · InstancedMesh · InstancedBufferAttribute · CanvasTexture

Techniques Billboard Rendering · Procedural Tornado Vortex · Spine Interpolation · Particle Ejection Physics

Direction Turn the word TORNADO into the storm itself — 2,000 letter instances spiraling through a physics-driven vortex with a mouse-bent spine

Result A typographic tornado you can lean with your cursor, where letters spawn tiny at the base, grow as they rise, and get flung outward from a flattening disc at the top

The Story

A tornado is a violently rotating column of air in contact with both the ground and a cumulonimbus cloud. The visible part — the funnel — is water droplets and debris drawn into the vortex. At the base, the column is tight, concentrated, ferocious. As it rises, it widens. At the top, it flattens into the cloud base, and whatever it’s carrying gets flung outward.

The word tornado probably comes from the Spanish tronada (thunderstorm), mangled through sailor’s usage into something that sounds like it should mean “turned.” Which is fitting, because a tornado is turning itself inside out — pulling material up through a narrow channel and releasing it at the top, a machine that converts ground into sky.

The Fujita scale measures tornado intensity not by wind speed but by damage. An F0 breaks branches. An F5 lifts houses from their foundations and scours the earth smooth. The scale is a catalog of destruction, read backwards from aftermath. You assess a tornado by what it leaves behind.

The Take

Typography as weather event.

Seven letters — T, O, R, N, A, D, O — repeating two thousand times. Each instance is tiny at the bottom, barely legible, one fragment in a tight spiral. As they rise through the funnel, they grow. The letters become readable at the midpoint, fully formed near the top. Then the funnel flattens and the characters spin outward, flung into open space.

The word TORNADO doesn’t describe the storm. It is the storm. The letters are the debris, the rotating column, the visible funnel. When you move your mouse and the base shifts, the rest of the column follows — not rigidly, but with the lazy, bending lag of a real vortex finding its balance. The bottom snaps to your input. The top hasn’t heard the news yet.

There’s something about repetition that creates meaning through accumulation. One T is nothing. A hundred Ts spiraling upward is a structure. Two thousand letters spelling the same word become a phenomenon — not text to be read, but weather to be watched.

The Tech

The Funnel is a Three.js InstancedMesh rendering 2,000 billboard quads with a custom ShaderMaterial. No models, no imported geometry — just a flat atlas of seven letters and a lot of math.

The core mechanics:

Character atlas: The letters T, O, R, N, A, D, O are rendered to a canvas in Playfair Display at 128px, white on black, arranged in a 4x2 grid. This canvas becomes a WebGL texture. The fragment shader samples the red channel as a coverage mask — white pixels are letter, black is discard.
Compound radius curve: The funnel shape uses two terms. Below 80% height, the radius follows BASE_RADIUS + t^1.5 * FUNNEL_FACTOR — a gentle widening. Above 80%, a quadratic flare term kicks in: topT^2 * TOP_FLARE. This creates the dramatic 2.5x expansion at the top that makes the funnel feel like it’s exploding outward. Consolidation bands — sinusoidal radius modulation — create visible density layers in the column.
Bendy spine: A 24-point chain where the bottom follows the mouse directly and each subsequent point follows the one below with progressive lag. The lag increases per point (SPINE_LAG_BASE + j * SPINE_LAG_GROWTH), so the bottom is responsive while the top drifts slowly. This produces organic S-curves when you move quickly.
Flat top: Height rises linearly to 85% of life, then plateaus — the last 15% of life adds only 0.8 units of altitude. Characters at the top orbit in a nearly flat disc before being flung outward as rogues with near-zero vertical velocity.
Billboard shader: Each instance faces the camera using camRight/camUp vectors extracted from the modelViewMatrix. Per-instance spin rotation adds angular velocity that increases with height.
Responsive scaling: A funnelScale factor computed from aspect ratio (0.45 on portrait, 1.0 on landscape) scales the radius, character sizes, and spine displacement simultaneously. The camera pulls back on narrow viewports. The tornado fits every screen.

The shader runs at 60fps, updating 2,000 instance matrices every frame — position, scale, rotation, and opacity computed from each particle’s life parameter and the current spine state.

The Experience

You open the page. An off-white field, like old paper. At the center, a column of tiny dark letters spirals upward — barely visible at the base, growing as they rise. The column widens into a funnel, and at the top, characters spin outward in a flat disc, drifting away before fading.

Move your mouse. The base of the tornado shifts to follow you, but the top stays where it was. Move quickly and the column bends — an S-curve rippling upward as the spine catches up point by point. The storm leans. Stop moving and it straightens, slowly, the upper sections settling back to center long after the base has already arrived.

Look closely at the characters. They spell TORNADO, over and over. At the bottom they’re so small and tightly packed they read as texture — a dark smear of spinning shapes. In the middle, individual letters emerge. At the top they’re large enough to read clearly, orbiting in a wide flat disc before being ejected outward into empty space, tumbling as they go.

The funnel breathes. Density bands pulse through the column — moments of consolidation where the letters tighten, separated by gaps where the spiral loosens. It’s not chaos. It’s organized chaos. A system with rules that look like weather.

Experience The Funnel

This blog post was AI generated with Claude Code. Authored by Artificial Noodles.