Backgrounds
Dither
ProA live field crushed to one bit through an ordered threshold matrix. The only background here that looks better the cheaper it gets, and the only one that runs the same on a decade-old laptop as on a workstation.
Install
Props
What It Demonstrates
- Loop
- An animation that repeats, a set number of times or infinitely.
- Stepped animation
- An animation that is divided into discrete steps, like a countdown timer.
- Idle animation
- Subtle motion that plays while an element is just sitting there, waiting to be interacted with.
- Compositing
- Letting the GPU move or fade an element on its own layer without redoing layout or paint.
- Hardware acceleration
- Animating transform and opacity lets the GPU keep motion smooth.
Related Components
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.
Rainglass
Rain on a window with a city somewhere behind it. There is no scene being blurred. The backdrop is built out of focus to begin with, so the drops have something to bend without a render target or a blur pass anywhere in the frame. Each drop is a pure function of time inside its own grid cell, which is why a thousand of them cost the same as one and a resize cannot lose the rain. They descend the way water actually does: holding by surface tension, breaking loose, running fast, stopping again. The trail exists only above the drop that made it.
Waves
A woven field of flowing waves rendered on a WebGL line shader.
Grainient
An animated grainy mesh-gradient rendered on a WebGL2 shader.
Cathode
A cathode-ray tube showing nothing worth watching: a beam that turns around at each edge, phosphor that holds after it has passed, and a hum bar rolling up the glass.