Display
指标计数卡片
滚动进入视口时数字向上计数动画的卡片。
作者:mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度intermediate
英文提示词
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.
中文提示词
创建一个指标卡片,滚动进入视口时大号数字从零计数到目标值。使用深色卡片背景、巨大的白色粗体数字、下方小标签,以及可选后缀如 "%" 或 "x"。使用 JavaScript 实现计数逻辑,Tailwind CSS 设置样式。保持字体清晰和布局极简。

Overview
使用动效让指标显得有生命力的数据卡片。常见于 SaaS 落地页和仪表盘。
Features
- 向上计数动画
- 滚动触发
- 大号粗体数字
- 小标签 + 后缀
- 深色卡片背景
- 极简布局
Usage
适用于统计、KPI、增长指标或社会证明数字。
Customization
修改 prompt 以:
- 添加持续缓动曲线
- 用逗号/K/M 格式化数字
- 一行中动画多个卡片
- 完成时添加微妙发光