# Motion Magnetic Hover

Main call-to-action (CTA) button in a SaaS product hero.

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

## Install

```bash
agentic-ui add motion-magnetic-hover
npx shadcn@4.17.0 add @agentic-ui/motion-magnetic-hover
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** magnetic-pointer-tracking, elastic-spring-physics, layer-depth-parallax, personality-tuning, reduced-motion-fallback, keyboard-focus-ring, informative-state-preservation
- **Intents:** navigate, execute-flow, communicate
- **Suits domains:** saas, marketing, project-management, personal-productivity, devtools
- **Interaction:** hover, click, keyboard-navigation
- **Screen role:** flow
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Main call-to-action (CTA) button in a SaaS product hero, Floating toolbar with quick-access pills that react to the cursor, Key save or publish actions in productivity panels
- **Avoid when:** Dense data tables or large forms with hundreds of cells (use static controls), Strictly conservative systems that forbid motion (degrades cleanly to none), Touch-only interfaces without a mouse pointer
- **Preserve when adapting:** m01-personality-spring-physics, reduced-motion-static-fallback, informative-badges-and-status-feedback, wcag-focus-ring-model
- **Replace when adapting:** button-labels-and-icons, color-palette-tokens, click-handlers
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, badge
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/motion-personalities, @agentic-ui/tokens, react
- **Motion:** profile expressive, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion, lib-motion-personalities