A kinetic type wall for a hero or a section opener. One word is repeated across a small grid; the rows sit staggered at rest, splay outwards as the whole grid zooms in, and are then cut away by a sweep that crosses each row until exactly one word is left standing in the dead centre of the stage. It holds there long enough to be read, and the reverse sweep writes the wall back in. The whole thing loops without a seam. The grid is forced to an odd number of rows and repeats, because the effect is defined by the one word at the exact geometric centre and an even count has no centre to leave behind -- the control shows the number you asked for, the stage shows the odd number it had to become. The splay is a fan rather than a walk: a row travels further the further it sits from the centre row, and alternates direction with parity, so the wall opens symmetrically about the surviving word and a tall grid reads as depth instead of as a repeating pattern. The wipe is a clip rather than a fade, because type that fades leaves grey ghosts over the word you are meant to be reading, where type that is cut simply disappears; the cut travels along the row, each word taking half the wipe window and starting at its own share of the rest, so the sweep reads as one edge crossing the row rather than as words blinking out together. The engineering underneath is a single animation frame loop driving one clock: every element is posed from the current time by pure functions, so there is no per-element tween state, dragging a control re-poses the wall on the next frame instead of restarting the cycle, and changing the speed stretches the pose you are looking at rather than teleporting to a different beat. Every span of the timeline -- the splay, the sweep, the return and the reveal -- is proportional to the expand control, so slowing the effect down slows all of it. It stops entirely when it scrolls out of view or the tab is hidden, resumes where it paused rather than jumping most of a cycle, holds the full legible wall under prefers-reduced-motion, and sits on nothing at all by default: the stage is transparent, so the type composites over whatever is behind it. Word, typeface, size, weight, tracking, case, colour, grid size, gaps, drift, resting offset, zoom peak and both timings are editable, and the export is one self-contained HTML file with no dependencies at all.
In collections: Text Animations & Kinetic Typography
Guide: Text Reveal Effects: Keep the Message Understandable Without Motion· Rotating Headline Text: Write a Sentence That Still Works When It Stops· HTML Marquee Is Deprecated: How to Build a Modern Marquee
Effect · HTML / CSS / JS · All tools