Note 02 · Cat's Cradle

Cat's Cradle

Glowing strings that stretch between your fingers, running on a cloth simulation and selective bloom.

The stack

three.js with custom GLSL, a verlet integrator for the strings, and an EffectComposer chain with UnrealBloomPass for the glow.

How the strings work

The strings are not splines. Each one is a chain of points run through verlet integration: every frame the points drift by their own momentum, then a few relaxation passes pull neighbours back toward a rest length, which makes the line behave like something elastic instead of something rigid.

Both ends pin to anchor points on your hands, ten per hand, the five fingertips plus the five mid knuckles. Raise two hands and the strings connect matching anchors across the gap. Drop to one hand and they loop through the tips and through the joints instead, so a single hand still weaves a shape worth looking at.

The glow

Bloom here is selective, not a blur smeared over the whole picture. Two composers run in sequence. One renders only the bright string geometry and blooms that, the other blends the result over a dimmed camera backdrop. Behind the web, the feed is split into per-finger panels, each able to carry a different filter, which turns the background into a small control surface rather than a plain mirror.

Making it fast

Bloom is the expensive step, so its composer renders at 0.66 of the device pixel ratio. Softer glow is hard to notice; a smaller buffer is easy for the GPU to feel. A toggle drops the strings entirely when you want only the filtered panels showing.

Next: Digital Garden →