AI CSS Animations

CSS Text Animations

301 copy-paste text effects: typewriters, glitches, gradients, reveals and loops. Each one is a single HTML + CSS snippet with no JavaScript, recolored and resized with two variables.

Typewriter Effect

Text types itself out one character at a time behind a blinking caret. Pure CSS: the width steps up one character per frame using ch units, so set the step count to your text's length.

typing · reveal · one-shot

Type and Delete Loop

Types the phrase, pauses, deletes it and starts again, forever. Uses the same ch-based width trick with an alternating animation, so no JavaScript is needed for the delete phase.

typing · loop

Text with Blinking Cursor

A static line of text followed by a block cursor that blinks, as at a terminal prompt. Pairs with any typing effect, or stands alone as a 'waiting for input' cue.

typing · loop · minimal

Glitch Text

The classic RGB-split glitch: two offset copies of the text in cyan and magenta flicker through random clip-path slices. The copies read from a data attribute, so the markup is one element.

glitch · loop · dark

Neon Flicker Text

Glowing text that flickers like a neon tube with a loose connection. Layered text-shadows make the glow and a few sharp dips in opacity make the flicker. Best on dark backgrounds.

neon · glow · loop · dark

Outline to Fill Text

Hollow, stroked letters slowly fill with color and empty again. Uses text-stroke for the outline and animates the fill color, so it works with any font.

stroke · loop

Animated Gradient Text

A gradient flows through the letters, clipped to the text. The second and third colors are mixed from your accent, so changing one variable retints the whole gradient.

gradient · loop · tailwind

Rainbow Text

A full-spectrum rainbow cycles through the text. Fixed colors rather than your accent, on purpose: this one is for playful moments, not brand moments.

gradient · loop · colorful

Shimmer Text

A bright band sweeps across otherwise muted text, like light on brushed metal. The same idea AI chat apps use for their 'Thinking' status line.

shine · loop · subtle

Highlighter Sweep

A translucent highlighter stroke draws in behind the words after a short delay, as if someone marked the important line. Plays once, then stays.

reveal · one-shot · subtle

Fade In Up Text

The text rises a little as it fades in. The most useful entrance animation there is: quiet, quick, and appropriate for headings, captions and anything that appears on load.

reveal · one-shot · subtle

Blur In

The text comes into focus from a heavy blur. A filter transition that feels like a camera pulling focus; keep it under a second or it reads as slow.

reveal · one-shot

Tracking In

Letters start spread far apart and slide together as they fade in. Animating letter-spacing gives it a cinematic title-card feel.

reveal · one-shot · cinematic

Letters Rise

Each letter rises and fades in a beat after the previous one. Every span carries its index in a custom property, so the delay is one calc() and adding letters needs no new CSS.

reveal · one-shot · letters

Letters Pop In

Letters pop in from nothing with a springy overshoot, one after another. The overshoot comes from a cubic-bezier that goes past 1, so no keyframe juggling is needed.

reveal · one-shot · letters · playful

Flip In

The line swings down into place from a 90-degree tilt, with perspective. Set the transform origin to the top so it hinges like a sign being lowered.

reveal · one-shot · 3d

Pop In

The whole word scales up from half size with a little overshoot, like a notification badge appearing. One keyframe and a springy easing curve.

reveal · one-shot · playful

Wipe Reveal

The text is uncovered from left to right, as if a curtain were drawn back. A clip-path inset animation, so the text never moves; only what you can see of it changes.

reveal · one-shot · cinematic

Block Swipe Reveal

A solid bar in the accent color sweeps across, and the text is there when it passes. Two animations: the bar scales in from the left then out to the right, and the text appears mid-sweep.

reveal · one-shot · cinematic

Line Mask Reveal

Each line slides up out of an invisible mask, one after another, the way editorial sites reveal headlines. Every line is a clipping wrapper around a moving inner span.

reveal · one-shot · cinematic

Stroke Draw Text

The outline of each letter draws itself, then the fill fades in. This one is SVG text with an animated stroke dash, which is the only way to 'draw' letters without JavaScript.

stroke · one-shot · svg

Wave Text

The letters ride a wave, each one rising a beat after its neighbor. The delay comes from the per-letter index, so any word works without touching the CSS.

loop · letters · playful

Scrolling Marquee

Text scrolls endlessly from right to left with no seam. The trick is two copies of the content moving together by exactly one copy's width, so the loop point is invisible.

loop · scroll

Rotating Words

One word in a sentence cycles through alternatives, each sliding up to replace the last. The list ends with a repeat of the first word so the loop closes without a jump.

loop · reveal

Counting Number

A number counts up from zero to its target, with no JavaScript: a registered integer custom property is animated and rendered through a CSS counter. Ideal for stats sections.

one-shot · numbers

Blinking Text

Text that switches on and off, hard, with no fade. Use it sparingly and only for things that genuinely need attention, like a live indicator or a recording light.

loop · minimal

Breathing Long Shadow

A stacked, stepped shadow gives the text a chunky 3D look, and the shadow slowly extends and retracts as if the light were moving. Retro poster energy.

loop · 3d · retro

Jello Wobble

The word wobbles like jelly, skewing back and forth with decreasing force before settling. A loop with a long pause, so it draws the eye without becoming annoying.

loop · playful

Shake Text

A quick horizontal shake, the universal 'no' for a wrong password or invalid form field. Plays once here; in your app, add the class when validation fails.

one-shot · feedback

Floating Text

Text drifts gently up and down, like it is floating on water. Slow and small: a few pixels over three seconds is plenty to make a hero heading feel alive.

loop · subtle

Pulse Text

The text swells and relaxes on a slow beat. A single scale keyframe; use it on a call to action you want people to notice without moving anything across the screen.

loop · subtle · tailwind

Terminal Typing Effect

A small terminal window types a command, prints two lines of output, then drops to a fresh prompt with a blinking block cursor. The command types with steps() in ch units.

typing · retro · one-shot

Multi-line Typewriter Effect

Three lines type one after another, and the caret hops down to each new line when the last one is done. Each line carries its length and start time as custom properties.

typing · one-shot

Code Typing Animation

Three lines of syntax-colored JavaScript type into a small dark editor with line numbers, while the active-line highlight follows along. Colored tokens are spans inside each clipped line.

typing · colorful · one-shot

AI Code Autocomplete Animation

A function signature types in, a faint ghost suggestion appears below it with a Tab hint, then the key is pressed and the suggestion turns into real code. Good for AI coding tool pages.

typing · subtle · one-shot

Typo and Backspace Typing Effect

Types a word wrong, a red spellcheck squiggle appears, the caret backspaces over the mistake and types it again correctly. Three clipped spans share one caret, all pure CSS.

typing · playful · one-shot

Typewriter Effect with Pauses

Types like a person thinking: quick bursts, slow dots, a beat before the last word. Each segment of the keyframes has its own steps() count, and the caret only blinks during pauses.

typing · subtle · one-shot

Typewriter Effect for Any Font

A typewriter for proportional fonts: each letter is a span that appears on its own beat, and the caret rides on whichever letter was typed last. Shown here as a serif pull quote.

typing · letters · one-shot

Smooth Caret Typing Effect

Letters appear per keystroke while the caret glides to its new spot instead of jumping, then blinks with a soft fade, like a code editor with smooth caret on. Two animations make the glide.

typing · subtle · one-shot

AI Streaming Text Effect

An AI answer streams in word by word, each word resolving from a soft accent glow, with a pulsing dot at the end of the stream that fades once the reply is complete.

typing · words · blur · one-shot

Typewriter Carriage Return Effect

Like a real typewriter, the paper slides left one character per keystroke, then the carriage returns and feeds a new line. The paper's transform uses the same steps() as the typing.

typing · retro · one-shot

Chat Bubble Typing Animation

A chat bubble pops in with three bouncing dots, then stretches open and the message fades in where the dots were. The bubble grows with an animated clip-path, so nothing reflows.

