Backgrounds
Crate Vinyl Grooves
HiDPI Canvas 2D concentric vinyl grooves that part around the pointer, ripple outward on press, and drift when idle.
canvasmedium complexitymoderate motionpointermobile-readyaccessible
Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited
1
When to use it
Hero surfaces, audio player backdrops, and interactive ambient panels.
When not to
Small text-heavy buttons where texture reduces legibility.
Working with an AI agent
Every component ships agent-ready metadata. An example instruction for this one:
Edit --b/--i/--c/--l tokens in :root and [data-theme="light"].
Safe to edit
- theme CSS tokens (--b/--i/--c/--l), data arrays & timings
Keep intact
- IIFE + crNN- prefix, reduced-motion, visibilitychange, theme/demo-v1
Known limitations
- Demo state resets on remount
More Backgrounds components
- Aurora BorealisThree blurred, screen-blended gradient ribbons drift and skew over a near-black background, simulating northern lights in blush, cream, and rose.
- Mesh GradientFour blurred radial blobs in cream, gold, and tan drift and scale on a dark background with screen blend mode, creating a soft animated mesh gradient.
- Particle Constellation18–60 lilac/tan/mauve particles drift and bounce; nearby pairs connect with fading lines, forming a shifting constellation network on a dark background.
- Digital RainCyan katakana and hex glyphs fall in columns down a dark canvas, leaving fading trails; occasional bright white leading chars evoke the Matrix effect.
- Layered WavesThree SVG wave layers in iris, cyan, and dark slide horizontally at different speeds over a deep blue-gradient sky, creating a parallax depth effect.
- Starfield WarpStars streak outward from center as cyan/purple/blue light trails simulating hyperspace warp. Auto-spawning keeps density constant on any viewport.