Browse components
Blob Cursor
A trail of gooey blobs that stretch, merge and split as they chase the pointer.
Installation
npx shadcn@latest add @glint-ui/blob-cursorFirst 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/blob-cursor.json
Usage
import { BlobCursor } from "@/components/ui/blob-cursor";
<BlobCursor className="h-96">
<h1>Hello</h1>
</BlobCursor>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Content under the blobs. |
| color | string | "#c6ff3d" | Blob color. |
| count | number | 4 | Number of trailing blobs. |
| size | number | 96 | Diameter of the lead blob in px. |
| lag | number | 0.5 | 0 = blobs move together, higher = longer lazy tail. |
| goo | number | 14 | Goo filter blur; higher melts blobs together from further away. |
| blendMode | "difference" | "normal" | "screen" | "exclusion" | "difference" | How the blobs blend with content underneath. |
| hideCursor | boolean | true | Hide the native cursor inside the container. |
| className | string | — | Extra classes for the root element. |