Toggle Sidebar B
AppearanceLight & dark mode D

Blob Cursor

Organic blob cursor that smoothly follows the pointer with inertia and elastic morphing.

Default

Move the pointer over the stage. The blobs follow inside the component's own box, which fills its parent. Every prop is wired to the controls underneath. SVG filters are not fully supported on Safari, so performance may vary there.

Dark previewReplay previewOpen in new tab

Customize

Fill Color
Inner Color
Shadow Color
Blob Type
Trail Count3
Lead Blob Size60
Lead Inner Dot Size20
Lead Blob Opacity0.6
Shadow Blur5
Shadow Offset X10
Shadow Offset Y10
Fast Duration (Lead)0.1
Slow Duration (Trail)0.5
Z-Index100

API Reference

BlobCursor

PropTypeDefaultDescription
blobType'circle' | 'square''circle'Shape of the blobs.
fillColorstring'#5227FF'Background color of each blob.
trailCountnumber3How many trailing blobs.
sizesnumber[][60, 125, 75]Sizes (px) of each blob. Length must be at least trailCount.
innerSizesnumber[][20, 35, 25]Sizes (px) of inner dots. Length must be at least trailCount.
innerColorstring'rgba(255,255,255,0.8)'Background color of the inner dot.
opacitiesnumber[][0.6, 0.6, 0.6]Opacity of each blob. Length at least trailCount.
shadowColorstring'rgba(0,0,0,0.75)'Box-shadow color.
shadowBlurnumber5Box-shadow blur radius (px).
shadowOffsetXnumber10Box-shadow X offset (px).
shadowOffsetYnumber10Box-shadow Y offset (px).
filterIdstring'blob'Optional custom filter ID (for multiple instances).
filterStdDeviationnumber30feGaussianBlur stdDeviation for SVG filter.
filterColorMatrixValuesstring'1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 35 -10'feColorMatrix values for SVG filter.
useFilterbooleantrueEnable the SVG filter.
fastDurationnumber0.1GSAP duration for the lead blob.
slowDurationnumber0.5GSAP duration for the following blobs.
fastEasestring'power3.out'GSAP ease for the lead blob.
slowEasestring'power1.out'GSAP ease for the following blobs.
zIndexnumber100CSS z-index of the whole component.

Accessibility

Keyboard shortcuts and ARIA behavior.

  • Decorative only. The blobs ignore pointer events, so the content underneath stays clickable, and the native cursor is not hidden.
AntigravityClick Spark