---
title: "Expanding Typography — Framer component · Best of Framer"
description: "$3.00 · Framer component · by Sirrah Space · Text. Make your headlines unforgettable with the Expanding Typography component."
canonical: "https://framer.elliotli.dev/component/expanding-typography"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Expanding Typography

# Expanding Typography

Cinematic text expansion effect.

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

![Expanding Typography preview image 1](https://framer.elliotli.dev/og/component/expanding-typography/672b766d2ce99758/1600x1200.jpg)

## Summary

Make your headlines unforgettable with the Expanding Typography component.

## Description

Make your headlines unforgettable with the **Expanding Typography** component. This powerful Framer component takes standard text and applies a cinematic, fluid expansion animation. The letters start tightly condensed (or blurred) and smoothly expand outward to reveal your message.

It is the perfect choice for **hero sections**, **movie-style title reveals**, and **interactive portfolios**. Built with Framer Motion, it offers precise control over every detail. You can choose where the text expands from (Left, Center, Right), how it is triggered (on Scroll, Hover, Click, or Page Load), and fine-tune the initial density and blur effects. It fully supports custom fonts, text shadows, and stroke outlines to match your brand perfectly.

**Functions (Key Features):**

-   🎥 **Cinematic Expansion:** Text smoothly animates from a condensed (Initial Density) state to its target letter spacing.
    
-   🎬 **Motion Blur:** Optional built-in blur effect that fades out as the text expands, mimicking a camera focusing.
    
-   ⚡ **Multiple Triggers:** Animate the text on Scroll (in-view), Load, Hover, or Click.
    
-   ↔️ **Directional Control:** Choose whether the text expands from the Left, Center, or Right.
    
-   🎨 **Advanced Styling:** Full support for custom fonts, text colors, stroke (outline) widths, and drop shadows.
    

**How to Use:**

1.  **Insert:** Drag the **Expanding Typography** component onto your Framer canvas.
    
2.  **Content:** Type your desired headline in the **Text** property.
    
3.  **Typography:** Use the **Font** controls to set the final size and letter-spacing (how wide it will eventually become).
    
4.  **Animation Setup:** Set the **Initial Density** (a negative value like -0.15em works best) to determine how tightly packed the letters start.
    
5.  **Interaction:** Choose a **Trigger** (e.g., "Scroll") and adjust the **Duration** and **Delay** to perfect the timing.
    

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

-   All · #6743

## Details

- **Author**: Sirrah Space
- **Price**: $3.00
- **Published**: 2026-03-07
- **Updated**: 2026-07-26
- **Added**: 2026-03-03
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing