The Loop Keeps Turning | Blog | Artificial Noodles

Inspired by This too shall pass on Wikipedia

Built with Three.js · ShaderMaterial · InstancedMesh · CanvasTexture · EffectComposer (UnrealBloomPass)

Techniques Canvas 2D Texture Atlas · Bloom · Chromatic Aberration · Film Grain

Direction Map the emotional duality of a Persian adage onto a Bernoulli lemniscate — words of joy and dread orbiting a 3D infinity loop that transforms them at the crossover

Result Sixty words flow endlessly around a figure-eight, vibrating with intensity at the extremes and dissolving into stillness at the center before emerging as their opposite

The Story

“This too shall pass” is a Persian adage about the temporary nature of all human experience. The earliest known version appears in the works of Persian Sufi poets, where it was often framed as a ring inscription — words to comfort you in times of despair and humble you in times of triumph. The legend says a king asked his advisors for a sentence that would be true in all times and all circumstances. They gave him a ring engraved with four words.

The adage works in both directions, and that’s the point. It doesn’t just mean “your suffering will end.” It also means “your joy will end.” The same sentence consoles and warns. The comfort and the threat are the same words, and which one you hear depends entirely on where you are when you read them.

The lemniscate of Bernoulli — the figure-eight, the infinity symbol — was described by Jakob Bernoulli in 1694. It’s a curve that crosses itself at the origin, forming two loops. A point traveling along it passes through the center twice per revolution, and each time it crosses, it switches from one loop to the other. It never stops. It never arrives.

The Take

Typography as emotional orbit.

Sixty words travel a three-dimensional lemniscate. On the right wing: JOY, TRIUMPH, ELATION, SUCCESS, GLOW — burning bright, vibrating with intensity. On the left wing: DREAD, FAILURE, LOSS, SORROW, STORM — dimmer, ominous, but present. At the center crossover, both dissolve into stillness — PEACE, BEING, VOID — before emerging as their opposite on the other side.

The same particle that carried JOY will carry DREAD half a revolution later. The word doesn’t change because something happened to it. It changes because it moved. Position determines identity. The loop keeps turning and the transformation is automatic, inevitable, continuous.

The words vibrate at the extremes — agitated, intense, buzzing perpendicular to the path like a wire under tension. At the center they calm, slow, and pass through each other quietly. Then they accelerate into the other wing, and the intensity returns, but wearing a different word.

The Tech

The Transience Loop is a Three.js scene rendering 60 billboard word quads as an InstancedMesh with a custom ShaderMaterial. The words are pre-rendered to a canvas atlas and the entire animation runs in a single draw call.

The core mechanics:

Canvas word atlas: Fifteen words (5 HIGH, 5 LOW, 5 MELLOW) rendered white-on-black in Bebas Neue on a 5×3 grid canvas (256×96px cells). The atlas is drawn once immediately with the fallback font, then redrawn when document.fonts.ready resolves with the correct typeface.
Lemniscate of Bernoulli: The parametric curve x = a·cos(t)/(1+sin²t), y = a·sin(t)·cos(t)/(1+sin²t), z = b·sin(2t) traces the figure-eight in 3D. The z-component lifts one loop above the other, giving the crossover depth.
Position-based word selection: Each particle carries three word indices (one HIGH, one LOW, one MELLOW). As it orbits, smoothstep zones determine which word to display based on x-position. Right wing shows HIGH, left wing shows LOW, center briefly shows MELLOW. Words transform by position, not by time.
Perpendicular jitter: Rather than random XYZ displacement, the tangent direction is computed numerically from lemPos(t±ε), rotated 90°, and jitter is applied along the perpendicular. Words vibrate off the track at the wings while preserving the path shape. Amplitude follows mellow² — barely noticeable near center, intense at extremes.
Billboard vertex shader: Camera-right and camera-up vectors are extracted from viewMatrix * modelMatrix. Instance world position comes from instanceMatrix (not modelMatrix, which is shared across all instances). The quad is scaled wider than tall (2.4×0.9) to match text aspect ratio.
Path guide: A visible line traces the full lemniscate, making the figure-eight shape legible even when words are sparse. Two overlapping lines at different opacities create subtle depth.

Post-processing: UnrealBloomPass for atmospheric glow on the bright wing, plus a custom ShaderPass for film grain, chromatic aberration, and vignette.

The Experience

You open the page. Against a near-black background, a figure-eight traces itself in faint lines. Words orbit the path — small, numerous, flowing continuously. On the right loop, they burn bright: JOY, TRIUMPH, GLOW, SUCCESS, ELATION. They vibrate, buzzing off the track like charged particles, intense and restless.

Follow the path to the center. The words slow. The vibration dies. For a brief moment at the crossover point, the words are quiet — PEACE, STILL, BEING — barely visible, almost transparent. Then they accelerate into the left loop and the intensity returns, but the words have changed: DREAD, FAILURE, STORM, LOSS, SORROW. Dimmer than their bright counterparts, but persistent. Present.

Move your mouse. The camera orbits the loop, revealing its three-dimensionality — one loop lifts above the other at the crossing. The bloom on the right wing catches the light differently as you rotate. The path continues. The words keep flowing. JOY becomes DREAD becomes JOY again, endlessly.

This too shall pass. And then it comes back. And passes again.

Experience The Transience Loop

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