Tubes

How it works

• Each tube is a chain of points. The head moves a fraction of the way to the cursor every frame, and every other point moves toward the one ahead of it. That single rule gives the trailing, rope-like motion.
• The mesh is rebuilt every frame from a Catmull-Rom curve through those points, with a radius that tapers to zero at both ends.
• A small wobble per tube keeps the 24 tubes from stacking on one line.
• The colour isn't in the tubes. They're pure metal; the colour comes from four coloured lights in the corners reflecting off them. Bloom with a threshold of zero turns the shine into glow.
• When the cursor leaves, the target drifts on a Lissajous loop (620 × 330 px, converted to world units).

What broke, and why

• Way too much glow. The original uses WebGPU bloom at strength 3. WebGL's bloom is much hotter at the same numbers, so matching the look meant tuning by eye to about 0.85.
• Tubes vanishing mid-move. Three.js culls objects using a bounding sphere computed once. The tubes change shape every frame, so the stale sphere hid them; turning culling off for the tubes fixed it.
• Everything disappearing for good. When points bunch up, the curve's frames become undefined and write NaN into the mesh. Reusing the last good frame keeps it stable.
• A hidden hero breaks the maths. A 0 × 0 canvas gives an aspect ratio of NaN, which poisons every point. Resizing now skips empty sizes.
• Spread is a taste call. Four times the wobble left visible gaps in the bundle; one times keeps it reading as a single trail.

Most of the work in a "simple" effect is guarding the edge cases.

Where it went next

A much smaller version now lives on my home page: six thin tubes that orbit the black hole and follow your cursor. Bloom over a whole page section was too heavy, so there each tube gets a soft additive halo instead, and the tubes are drawn behind the lens so they bend as they fall in.