# Motion Cursor Follower

Agency portfolio where a ring grows over project covers and reads "View case".

- id: `motion-cursor-follower`
- Page: https://agentic-ui-kit.com/components/motion-cursor-follower
- Live preview: https://agentic-ui-kit.com/live/component/motion-cursor-follower

## Install

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

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** pointer-follower, scoped-container, ring-variant, dot-variant, label-variant, trail-variant, morph-on-link-text-media, pressed-state, custom-labels, opt-in-native-cursor-hiding, coarse-pointer-and-forced-colors-off, pause-offscreen, reduced-motion-fallback
- **Intents:** explore-detail, navigate
- **Suits domains:** marketing, media, ecommerce
- **Interaction:** hover, click
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Agency portfolio where a ring grows over project covers and reads "View case", Campaign landing page hero with a trailing dot over the call to action, Product showcase gallery with a label cursor over media tiles
- **Avoid when:** Dashboards, forms, admin tools and any productivity surface, Billing, healthcare or legal screens, where the policy switches it off, Touch-first products, where it never renders, Pages that need the native cursor to carry meaning, such as text editors or drawing canvases
- **Preserve when adapting:** native-cursor-visible-by-default, aria-hidden-and-not-focusable, scope-limited, off-for-coarse-pointer-and-forced-colors, not-rendered-without-motion
- **Replace when adapting:** variant, labels, colour, trail-length, scope
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, card, input, select, table
- **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