typing · playful · one-shot

AI Prompt Typing Animation

A prompt types itself into an AI input box, then the send button lights up in the accent color with a small pop. Letters are spans with staggered delays, so any font works.

typing · letters · one-shot

Search Placeholder Typing Effect

A search field that types example queries into its placeholder, deletes each one and moves to the next. Three stacked phrases share one caret that sits after whichever is showing.

typing · loop · subtle

Vintage Typewriter Text

Each letter strikes the page with a little thump and ink spread, and lands slightly off its baseline like an old machine with worn typebars. Uneven rhythm and inking come from nth-child.

typing · retro · letters · one-shot

Sticky Note Typing Animation

A reminder types itself onto a tilted sticky note with ruled lines and a strip of tape. The count of letter delays runs across both lines, so the second line starts right where the first ends.

typing · playful · letters · one-shot

Command Palette Typing Animation

A query types into a command palette and the results re-rank as you watch: the match slides to the top, lights up and shows its highlighted term, the rest dim. Rows move with transforms only.

typing · highlight · one-shot

URL Bar Typing Animation

Three letters type into a browser address bar, the rest of the address appears as a highlighted inline suggestion, then Enter accepts it and a thin loading bar runs along the bottom.

typing · highlight · one-shot

OTP Code Input Animation

Six code boxes fill one digit at a time while the focus ring and caret step from box to box, then a small wave marks the code as complete. Each box reads its index from --i.

typing · numbers · one-shot

Password Typing Animation

Each character shows for a moment and then turns into a dot, the way phone keyboards mask passwords, while a strength meter fills and its label climbs from Weak to Strong.

typing · letters · one-shot

Character Counter Typing Effect

A commit message types in while a counter and a small progress ring keep count, tick for tick. One registered integer drives the counter text, the ring and the steps() typing together.

typing · numbers · one-shot

Terminal Boot Sequence Text

Status lines print one after another like a machine booting, each with a green-lit OK in your accent color, ending on a login prompt with a blinking underscore cursor.

typing · retro · one-shot

Scrolling Terminal Log Text

A live server log that never stops: each new request types in on the bottom row, then the feed scrolls up a line. The first rows repeat at the end, so the 4.5s loop has no seam.

typing · retro · loop

Receipt Printing Animation

A receipt feeds out of a printer slot in short jerky steps, torn edge first, like a thermal printer. The paper is a transformed block under an overflow clip, so the text never reflows.

typing · retro · one-shot

Select and Retype Typing Effect

Types a phrase, selects it with a highlight that sweeps back right to left, deletes it and types the next one, forever. Both phrases share one set of keyframes, offset by a delay.

typing · highlight · letters · loop

Typing Test Text Effect

The whole sentence waits in faint gray while typed characters light up over it and the caret steps along, like a typing speed test, then the result slides in underneath.

typing · subtle · one-shot

Terminal Spinner Text

The braille dot spinner from command line tools, cycling beside an install step while package names tick past below it. Both are columns of text that step up inside a one-line window.

retro · subtle · loop

Mention Chip Typing Effect

Typing @maya opens a small suggestion menu, then the name snaps into an accent-colored chip and typing carries on. The chip is a background plus a spread shadow, so the text never shifts.

typing · highlight · playful · one-shot

Glowing Typewriter Text

Letters arrive white hot, glowing in the accent color, and cool down to solid color a moment later, so the newest letters always burn brightest and the typing head leaves a fading trail.

typing · glow · letters · one-shot

Someone Is Typing Text

The chat status line with three bouncing dots after a name. The dots use the same bounce curve as Tailwind's animate-bounce, staggered with negative delays so they ripple from the first frame.

typing · subtle · loop · tailwind

Strikethrough Typing Effect

Types a claim, pauses, strikes through the wrong word and types the right one after it, a copywriting move for hero lines. The strike is a scaled line; the retyped word picks up the accent.

typing · playful · letters · one-shot

Word by Word Text Animation

Each word slides up out of its own hidden slot, tilted slightly, one after another. Every word is an overflow: hidden wrapper around a moving span, so the edge stays crisp.

reveal · words · cinematic · one-shot

Bouncing Letters Text Animation

Letters fall in from above one at a time, squash on landing and bounce twice before they settle. Each keyframe carries its own easing, so the fall speeds up like real gravity.

reveal · letters · playful · one-shot

Split Text Reveal Effect

The top half of the word slides in from the left and the bottom half from the right, meeting in the middle. Two clipped pseudo-element copies, then the real text takes over.

reveal · cinematic · one-shot

Reveal From Center Text Effect

A thin line grows at the center, splits in two, and the lines slide outward pulling the text open behind them. A clip-path inset and two border lines share one easing curve.

reveal · cinematic · one-shot

Rubber Stamp Text Effect

A bordered, tilted label slams down from above like a rubber stamp, shudders on impact and leaves a ring of ink that spreads and fades. Good for approvals, badges and sold-out tags.

reveal · playful · one-shot

Spotlight Text Reveal

The text waits as a faint ghost until a soft spotlight sweeps across it, then the light widens to show the whole line. Two mask layers: a radial spot and a low-alpha fill for the ghost.

reveal · cinematic · one-shot

Scattered Letters Assemble Effect

Letters start scattered and spun around the card, then fly home into a tidy line. Each span carries its own start offset and angle in custom properties, so one keyframe drives them all.

reveal · letters · playful · one-shot

Stacking Words Text Animation

Three words drop in from above and stack up, bottom first. Each lands with a squash, and the words underneath dip under the weight, using the separate translate and scale properties.

reveal · words · playful · one-shot

Light Sweep Text Reveal

A band of light crosses the empty line and leaves the text lit behind it. One gradient clipped to the text: solid, a pale highlight, then transparent, moved with background-position.

reveal · shine · one-shot

Fade In Left to Right Text

The line fades in from left to right behind a soft, feathered edge instead of a hard wipe. A gradient mask wider than the text slides across, so there is no clip line to see.

reveal · subtle · one-shot

Speed Slide In Text Effect

The text rushes in from the left leaning forward, trailing faint copies of itself, then brakes past its spot and rocks back upright. The trail is three text-shadows that collapse to zero.

reveal · playful · one-shot

Circle Reveal Text Effect

An iris opens from the center of the word while the text settles from slightly zoomed in. One clip-path circle that grows from 0% to past the corners, plus a small scale on the same element.

reveal · cinematic · one-shot

Swing In Letters Text Effect

Each letter drops in hanging from its top edge and swings back and forth like a sign on a hook, losing a little each pass. A damped pendulum written as alternating ease-in-out keyframes.

reveal · letters · playful · one-shot

Text Rise From Underline Effect

An underline draws itself first, then the text rises out from behind it with a small overshoot. The wrapper's overflow: hidden ends at the line, so the text appears to come out of it.

reveal · subtle · one-shot

Radial Wipe Text Reveal

A thin arm pivots from the bottom center like a windshield wiper, uncovering the text as it sweeps from left to right. A conic-gradient mask whose angle is a registered @property.

reveal · cinematic · one-shot

Letters Rotate In Text Effect

Each letter swings up into place around its bottom-left corner like a hinged gate, tipping slightly past vertical before it settles. The overshoot comes from a cubic-bezier above 1.

reveal · letters · playful · one-shot

Letter by Letter Blur In Text

Letters sharpen out of a blur one after another, so a wave of focus travels across the word. Unlike a whole-line blur in, the long overlap between letters gives a soft gradient of focus.

reveal · letters · blur · subtle · one-shot

Zipper Letters Text Animation

Odd letters drop in from above and even letters rise from below, closing left to right like a zipper. The direction comes from an nth-child custom property that one keyframe reads.

reveal · letters · playful · one-shot

Letters Zoom In Text Effect

Each letter rushes in from several times its size, blurred, and snaps into place with an expo ease-out. Reads like the letters are flying at the screen and landing on the page, one by one.

