Back to components
Animation component
Custom Cursor
Pointer-following animated cursor — dot + outline, hover grow, click squeeze, auto-hides on mobile.
Install
$ Run in your project root
pnpm dlx shadcn@latest add https://vibekit.desishub.com/r/custom-cursor.jsonWhat it does
- Spring-physics follow with two layers (dot + outline ring)
- Mix-blend-difference for visibility on any background
- Hover grow on links, buttons, inputs, or any [data-cursor-hover] element
- Click squeeze feedback
- Auto-hides on screens under 768px (no touch-device cursor)
When to use
Use it
Designer portfolios, agency sites, brand sites where a tactile cursor reinforces the aesthetic.
Skip it
App-style products, mobile-first audiences, accessibility-sensitive contexts. Add as a polish, not a default.
Prerequisites
- framer-motion (installed automatically)