Variable Proximity for Vue

Variable Proximity thickens each letter as the pointer comes near it: the letter right under the pointer is at its heaviest and the weight fades with distance, so a bold patch follows the pointer through the text. When the pointer leaves, every letter eases back to rest.

Use it for a large headline or a word on a landing page that invites the pointer over it. To light letters up rather than thicken them, use Spotlight Text; to swell a display word across its column, Text Pressure; to push letters apart, Kerning Text. The letters' centres are measured once as the pointer enters; each move writes the pointer's position to two CSS variables, and a CSS utility the install adds to your stylesheet works out each letter's weight from its distance, with no animation frame loop.

Installation

Usage

<script setup lang="ts">
import { VariableProximity } from "@/components/ui/variable-proximity";
</script>

<template>
  <VariableProximity text="Bring the pointer closer" />
</template>

Demos

Falloff

falloff is how the weight fades between the pointer and radius: linear evenly, quadratic sharply, with only the nearest letters heavy, and smooth in a soft bell with a wide peak.

Range

minWeight is the weight at rest and maxWeight the weight under the pointer, any weights your font has; radius is how far the pointer reaches, in pixels.

Accessibility

Screen readers read the text once, from a visually hidden copy, never letter by letter. The effect only follows the pointer and changes no meaning, so keyboard and touch users miss nothing. Every letter keeps the width of its heaviest weight, so the text never reflows under the pointer; with reduced motion the weight follows the pointer without easing.

FAQ

API Reference