reveal · letters · blur · cinematic · one-shot

Reverse Stagger Text Animation

Letters slide in from the left starting with the last one, so the word builds from its end back to its start and each letter bumps into its neighbour. The delay counts down from --n.

reveal · letters · one-shot

Random Letter Reveal Text

The word sits as a faint ghost while its letters switch on in a shuffled order, each with a small pop. The order lives in a --d index on every span, so any permutation works.

reveal · letters · subtle · one-shot

Glow In Text Effect

Letters switch on one by one as bright, glowing shapes, then cool down to the plain text color as the bloom fades. The glow is a two-layer text-shadow that shrinks to nothing.

reveal · letters · glow · one-shot

Letters Spread From Center Effect

All the letters appear stacked on one spot in the middle, then fan out to their places like a deck of cards. Each offset is worked out in calc() from the letter's index and the count.

reveal · letters · playful · one-shot

Growing Letters Text Animation

Letters grow up out of the baseline one after another, stretching a little too tall and then settling with a squash. Only scale changes, from a bottom transform-origin, so layout never moves.

reveal · letters · playful · one-shot

Words Slide Together Text Effect

The first word slides in from the left and the second from the right, they collide in the middle with a squash and a small spark, then bounce apart and settle. Two keyframes, mirrored.

reveal · words · playful · one-shot

Diagonal Wipe Text Reveal

A slanted edge sweeps across the line while the text inside drifts the other way, so the reveal has depth. A clip-path polygon on the wrapper and a small translate on the text.

reveal · cinematic · one-shot

Venetian Blinds Text Reveal

The text opens behind horizontal slats, like venetian blinds tilting open. A repeating gradient mask whose stop is a registered @property, animated from 0% to 100% of each slat.

reveal · retro · one-shot

Halftone Dot Text Reveal

Each letter prints in as a halftone: a grid of tiny dots that swell until they merge into solid type, letter by letter. A radial-gradient mask tile whose dot radius is a registered @property.

reveal · letters · retro · one-shot

Unfold Text Animation

A line draws across the middle, then the text unfolds out of it vertically with a little overshoot, like an old TV warming up. The line is a pseudo-element; the text only animates scaleY.

reveal · retro · one-shot

Elastic Stretch Text Animation

The word snaps out from its left edge like a tape measure, overstretches, and wobbles back to size. Width and height trade off at each keyframe so the text keeps its volume.

reveal · playful · one-shot

Gold Text Effect

Banded metallic gold letters with a warm sheen that rolls across every few seconds. Fixed gold stops rather than your accent, plus a dark bronze drop shadow so it reads on light pages.

shine · loop · gradient

Chrome Text Effect

Polished silver lettering with a hard horizon line, the classic chrome look. The horizon glides up and down as if the letters were tilting under a sky tinted with your accent.

shine · loop · retro

Holographic Foil Text

Rainbow foil bands and a white glare slide across the letters at different speeds, like tilting a holographic sticker. Two layers on one alternating animation give the parallax.

gradient · shine · loop · colorful

Fire Text Effect

Flame tongues rise through red and orange letters while a blurred orange glow flickers behind them. The fill is tiled radial gradients moving up; the glow only animates transform and opacity.

gradient · glow · loop · colorful

Aurora Text Effect

Teal, green and violet bands drift through the letters while a pink veil drifts the other way, like the northern lights. Each layer is an em-sized tile that loops by exactly one tile.

gradient · loop · colorful

Sparkle Text Effect

Four-point stars pop and spin over a gradient word, one after another, like a magic label. Each star is a clip-path shape with its own position and negative delay set inline.

shine · loop · playful

Liquid Metal Text Effect

Silver letters with soft bright and dark reflections that slide and merge like mercury. Three radial blobs wander over a banded steel gradient, with a faint accent tint in the highlights.

shine · loop

Gradient Shadow Text

Solid text in the page color sits on an offset copy filled with a flowing gradient, like a two-color screen print. The copy is a pseudo-element read from a data attribute.

gradient · loop · retro

Glossy Shine Text

A crisp double streak of light flashes diagonally across glossy letters, then rests. Unlike a soft shimmer the text stays full color, and the pause keeps it from feeling busy.

shine · loop

Gradient Glow Text

A flowing gradient headline with a soft halo made of the same colors, so the glow changes hue under each letter as the colors travel. The halo is a blurred copy on the same keyframe.

gradient · glow · loop

Galaxy Text Effect

Letters filled with a violet nebula tinted by your accent while three layers of stars drift past at different speeds. The parallax comes from tiled dot layers, each moving whole tiles.

gradient · loop · colorful

Conic Gradient Text

A conic gradient turns inside the letters, so the colors sweep around the word like a slow radar. The angle is a registered @property, which is what lets a gradient animate at all.

gradient · loop · colorful

Candy Stripe Text

Diagonal stripes in your accent and a pale tint roll through heavy letters like a barber pole. The stripes are one small tile, the same trick as striped progress bars, moved by one tile.

gradient · loop · playful

Two-Tone Split Text

A slanted line divides the word into your accent and the page's text color, and slides back and forth. One hard-stop gradient, with currentColor as the second tone so it suits both themes.

gradient · loop · subtle

Mesh Gradient Text

Four soft color blobs wander inside the letters and blend like a mesh gradient. Each blob is a radial-gradient layer, and one keyframe moves all four along different paths.

gradient · loop · colorful

Pastel Rainbow Text

Six pastel bands rise through chunky letters like a scrolling rainbow flag, with a dusky drop shadow so the pale colors still read on white. The band stack is one tile that loops.

gradient · loop · colorful · playful

Ice Text Effect

Faceted, icy blue letters with sharp white refractions that slide across as if the block were turning in the light. Hard color stops make the facets; a dark edge keeps them crisp.

shine · loop

Lava Text Effect

Glowing molten letters with dark crust drifting across them in two layers, so cracks of bright orange open and close. Crust patches are tiled radial gradients moving in opposite directions.

gradient · glow · loop

Sunset Gradient Text

Warm amber letters slowly turn pink, then dusky violet, while a glowing sun sinks below the baseline, and back again. A tall vertical gradient slides up and down behind the text.

gradient · loop · colorful

Glass Text Effect

Tinted, see-through letters with a bright rim, a glossy top and a reflection that drifts across as they tilt. The tint is a translucent accent, and they cast a soft colored shadow.

shine · loop · subtle

Ripple Gradient Text

Rings of color spread outward from the middle of the word without end. A registered length property offsets every stop of a repeating radial gradient by exactly one ring per cycle.

gradient · loop

Gradient Loading Text

A gradient pours into faint letters from the left, holds, then drains out to the right, over and over. Half of an oversized layer is transparent, so one position animation does both halves.

gradient · loop

Embossed Text Effect

Raised letters with a lit edge and a shadowed edge, and the light slowly circles around them. Two text-shadows swap sides through eight keyframes, so the bevel turns smoothly.

loop · 3d · subtle

Staggered Letter Shine Text

A glint runs through each letter in turn and lifts it a hair, so the light seems to skip along the word. Every span has its own clipped gradient, delayed by its index.

shine · loop · letters

Pearlescent Text Effect

Satin letters tinted pink, lilac and aqua, with a soft round sheen gliding over them like light on a pearl. The pastel stops are mixed with your accent so they hold up on white.

shine · gradient · loop · subtle

Ocean Text Effect

Deep sea-blue letters with rings of light crossing inside them, like sun on shallow water. Two tiled layers of soft elliptical rings drift in opposite directions over a depth gradient.

gradient · loop · subtle

Iridescent Text Effect

An oil-slick sheen where every color shifts in place, without the gradient ever moving. It is one static gradient under a hue-rotate filter that turns a full circle.

gradient · loop · colorful

Glitter Text Effect

