Number Ticker
介绍
每一位数字独立滚动到目标值，等宽数字不抖动。点击可重新滚动。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Number Ticker 加进你的项目并换成你的配色。
适用场景
数据亮点、增长指标、计数器和统计卡片。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add number-ticker
mcp › 使用 8pt MCP 调用 get_component("number-ticker")
代码
Number Ticker 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-tick"> <div class="x-tick__num" data-value="2048"></div> <button class="x-tick__btn" type="button">重新滚动</button> </div>
.x-tick{display:grid;justify-items:center;gap:16px;color:var(--d-fg,#fff)}
.x-tick__num{display:flex;font:700 clamp(44px,7vw,72px)/1 var(--d-font,system-ui,sans-serif);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.x-tick__col{display:block;height:1.15em;overflow:hidden}
.x-tick__reel{display:flex;flex-direction:column;transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
.x-tick__reel span{height:1.15em;line-height:1.15}
.x-tick__sep{width:.3em;text-align:center;opacity:.5}
.x-tick__btn{border:1px solid var(--d-line,rgba(255,255,255,.12));background:transparent;color:var(--d-muted,#a0a0ab);border-radius:999px;padding:7px 14px;font:500 12px/1 var(--d-font,system-ui,sans-serif);cursor:pointer;transition:transform .2s,opacity .2s}
.x-tick__btn:hover{color:var(--d-fg,#fff)}
.x-tick__btn:active{transform:scale(.96)}const init = (root) => {
const el = root.querySelector('.x-tick__num');
const render = (v) => {
const s = Number(v).toLocaleString('en-US');
el.innerHTML = [...s].map(ch => ch === ',' ? '<span class="x-tick__sep">,</span>'
: `<span class="x-tick__col"><span class="x-tick__reel">${'0123456789'.split('').map(n => `<span>${n}</span>`).join('')}</span></span>`).join('');
const reels = el.querySelectorAll('.x-tick__reel'); const digits = s.replace(/,/g, '');
requestAnimationFrame(() => requestAnimationFrame(() => reels.forEach((r, i) => {
r.style.transitionDelay = (i * 60) + 'ms'; r.style.transform = `translateY(-${digits[i] * 10}%)`;
})));
};
const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { render(el.dataset.value); io.disconnect(); } });
…订阅 Builder 查看完整源码。查看价格