Shadcn.io is not affiliated with official shadcn/ui
Wobble Text
Letters wiggling with continuous rotational oscillation and a soft scale pulse for a gelatin-like animated text effect for React applications.
Wobble Text preview
Type that wobbles like jelly. Each character oscillates around its own pivot — a small rotation back and forth paired with a subtle scale pulse — and every letter gets a different phase offset so the word looks like a single piece of gelatin caught mid-jiggle. The motion is driven by Motion's useTime + useTransform, which means the animation is a pure analytic function evaluated on the GPU rather than a keyframe loop, so it never resets and stays smooth indefinitely. Hover the word to push the wobble into overdrive (configurable). Drop it into a hero, a 404, or a playful CTA — anywhere serious type is overrated.
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 wobble-text text effect into my projectRelated Components
Wave Text
Continuous traveling sine wave through text
Shimmering Text
Wave-like color shimmer across text
Fuzzy Text
Soft blur transitions with particle-like text effects
Glitch Text
Digital glitch effects with RGB channel separation
Falling Text
Physics-based letters that drop and pile
Text Pressure
Variable font weight responding to cursor proximity
FAQ
Was this page helpful?
Sign in to leave feedback.