LetterGlide

Show Preview
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.