GSAP-style text animations built from scratch: split-text staggers, mask wipes, elastic letters, text on a path, rolling hovers, marker highlights, scatter, and cube-flip words.
npx motionfoundry list --collection text-fxnpx motionfoundry add kinetic-type glyph-cascade text-morphShowing 8 of 19 components
SplitText
GSAP-style SplitText headline that splits into chars, words, or measured lines and animates each piece in from a configurable offset, 3D tilt, opacity, and blur with real power/expo/back/elastic eases and start/center/end/edges/random staggers.
ElasticLetters
Headline whose letters bounce in on mount and then react to the pointer: letters near the cursor lift, stretch, thicken, and tint toward an accent color, driven by per-letter spring physics that settle with an elastic wobble.
CubeFlipWords
Headline with a static prefix followed by a word that rotates through a list on a true 3D cube flip (rotateX with perspective, the next word on the adjacent face), reserving the widest word's width so the line never jumps.
MaskWipeText
Multi-line headline where a colored bar sweeps across each line, then the line slides out from behind its mask (up/down) or is wiped open with a clip-path (left/right), staggered line by line with GSAP-style eases.
TextOnPath
Repeating label that flows endlessly along an SVG wave, circle, or arc path via an animated textPath startOffset, with an optional dotted guide stroke and a text-to-accent gradient fill; repeats are fitted to the path length so the loop is seamless.
RollingText
Link or button label whose characters roll up on hover and focus to reveal a recolored duplicate underneath, staggered per character with GSAP-style eases; an optional auto-play loop demonstrates the roll without interaction.
MarkerHighlight
Sentence in which chosen words or phrases receive hand-drawn marker strokes that sweep in one after another, each slightly skewed and rotated with organic rounded ends, as a full highlighter band or a low underline.
ScatterText
Letters start scattered at seeded random positions, rotations, and scales and fly together into the headline with eased, staggered motion; on hover they burst apart again and reassemble when the pointer leaves.