Animation Engine
Text Effects
Over 30 typographic animations for any heading — split reveals, typewriter, scramble, matrix decode, count-up, living gradients, neon, wave, glitch and more. Self-contained (no GSAP) and honours reduced-motion.
30+ effects, applied per element
Type that moves.
Every heading below is live. Each effect is applied from the element’s Animations tab — no shortcodes, no GSAP. Scroll back up to replay the on-view ones.
Reveal
Headings that assemble as they enter
Text effect
Split Reveal
Characters rise and fade into place.
Assembled on scroll
Text effect
Blur Reveal
Sharpens from a soft blur, letter by letter.
Sharpens into focus
Text effect
Scale Pop
Each character pops up from small.
Pops into place
Text effect
Bounce In
Letters bounce in with a springy settle.
Bounces right in
Decode & type
Text that writes and unscrambles itself
Text effect
Typewriter
Types on one key at a time, with a caret.
Typed one key at a time
Text effect
Scramble
Random glyphs settle into the final text.
Decoded from noise
Text effect
Matrix Decode
A cascade of glyphs resolves into words.
Decrypting the message
Text effect
Count Up
Numbers roll up from zero on view.
12,480
Text effect
Rotating Words
A trailing word cycles through a list.
Built for
Living colour & glow
Continuous, ambient motion
Text effect
Gradient Flow
An animated colour gradient runs across the letters.
Flowing gradient
Text effect
Shimmer
A soft sheen sweeps across the text.
Subtle shimmer
Text effect
Rainbow
A full-spectrum hue cycle.
Full rainbow
Text effect
Neon Flicker
A glowing neon sign that flickers.
Neon nights
Kinetic & interactive
Waves, glitches and highlights
Text effect
Wave
Letters ripple in a continuous wave.
Riding the wave
Text effect
Glitch
A chromatic glitch tears through the text.
Glitched signal
Text effect
Marker Highlight
A highlighter marker draws behind the words.
Highlight the point
Text effect
Outline → Fill
Outlined letters flood with colour.
Outline to fill
How to set it up
Add it in under a minute
- Add a heading — Special Heading, or any text element.
- Open it → Animations → Text Effect.
- Pick an effect and tune its options (split, speed, colours, trigger).
- Save and scroll to it — reveal effects fire on view, the ambient ones loop.
Free & open source
Build with this element, free.
Install the framework and the Bootstrap 5 theme, then drag this element into any page.