Backgrounds
Background - Metaballs
Soft circles drift through an SVG gooey filter, fusing and splitting like a lava lamp.
- SVG gooey filter
- Drifting blobs
- Gradient fill
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
Soft gradient-filled circles drift around the container, and the whole group is passed through an SVG gooey filter that first blurs the shapes and then snaps their soft edges back to hard ones with an alpha threshold. As circles overlap, the threshold makes them appear to fuse into a single organic mass and split apart again, like a lava lamp.
When to use it
- Behind a playful or creative product hero that wants an organic, liquid feel
- On a landing page where a geometric background would feel too rigid
- As an eye-catching backdrop for a launch announcement or fun brand site
Props you can tune
Every prop below is live in the studio above and ships typed with the component.
- 3 options
tintTint - 6-28s
speedDrift duration
Related components
Using this block
Buy it, then copy components/blocks/bg-metaballs/index.tsx into your project. A single file - no new dependency beyond the Framer Motion + Tailwind you already have.