Glass Ribbons

Written for the variant you picked above: Violet

Write a WebGL1 full-screen fragment shader background (no libraries): wide vertical ribbons of glass (7 across, fewer on phones) swaying slowly in front of moving light. Behind the glass: three slow beams (Gaussian lines following a sum of sines across x), three wandering soft pools and a lamp that follows the pointer. Each ribbon's centre line bends with height and time (two sines in y, drifting), so the whole set sways like hanging glass. Within a ribbon let s run from −0.5 to 0.5: it is a cylinder lens, so the light is looked up at a mirrored, squeezed slice — x = centre − s·width·1.9 — and brightened toward the edges (|2s|^1.6), so a beam behind breaks into bright lines along both shoulders of each ribbon; the face shows a soft, dim view of what's directly behind. Shade with cos(πs), add a faint shoulder highlight, push the hottest values toward white, and darken a thin gap between ribbons. Render at 0.85× (0.6× and ~30fps on touch), pause offscreen and in hidden tabs, draw one still frame under reduced motion, and fall back to CSS gradients without WebGL. Children sit above the canvas. Selected variant — Violet: Palette { glow #c25cff, deep #3a1a8a, ground #07040e }: neon violet light through dark violet glass.

Notes

Interaction

The pointer carries a lamp behind the ribbons; its light catches on their shoulders.

Motion

Continuous slow drift in the shader; the pointer effect eases in at 0.06 and follows with a 0.12 lerp.

Accessibility

Decorative and aria-hidden. Reduced motion renders one still frame. Use a scrim for text; highlights can be bright.

Responsive

Fills its container; the density drops to about half on screens under 640px; DPR capped at 2.

On touch

No pointer effect on touch; the light keeps moving on its own.