Blob Cursor
Pro
Gooey blobs that chase the pointer at different speeds, stretch as they move and swell over targets.
Pointer play
Make it feel alive
The blobs stretch as they move and swell over the buttons.
Customize
3
#ff784f
56px
0.5
Installation
Blob Cursor is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy blob-cursor.tsx into components/ui and run npm install motion.
Usage
import { BlobCursor } from "@/components/ui/blob-cursor";
<BlobCursor count={3} className="h-96 rounded-3xl">
<button type="button" data-blob-target>Get started</button>
</BlobCursor>Props
8 properties| Property | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Content of the area, drawn above the blobs. |
| count | number | 3 | Number of blobs in the chain. |
| color | string | "#ff784f" | Color of the blobs. |
| size | number | 56 | Diameter of the lead blob in pixels. Followers get smaller. |
| lag | number | 0.5 | How far the followers trail behind, from 0 (tight) to 1 (loose). |
| targetSelector | string | "[data-blob-target]" | Elements that make the lead blob grow and lean toward them. |
| hideCursor | boolean | false | Hide the native pointer inside the area. |
| className | string | — | Extra classes for the area, such as its size. |
Dependencies: motion