Variable Font Animator is a highly interactive Framer component that demonstrates the expressive potential of variable fonts through smooth hover animations.
What it does:
Displays a 4-line paragraph using Roboto Flex (a powerful variable font from Google Fonts).
On hover, each line independently animates between two font states:
From (resting state): Light, upright, wide, small optical size
To (hover state): Bold, slanted, condensed, large optical size
All four variable font axes are animated simultaneously:
wght (Weight) — 100 to 900
slnt (Slant) — 0 to -10
wdth (Width) — 25 to 151
opsz (Optical Size) — 8 to 144
Key Features:
Fully customizable via Framer’s property panel
Smooth transitions powered by Framer Motion
Choose from 8 different easing curves (linear, easeOut, circIn, backOut, etc.)
Adjustable duration (0.05s to 3s)
Built-in dark/light mode toggle
Custom accent color
Real-time axis value display at the bottom showing before → after values
Each line can be edited individually
Perfect for:
Showcasing variable font capabilities
Typography experiments and micro-interactions
Portfolio hero sections
Design system demonstrations
Creative landing pages
Viper Guy
