# Motion Cursor Variants

Custom cursor set with a blob follower, target ring and click sparks.

- id: `motion-cursor-variants`
- Page: https://agentic-ui-kit.com/components/motion-cursor-variants
- Live preview: https://agentic-ui-kit.com/live/component/motion-cursor-variants?piece=motion-cursor-variants

## Install

```bash
agentic-ui add motion-cursor-variants
npx shadcn@4.17.0 add @agentic-ui/motion-cursor-variants
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** blob-follower, velocity-stretch, target-brackets, locks-onto-interactive-elements, click-sparks, dot-variant, opt-in-per-section, optional-native-cursor-hiding, native-cursor-fallback, reduced-motion-fallback
- **Intents:** communicate, explore-detail
- **Suits domains:** marketing, media, ecommerce, travel, social
- **Interaction:** pointer-move, click
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** custom cursor set with a blob follower, target ring and click sparks, cursor that locks onto buttons and links with corner brackets, blob cursor that stretches with mouse speed, click spark burst effect on a section with native cursor fallback
- **Avoid when:** A ring, dot or label cursor that morphs over links and media is enough (use motion-cursor-follower), Pictures should follow the pointer (use motion-cursor-image-trail), Forms, dashboards and dense tools, where a custom cursor slows people down, Touch-first products, where nothing would show
- **Preserve when adapting:** aria-hidden-layer, native-cursor-fallback, form-fields-keep-cursor, ticker-only-while-inside, spark-cap
- **Replace when adapting:** variant, sparks, hide-native, max-stretch, colours, children
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile expressive, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion