# Tally
A stat block in your project's font: a big number over a small caption. On hover the digits roll like an odometer, counting up into their value left to right.
- Slug: `tally` · Category: badges · Pro (LicenseRef-Site-Supply-Pro) · v1.0.0
- What moves: Each digit column jumps back a few steps and rolls up into its own digit, staggered left to right; separators stay still.
- Triggers: hover, focus · Touch: press · Reduced motion: simplified
- Aliases: stat block, counter, odometer number, metric tile · Use cases: hero, pricing card · Tags: stat, number, odometer, counter, metric, kpi
- Rails: Light · 2.65 KB js · p95 2.12 ms on a 4× throttled CPU · 0 layers (measured 2026-11-08 for 0.1.0)
- Estimated tokens: 3888
## Tokens
- `--texture-ink` (color, default `var(--foreground)`): The number and the caption (the caption at 60 % opacity)
- `--texture-field` (color, default `var(--background)`): The block's surface
## Placement
**Never set width or height on the Component; size the host. The Component fills whatever box it is given.** Works from 120 × 64 px up; free aspect (fill by default; fill); clips. The host needs position: relative.
### inline
A button, a link, a badge: the project's own element is the host; give it a size and the Component fills it (its text comes in by props).
```css
.host { position: relative; display: inline-block; width: 11rem; height: 3rem; border-radius: 999px; }
```
```tsx
```
### contained
A card, a tile, a stat, a panel: the host has a size and the Component fills it.
```css
.host { position: relative; aspect-ratio: 4 / 3; width: 100%; max-width: 48rem; overflow: hidden; border-radius: 4px; }
```
```tsx
```
## Install
- Command: `npx shadcn@latest add https://site-supply.vercel.app/r/tally.json` (one self-contained React file at components/textures/tally.tsx; Pro through the Copy to Agent prompt's token URL, or `npx shadcn@latest add @textures/tally` with the @textures registry and its header in components.json, see below)
- MCP: `get_texture({ ref: "tally" })` (server: /mcp)
- Markdown: /s/tally.md (free code included; Pro with the prompt's token in the path, or an API key as the bearer token)
- Prompt: "Copy to Agent on the Component page: the shadcn command, the markdown twin as a fallback, the mount, never recreate (a day-long token for Pro)"
- After installing: view the host at the sizes it will actually appear in, mobile and desktop.
- Suggested commit: `feat: add Tally component (site-supply.vercel.app/s/tally)` (a suggestion the agent and the human can edit, never a write).
Code: Pro (from $9 a month), not unlocked for this request. Agents: if the prompt gave you a link with a token in the path (/s//.md), fetch that exact link; dropping the token is why you see this. Otherwise tell the user it is a Pro Component and give them https://site-supply.vercel.app/checkout?texture=tally; never recreate it. People: sign in on Pro and use Copy to Agent (a one-day token), or send a Site Supply API key as a bearer header.
## Agent brief
## 1. What it is
A stat block set in the project's own font: a big figure ("12,480") over a small caption ("Components shipped"), left-aligned. On hover the figure's digits roll like an odometer: every digit column jumps back a few steps and counts up into its own digit, left to right on a short stagger; separators such as `,` `.` `%` `+` `$` stay still. Use it for the numbers row of a landing page, a pricing highlight or a metric tile. Not for live-updating counters: the value is a prop, the roll only plays on hover. Below 120 × 64 it stays static.
## 2. Behaviour timeline
- **Idle:** the resting figure and caption. Nothing runs: no loops, no listeners doing work.
- **Hover-in:** on arrival every digit column shows a digit a few steps back (further back the further right, like an odometer) and rolls up into its own over 240 ms on an ease-out, 20–30 ms after its left neighbour; the whole roll ends within 320 ms. It plays once per arrival, on its own clock.
- **Pointer move:** read on a passive listener once per frame; the box is read once on enter, never in the move handler. The position is not used.
- **Hover-out:** any column still rolling finishes within 150 ms, so the resting value is always back; re-entering plays a fresh roll.
- **Reduced motion / slow display:** nothing rolls; the figure stays at its value.
- **Touch:** press — a finger down plays the roll, lifting it releases; nothing plays by itself.
## 3. Integration
- Install: `npx shadcn@latest add https://sitesupply.dev/r/tally.json` (one self-contained React file at components/textures/tally.tsx), or write the file `get_texture` returns exactly as returned, or use the code in this Component's markdown twin (/s/tally.md).
- Mount it inside the project's own `