LetterGlide
Cinematic 3D letter-by-letter scroll reveal. Split by letters or words, scrub with scroll or auto-play once. Real text, smooth GPU transforms, easy controls.
Make it with Workshop
Build your own component with AI
Cinematic 3D letter-by-letter scroll reveal. Split by letters or words, scrub with scroll or auto-play once. Real text, smooth GPU transforms, easy controls.
Make it with Workshop
Build your own component with AI
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.
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).
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.
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.
Works on modern browsers and mobile. No additional libraries required.
