Animated backgrounds in CSS and shaders.
A flat colour behind a line of type reads as unfinished. This group holds the ground layers: soft light, grain, dots, tiles and photo particles that move under the copy without competing with it.
Several run in one fragment shader (aurora-drift, ink-warp), one is plain CSS with no shader (light-pool), and one is a plain SVG dot grid (dot-grid-wave). Each one moves from the seek time, not from a clock.
Pick by how still the frame should feel.
| Component | Use it when |
|---|---|
| Light pool | A matte held frame needs the stillest ground, one soft pool in plain CSS. |
| Grain field | A printed or filmic frame should breathe. |
| Aurora drift | Soft bands of light hang from the top and the copy sits low. |
| Ink warp | Short, large copy sits on a marbled ink ground. |
| Dot grid wave | A clean product or data frame needs a quiet travelling wave. |
| Halftone field | A physical or retro frame gets a 45 degree dot screen. |
| Photo particles | A real photo turns into 120,000 lit points. |
| Simple marquee | Rows of tiles should slide for a whole beat. |
All 13 components in grounds
three soft bands of light hang from the top of the frame and fold slowly in one shader while the copy sits low; the light thins out above the type
Aurora drift
three soft bands of light hang from the top of the frame and fold slowly in one shader while the copy sits low; the light thins out above the type
a quiet printed or filmic frame breathes: a slow tonal ground and film grain that turns over 24 times a second, seeded from the seek time, never from Math.random
Grain field
a quiet printed or filmic frame breathes: a slow tonal ground and film grain that turns over 24 times a second, seeded from the seek time, never from Math.random
a physical or retro frame gets a 45 degree dot screen whose dot size waves across the frame while every dot stays in its cell
Halftone field
a physical or retro frame gets a 45 degree dot screen whose dot size waves across the frame while every dot stays in its cell
a rich liquid ground for short large copy: marbled ink flows by domain warp in one shader, thinner behind the type
Ink warp
a rich liquid ground for short large copy: marbled ink flows by domain warp in one shader, thinner behind the type
a clean product or data frame gets a plain SVG dot grid with one travelling wave of scale and brightness, weaker behind the copy
Dot grid wave
a clean product or data frame gets a plain SVG dot grid with one travelling wave of scale and brightness, weaker behind the copy
a matte held frame gets one soft pool of light that wanders on a seeded path, plain CSS with no shader; the stillest ground of the group
Light pool
a matte held frame gets one soft pool of light that wanders on a seeded path, plain CSS with no shader; the stillest ground of the group
tiles ride one SVG path forever at an even gap, turned with the curve, rolling z-index, 8 percent of the path per second; one element along the path is an option
Marquee along path
tiles ride one SVG path forever at an even gap, turned with the curve, rolling z-index, 8 percent of the path per second; one element along the path is an option
three rows of tiles slide for a whole beat, left, right, left, each row four copies that wrap by one set width at 8 percent per second
Simple marquee
three rows of tiles slide for a whole beat, left, right, left, each row four copies that wrap by one set width at 8 percent per second
eight upright tiles orbit one point on a 120 px radius, one linear turn in 10 s
Circling elements
eight upright tiles orbit one point on a 120 px radius, one linear turn in 10 s
a 200 px cube of bold type turns to another face on a stiff overdamped spring (stiffness 100, damping 30, no overshoot) under perspective 600
CSS box
a 200 px cube of bold type turns to another face on a stiff overdamped spring (stiffness 100, damping 30, no overshoot) under perspective 600
a photo breaks into square blocks that grow and shrink with one number, size = x / 30 through a convolve, tile and dilate SVG filter
Pixelate SVG filter
a photo breaks into square blocks that grow and shrink with one number, size = x / 30 through a convolve, tile and dilate SVG filter
a real photo (filaments, veins, scales) is sampled into 120 000 lit, coloured points that gather from a seeded scatter over 1.5 s and then breathe, filmed through the lens with the film-halation look
Photo particles
a real photo (filaments, veins, scales) is sampled into 120 000 lit, coloured points that gather from a seeded scatter over 1.5 s and then breathe, filmed through the lens with the film-halation look
a picture grows from zero width inside a line of type on a 0.4 s critical spring and closes on a 0.3 s tween, the words part and wrap
Media between text
a picture grows from zero width inside a line of type on a 0.4 s critical spring and closes on a 0.3 s tween, the words part and wrap
Rules that come with this group
grain-field turns over 24 times a second and is seeded from the seek time, never from Math.random.
aurora-drift and ink-warp thin out the light behind the type.
marquee-along-path moves 8 percent of the path per second, and circling-elements makes one linear turn in 10 s.