Fine white and gold flecks twinkle across a pink and accent gradient, like glitter catching the light. Three sparse dot layers jump between offsets with steps(), so the grains blink rather than slide.

shine · loop · playful

Color Morph Gradient Text

The two ends of a gradient fade between colors in place instead of sliding. Each end is a registered color property with its own keyframe, half a cycle apart, so the blend keeps changing.

gradient · loop · subtle

Gradient Pulse Text

A white-hot glow blooms out from the middle of the word in a quick double beat, then fades back to the accent. The bloom is a radial gradient whose radius is a registered percentage.

gradient · loop

Blur Rotating Text

The last word of a headline dissolves into a soft blur while the next one comes into focus, like a camera pulling focus. All words share one grid cell, so the line never shifts.

loop · words · blur · subtle

Split Flap Rotating Text

A departures board tile that flips to the next word: the top half falls forward, the bottom half lands with a little bounce. Each half is a clipped copy of the word read from data-text.

loop · words · 3d · retro

Pop Rotating Words

The old word shrinks away and the next one pops in with a springy overshoot and a small tilt. The bounce is a cubic-bezier that overshoots 1, set on the keyframe where the pop starts.

loop · words · playful

Wipe Rotating Text

A thin bar sweeps across the word slot, wiping the old word away and drawing the new one in behind it, like a video wipe transition. Both words and the bar share one clip-path easing curve.

loop · words · cinematic

Block Reveal Rotating Text

A solid bar in the accent color sweeps over the word, the word changes while it is hidden, and the bar pulls away to the right. Editorial and punchy; the bar flips its transform-origin mid-sweep.

loop · words · cinematic · reveal

Rotating Text in a Pill Badge

The changing word sits in a solid pill that squishes like jelly each time the next word rolls up into place. A vertical track with a repeated first word keeps the loop free of jumps.

loop · words · playful

Rotating Words with Animated Underline

Each word rises into the headline, an underline draws in beneath it, and before the swap the line retracts to the right. The underline is the word's own ::after, so it always fits the word.

loop · words · highlight

Falling Letters Rotating Text

Letter by letter, the old word tumbles out of the headline and the next one drops in from above with a small bounce. Every letter carries its index, and every word its slot, in custom properties.

loop · words · letters · playful

3D Flip Card Rotating Text

The word sits on a card that flips over on its vertical axis to show the next word on its back, settling with a slight overshoot. Every word is one face with backface-visibility hidden.

loop · words · 3d

Smoke Rotating Text

Letter by letter, the word drifts up, swells and blurs away like smoke while the next word condenses out of a haze. Each letter carries its index and each word its slot, so one keyframe runs them all.

loop · words · letters · blur

Horizontal Text Carousel

Words glide in from the right and leave to the left, like slides in a carousel, fading out at the edges of their slot. A mask-image gradient makes the soft edges, so it works on any background.

loop · words · subtle

Bouncing Rotating Words

Each word falls into the headline, squashes on impact, hops once and settles, while the old word drops out below. The squash is a scale on a bottom transform-origin, so the word lands on its baseline.

loop · words · playful

Sliding Highlight Text Effect

A pill of color slides from word to word, stretching toward where it is going like a liquid tab indicator. A white copy of the line is clipped to the pill, so the text under it inverts exactly.

loop · words · highlight

Color Changing Rotating Words

Each word tilts up into the headline in its own color, and the dot in front of the line changes to match with a small bump. The extra hues are mixed from your accent, so one variable retints all.

loop · words · colorful

Scrolling Word List Animation

A short list scrolls up one row at a time, the middle row lit in the accent color and its neighbors faded. Two copies of the list move together; the bright one is clipped to the middle row.

loop · words · subtle

Hello in Different Languages Animation

A greeting cycles through five languages, each one easing in from wide letter spacing with the language name underneath. Good for welcome screens and international landing pages.

loop · words · subtle · blur

Emoji Rotating Words

An emoji spins in with a springy pop and its word slides up a beat later, so each audience in the headline gets its own icon. The word runs 0.1s behind the emoji on the same keyframes clock.

loop · words · playful

Morphing Text Effect

Words melt into each other: both blur while they cross-fade, and an SVG alpha threshold turns the blur into gooey, liquid edges. Pure CSS plus one inline filter; keep the words short and bold.

loop · words · blur

Odometer Word Roll Text

Each letter sits in its own little drum and rolls to the next word a beat after its neighbor, like an odometer turning over. Words need the same length; a monospace font keeps the drums even.

loop · words · letters · retro

Strikethrough Rotating Text

Each word gets crossed off: a line draws through it, the word fades back, then it lifts away for the next one. Reads like a to-do list being cleared, which suits 'no more...' and 'stop...' headlines.

loop · words · stroke

Highlighter Rotating Words

Each new word fades in and a highlighter stroke sweeps under it from the left, slightly skewed like a real marker. The word stays in the text color; only the tinted stroke uses the accent.

loop · words · highlight

Code Token Rotating Text

A line of code whose string value flicks through options, each change flashing a faint highlight behind the token like an editor marking an edit. Same-length values keep the closing quote still.

loop · words · highlight

Picker Wheel Rotating Text

Words ride a 3D wheel like an iOS picker: the chosen one faces you in a tinted band while its neighbors tilt away above and below. Six faces set 60 degrees apart make one full turn.

loop · words · 3d

Glitch Rotating Text

Each word cuts in hard with a short glitch burst: tinted copies jump through clip-path slices and the letters jitter, then everything locks steady. steps() timing keeps the burst crisp.

loop · words · glitch

Auto Width Rotating Text

The chip resizes to hug each word as it rolls in, so the sentence closes up around short words instead of leaving a gap. A monospace chip lets width animate in exact ch steps per word.

loop · words · subtle

Slot Machine Rotating Words

A slot machine reel spins through the options with a touch of motion blur and lands on the next word with a small bounce. The reel is one long repeating list, so every spin moves the same distance.

loop · words · playful

Hinge Fall Rotating Words

Each word drops into the headline, then comes loose at one end: it swings on its first letter, wobbles and falls away before the next one lands. A damped swing in keyframes on a top-left pivot.

loop · words · playful

Rotating Words with Progress Bar

Segments under the headline fill like story progress bars while each word is on screen, and the word changes as its segment completes. One animated @property drives every segment through clamp().

loop · words · subtle

Bracket Rotating Text

Two brackets squeeze in on the word, pinching it to nothing, then spring back open around the next one. Each bracket rides a half-width layer, so translateX(100%) lands it in the middle.

loop · words · playful

Card Stack Rotating Words

Words sit on a small deck of cards: the top card flicks away, the one behind it slides forward, and a new card fades in at the back. Each card walks through back, front and exit on one clock.

loop · words · playful

RGB Split Glitch Text

Red and cyan copies of the word sit behind it and snap out of register in hard steps, like a misaligned video signal. The copies read from a data attribute and only move with transform.

glitch · loop · colorful

Slice Glitch Text Effect

The word tears along a horizontal line and the two halves jump sideways, then snap back together. Two clip-path halves of the same text move apart, so there is never a doubled copy.

glitch · loop

Scanline Glitch Text

Interlaced text with a solid, displaced strip rolling down it like interference on an old monitor. The stripes are a repeating gradient clipped to the text; the strip is a clip-path copy.

glitch · retro · loop

Glitch Burst Text

Sits perfectly still, then breaks up for a split second: the word jolts and skews while colored slices fly off, and it snaps back clean. The long rest is what makes the burst land.

glitch · loop · colorful

Datamosh Glitch Text

Thin bands of the word stretch sideways into streaks, as if the video file were corrupted, while the letters snap between skews. Each streak is a clip-path band scaled on the X axis.

glitch · loop

Neon Sign Turn On Effect

Every letter starts as a dead glass tube and stutters to life on its own schedule, then the sign stays lit. Plays once; per-letter delays sit inline so the stutter never looks mechanical.

neon · glow · letters · one-shot

