Lab/18

Metaballs

Each blob adds to a smooth field, and the canvas fills wherever the sum crosses a threshold. One blob follows the pointer.

Canvas
Generative

Move to pull, click to add

lab/metaballs

Installation

Add Metaballs to your project with the shadcn CLI. The files land in components/lab, ready to edit.

$ pnpm dlx shadcn@latest add @soultel/lab-metaballs

Or by URL: https://asafefe.dev/r/lab-metaballs.json

Brings along

utils
@soultel/lab-canvas

Usage

example.tsx10 lines

import { Metaballs } from "@/components/lab/metaballs"

export function Hero() {
  return (
    <section className="relative h-[420px]">
      <Metaballs className="absolute inset-0" />
      <h1 className="relative">Hello</h1>
    </section>
  )
}

Props

Prop	Type	Default	Description
mode	"smooth" \| "pixel"	"smooth"	Anti-aliased edges or chunky pixels.
color	string	"var(--primary)"	Blob color.
background	string	"var(--background)"	Solid color behind the blobs.
count	number	7	Blobs on start.
maxBlobs	number	12	Cap including clicked-in blobs.
scale	number	1	Blob size relative to the shorter side.
followPointer / addOnClick	boolean	true	Pointer follow and click to add.
ref	Ref<MetaballsHandle>	-	reset() scatters a fresh set.