# 12 Animated Background Components for React & Tailwind

> Animated page backgrounds: aurora ribbons, mesh gradient blobs, canvas particle constellations and flow fields, spotlight dot grids, perspective grid lines, shooting stars, light beams and wave lines. Colours follow your theme.

3 of 12 free (the rest with PixelPapa Pro), built with Tailwind CSS and Motion, installable with the shadcn CLI.

- [Animated Grid Lines](https://pixelpapa.com/components/backgrounds/bg-animated-grid-lines.md) (Pro): A perspective floor of grid lines that scrolls toward the viewer forever, with light pulses racing down a few of the lines.
- [Aurora Background](https://pixelpapa.com/components/backgrounds/aurora-background.md): Slow drifting colour ribbons behind your content, built from blurred gradients with no canvas.
- [Beams Light Rays](https://pixelpapa.com/components/backgrounds/bg-beams-light-rays.md) (Pro): Soft light rays fan out from above and sway a few degrees while breathing in brightness, with dust motes drifting through them.
- [Dot Grid Spotlight](https://pixelpapa.com/components/backgrounds/bg-dot-grid-spotlight.md) (Pro): A quiet dot grid where a soft light trails the cursor and swells the dots it passes over; it wanders on its own when idle.
- [Flow Field](https://pixelpapa.com/components/backgrounds/bg-flow-field.md) (Pro): Hundreds of canvas particles ride a slowly shifting vector field and leave fading silk trails in your theme colours.
- [Gradient Mesh Blobs](https://pixelpapa.com/components/backgrounds/bg-gradient-mesh-blobs.md): Five saturated blobs wander on separate looping paths and melt into a mesh gradient, while one extra blob follows the cursor on a spring.
- [Hex Tiles Hover](https://pixelpapa.com/components/backgrounds/bg-hex-tiles-hover.md) (Pro): A canvas honeycomb (or square grid) where the tile under the cursor lights up, spills into its neighbours and slowly cools, with stray tiles sparking while idle.
- [Noise Grain Vignette](https://pixelpapa.com/components/backgrounds/bg-noise-grain-vignette.md): Flickering film grain over a warm centre glow with darkened corners, like a projected still; grain jumps in steps, never tweens.
- [Particles Constellation](https://pixelpapa.com/components/backgrounds/bg-particles-constellation.md) (Pro): Canvas particles drift slowly and draw links to their neighbours; the cursor becomes a bright node that pulls nearby stars into the web.
- [Ripple Rings](https://pixelpapa.com/components/backgrounds/bg-ripple-rings.md) (Pro): Concentric rings carry a pulse of brightness outward from the centre like sonar, and every click drops a new ripple where you pressed.
- [Shooting Stars](https://pixelpapa.com/components/backgrounds/bg-shooting-stars.md) (Pro): Three layers of twinkling stars with meteors that streak diagonally across at staggered intervals, each with a bright head and a fading tail.
- [Wave Lines](https://pixelpapa.com/components/backgrounds/bg-wave-lines.md) (Pro): A bundle of thin SVG sine lines, each with its own wavelength and speed, sliding past one another so the ribbon keeps braiding and unbraiding.