Neon Outline Text Animation

Hollow neon tubes light up one letter at a time, hold, then switch off in the same order, like a casino marquee. Stroke-only letters get their glow from drop-shadow filters.

neon · stroke · letters · loop

Broken Neon Sign Text

A framed neon sign where every tube burns steadily except one letter, which buzzes, cuts out and comes back. Only that letter's span is animated; the rest is static glow.

neon · glow · retro · loop

Neon Glow Pulse Text

Soft neon that breathes: a blurred copy of the word behind it swells and fades on a slow cycle. Only the copy's opacity and scale animate, so the glow is cheap even at large sizes.

neon · glow · subtle · loop · tailwind

Synthwave Retro Text

An 80s chrome title with a pink glow over a neon grid that scrolls toward you. The grid is two gradient layers on a pseudo-element tilted with perspective; only its background moves.

retro · neon · colorful · loop

VHS Glitch Text Effect

An on-screen VCR label with red and blue chroma bleed, a nervous horizontal wobble and a noisy tracking band that rolls through it. Monospace text; the play icon is one clipped span.

glitch · retro · loop

CRT Screen Text Effect

Glowing text on a small curved CRT screen with scanlines, a vignette, a faint flicker and a bright roll bar drifting down. The layers are pseudo-elements; only transform and opacity move.

retro · glow · loop

8-Bit Pixel Text Animation

Chunky letters hop in a wave at the choppy frame rate of an old console, each over a hard pixel shadow. steps() on the hop gives the low frame count, and the shadow has no blur at all.

retro · letters · playful · loop

Insert Coin Arcade Text

An arcade attract-screen line: INSERT COIN blinks on a steady beat and swaps color each time, a pointer nudges beside it, and a credit counter sits underneath. All hard steps, no fades.

retro · playful · loop

Hologram Text Effect

Translucent, scan-lined letters float over a projector beam, flicker, and get swept by a bright scan bar. The lines are a scrolling mask, the beam is a clipped gradient under the word.

glow · glitch · loop

Matrix Rain Text Effect

Columns of falling glyphs rain down behind a word, each at its own speed, fading toward the top like a trail. Every column is vertical text moved with transform, desynced by negative delays.

glow · cinematic · loop

Cyberpunk Glitch Text

A yellow, corner-cut label in the cyberpunk UI style that jolts every few seconds while inverted slices of it tear sideways. The yellow is fixed; the slices use your accent color.

glitch · colorful · loop

Decrypt Text Effect

Each character spins through random symbols, then locks onto the real letter with a flash, left to right with a little jitter. The symbols are an animated content value on a pseudo-element.

letters · reveal · one-shot

LED Dot Matrix Text

Text built from glowing dots on a dark LED board, wiping on column by column, holding, blinking twice and clearing. A radial-gradient mask turns the letters into dots aligned with the board.

retro · glow · loop

Neon Border Trace Text

A neon sign whose frame is a dim glass tube with two sparks of light racing around it, while the lettering burns steadily inside. The frame is one SVG path with pathLength set to 100.

neon · glow · stroke · loop

Glitch Reveal Text

The word stutters into existence through torn slices and color-split flashes, then settles perfectly clean and stays. Plays once; clip-path slices do the tearing, two copies do the color split.

glitch · reveal · one-shot

404 Glitch Text

A big 404 whose digits glitch one at a time, jumping, skewing and splitting into red and cyan, above a quiet PAGE NOT FOUND line. Each digit shares one keyframe and has its own delay.

glitch · letters · loop

Random Flicker Text Effect

Individual letters drop out and stutter back at what looks like random, like a failing display. Each letter runs the same keyframe at its own duration and offset, so the pattern never lines up.

glitch · letters · loop

Two Color Neon Sign Text

Two neon words that take turns: both burn, one stutters off, the other hands over, then both come back. The second color is your accent pushed round the color wheel with hue-rotate.

neon · glow · words · loop

CRT Power Off Text Effect

The text collapses into a bright horizontal line, shrinks to a glowing dot and blinks out, then powers back on the same way, like an old tube TV. Scale transforms plus one pseudo-element line.

retro · glow · cinematic · loop

No Signal Static Text

A small screen full of TV static with a NO SIGNAL label that flickers in front. The noise is one inline SVG turbulence filter, drawn once and jumped between offsets with steps().

retro · glitch · loop

Old Film Flicker Text

A silent-movie title card: sepia frame, serif caps, a weaving gate, uneven brightness, jumping scratches and dust. Scratches and dust are background layers repositioned in steps.

retro · cinematic · loop

Misregistered Print Text

Letters printed on a paper swatch with a pink and a halftone yellow plate that drift in and out of register. The plates multiply over your accent, so overlaps darken like real ink.

retro · colorful · loop

Vaporwave Echo Text

A pastel word trailed by hollow outline echoes in pink, cyan and purple that slide out diagonally and back. Each echo is a stroked copy offset by its index, so one keyframe drives all three.

retro · stroke · colorful · loop

Electric Text Effect

Hot, glowing letters with small lightning bolts that crackle around them in quick double flashes. The bolts are inline SVG polylines, each flashing with steps() on its own delay.

neon · glow · cinematic · loop

Bouncing Text Animation

Letters take turns jumping with cartoon squash and stretch: a crouch, a tall stretch on the way up, a flat squash on landing. The pivot sits on the baseline, so they squash into the floor.

loop · letters · playful

Rubber Band Text Effect

The word is slowly pulled wide and flat, then let go: it snaps back past its shape, wobbles tall and wide a few times and settles. A long rest after each snap keeps it from nagging.

loop · playful

Swinging Text Animation

Letters hang on strings from a rail and swing. Each one has a slightly longer period than the last, like the pendulum wave toy, so the row keeps drifting in and out of patterns.

loop · letters · playful

Heartbeat Text Animation

A double beat, lub then dub, ripples through the letters with a soft glow on each thump. The stagger is only 40ms per letter, so it reads as one heartbeat rather than a wave.

loop · letters · glow

Breathing Text Effect

The word inhales, spreading its letters and brightening, holds, then slowly exhales. A matching text-indent balances the trailing letter-spacing, so the word stays centered as it grows.

loop · subtle

Levitating Text Effect

Each letter hovers on its own rhythm above a soft shadow that shrinks and fades as the letter rises. The shadow counter-moves with the same timing, so it stays on the floor.

loop · letters · subtle

Flipping Letters Animation

Letters spin a full turn on their vertical axis one after another, like coins flipped down a row, then rest. Each letter carries its own perspective() so the flip has depth without a wrapper.

loop · letters · 3d

Color Changing Text

Colors flow through the word letter by letter: your accent, then accent mixed with pink, then with amber, and back. Every color is a color-mix() of the accent, so one variable retints it.

loop · letters · colorful

Ripple Text Effect

A ripple spreads from the middle letter outward, each letter swelling and brightening as the ring passes. Each span carries its distance from the center, which sets its delay.

loop · letters

Earthquake Text Effect

Every few seconds the letters rumble, each one jolting and tilting in its own direction, then the ground goes still. Per-letter custom properties flip the direction, so one keyframe drives them all.

loop · letters

Wobbly Text Animation

Each letter wobbles like a jelly cube on a plate: pinned at the base, the top sways with shrinking skews until it settles. The wobble runs along the word, then everything rests.

loop · letters · playful

Seesaw Text Animation

A word balances on a plank that tips from side to side, sliding toward whichever end is low. The slide runs a beat behind the tilt, which is what makes the word feel like it has weight.

loop · words · playful

Rolling Wave Text

Every letter traces a small circle a little behind its neighbor, the way water moves under a passing swell. Rotate, translate, rotate back: the letter circles without ever tilting.

loop · letters · subtle

Popcorn Text Animation

Letters pop like kernels in a pan: a squeeze, a burst upward with a full tumble, a small rebound on landing. Hand-picked delays per letter keep the order looking random.

