# Animated backgrounds in CSS and shaders > Animated backgrounds for HTML video: aurora and ink shaders, film grain, halftone, dot grids, marquees and light pools that never sit flat. Canonical: https://vawe.dev/video-components/group/grounds Last updated: 2026-11-03 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. 13 components, 13 with a clip. ## Pick by how still the frame should feel | Component | Use it when | | --- | --- | | [Light pool](https://vawe.dev/video-components/light-pool) | A matte held frame needs the stillest ground, one soft pool in plain CSS. | | [Grain field](https://vawe.dev/video-components/grain-field) | A printed or filmic frame should breathe. | | [Aurora drift](https://vawe.dev/video-components/aurora-drift) | Soft bands of light hang from the top and the copy sits low. | | [Ink warp](https://vawe.dev/video-components/ink-warp) | Short, large copy sits on a marbled ink ground. | | [Dot grid wave](https://vawe.dev/video-components/dot-grid-wave) | A clean product or data frame needs a quiet travelling wave. | | [Halftone field](https://vawe.dev/video-components/halftone-field) | A physical or retro frame gets a 45 degree dot screen. | | [Photo particles](https://vawe.dev/video-components/photo-particles) | A real photo turns into 120,000 lit points. | | [Simple marquee](https://vawe.dev/video-components/simple-marquee) | Rows of tiles should slide for a whole beat. | ## All 13 components in grounds - [Aurora drift](https://vawe.dev/video-components/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 - [Grain field](https://vawe.dev/video-components/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 - [Halftone field](https://vawe.dev/video-components/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 - [Ink warp](https://vawe.dev/video-components/ink-warp): a rich liquid ground for short large copy: marbled ink flows by domain warp in one shader, thinner behind the type - [Dot grid wave](https://vawe.dev/video-components/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 - [Light pool](https://vawe.dev/video-components/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 - [Marquee along path](https://vawe.dev/video-components/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 - [Simple marquee](https://vawe.dev/video-components/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 - [Circling elements](https://vawe.dev/video-components/circling-elements): eight upright tiles orbit one point on a 120 px radius, one linear turn in 10 s - [CSS box](https://vawe.dev/video-components/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 - [Pixelate SVG filter](https://vawe.dev/video-components/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 - [Photo particles](https://vawe.dev/video-components/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 - [Media between text](https://vawe.dev/video-components/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. ## More video components - [Reveal a title](https://vawe.dev/video-components/group/reveal-a-title) - [Change between shots](https://vawe.dev/video-components/group/change-between-shots) - [Point the eye](https://vawe.dev/video-components/group/point-the-eye) - [Move the camera](https://vawe.dev/video-components/group/move-the-camera) - [End a film](https://vawe.dev/video-components/group/end-a-film) - [Product moments](https://vawe.dev/video-components/group/product-moments) ## Related - [Backgrounds and images](https://vawe.dev/docs/backgrounds-and-images) - [Turn an image into particles](https://vawe.dev/docs/image-to-particles) - [three.js and canvas in a film](https://vawe.dev/docs/three-and-canvas) - [All 130 video components](https://vawe.dev/video-components)