Backgrounds
Caustics
ProLight through moving water. The filaments are the zero crossings of a noise field folded back on itself, not its peaks — which is why they stay thin and hard-edged at any brightness instead of blooming into blobs. The lattice is periodic, so the flow offset wraps and the motion never coarsens over a long session.
Install
Props
What It Demonstrates
- Loop
- An animation that repeats, a set number of times or infinitely.
- Float
- A gentle, continuous up-and-down drift that makes a static element feel alive and weightless.
- Idle animation
- Subtle motion that plays while an element is just sitting there, waiting to be interacted with.
- Hover effect
- Visual change when the cursor moves over an element.
- Hardware acceleration
- Animating transform and opacity lets the GPU keep motion smooth.
- Reduced motion
- Respecting the user's prefers-reduced-motion setting by toning down or removing motion.
Related Components
Constellation
A constellation network. Drifting particles link by proximity, chase and flee the cursor, and glow.
Quicksilver
Molten chrome. Every other shader background emits light. This one reflects a studio that does not exist, built out of the surface normal: sharp softbox edges, a conductor's Fresnel wash, thin-film iridescence, and a wake that keeps moving where you dragged.
Mycelium
A slime mould foraging in the dark. Every other field here is a differential equation on a grid. This one is a population: up to a million agents, each carrying a position and a heading, sampling the trail ahead of itself, turning toward whatever smells strongest and laying down more of it as it goes. The veins, the junctions and the slow reorganisation are nowhere in the code.
MoirePro
Two lattices stacked at a fraction of a degree apart, beating against each other into live interference fringes. Every layer is band-limited in the shader, so what you see is the interference and not the sampling.
Voronoi ShatterPro
Lit cells that fracture apart under the pointer and knit back together behind it. The seam is drawn from the gap between the two nearest seeds rather than the distance to the nearest one, so it holds an even width right through the vertices where three cells meet — and the shatter displaces the space rather than the seeds, so no cell ever swaps neighbours mid-fracture.
Waves
A woven field of flowing waves rendered on a WebGL line shader.