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