Browse components
Meta Balls
Glossy liquid blobs that drift, merge and split, with one that follows your cursor. Raw WebGL.
Meta Balls
Installation
npx shadcn@latest add @glint-ui/meta-ballsFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/meta-balls.json
Usage
import { MetaBalls } from "@/components/ui/meta-balls";
<div className="relative h-96">
<MetaBalls count={7} />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| count | number | 7 | Wandering balls (plus the cursor ball). |
| color | string | "#c6ff3d" | Color at the top. |
| color2 | string | "#0ea5e9" | Color at the bottom. |
| speed | number | 1 | Motion speed multiplier. |
| size | number | 1 | Ball size multiplier. |
| followCursor | boolean | true | One ball tracks the cursor. |
| className | string | — | Extra classes for the root element. |