The Vibeary — round-up
Best text animation and type effect tools
A headline is usually the largest element on a page, which makes it the most efficient place to put motion. Split-text reveals, variable-font weight animation, kinetic typography, gradient and outline treatments, scramble and typewriter effects — all of them earn their keep on a hero, and all of them look amateurish if the timing is wrong. This shelf collects libraries and effect collections that get the timing right by default, plus references for what tasteful type motion actually looks like.
What earned a place
- Animates without breaking text selection or screen readers
- Handles line-splitting and reflow properly
- Easing defaults that already look right
- Honours prefers-reduced-motion
16 picks from the library
- 01
AnimateSVGTextPath
Codrops demo animating SVG text along a curved path as it scrolls into view via IntersectionObserver.
Why it made the list: Curved scroll-driven type is a signature editorial move with almost no code
Text effectsMITCodrops / Manoela Ilic (@crnacura)github.com
- 02
Blotter.js
WebGL-backed API that applies shader material effects — liquid distort, channel split, rolling — to live, selectable text.
Why it made the list: Shader text effects on real DOM text; almost nobody knows this exists.
Text animationMITBradley Griffith (@bradley)github.com
- 03
Calligraph
Fluid text transition component powered by Motion, animating between arbitrary strings with per-character flow.
Why it made the list: Single-purpose text transition tool with unusually refined easing
Text animationopen-sourceRaphael Salaja (@raphaelsalaja)calligraph.raphaelsalaja.com
- 04
glitched-writer
Text writing module that decodes strings through configurable glitch, scramble and error passes with presets.
Why it made the list: Presets like neo and terminal give distinct personalities beyond generic scrambling
Text effectsMITDamian Tarnawski (@thetarnav)github.com
- 05
griffo
Kerning-aware text splitting for React that preserves letter-spacing when splitting into characters for staggered animation.
Why it made the list: Fixes the kerning breakage every SplitText clone quietly introduces
Text effectsMIT(@dimicx)github.com
- 06
scrambling-letters
Small vanilla library producing a per-character decoding scramble on any element, with per-element timing control.
Why it made the list: Simplest possible scramble implementation; readable enough to fork and tune.
Text animationMITRecidvstgithub.com
- 07
shuffle-text
Text effect library recreating the Flash-era character shuffle/decode reveal with configurable duration and random glyph sets.
Why it made the list: The cyberpunk decode effect as a 2KB dependency instead of a copied snippet.
Text animationMITYasunobu Ikeda (@ics-ikeda)github.com
- 08
smart-ticker
Diff-aware animated number and text ticker for React, Vue and Svelte that only animates changed characters.
Why it made the list: Diffing means long numbers roll only where they changed, which reads far better
Text effectsMIT(@tombcato)github.com
- 09
Splitting.js
Microlibrary that splits elements by word, character, line, grid or image and populates CSS custom properties for index-based staggering.
Why it made the list: CSS-variable index output means you can stagger entirely in CSS, no JS timeline.
Text animationMITShaw Brown (@shshaw)splitting.js.org
- 10
SplitType
Splits text nodes into line, word and character wrappers with CSS classes so any engine can animate them.
Why it made the list: Free replacement for GSAP's paid SplitText; the entire awwwards text-reveal trick.
Text animationMITLuke Peavey (@lukePeavey)github.com
- 11
svg-text-animate
Converts text into SVG stroke paths and animates the drawing, supporting custom fonts and per-letter timing.
Why it made the list: Stroke-drawn type from any font without hand-tracing paths in Illustrator
Text effectsMIT(@oubenruing)github.com
- 12
tegaki
Renders any web font as animated handwriting strokes, turning ordinary text into a hand-drawn reveal.
Why it made the list: Works with arbitrary fonts, not a fixed set of pre-traced letterforms
Text effectsMIT(@gkurt)github.com
- 13
Textify.js
Text animation library handling split-and-reveal presets with scroll triggers and TypeScript support, aimed at agency-style hero text.
Why it made the list: Solo-dev project bundling the split, stagger and scroll wiring you'd otherwise hand-roll.
Text animationMITMAGGIx1404github.com
- 14
Torph
Dependency-free animated text component that morphs between strings without pulling in a motion library.
Why it made the list: Zero-dependency text morphing is rare — most solutions drag in Framer Motion
Text animationopen-sourceLochie Axontorph.lochie.me
- 15
TypeIt
Typewriter engine with queued strings, mid-string deletions, nested instances and full control over speed and cursor.
Why it made the list: Handles pausing, deleting and branching sequences that naive typewriter scripts cannot
Text effectsGPLAlex MacArthur (@amacarthur)github.com
- 16
use-scramble
React hook producing randomised scramble and decrypt text transitions with tick rate, speed and character-set controls.
Why it made the list: The cleanest decrypt-text API; one hook, no wrapper components or refs
Text effectsMIT(@tol-is)github.com
Questions
- Does split-text animation break accessibility?
- It can, if each character becomes its own element without an accessible label. Good libraries keep the original text available to assistive tech.
- How long should a headline animation run?
- Under 600ms for the whole reveal. Anything slower delays the message the page exists to deliver.