loop · letters · playful

Trampoline Bounce Text

The word drops onto a trampoline, sinks into the mat and gets thrown back up, forever. The mat is one pseudo-element: its bottom border curves into a sag as its height grows.

loop · playful

Dancing Text Animation

Odd and even letters bounce on opposite beats, so the word zigzags like it is dancing in place. It is Tailwind's bounce keyframe with a half-cycle delay on every second letter.

loop · letters · playful · tailwind

Springy Text Animation

Each letter is wound down onto a spring, released, and bobs above and below its resting line with shrinking swings. The squash and stretch rides along with the motion, pinned to the baseline.

loop · letters · playful

Balloon Text Animation

Each letter rides its own balloon on a string, bobbing and swaying from the end of the string at its own pace. Balloon colors are mixed from your accent, and the knot and string are pseudo-elements.

loop · letters · playful · colorful

Snake Text Animation

The letters ride a sine wave and tilt to follow its slope, so the word slithers like a snake. Rise and tilt are separate translate and rotate animations, a quarter cycle apart.

loop · letters · playful

Marquee Lights Text

Letters light up in the chase pattern of a theater marquee: every third bulb on, stepping along the sign. The delay is the letter index times one step, so any word chases without extra CSS.

loop · letters · glow · retro

Googly Eyes Text

The two O's in the word are eyes that glance left, glance right, roll up and blink. The pupils are pseudo-elements sharing one keyframe, and the blink squashes each eye with scaleY.

loop · playful

Sleepy Text Animation

The letters slowly slump and sag while a little z drifts up, then they jolt awake all at once with a startled hop. A slow ease-in for the droop and a snappy curve for the wake-up sell the timing.

loop · letters · playful

Tick Tock Text Animation

Letters lean one way, hold, then snap to the other side on the next tick, like a row of metronomes. The snap ripples along with a 30ms stagger, and an overshooting curve makes each one wobble.

loop · letters · playful

Equalizer Text Animation

Letters stretch up from the baseline like the bars of a music equalizer, each at its own tempo, brightening as they peak. Uneven per-letter durations mean the bars never fall into step.

loop · letters

Accordion Text Animation

The word squeezes in like an accordion: letters slide toward the middle and fold into alternating pleats, one shade lighter on every other fold, then stretch back out flat.

loop · letters · 3d

Domino Text Effect

The letters topple like dominoes, each one tipping over its bottom corner a beat after the one before, the last falling flat. Then they all stand back up and the chain starts again.

loop · letters · playful

Karaoke Bouncing Ball Text

A ball hops across the word, landing on one letter per beat, and each letter dips and lights up as it is hit. Fixed-width letter cells put every landing spot at a known multiple of the cell width.

loop · letters · playful

Dripping Text Effect

Drops of paint slowly swell under the letters, stretch, and fall away, each letter on its own schedule. Every drop is a pseudo-element that scales from its top edge, then drops and fades.

loop · letters

Echo Ping Text Effect

A copy of the word swells out from the text and fades, like a sonar ping or a live indicator. It is the same keyframe as Tailwind's animate-ping, applied to a word instead of a dot.

loop · subtle · tailwind

Font Weight Wave Text

A wave of boldness rolls through the letters, each swelling from thin to black and back. It animates font-weight, which is smooth with a variable system font and steps on older fonts.

loop · letters · subtle

Hand-Drawn Circle Around Text

A loose pen circle draws itself around one word in a sentence and overshoots where it started, like a real hand. One SVG path with pathLength="1", so the dash math is a single number.

highlight · one-shot · playful

Marker Highlight Text

A felt marker swipes across one word, then comes back lower in the other direction, and the overlap goes darker like real ink. Two skewed pseudo-elements with ragged rounded ends.

highlight · one-shot · playful

Hand-Drawn Box Around Text

A pen boxes in one word, one side at a time, each line a little crooked and running past the corner. Four empty elements that scale from their starting end, each delayed by its index.

highlight · one-shot · playful

Scribble Highlight Text

A marker scribbles back and forth behind one word until it is colored in, the way people fill a highlight by hand. One zigzag SVG path with round joins, drawn with a single dash.

highlight · one-shot · playful

Hand-Drawn Arrow Annotation

A curved pen arrow swoops up to a label, the head flicks on, and the words give a small nudge as it lands. Two SVG paths drawn one after the other; the nudge waits for the arrowhead.

highlight · one-shot · playful

Hand-Drawn Emphasis Lines

Three quick pen flicks burst from the corner of a word and it hops, the doodled 'look here' marks from landing pages. Three short SVG paths drawn one after another with pathLength="1".

highlight · one-shot · playful

Focus Brackets Text Effect

Four corner brackets fly in and lock around a blurry word, and the word snaps into focus as they land, like a camera finding its subject. The corners are one bordered element, rotated four ways.

one-shot · blur · cinematic

Strikethrough Price Animation

The old price gets a slanted strike and fades back, then the new price springs up beside it. Made for pricing cards and sale banners; the strike is a pseudo-element scaled from the left.

highlight · one-shot · numbers

To-Do Strikethrough Animation

A checkbox squishes, fills and ticks, then a line strikes through the task and the text fades back. The whole to-do list moment in one snippet; the tick is an SVG path drawn with a dash.

highlight · one-shot · subtle

Double Underline Animation

The bookkeeper's double rule under a grand total: one line draws left to right, the second comes back right to left beneath it. Two pseudo-elements, one keyframe, opposite transform origins.

highlight · one-shot · subtle

Brush Stroke Underline

A tapered brush swoosh paints itself under a word, heavy where the brush lands and thinning to a point. A filled SVG shape stretched to the word's width and uncovered with clip-path.

highlight · one-shot · subtle

Text Decoration Underline Animation

A real text-decoration underline rises into place with a little bounce and thickens as it lands. Because it is the native underline, it follows the text across line breaks and skips descenders.

highlight · one-shot · subtle

Letter by Letter Stroke Draw

Each letter traces its own outline in turn and inks in once it is drawn, like a word being lettered by hand. SVG tspans share one dash keyframe; the --i index staggers both the line and the fill.

stroke · one-shot · letters

Dotted to Solid Outline Text

Letters start as a dotted tracing outline, the dots stretch into dashes and join into a solid line, then a light fill settles in. The dots are zero-length dashes with round caps.

stroke · one-shot · subtle

Sticker Text Effect

The word slaps on like a sticker: it spins in, overshoots, and a thick rounded border grows out around every letter. SVG text with paint-order: stroke, so the border sits behind the fill.

stroke · one-shot · playful

Liquid Fill Text

Outlined letters fill with liquid that rises, drains and rises again, two wave crests rolling across its surface. Three background layers clipped to the text, moved on x and y by two animations.

stroke · loop · playful

SVG Text Stroke Animation

Four colored dashes chase each other around every letter outline, forever. Four copies of the same SVG text share one dash pattern and keyframe, and negative delays space them a quarter apart.

stroke · loop · colorful

Marching Ants Text

Letter outlines crawl like a photo editor's selection, dark dashes marching over a pale track. Two SVG text copies: a solid faint stroke, and a dashed one whose offset moves one dash per loop.

stroke · loop · subtle

Sketchy Outline Text

Pencil-hatched letters with two loose outlines that never sit still, the 'line boil' of hand-drawn animation. Three stacked copies jump between poses with steps(1), so nothing tweens.

stroke · loop · playful

Offset Outline Text

Hollow letters float over a solid copy that slides to each corner in turn, as if the light moved around them. The copy is a hard text-shadow, so a transparent fill still casts it.

stroke · loop · retro

Stacked Outline Text

Four outlined copies stack into a 3D extrusion and a fill runs back through them layer by layer, then drains the same way. Grid-stacked spans, each offset and delayed by its --i.

stroke · loop · 3d

Striped Shadow Text

