Effects
Effect - Liquid-metal cursor
A gooey chrome blob trails the pointer, stretching when you move fast. SVG filter, no WebGL.
- SVG gooey filter
- Cursor trail
- Metallic gradient
Customize
Drag a slider and watch the preview respond live. Every control maps to a typed prop - what you tune is what you ship.
How the animation works
A chrome-coloured blob trails behind the pointer, and the trailing segments are passed through an SVG gooey filter so they merge into one continuous metallic shape rather than reading as separate dots. When the cursor moves quickly the blob stretches between positions, giving it a liquid-metal elasticity, and it runs entirely on an SVG filter with no WebGL.
When to use it
- A creative or agency site where a signature custom cursor sets the tone
- A portfolio landing page that wants a memorable, tactile pointer effect
- Any experience-focused site where delight matters more than restraint
Props you can tune
Every prop below is live in the studio above and ships typed with the component.
- 14-46px
sizeBlob size - 0.15-0.6
dragTrail drag
Related components
Using this block
Buy it, then copy components/blocks/liquid-cursor/index.tsx into your project. A single file - no new dependency beyond the Framer Motion + Tailwind you already have.