Weight Hover
0
Used by 0Controls
Weight Hover
Morph each letter's variable-font weight on hover, staggered letter-by-letter with a spring that eases in and out.
KEY FEATURES
- — Per-letter font-weight morph triggered on hover
- — Set resting and hover weights anywhere from 100 to 900
- — Staggered letter-by-letter timing with adjustable delay in ms
- — Stagger origin from first, last, center, or random letter
- — Stable random stagger order that reshuffles only when the label changes
- — Spring Transition control that eases both hover-in and hover-out
- — Adjustable font size and color
- — Bundled Inter Variable font for reliable weight morphing
- — Screen-reader text with aria-hidden per-letter spans for accessibility
- — Debounced hover handling so the final hover state always wins
API Reference
All props map directly to the controls panel sliders and color pickers.
LAYOUT
PROP
TYPE
DEFAULT
DESCRIPTION
label
string
WEIGHT HOVER
Text split into per-letter spans that morph weight on hover.
fromWeight
enum
400
Resting font weight (100-900) letters rest at and return to.
toWeight
enum
900
Target font weight (100-900) letters morph to on hover.
fontSize
number
120
Size of the text in pixels; higher is larger.
staggerFrom
enum
random
Where the stagger starts: first, last, center, or random.
transition
transition
{"..."}
Spring timing that eases the weight morph in and out.
ANIMATION
PROP
TYPE
DEFAULT
DESCRIPTION
staggerDuration
number
30
Delay in milliseconds between each letter's weight animation.
COLORS
PROP
TYPE
DEFAULT
DESCRIPTION
color
color
#FFFFFF
Color of the letters.
