Shadcn.io is not affiliated with official shadcn/ui
Drift Text
Letters drifting autonomously with independent low-amplitude pseudo-random motion on x, y, and rotation for React applications.
Drift Text preview
Letters that drift like wind through paper. Each character has its own continuous, low-amplitude motion on x, y, and rotation — driven by two summed sine waves at different frequencies with a unique per-letter phase offset, so the whole word stays legible but feels alive, like leaves rustling. No entrance animation, no synchronized wave — every letter is independent and the motion never visibly repeats. Built with Motion's useTime + useTransform so the animation runs as analytic functions on the GPU, never resetting and never stuttering. Configurable intensity and speed. Perfect for hero copy, ambient backgrounds, and anywhere you want type that quietly breathes.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this text effect for you — no copy-paste, no CLI:
use shadcnio to install the drift-text text effect into my projectRelated Components
Wave Text
Letters undulating along a sine wave
Fuzzy Text
Soft fuzzy distortion on text
Shimmering Text
Wave-like color shimmer across text
Text Trail
Character trails that follow cursor movement
Blur Text
Text animation from blur to focus
Variable Proximity
Variable font axes respond to cursor proximity
FAQ
Was this page helpful?
Sign in to leave feedback.
Dot Matrix Text
LED dot-matrix display rendered as 5x7 character bitmaps with optional glow and horizontal scroll, for React, Next.js, and Tailwind CSS.
Drop Cap Text
Editorial-style illuminated drop-cap that scales the first letter to span multiple lines, with the paragraph wrapping naturally and an animated reveal for React applications.