---
title: "TypeZoom — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Oleksandr Demydov · Effects. TypeZoom operates per character, animating the variable font wght axis on every span in real time."
canonical: "https://framer.elliotli.dev/component/typezoom"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/TypeZoom

# TypeZoom

TypeZoom — Variable Font Kinetic Typogra

[View on Framer](https://framer.com/marketplace/components/typezoom/?via=elliot-li)

![TypeZoom preview image 1](https://framer.elliotli.dev/og/component/typezoom/8021a9a7ba7f78e1/1600x1200.jpg)

## Summary

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

## Description

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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #7524

## Details

- **Author**: Oleksandr Demydov
- **Price**: $5.00
- **Published**: 2026-06-08
- **Updated**: 2026-06-08
- **Added**: 2026-06-07
- **Categories**: Effects

## More like this

-   [Particle Image](/component/particle-image) — Jamik · $12 — Logos and photos as 3D points
-   [Ascii Portrait](/component/ascii-portrait) — The Black Sheep · Free — Photos that dissolve into ASCII
-   [Sandfall](/component/sandfall) — Cyedi Creative Studio · $5 — Your headline, buried in coloured
-   [Still Water](/component/still-water) — DariStudio · $9 — Water ripples over any photo