Display
Metric Counter Card
A card that animates large numbers counting up when scrolled into view.
by mcpSkills
Framework
nextjs
UI Library
shadcntailwind
Difficultyintermediate
English Prompt
Create a metric card that animates a large number counting up from zero to a target value. Use a dark card background, a massive bold number in white, a small label below, and an optional suffix like "%" or "x". Trigger the animation when the card scrolls into view. Use JavaScript for the counting logic and Tailwind CSS. Keep the typography crisp and the layout minimal.
Chinese Prompt
创建一个指标卡片,滚动进入视口时大号数字从零计数到目标值。使用深色卡片背景、巨大的白色粗体数字、下方小标签,以及可选后缀如 "%" 或 "x"。使用 JavaScript 实现计数逻辑,Tailwind CSS 设置样式。保持字体清晰和布局极简。

Overview
A data card that uses motion to make metrics feel alive. Common on SaaS landing pages and dashboards.
Features
- Count-up animation
- Scroll-triggered start
- Large bold number
- Small label + suffix
- Dark card background
- Minimal layout
Usage
Use for stats, KPIs, growth metrics, or social proof numbers.
Customization
Modify the prompt to:
- Add a duration easing curve
- Format numbers with commas/K/M
- Animate multiple cards in a row
- Add a subtle glow on completion