← DOCS
effects

BlobCursor

Fluid blob cursor that follows mouse with organic movement and distortion.

npx chaos add blob-cursor

PREVIEW

USAGE

case 'glass-button': return ; case 'neon-glow': return ; case 'floating-button': return ;
import { BlobCursor } from '@oalacea/chaosui/effects/blob-cursor';

<BlobCursor />
<BlobCursor size={120} color="rgba(255, 100, 150, 0.6)" />
<BlobCursor blobAmount={10} speed={0.05} damping={0.95} />

PROPS

PropTypeDefault
sizeBlob size in pixels
number80
colorBlob color (any valid CSS color)
string"rgba(100, 200, 255, 0.5)"
blobAmountHow distorted the blob shape is (0 = circle, higher = more distorted)
number5
speedFollow speed (0.01-1, lower = smoother/slower)
number0.1
dampingSmoothness/damping of movement (0.1-0.99, higher = more momentum)
number0.9
zIndexZ-index of the blob cursor
number9999
classNameAdditional className for the blob container
string""
childrenChild elements to render underneath the cursor
ReactNode-