Split-flap board
CSS + JSA departure board: each character is four half-height leaves, and a change drops the old top half and lands the new bottom half. JS only swaps the letters and restarts the CSS animation.
Every one runs live, with a step-by-step explanation and code you can edit and paste into your own project.
A departure board: each character is four half-height leaves, and a change drops the old top half and lands the new bottom half. JS only swaps the letters and restarts the CSS animation.
Four words on the four long sides of a prism that turns a quarter at a time, pausing on each. After 360° it is back where it started, so the loop has no seam.
One word stacked twenty times along the Z axis. Laid on a tilted floor, the copies merge into a solid extrusion under a gradient front.
Paragraphs scroll away on a plane tipped back 55°. The fade into the distance is an overlay on top, because a mask on a 3D ancestor would flatten the scene.
A stack of hard text-shadows, each one step further and a little darker, reads as solid depth.
Real depth this time: ten copies of GO DEEP stacked along Z, so perspective is correct.
The extrusion is a stack of text-shadows whose direction follows your pointer.
Every letter does the same flip; the stagger turns it into a wave.
A word wrapped around a ring, one character per slice, standing on a rim you can see all the way round.
A headline printed across three panels folded like a brochure. Each panel is a window onto the same wide sheet; hover or focus flattens the paper.
A red and a cyan copy of one word, blended with screen. The pointer sets how far apart they sit and turns the card, like old red/cyan cinema glasses.
Every letter sits on its own cube. The cubes roll forward a quarter turn one after another, so CUBE becomes ROLL and back; after four turns each cube is where it started, so the loop has no seam.
WAVING RIBBON on two lines of violet slats, one letter each. Every slat runs the same twist, offset by a step of the loop, so the row reads as a ribbon turning in a wind, and the twist stops short of edge-on so every letter stays readable.
OPEN in pink neon inside a teal tube frame, standing off a dark backboard on little brackets, the board hanging on two chains and turning slowly. The tubes light the board behind them with a soft cast glow, and every so often the E stutters.
A wooden rubber stamp with a violet knob drops onto a paper card, presses and lifts away, and APPROVED is there in ink. The ink appears at the moment of contact, hidden under the stamp, and fades before the next press, so the loop has no seam.
Columns of green code fall through the dark at four layers of depth, each with a bright leading glyph and a tail that dims behind it. One perspective makes the far columns small and slow and the near ones large and fast, so the rain has real depth, in pure CSS. Near and far columns take turns across the canvas and never cross, so every glyph falls on black.
A rounded mint typewriter types "Hello," and then "3D world." on its sheet, one letter at a time: a typebar swings up out of the fan, the letter appears on the paper and the carriage steps one character left. At each line end the carriage returns and the text rolls up a line, all on one CSS clock with steps() and per-letter delays; the body is a stack of rounded slices.