TypeZoom

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.