--- title: "Variable Proximity" description: "Text effect that responds to mouse proximity with variable font properties." canonical_url: "https://nuxt-motion-block.pages.dev/components/text/variable-proximity" --- # Variable Proximity > Text effect that responds to mouse proximity with variable font properties. The VariableProximity component creates a text effect that responds to mouse proximity with variable font properties. It requires a font with variable axes (like Inter) to work properly. ## Usage
## Examples ### Wide weight range
The two `fontVariationSettings` strings are the endpoints: characters sit at the `from` values and animate toward the `to` values as the pointer nears them, then spring back to `from` on leave. `radius` decides how much of the line the pointer influences at once — the component interpolates linearly from `0` at the pointer to `1` at the radius edge. ### Whole-card hover area
By default the pointer is tracked on the component's own root — a box that hugs the text. Pass `containerRef` to move the listening to a larger ancestor, so the effect starts responding before the cursor reaches the words. ## Customize
## Props The text to display with proximity effects. CSS classes to apply to each character. Starting font variation settings. Ending font variation settings. Element — or Vue ref — whose bounds define the pointer-tracking area. Falls back to the component's own root when unset. Radius of the proximity effect in pixels. Read on every pointer move, so it is safe to change reactively. Type of falloff: 'linear', 'exponential', or 'gaussian'. Per-slot classes merged over the theme defaults. See [UI](#ui). ## UI This component's theme exposes the slots below. Override any of them per instance with the [`ui` prop](https://nuxt-motion-block.pages.dev/getting-started/theming), or app-wide under `ui.variableProximity` in `app.config.ts`. Per-slot classes merged over the theme defaults. `relative inline-block` ## Accessibility Each character is a plain `span` and the label is read once, in order, with no live region and no per-character announcement. Spaces render as non-breaking spaces, so word gaps survive the per-character split. The effect is pointer-only: it listens to `mousemove` and `mouseleave` on the container, with no keyboard or touch equivalent, and there is no reduced-motion handling — the spring-back on leave runs either way. That is fine as decoration, as long as the resting state (`fromFontVariationSettings`, `wght` 400 by default) is legible on its own, which is how the component ships. ## Performance - Every `mousemove` on the container measures the container and then **every character** with `getBoundingClientRect`, computes a distance, and calls motion-v's `animate()` on that character — cost is linear in character count per pointer event. Keep labels short, or widen `radius` and accept that fewer moves are needed. - Each per-character animation writes two custom properties (`--vp-wght`, `--vp-opsz`) over `0.25s`; the spans carry `will-change: font-variation-settings, transform` so the browser can promote them. `mouseleave` sweeps every character back to the `from` values once, over `0.35s`. - There are no scroll, resize or `requestAnimationFrame` hooks: listeners are two plain events attached after mount and removed on unmount. - The `from`/`to` settings are regex-parsed once at setup; `radius` is read live from props on each move. ## Notes - The label is split per character — `label.split('')` — with each character in its own `span`, so node count equals label length. - `fromFontVariationSettings` and `toFontVariationSettings` are parsed once when the component is set up. Changing them later does not re-parse; remount with a changing `:key` to switch axes. - The effect needs a font that actually exposes `wght` and `opsz` axes. On a static font the pointer still animates the custom properties, but nothing visible changes. ## Sitemap See the full [sitemap](https://nuxt-motion-block.pages.dev/sitemap.md) for all pages.