---
title: "LetterGlide — Free Framer component · Best of Framer"
description: "Free Framer component · by Can Girgin · Text. LetterGlide turns any headline into a buttery 3D cascade."
canonical: "https://framer.elliotli.dev/component/letterglide"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/LetterGlide

# LetterGlide

3D letter-by-letter scroll reveal

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

![LetterGlide preview image 1](https://framer.elliotli.dev/og/component/letterglide/a63a0f84c17e82eb/1600x1200.jpg)

## Summary

LetterGlide turns any headline into a buttery 3D cascade.

## Description

**LetterGlide** turns any headline into a buttery 3D cascade. Each character animates in depth (translate/rotate X-Y-Z) with perspective, wave, and subtle fade for a cinematic feel—no code.

## Highlights

-   **3D Cascade:** per-letter transforms (depth, tilt, roll) with perspective.
    
-   **Two Modes:** **On Scroll (scrub)** or **Auto Once**.
    
-   **Section Gate:** start only when a target **#id** is in view.
    
-   **Split:** **Letters** or **Words**.
    
-   **Text Input:** multiline (formatted) text area; paste your copy directly.
    
-   **Typography:** font, size, tracking, line height, alignment.
    
-   **Fine Control:** stagger, duration/ease (for Auto), wave, spread, tilt, extra **Y Rot+** and **Z Rot**.
    
-   **Performance:** uses translate3d/rotate3d + will-change; no external deps.
    
-   **Accessible:** real, selectable text (not canvas or images).
    

## How to use

1.  Drop **LetterGlide** on the canvas.
    
2.  Paste your headline into **Text** (use returns for new lines).
    
3.  Choose **Split**: Letters or Words.
    
4.  Pick **Mode**:
    
    -   **On Scroll (scrub):** optional **Section** → enter an element ID like #hero.
        
    -   **Auto Once:** tune **Duration** and **Ease**.
        
5.  Adjust **Perspective**, **Depth**, **Spread**, **Wave**, **Tilt**, **Y Rot+**, **Z Rot** to taste.
    
6.  Set **Align**, **Size**, **Tracking**, **Line Height** to match your typography.
    

## Tips

-   Short, high-impact headlines look best (5–9 words).
    
-   Bigger **Perspective** + a touch of **Y Rot+** increases the 3D feel.
    
-   If letters clip while flying in, enlarge the component height or reduce **Size**.
    
-   For perfect centering, keep the container wide enough and use **Align: Center**.
    

## Compatibility

Works on modern browsers and mobile. No additional libraries required.

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

-   All · #7444

## Details

- **Author**: Can Girgin
- **Published**: 2025-09-15
- **Updated**: 2026-01-19
- **Added**: 2025-08-28
- **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