Solid letters cast an offset shadow made of fine diagonal lines that scroll and breathe, the screen-printed look of retro posters. The shadow is a stacked copy with a tiled stripe clipped to it.

loop · retro

Rotating Dashed Circle Text

A dashed ring and a dotted inner ring turn slowly in opposite directions around a short word, like a sale badge or a stamp. Plain dashed and dotted borders on round elements, rotated.

stroke · loop · tailwind

Underline to Highlight Text

An underline draws in, then rises into a solid block behind the word while the letters flip to white in step with it, holds, and drains away. One easing on both, so the color edge tracks the block.

highlight · loop

Squiggly Underline Animation

A wavy line under one word flows sideways forever, like a playful link or a spelling mark with personality. The SVG wave is wider than the word and slides by exactly one period.

highlight · loop · playful

Morphing Underline Animation

The underline gathers into a dot, hops over the word and lands as its full stop, then drops and rolls back to stretch out again. One pseudo-element: clip-path trims it, transform moves it.

highlight · loop · playful

Glowing Underline Animation

A glowing comet runs along a faint underline and trails off, over and over, for launch and coming soon lines. The comet is a gradient tile on a pseudo-element with a drop-shadow glow.

glow · loop · subtle

Read Along Highlight Text

A soft pill lights up behind one word at a time and the word takes the accent, like read-along captions or text to speech. Every word shares one keyframe, delayed by its --i index.

highlight · loop · words

Redacted Text Effect

Black bars swipe across the sensitive words like a censor's marker, hold, then lift off to the right. The bars are currentColor, so they are black on light pages and white on dark ones.

highlight · loop · words

Selection Box Text Animation

A design tool selection clicks onto a headline: hairline frame, four handles, and a cursor that grabs a corner, scales it up and back, then lets go. One transform scales it all from the center.

highlight · loop · subtle

Odometer Number Animation

Digits roll up into place like a car odometer, each column on its own strip, with the right-hand columns spinning through extra turns. One keyframe, driven by a --to value per column.

numbers · one-shot

Flip Clock Animation

A flip clock whose seconds cards fold down every second, top half falling to reveal the next digit. The digits come from a registered integer and a cyclic @counter-style, so 9 wraps to 0.

numbers · 3d · loop

Split Flap Display Text

Letters rattle through the alphabet on dark tiles and land one by one, like an airport departure board. Each tile counts with an alphabetic @counter-style, so no letters are hard-coded in CSS.

letters · retro · one-shot

Percentage Counter Animation

A percentage counts from 0 to 100 while a bar fills beside it on the same easing, then the label flips to Complete. The number is a registered integer printed through a CSS counter.

numbers · one-shot

Star Rating Counter

A review score counts from 0.0 to 4.9 while five stars fill to match. One integer is animated; the whole and tenths digits are derived from it by two more registered integers.

numbers · one-shot

Countdown Number Animation

Counts down from 10 to 0 with a punch on every tick, then GO! bursts in and stays. The tick length is one variable; the number is a registered integer stepped with steps().

numbers · playful · one-shot

Seven Segment Digital Clock

An LED clock drawn from real seven-segment digits, seconds ticking and the colons blinking. Each segment reads a ten-cell color strip, so any digit is just --d: 0 to 9 on the element.

numbers · retro · glow · loop

Infinite Scrolling Text

Big display words scroll endlessly, alternating solid and outlined, with star separators and edges that fade out. Two copies move by one copy's width, so the loop point never shows.

stroke · loop

News Ticker with Live Badge

A breaking news bar: a pulsing LIVE badge pinned on the left while headlines scroll past behind it. The headline track is the two-copy marquee, faded where it slides under the badge.

loop · words

Rotating Circular Text

Text set on a circle spins slowly around a round button with a bobbing arrow, the classic scroll-down badge. SVG textPath with textLength, so the phrase always closes the circle exactly.

loop · letters · tailwind

Slot Machine Number Animation

Three reels spin with motion blur and stop one after another, each overshooting a touch before it settles on 7, then JACKPOT fades in. Each reel is a digit strip with its own duration.

numbers · playful · blur · one-shot

Animated Price Counter

A pricing-table price counts up to $49 while the cents spin through their digits and land on .99. Dollars and cents are two registered integers; the cents pad to two digits with a counter style.

numbers · one-shot

Stats Counter Animation

Three stats count up one after another, and each suffix (+, %) pops in once its number lands. One keyframe serves all three: every stat passes its target in --to and its order in --i.

numbers · one-shot

Year Counter Timeline

A marker hops along a timeline from 2020 to 2026, pausing on each tick while the year in its bubble changes. One registered number drives both the marker and the filled line.

numbers · one-shot

Views Counter Animation

A view count ticks up to 999 and then rolls over: the digits slide out the top and 1K views springs up from below. Useful for social posts and video stats. One integer, two pseudo-elements.

numbers · playful · one-shot

Circular Countdown Timer

A ring drains over ten seconds while the number inside counts down, and both turn red for the final three. The ring is an SVG circle with pathLength 100, so the dash math is just 0 to 100.

numbers · loop

Stopwatch Timer Animation

A running stopwatch: minutes and seconds tick while the hundredths blur past, and the hand on the icon jumps once a second. Three registered integers, each stepped at its own speed.

numbers · loop

Launch Countdown Timer

The launch-page countdown: days, hours, minutes and seconds in boxes, with each new second dropping into place. Seconds and minutes are registered integers stepped down with steps(60).

numbers · loop

Stock Ticker Animation

A market ticker tape: symbols, prices and green or red changes with arrows glide past on a thin band. The tape is a two-copy marquee, so it can hold any number of quotes without a seam.

numbers · loop

Crossed Two Row Marquee

Two tilted ribbons cross in an X and scroll in opposite directions, the loud look of agency and streetwear sites. Same keyframe for both rows; the second simply runs it in reverse.

loop · words · playful

Vertical Marquee Text

A feature list scrolls upward without end inside a short window, fading in at the bottom and out at the top. The same two-copy trick as a horizontal marquee, turned on its side.

loop · words · subtle

Marquee That Pauses on Hover

A strip of tag pills scrolls sideways and freezes the moment the pointer lands on it, so any pill can be read or clicked. One line does it: animation-play-state: paused on :hover.

loop · words

LED Scrolling Sign Text

A dot-matrix LED sign: text scrolls behind a fixed grid of round pixels, so it lights them up as it passes, over a field of dim unlit dots. The grid is a radial-gradient mask; no images.

loop · retro · glow

Rotating Badge Text

An Open 24/7 stamp: a ring of letters turns slowly around a bold center, inside a thin outline and a dashed inner ring. Each letter is a span rotated by its index, so no SVG is needed.

loop · letters · tailwind

Score Counter with +10 Pop

A game score takes five hits: each time a +10 floats up and fades while the total punches up by ten. The score is a registered integer stepped with steps(5, start) in time with the pops.

numbers · playful · one-shot

Binary Counter Animation

Eight bits count upward in binary, each one flipping at half the speed of its right-hand neighbor, with the decimal value beside them. Every bit is one keyframe whose duration doubles.

numbers · retro · loop

Calendar Date Flip Animation

A tear-off desk calendar: every page lifts off the top and flips away, uncovering the next date and weekday. Day and weekday are counters over one integer, each with its own cyclic @counter-style.

numbers · 3d · loop

Elevator Floor Indicator

An elevator display rides up from floor 1 to 6 and back, the number sliding in from the direction of travel with a lit up or down arrow. One strip of floors, moved by generated keyframes.

numbers · retro · loop

Live Price Ticker Text

A live quote that ticks every second, flashing green when the price rises and red when it falls, with a matching arrow. The six prices, colors and arrows all come from generated keyframes.

numbers · loop

Dice Roll Animation

A die drops in tumbling, bounces twice with a squash on landing, and flickers through faces before it settles on five. Pips read a six-cell color strip, so a face is just a number.

numbers · playful · one-shot

3D Extruded Text Effect

