Dynamic Weight
0
Used by 0Controls
Dynamic Weight
Morph each letter between two font weights based on its distance from the cursor for a live, variable-font hover effect.
KEY FEATURES
- — Per-letter weight interpolation driven by cursor proximity
- — From and To weight controls across the full 100 to 900 axis
- — Strength control sets how far the proximity reach extends
- — Transition control eases both ramp-in and ramp-out smoothing
- — Editable label text with adjustable font size and color
- — Mouse and touch tracking for pointer position
- — Bundled Inter Variable font so the morph works out of the box
- — Screen-reader-friendly with visually hidden semantic text
- — Direct per-frame DOM mutation for smooth 60fps performance
API Reference
All props map directly to the controls panel sliders and color pickers.
LAYOUT
PROP
TYPE
DEFAULT
DESCRIPTION
label
string
DYNAMIC WEIGHT
Text to display, split into per-letter spans that morph on hover.
fontSize
number
48
Font size of the letters, in pixels.
fromWeight
enum
400
Resting weight of letters far from the cursor (100-900).
toWeight
enum
900
Weight letters morph to as the cursor reaches them (100-900).
strength
number
25
Cursor reach; higher widens the area of letters that respond.
transition
transition
{"..."}
Easing and duration of the weight ramp-in and ramp-out.
COLORS
PROP
TYPE
DEFAULT
DESCRIPTION
color
color
#FFFFFF
Color of the morphing text letters.
