Shadcn.io is not affiliated with official shadcn/ui
React Metaballs Background
Viscous liquid metaball background for React and Next.js — isosurface blobs merge and split across the canvas with customisable palette, viscosity threshold, and speed.
React Metaballs Background preview
A lava-lamp of glowing pink and violet blobs that ooze toward each other, fuse into peanut shapes, then split apart like ferrofluid. Built on a classic isosurface field renderer — each pixel of a tiny 200×112 buffer sums a 1/r² contribution from every blob, and anything above the viscosity threshold becomes a fused colored region with a bright edge band. Zero dependencies, runs at 60fps on a mid-range laptop, and every knob is a prop so callers can tune blob count, palette, threshold, and background. Perfect for premium SaaS launch pages, AI product heroes, creative-tool marketing, and any surface that needs motion that reads playful and expensive at once.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this background for you — no copy-paste, no CLI:
use shadcnio to install the metaballs background into my projectRelated Components
Bokeh
Soft out-of-focus light orbs
Bubble
Floating translucent bubbles
Fireflies
Drifting points of warm light
Mesh Gradient
Stripe/Linear-style blurred gradient blobs
Gradient
Animated multi-stop gradient wash
Aurora
Emerald northern-lights sheets
FAQ
Was this page helpful?
Sign in to leave feedback.