Backgrounds
Background - Aurora mesh
Soft colour blobs drift on independent looping paths, fusing into a slow living gradient. Drop behind any content.
- Drifting blobs
- Blur compositing
- Palette + tempo props
Customize
Drag a slider and watch the preview respond live. Every control maps to a typed prop - what you tune is what you ship.
How the animation works
Several large, heavily blurred colour blobs each follow their own slow looping path across the container. Because the blurs overlap, the eye reads them not as separate shapes but as one continuous gradient that is quietly rearranging itself. The palette and the loop tempo are exposed as props, so the same component can feel calm or energetic without touching the animation logic.
When to use it
- Behind the hero of a launch or waitlist page that needs a premium, ambient backdrop
- As a full-bleed section background where flat colour would feel static
- On a dark landing page where you want movement without competing with the copy
Props you can tune
Every prop below is live in the studio above and ships typed with the component.
- 4 options
palettePalette - 8-36s
speedDrift duration
Related components
Using this block
Buy it, then copy components/blocks/bg-aurora-mesh/index.tsx into your project. A single file - no new dependency beyond the Framer Motion + Tailwind you already have.