VariableFontScrubber
Interactive typography component. Drag, hover, or scroll to scrub through variable font axes. Weight, width, slant, custom axes. Snap points, auto-animate, spring physics.
About this Component
Let users interact with variable fonts directly. Drag to scrub weight from 100 to 900, hover to explore width, or bind axis values to scroll position. Works with any variable font axis—weight, width, slant, optical size, or custom registered axes.
Four interaction modes: drag (horizontal scrub), hover (position-mapped), scroll (page scroll drives axis), and auto (animated ping-pong with pause-on-hover). Snap points let you lock to specific values on release with spring physics for smooth transitions.
Includes 8 pre-configured Google variable fonts (Inter, Roboto Flex, Outfit, DM Sans, etc.) or paste any Google Fonts URL. The indicator badge shows current axis value in real-time.
Built for hero sections, portfolio pieces, or anywhere you want typography that responds to user input.
