# Motion Text Variable Proximity

Heading whose font weight follows the mouse cursor letter by letter.

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

## Install

```bash
agentic-ui add motion-text-variable-proximity
npx shadcn@4.17.0 add @agentic-ui/motion-text-variable-proximity
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** variable-font-weight, pointer-proximity, per-letter-weight, falloff-curves, smoothed-follow, locked-letter-cells, fine-pointer-only, pause-offscreen, accessible-text-once, reduced-motion-fallback
- **Intents:** communicate, explore-detail
- **Suits domains:** marketing, media, saas, devtools, ecommerce
- **Interaction:** hover
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** heading whose font weight follows the mouse cursor letter by letter, variable font hover effect where letters get bolder near the pointer, interactive typography hero that reacts to cursor proximity, text weight animation on mouse move for a portfolio or agency site
- **Avoid when:** Touch-first or keyboard-first screens, where the text simply stays at its fixed weight, Body text or anything long (every letter is its own cell), Fonts without a wght axis, where the weight can only step between the available weights, Protected enterprise personalities, where the text group is not allowed
- **Preserve when adapting:** text-in-dom-once, aria-hidden-letter-layer, locked-letter-cells, fine-pointer-only, fixed-weight-without-motion
- **Replace when adapting:** text, min-weight, max-weight, radius, falloff, smoothing, font-family, element
- **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