Text Animation Components

Text effects for headlines, status lines and loading states: typing, split-flap boards, glitches, spoilers and hand-drawn markers. Each one is a React component built with Tailwind CSS and Motion.

• TX-01Typing TextUpdatedTypewriter text that makes the odd typo and corrects it, erases by selecting, and blinks its caret only when idle, built with React and Motion.
• TX-02Dynamic TextUpdatedMorphing text where shared letters travel, old ones fall and new ones land, with decode and cycle modes.
• TX-03Glitch TextUpdatedFlat text that cuts into hard-shifted bands with a thin red/cyan split, on idle, hover or text change.
• TX-04Extruded TextUpdatedZinc 3D extruded text lit by your pointer, with letters that press in like keycaps.
• TX-05Plucked TextNewA headline sitting on a string you can pluck, strum and let ring, built with React and real string physics.
• TX-06Cradle TextNewA headline hung like a Newton's cradle, so a knock on one letter clacks through the word, built with React and pendulum physics.
• TX-07Spoiler TextNewInline text hidden under drifting specks, like a chat spoiler. A click blows the specks away from the point you touched.
• TX-08Marker TextNewHand-drawn highlights, underlines, circles, boxes and strikes that draw themselves in reading order when the text comes into view.
• TX-09Shadow TextNewA headline that works as a sundial. Each letter casts a long, soft shadow set by the reader's clock, and bringing the pointer close turns it into a lamp.
• TX-10Split Flap TextNewDeparture-board lettering for headlines and status lines. Each tile flips only as far as its new letter, on a hinge, a beat after its neighbour.