VariableFontAnimator

Variable font field that reacts on hover

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

Variable font field that reacts on hover