React text effect components for Tailwind CSS
Text & Effects collects animated pieces that are there for character more than for function. Right now it holds one component, Gravity Letters: a playful gravity field where letters, numbers, emoji or any components you pass fall and pile up like real objects. The field opens by pouring its initial text onto the floor, letter by letter. Click or tap anywhere to drop a glyph, or press and hold to pour a steady stream that follows the pointer. Glyphs tumble as they fall, bounce softly when they land and settle into rounded hills. Use it for a playful 404 page, an empty state, a launch page or a hero that invites people to touch it.
All Text & Effects[1]
About Text & Effects
On phones, tilt the device to spill the pile toward the low side. With reduced motion turned on, glyphs appear straight on the pile instead of falling. Like every component in the library it is one file you copy into your project, with its visual aspects exposed as props. Other animated components live in their own categories: Animated Counter in Charts & Stats, Fluid Orb and Matrix Orb in the AI Kit, and Gooey Nav in Navigation. It is free: the source is open to everyone through the CLI, shadcn and the docs page (the MCP server needs a free account key).