Shadcn.io is not affiliated with official shadcn/ui
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.
Progress Text preview
A number that counts itself up the moment it enters the viewport. Built on motion/react's useMotionValue + animate API and a cubic ease-out curve, it accelerates fast off the bottom and decelerates gently into the target — so the eye reads "98%" landing into place rather than rolling past it. Locale-aware via Intl.NumberFormat, with optional prefix and suffix slots so the same primitive renders 98%, $1,200, 4.9★, or 1.2M visitors. Triggers exactly once via useInView with once: true, so it doesn't replay every time the user scrolls past. Pair it with a label and you have a production-grade hero stat block, dashboard KPI, or pricing-page metric.
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 progress-text text effect into my projectRelated Components
Counting Number
Spring-physics number counter for dashboards
Sliding Number
Mechanical slot-machine digit roll for tabular numbers
Text Generate Effect
Progressive word-by-word generation
Blur Text
Text animation from blur to focus
Mask Reveal Text
Sliding mask uncovers each line of text
Splitting Text
Character, word, or line splitting with timing
FAQ
Was this page helpful?
Sign in to leave feedback.
Pop Text
Cartoon impact reveal with overshoot scale, sequential stagger, and an optional comic starburst graphic on each letter for React applications.
Rainbow Text
Continuously rolling rainbow gradient text with seamless horizontal panning across the full hue range for React, Next.js, Tailwind CSS, and motion.