Animated Text Effects
Text effects buy attention at the cost of legibility, so they belong on a headline and almost nowhere else. Scramble, typewriter and glitch treatments each animate through states where the text is not readable, which matters for both users and crawlers, so keep the real string in the DOM and animate its presentation rather than retyping it character by character. One effect per viewport is the rule that keeps a page feeling designed instead of restless.
21 entries in this category
All 21 text effects · 8 free
Neon Tube Sign
text effectsA neon sign that lights the wall behind it — glass tubes with a hot core, one tired letter that stutters, an ignition flicker, and a real on/off switch.
Letterpress Light Type
text effectsType debossed into paper and lit by a real lighting model — the lamp follows your pointer, so every wall of every letter catches and loses the light.
Knockout Type Plate
text effectsA headline that inverts the photograph beneath it, with a scrim that keeps it legible.
Iridescent Foil Sweep
text effectsHot-foil type that shifts colour under the pointer — Newton's series rather than a rainbow, translated rather than rotated.
Word Wheel Cylinder
text effectsA rotating word wheel built on a real cylinder — derived radius, accumulated rotation, no backwards spin on the wrap.
Masked Scroll Highlight
text effectsCopy that resolves word by word as you scroll, mapped by real reading position rather than word index.
Displacement Smear Type
text effectsA headline that smears along the pointer's direction of travel with a real accumulation blur.
Whiplash Letters
text effectsA headline whose letters follow the cursor as a spring chain — crisp at the head, loose at the tail.
Split Flap Board
text effectsA real Solari departure board — four layers and a hinge, with reels that land apart because they travel different distances.
Text Mask Media Reveal
text effectsType used as a mask so imagery moves inside the letterforms.
Specular Text Sweep
text effectsA light band travelling inside the glyphs, clipped to the text so only ink lights up.
Particle Assemble Text
text effectsParticles sampled from the glyphs themselves, assembling into a word and scattering on hover.
Chromatic Split Hover
text effectsRGB channels of a headline separate toward the pointer and recombine to white.
Extruded Type Tilt
text effectsDisplay type with a solid extrusion that swings around as the pointer moves.
Weight Wave Text
text effectsPer-character variable font weight that swells around the pointer and drifts when idle.
Slice Shear Hover
text effectsDisplay type cut into horizontal bands that fan apart under the pointer.
Scramble Text
text effectsText that decodes from random characters into its real word on hover.
Odometer Counter
text effectsA stat number that rolls up from zero to its target the moment it's in view.
Typewriter Text
text effectsText that types itself out character by character, then cycles to the next phrase.
Glitch Text Hover
text effectsAn RGB-split, jittery glitch effect on text when you hover it.
Rotating Word Swap Headline
text effectsA headline where one word auto-cycles with a vertical odometer-style swap.