8 Copy-Paste Text Effect Snippets That Turn Headlines Into Hooks
Your headline is the first thing visitors read — and usually the only thing, if it doesn't hold them. A well-chosen text effect buys you an extra second of attention: a typewriter cycling through what you build, a number counting up to your real revenue, a departure-board flip spelling out your launch date. Below are 8 free text effect snippets you can preview live and copy in seconds. Pure HTML, CSS and a few lines of JS, no framework, no library.
As with every roundup in this series, this isn't just a copy-paste dump. For each effect you'll find how it actually works under the hood, when to reach for it (and when it's the wrong call), and a quick tip for customising or keeping it accessible. By the end you'll know the small toolkit — background-clip: text, per-letter animation delays, requestAnimationFrame easing, pseudo-element layering — behind nearly every animated headline you've ever screenshotted.
Every effect below is a live, running preview — watch it right in the article. When you find one you like, hit View / Edit Code to grab the HTML/CSS/JS or export it to React, Vue, Angular or Tailwind.
One rule before you animate any text
Text effects have a failure mode that buttons and cards don't: the content itself is the animation. If the effect is too aggressive, visitors can't read the very words you're trying to emphasise. So before copying anything below, keep three principles in mind:
- The text must be readable at every frame — effects that briefly scramble or flicker (glitch, scramble, split-flap) should settle into a stable, legible resting state quickly, not loop forever over body copy.
- Keep real text in the DOM — all eight snippets below render actual characters, not images or canvas pixels, so screen readers and search engines see the words even while they're animating.
- One animated headline per screen — a typewriter and a gradient shimmer and a sparkle field on the same viewport isn't emphasis, it's noise. Pick the one effect that matches your message.
1. Typewriter Effect
The classic "I build fast UIs… clean code… cool things" hero, typing and deleting a rotating list of phrases next to a blinking cursor. Twenty years old as an idea, and still the highest-converting trick on developer portfolios.
How it works: a single tick() function slices the current word one character longer (or shorter, when deleting) and writes it with textContent, then re-schedules itself with setTimeout. Two state variables — the word index and a deleting flag — drive the whole loop: type to the end, pause ~1.8s so the phrase can be read, delete back to zero, move to the next word. The blinking cursor is pure CSS: a | character with an opacity keyframe using step-end timing so it snaps on and off like a real terminal caret instead of fading.
Best for: personal portfolios, agency heroes, and any headline of the form "We do X, Y and Z" where the rotating slot carries the variety. Tip: give the typed span a min-width (the snippet uses 2ch) or reserve the line height — otherwise the layout reflows every time a word deletes to zero characters, and the page visibly jumps.
Grab the code: Typewriter Effect
2. Animated Gradient Text
A headline filled with a slowly flowing multi-colour gradient — the signature look of every modern AI and SaaS launch page. Zero JavaScript, four lines of CSS that matter.
How it works: the element gets a linear-gradient background, then background-clip: text plus -webkit-text-fill-color: transparent clip that background to the letter shapes — the text becomes a window onto the gradient behind it. The motion comes from setting background-size: 300% (so the gradient is three times wider than the text) and animating background-position across it on a loop. One detail makes the loop seamless: the gradient's last colour stop repeats its first, so the moment it wraps around is invisible.
Best for: product heroes, feature section headings, and the one keyword inside a headline you want to pop ("Build beautiful interfaces"). Tip: apply it to a <span> around two or three words, not whole paragraphs — gradient body text is genuinely harder to read, and the effect loses its meaning when everything shimmers.
Grab the code: Animated Gradient Text
3. Glitch Text
A cyberpunk headline that periodically tears into cyan, magenta and green slices before snapping back whole — pure CSS, no JavaScript at all. The go-to for anything that wants to feel like a broken CRT.
How it works: the trick is content: attr(data-text) — the headline's ::before and ::after pseudo-elements each render a full copy of the text, stacked exactly on top of the original. Each copy gets a different colour, a clip-path that shows only a horizontal band of it, and its own keyframe animation that jerks it left and right with translateX and skewX. Crucially, the copies sit at opacity: 0 for ~85% of the loop — the glitch is a brief spasm, not a constant state, which is exactly what makes it read as a malfunction.
Best for: gaming sites, cybersecurity products, music/event pages, 404 pages, and dev tools with a terminal aesthetic. Tip: keep the data-text attribute in sync with the visible text — if you change the headline but forget the attribute, the glitch layers will spell a different word, which is a fun bug exactly once.
Grab the code: Glitch Text
4. Text Scramble (Decode Effect)
The headline starts as random symbols and resolves into real words one character at a time, left to right — the "decrypting…" effect from every hacker movie, in about 15 lines of JavaScript.
How it works: a requestAnimationFrame loop rebuilds the string every frame. Each character checks its position against a rising iteration counter: positions below it show the real character, locked in; positions above it show a fresh random symbol from a pool of letters, digits and punctuation. Because the counter climbs by 0.3 per frame rather than 1, each character churns for a few frames before its turn comes — that flicker before the lock-in is what sells the "decoding" feel. Spaces pass straight through so word shapes stay visible mid-scramble.
Best for: security and crypto products, API/developer tools, and section headings that reveal on scroll or hover. It pairs naturally with the Evervault-style reveal card for a full "encrypted brand" look. Tip: run the scramble once on entry, not on a loop — repeated scrambling of the same headline reads as broken rather than clever.
Grab the code: Text Scramble
5. Number Ticker (Count-Up Stats)
Revenue, requests per day, uptime — stat numbers that spin up from zero the moment they scroll into view, easing to a stop like an odometer. The single most effective way to make metrics feel earned rather than claimed.
How it works: each stat declares its target in a data-to attribute (plus optional prefix, suffix and decimal places), and a requestAnimationFrame loop multiplies that target by an eased progress value each frame. The easing is easeOutExpo — blisteringly fast at the start, then a long settle — which is what produces the satisfying odometer spin-down. An IntersectionObserver holds the whole thing until the stats actually scroll into view, so visitors always see the count happen instead of arriving after it finished. A formatter re-inserts thousands separators on every frame.
Best for: landing page stat rows, dashboards, fundraising totals, and case-study results sections. Tip: set font-variant-numeric: tabular-nums on the number (this snippet already does) — without it, digits have different widths and the whole stat card wobbles horizontally while counting.
Grab the code: Number Ticker
6. Wave Text
Each letter bobs up and down in sequence, sending a smooth wave rippling through the word — with a rainbow variant where every character gets its own colour. Playful, loopable, and surprisingly useful as a loading state.
How it works: a few lines of JS split the string into one <span> per character, and every span runs the same two-keyframe animation — just translateY(0) to translateY(-16px) and back. The wave comes entirely from a staggered animation-delay: each letter starts a fraction of a second after its neighbour, so identical bounces read as one travelling ripple. The rainbow variant is pure CSS on top, using :nth-child to hand each position its own colour and glow.
Best for: loading screens ("LOADING…" genuinely suits it), kids' and gaming brands, and short celebratory moments like "YOU WIN". Tip: per-letter staggering is the master technique here — swap the translateY for opacity, blur, or rotation and the same delay pattern gives you fade-in-by-letter, focus-in-by-letter, and a dozen other reveals for free.
Grab the code: Wave Text
7. Sparkles Text
Tiny four-pointed stars spawn at random positions around a gradient headline, twinkle through a scale-and-rotate flourish, and fade away — a continuous ambient shimmer that makes one line of text feel like the main event.
How it works: every ~220ms, a spawner measures the headline with getBoundingClientRect(), picks a random point inside a slightly padded version of that box, and injects a small inline-SVG star with a random size, colour and lifespan. The lifespan is passed as a CSS custom property (--life) that drives a single keyframe — scale 0 → 1 → 0 with a half-turn of rotation — and a matching setTimeout removes the node when its animation ends, so the DOM never accumulates dead sparkles. The snippet also checks prefers-reduced-motion up front and simply doesn't start the spawner for users who've opted out.
Best for: "magic"-positioned products — AI features, premium tiers, launch announcements — and anywhere a single word ("New", "Pro") deserves literal sparkle. Tip: the spawn interval is the knob that matters: 200–250ms feels alive, under 100ms looks like static, and over 500ms reads as a bug rather than an effect.
Grab the code: Sparkles Text
8. Split-Flap Display
An airport departure board rebuilt in CSS: each character lives on a mechanical flap that physically flips over, cycling through the alphabet until it lands on the right letter. The most theatrical effect in this list — and people will sit and watch it loop.
How it works: each cell is split into a static top half and bottom half, each showing half a character through overflow: hidden. When a letter changes, two extra animated flaps do the mechanical work: a top flap folds down from transform-origin: bottom center showing the old letter, and a bottom flap unfolds to reveal the new one, all inside a perspective container so the fold looks three-dimensional. backface-visibility: hidden keeps the reverse side from ghosting through mid-flip. To land on a target letter, each cell simply flips through the character set in order — just like the real electromechanical boards.
Best for: countdowns and launch dates, travel and event sites, retro-industrial brand moments, and hero headlines that change on a timer. Tip: stagger each cell's flip start by a few milliseconds — real boards never flip in perfect unison, and that slight mechanical chaos is most of the charm.
Grab the code: Split-Flap Display
How to drop these into your project
Every snippet is framework-agnostic, so the workflow is the same wherever you're building:
- Open the snippet and hit View / Edit Code to see the HTML, CSS and JS in separate tabs.
- Paste the HTML into your markup, the CSS into your stylesheet, and the JS (if any) before your closing
</body>tag. - Prefer a component? Use the one-click export to React, Vue, Angular or Tailwind and drop the file straight into your app.
- Swap the demo copy for your own — every effect here works on arbitrary text, so change the words, colours and timing, not the mechanism.
Keep animated text accessible
Animated text has sharper accessibility edges than most UI effects, because the content and the animation are the same thing. Three rules cover almost every case:
- For effects that rewrite the DOM every frame (typewriter, scramble, ticker), screen readers can announce every intermediate state. Either put
aria-hidden="true"on the animated element and provide the final text in a visually-hidden sibling, or setaria-live="off"so the churn stays silent. - Wrap continuous loops (glitch, wave, sparkles, gradient shimmer) in
@media (prefers-reduced-motion: reduce)and fall back to plain styled text — the sparkles snippet above shows the JS-side version of the same check. - Check contrast at the gradient's weakest stop, not its average — a gradient that passes 4.5:1 in indigo can quietly fail where it passes through yellow.
Final Thought
These are just 8 of dozens of text effects you can copy for free — no login, no sign-up, everything runs in your browser. More importantly, the techniques behind them — background-clip: text for gradient fills, attr(data-text) layering for glitch copies, per-letter spans with staggered delays, and requestAnimationFrame loops with real easing — are a small, reusable toolkit. Master these four and you can build nearly any animated headline you've ever bookmarked.
Preview any of them live, tweak the code, and export to your framework of choice in one click. Browse the full collection at FWD Tools UI Snippets — Animations. And if you're styling the rest of the page too, the companion roundups cover copy-paste button snippets and hover card snippets.
.png)