TypeZoom

TypeZoom operates per character, animating the variable font wght axis on every span in real time.

Native Framer interactions work on elements as a whole. TypeZoom operates per character, animating the variable font wght axis on every span in real time. The effect isn't achievable with built-in tools. Three Modes Cursor Hover Characters closest to the pointer grow bold, increase in size, and shift to the peak color. Configurable influence radius. The wave eases smoothly as the cursor moves. Scroll Wave A weighted pulse travels through the text as the page — or a parent scroll container — scrolls through. Spread, smoothness, start offset, and end padding are all independently tunable. Reveal On mount, characters flash in from the background, peak at maximum weight, then settle to the base style. Per-character stagger creates a cascading entrance. Effects Variable font weight (wght axis) — live per character Font size boost, vertical float, italic skew Out-of-focus blur and opacity dim for cinematic depth Smooth color interpolation from base to peak Layout Multi-line, single-line, and locked wrap (measured line breaks that stay stable during animation) Text align, overflow, padding, max-width, min-height Fonts included Five variable Google Fonts: Inter, Roboto Flex, Montserrat, Work Sans, Urbanist. Custom Google or system font also supported. Best for Hero sections and manifesto blocks Editorial layouts and scroll-driven storytelling Motion-focused landing pages Any layout where text needs to feel alive Performance Animation pauses automatically when the component leaves the viewport. Only actively animating characters promote to compositor layers. Works across desktop and mobile without layout shifts.

TypeZoom — Variable Font Kinetic Typogra