Skip to content

Components / Backgrounds

Backgrounds

23 components · 13 at 0 B

Ambient fields, grids, dots, grain, rings and beams behind content.

Animated Beam

Backgrounds

Sends packets of light along curves between nodes.

every browseralways

Ambient gradient field: three soft colour fields drifting at three coprime speeds, a slow hue rotation so the colours themselves move, and a film-grain layer stepped at 12 fps.

every browseralways

Border Beam

Backgrounds

A beam of light travels around the edge of a card.

newly · Chrome 120 · Firefox 128 · Safari 16.4always

Dot Pattern

Backgrounds

A field of dots behind content, faded toward the edges, with an optional slow pulse.

every browseralways

Dotted Map

Backgrounds

A world map drawn as a grid of dots, with markers that pulse.

every browseralways

Globe

Backgrounds

A turning globe of dots that you can drag.

every browseralwayspointer

Grid Pattern

Backgrounds

A hairline grid behind content, faded toward the edges, optionally drifting one cell at a time.

every browseralways

Meteors

Backgrounds

Streaks falling diagonally across a twinkling sky.

every browseralways

Noise

Backgrounds

Film grain over a gradient or image, blended and flickering at 12 fps.

every browseralways

Orb

Backgrounds

A sphere of light that breathes and slowly turns its colour.

newly · Chrome 85 · Firefox 128 · Safari 16.4always

Orbiting Circles

Backgrounds

The children orbit the centre of their parent and stay upright.

every browseralways

Particles

Backgrounds

A field of drifting dots that part around the cursor, on a canvas that draws only while on screen in a visible tab.

every browseralwayspointer

Progressive Blur

Backgrounds

An edge that blurs what scrolls under it, more the closer it gets: a few bands, each with a backdrop blur twice the last and a mask that keeps it to its own slice, so the blur ramps instead of stepping.

every browseralways

Retro Grid

Backgrounds

A perspective grid floor sliding toward the viewer.

every browseralways

Ripple

Backgrounds

Rings expand from a point and fade, one after another, like a pulse.

every browseralways

Draws slow noise waves on the GPU, ordered-dithered into pixel cells of one colour on the page's ground, for the look of a 1-bit screen.

every browseralwayspointer

Moves thousands of particles along an invisible current, leaving fading trails.

every browseralwayspointer

Draws smoke that follows the cursor.

every browserpointeralways

Hyperspeed.

hold to jump

Draws a jump to light speed: streaks of light rush out of a vanishing point, longer and brighter toward the edge, in one colour with a hot head in a second tone.

every browseralwayspointerclick

Draws a pool of liquid metal.

every browseralwayspointer

Draws glowing ribbons of light drifting through each other: four sine fields interfere on the GPU, the sum folds into soft bands, and each band glows in a colour sliding between two tones with a hot core at its peak.

every browseralwayspointer

Silk

Pro

Draws a sheet of fabric drifting in slow folds, lit from one side: a warped height field on the GPU, normals from finite differences, a diffuse body in the colour and a narrow sheen in a second tone.

every browseralwayspointer

Draws a water surface in halftone.

every browserpointeralways