Extruded letters lit by the pointer.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/swoosh-textPlayground
Swoosh Textrest
Original
Style
Icons animation
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/swoosh-text
Accessibility
- Read as one image labelled with the text.
Motion
- The depth swings with the pointer, and a press sinks the letters nearby.
- With reduced motion, it holds the rest pose.
Responsive behavior
- 40 px on Web and 32 px on a phone.
Performance
- Pointer moves write CSS variables directly, so the letters react without a React render.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import SwooshText. Props: text, styleKind, animated.
- The effect needs a pointer. On touch, a press sinks the nearby letters.
- Keep it to one short word in a display size.
Related
Glitch TextComponentRed and cyan slices tear a word on hover, or when a status changes.Type WriterComponentTypes words like a person: typos, a selection and a blinking caret.Marker TextComponentMarks drawn by hand over copy: highlight, underline, circle, box and strike.Split Flap TextComponentAn airport board: each cell flips through the alphabet until it lands.