A soft gooey blob that trails the cursor with lag, merging three circles through an SVG goo filter.
npx shadcn@latest add https://hyperblur.dev/r/blob-cursor.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/blob-cursor.tsx.
import { BlobCursor } from "@/components/hyperblur/blob-cursor"
<div className="relative"><BlobCursor /><h1>...</h1></div>| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | "#2f7bff" | Fill color of the blob. |
| size | number | 48 | Diameter of the lead circle in pixels. |
| lag | number | 0.15 | Follow factor per frame from 0 to 1. Lower trails more, 1 sticks to the pointer. |
| blend | "screen" | "normal" | "difference" | "screen" | Blend mode against what is behind the blob. |
| global | boolean | false | Follow the pointer across the whole window using fixed positioning. |