Variable Proximity
Letters near the pointer gain weight and settle back with distance. Works in running text and wraps normally. Needs a variable weight font such as Geist.
import { VariableProximity } from "pleate/effects/variable-proximity";Linear
Move your pointer over this sentence and watch the letters gain weight.
Gaussian, wider reach
Soft focus
Props
- text
The text.
string- fromWeight / toWeight
Base weight and weight under the pointer.
numberdefault 400 / 900- radius
Reach (px).
numberdefault 90- falloff
How weight drops with distance.
"linear" | "exponential" | "gaussian"default "linear"
Accessibility
- Screen readers get the plain text.
- Touch screens and reduced motion keep the base weight.