Shadcn.io is not affiliated with official shadcn/ui
Pop Text
Cartoon impact reveal with overshoot scale, sequential stagger, and an optional comic starburst graphic on each letter for React applications.
Pop Text preview
Letters slam in like a comic-book POP — each glyph scales from zero up past full size and settles back with a snappy bounce, while a small radial starburst flashes behind it for a single frame on impact. The bursts and bounces stagger across the string so the whole word lands in a wave of cartoon energy. Different from a stamp or a pop-in fade: this one commits to the impact with an overshoot, an optional graphic flourish, and a tight viewport-triggered playback that runs exactly once. Knobs for stagger speed, burst on/off, and burst color let you dial it from playful to extreme. Made for celebratory headings, error states with attitude, kid-friendly products, or anything that should feel kinetic instead of polished.
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 pop-text text effect into my projectRelated Components
Splitting Text
Character, word, or line splitting with timing
Blur Text
Text animation from blur to focus
Text Pressure
Variable-font weight responds to cursor proximity
Wave Text
Letters undulating along a continuous sine wave
Glitch Text
Digital glitch with RGB channel separation
Shuffle
Cards-style shuffling letter reveal
FAQ
Was this page helpful?
Sign in to leave feedback.
Pendulum Text
Letters dangle from invisible strings and swing as underdamped pendulums driven by Motion springs for React applications.
Progress Text
Animated number that ramps from a starting value to a target with cubic ease-out and locale-aware formatting, triggered when scrolled into view, built with React, Next.js, and motion/react for stat-driven hero sections.