LetterGlide

Show Preview
LetterGlide
LetterGlide

About LetterGlide

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.

From Can Girgin

Gradient Type Waves
Pro Comparison Table
Code Block Kit
Workflow Network

Related Components

Animated Text Reveal
Dual Fonts
Reveal Text On Scroll
MarkerHighlight