AI CSS Animations

CSS Retro Text Effects

48 retro text animations in CSS: CRT screens with scanlines and flicker, phosphor terminals, 8-bit pixel type, arcade blinks, VHS tracking and Windows 95 chrome.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Mechanical Odometer Rolling Digits

A dashboard odometer: the red tenths drum turns nonstop and each full turn carries into the next drum, with shaded cylinders. Every drum is a digit strip with its own timed roll.

numbers · retro · 3d · loop

Windows 95 Copy Dialog

A Windows 95 copy dialog: a page flies between folders while the block progress bar fills chunk by chunk and the seconds left count down. Crisp 1px bevels from inset box-shadows, no images.

retro · numbers · loop

95 Style Startup Screen Text

A Windows 95 style splash: drifting clouds on a blue sky, a chunky wordmark, Starting up with dots ticking, and the gradient bar sliding along the bottom. Gradients only, seamless loop.

retro · gradient · loop

Mac System 7 Welcome Screen

A classic Mac startup: Welcome to Macintosh in a 1-bit box on a dithered desktop, a progress bar filling, and extension icons hopping in along the bottom. Hard shadows, a 2px conic dither.

retro · playful · loop

BIOS Memory Test Boot Text

A green phosphor BIOS screen counts the memory test up to 65536K OK, then prints the drive check and Press DEL with a blinking cursor, under scanlines, glow and curved corners. One stepped integer.

retro · numbers · typing · glow · loop

Amber Monitor Text

An amber phosphor screen types a command, each fresh letter flaring white-hot then cooling to amber, and the screen fades out slowly with afterglow before the next run. Curved glass and scanlines.

retro · typing · glow · loop

VHS Camcorder REC Timestamp

A camcorder viewfinder: REC blinks in red, the date sits in the corner and the clock ticks every second, while a tracking band rolls through and jolts the OSD. A stepped integer and gradients.

retro · numbers · glitch · loop

Teletext Page Text

A teletext set hunts through pages 284 to 300, then the SPORT page paints in row by row with a double-height headline, while the header clock ticks. Monospace text and stepped integers.

retro · numbers · loop

Arcade Continue Countdown

An arcade CONTINUE? screen: a chunky pixel digit counts 9 down to 0, popping on every tick, then GAME OVER blinks in. The digit is a 5 by 7 bitmap grid where each pixel reads its own on and off strip.

retro · numbers · playful · loop

Flip Dot Sign Text

A bus stop flip-dot board turns from CITY to 2 MIN and back, each disc flipping edge-on and landing on its other face in a wave across the columns. A 5 by 7 bitmap built into the markup.

retro · letters · 3d · loop

Nixie Tube Counter

Four nixie tubes glow orange behind a fine mesh, with the unlit cathodes faint behind, then flicker through digits and land on a new number, tube by tube. One stepped integer per tube.

retro · numbers · glow · loop

How to use these retro text effects

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.