LetterGlide

LetterGlide turns any headline into a buttery 3D cascade.

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 Drop LetterGlide on the canvas. Paste your headline into Text (use returns for new lines). Choose Split : Letters or Words. Pick Mode : On Scroll (scrub): optional Section → enter an element ID like #hero. Auto Once: tune Duration and Ease . Adjust Perspective , Depth , Spread , Wave , Tilt , Y Rot+ , Z Rot to taste. 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.

3D letter-by-letter scroll reveal