Heavy block letters with visible depth tilt slowly left and right in 3D, and the extruded side swings to follow the tilt. The depth is ten stacked text-shadow layers in darker accent shades.

3d · loop

3D Spinning Text

The word spins a full turn on its vertical axis, slowing at the front and at the back so both faces stay readable. The back face is a darker copy, and a floor shadow narrows as it turns edge-on.

3d · loop

3D Text Cube Rotation

Two words sit on the faces of a 3D box that rolls a quarter turn upward, holds, then rolls again with a springy settle. Four faces placed with rotateX and translateZ inside a preserve-3d box.

3d · words · loop

Folding Paper Text

A paper label folds its top half down over the bottom half, holds, then opens again, shading as it turns. The flap is a preserve-3d pair: the printed front half and a plain back.

3d · loop

3D Rotating Text Cylinder

Letters wrap around an invisible 3D drum that turns slowly, with the far side showing through faintly in mirror image. Each letter is turned around the Y axis and pushed out with translateZ.

3d · letters · loop

Star Wars Text Crawl

Story text scrolls up a tilted plane and shrinks toward a vanishing point, like a space opera's opening crawl. A rotateX plane inside a perspective box, faded out at the far end with a mask.

3d · cinematic · loop

Movie Title Zoom Out

A movie title starts huge, faint and out of focus, then settles to its final size as it sharpens. One keyframe animates scale, blur and opacity together on a long ease-out curve.

cinematic · blur · one-shot

Slam Text with Camera Shake

A title drops onto the screen from above the camera, lands hard, and the frame shakes as a flash of light bursts behind it. Plays once and ends still, good for game and trailer intros.

cinematic · playful · one-shot

Kinetic Typography Text

Three words arrive one after another from different directions, the camera drifts, then the whole block spins away and it starts over. Kinetic typography built from four timed keyframe tracks.

words · cinematic · loop

Shattering Text Effect

The word cracks into seven shards that fly apart in 3D, drift, then snap back together into solid text. Each shard is a copy of the word cut out with a clip-path polygon and moved with translate3d.

3d · cinematic · loop

Rack Focus Text Effect

Two words at different depths trade focus like a camera pulling focus: one sharpens while the other goes soft, then back. Blur, opacity and a hint of lens breathing on a slow ease.

blur · cinematic · words · loop

Movie Trailer Title Text

Letters fade in from a blur and drift slowly apart while the title holds, then dissolve, like a trailer title card. Each letter moves by its distance from the middle, so only transforms animate.

cinematic · letters · blur · loop

Film Credits Roll

Two columns of roles and names roll upward through a faded window, like the end credits of a film. The list is duplicated and moved by exactly half its height, so the loop has no seam.

cinematic · subtle · loop

Slow Push In Title

A widescreen frame with a dark vignette slowly pushes in on a film title, fading up from black and back down at each end. A linear nine second scale reads as a steady camera move.

cinematic · subtle · loop

Zoom Through Text

Words fly out of the distance, hold for a beat, then rush past the camera as the next one arrives. Each word travels along the Z axis inside a perspective box, staggered by a delay.

3d · words · cinematic · loop

Echo Trail Text Effect

The word slides across and back while four fading copies trail behind it, spreading out at full speed and catching up when it stops. The copies share one keyframe with small delays.

playful · loop

Layered 3D Text Effect

Five copies of the word at different depths, each shifted in hue, sway in 3D so the layers fan apart like a paper cut. Two nested rotations on different timings trace a smooth figure eight.

3d · colorful · loop

Isometric 3D Text

Flat isometric lettering rises off the floor into solid blocks, holds, then sinks back down. Twelve stacked copies move up the Z axis by their index, so the extrusion grows as one piece.

3d · loop

3D Book Opening Text

A closed book swings its cover open on the spine to show the first line inside, holds, then closes again. The cover is a two-sided preserve-3d panel, and the book slides over to stay centered.

3d · loop

Glossy Floor Reflection Text

The title drops onto a glossy floor and bounces to rest while its faded mirror image rises to meet it from below. The reflection is a flipped copy under a gradient mask, on the same keyframes.

cinematic · one-shot

Clapperboard Text Animation

A film slate with the scene and take written on it: the striped clapper lifts, snaps shut with a jolt, then eases open again. The stripes are repeating gradients and the stick hinges on its left end.

cinematic · playful · loop

Spin In Text with Motion Blur

The title spins in on its vertical axis for three turns, blurred at speed and sharpening as it slows to a stop facing you. Plays once: rotateY, scale and blur on one long ease-out.

3d · blur · one-shot

3D Parallax Title Card

A title card tilts slowly in 3D while its eyebrow, headline and tagline float at different depths, so they slide past each other in parallax. Each line sits at its own translateZ inside the card.

3d · cinematic · loop

Hinge Drop Text

A CLOSED sign loses its right nail, drops, and swings on the left one before settling at a crooked tilt. A damped rotation around the remaining nail that plays once and stays put.

playful · one-shot

Pop Out 3D Text

The word lifts off the page toward you with a slight tilt while its shadow stays behind, spreading and softening, then settles back with a small bounce. translateZ in a perspective box.

3d · loop

Moving Light Shadow Text

A small light swings in an arc above the word and its soft shadow slides the other way, short when the light is overhead and long when it is low. Light and shadow share one alternating clock.

3d · subtle · loop

Anamorphic 3D Text Illusion

Letters float at very different depths and only line up into a word from one angle. The view swings through that angle, so the word forms and scatters again. Each letter is scaled to cancel its depth.

3d · letters · loop

Twisting Text Effect

The word is sliced into eight bands that each spin a full turn a moment after the one above, so it twists like a ribbon before settling flat. The bands are clip-path slices of the same text.

3d · loop

Hanging Sign Swing Text

An OPEN sign hangs from a nail on two strings and swings toward you and away in 3D. A rotateX pendulum pivoting on the nail, with perspective so the bottom edge grows as it comes near.

3d · playful · loop

Spinning Newspaper Headline

A front page spins in from the distance like an old movie montage and lands slightly askew with a headline across the top. Plays once: a spin, a scale and a small overshoot on landing.

cinematic · retro · one-shot

How to use these text animations

Open any effect, copy the HTML into your markup and the CSS into your stylesheet. Nothing else is required. Classes are prefixed per effect so several can share a page.

To change the color, set --txt-color on the element or any ancestor. To change the size, set --txt-size: offsets, shadows and letter spacing are all in em, so they follow the font size.

One-shot effects such as the typewriter and the reveals play when the element appears. To trigger them later, add the class when you need it, or toggle animation-play-state.

Every snippet ships with a prefers-reduced-motion rule that jumps straight to the finished state for people who asked their OS for less motion, so the text is always readable.

Frequently asked questions

How do I make a typewriter effect in pure CSS?

Put the text in an element with white-space: nowrap and overflow: hidden, then animate its width from 0 to the text length in ch units using steps(). A blinking border-right plays the caret. The typewriter entry above is the complete snippet.

How do I animate gradient text in CSS?

Apply a gradient as the background, clip it to the text with background-clip: text and a transparent color, then animate background-position with a background-size larger than the element. The gradient and rainbow entries show both a brand-colored and a full-spectrum version.

How do I animate text letter by letter?

Wrap each letter in a span and give each one an index in a custom property, such as style="--i: 3". The animation delay is then calc(var(--i) * 60ms), so one keyframe animates any word. The letters rise, letters pop and wave entries use this.

Can text animations run without JavaScript?

Every entry in this directory is CSS only, including the counting number, which uses a registered custom property and a CSS counter. JavaScript is only needed if you want to start an effect on scroll or on a click, in which case you add the class at that moment.

Are these text animations accessible?

The text stays real text, so screen readers and search engines read it normally. Each snippet includes a prefers-reduced-motion rule that skips to the finished state. Use blinking and glitch effects sparingly, and never for body copy.