# Variable Font Cursor Proximity

> A text component that animates the font variation settings of letters based on the cursor proximity. Works only with variable fonts.  The VariableFontCursorProximity splits its text into letters, that respond to cursor movement by adjusting their font variation settings, based on the distance between the letter and cursor distance. This component works only with variable fonts.  1. Splitting text into individual letters 2. Tracking cursor position relative to each letter 3. Smoothly transitioning font variations based on proximity 4. Supporting multiple falloff patterns for the effect  This component requires the use of variable fonts to function properly. Otherwise it will not work.

- Author: [Daniel Petho](https://21st.dev/@danielpetho)
- Library: [Fancy Components](https://21st.dev/@danielpetho/library/fancy-components)
- License: mit
- Tags: Text Effect
- npm dependencies: framer-motion
- Live preview: https://21st.dev/@danielpetho/components/variable-font-cursor-proximity

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/danielpetho/variable-font-cursor-proximity?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt · More like this: https://21st.dev/community/components/s/text-effect.md