{
  "name": "tally",
  "title": "Tally",
  "description": "A number that counts itself up when it enters view, eases into place, and settles with a single ember breath. Tabular digits, no jitter, no fireworks.",
  "category": "text",
  "install": {
    "command": "npx shadcn@latest add @clow/tally",
    "registryConfig": {
      "@clow": "https://clow.cards/r/{name}.json"
    }
  },
  "props": {
    "value": {
      "type": "number",
      "default": 100,
      "min": 0,
      "max": 1000000,
      "description": "The number the tally counts up to."
    },
    "duration": {
      "type": "number",
      "default": 1600,
      "min": 200,
      "max": 6000,
      "step": 100,
      "description": "Count duration in ms."
    },
    "decimals": {
      "type": "number",
      "default": 0,
      "min": 0,
      "max": 3,
      "description": "Fraction digits kept while counting and at rest."
    },
    "prefix": {
      "type": "text",
      "default": ""
    },
    "suffix": {
      "type": "text",
      "default": ""
    }
  },
  "agent": {
    "prompt": "Use Tally for headline metrics on landing pages and marketing stat rows: it waits for the viewport, counts up to value with an eased curve, then breathes one ember glow and goes quiet. Size and weight come from your own classes (e.g. text-4xl font-semibold). Use decimals plus prefix/suffix for units: decimals={2} suffix='%' for uptime, prefix='$' for money. Do NOT use it for live dashboard values, table cells, or anything that updates continuously; it is a one-time entrance for a number you are proud of. Under prefers-reduced-motion it renders the final value immediately, no count, no glow.",
    "examples": [
      "<Tally value={12480} className=\"text-4xl font-semibold\" />",
      "<Tally value={99.98} decimals={2} suffix=\"%\" className=\"text-3xl font-semibold\" />",
      "<Tally value={4200} prefix=\"$\" duration={2000} />"
    ]
  },
  "registryDependencies": [
    "utils"
  ],
  "links": {
    "docs": "https://clow.cards/docs/tally",
    "markdown": "https://clow.cards/llms/tally.md",
    "registryItem": "https://clow.cards/r/tally.json"
  }
}
prop	type	default
value	number	100
duration	number	1600
decimals	number	0
prefix	text
suffix	text
Draw

Playground

Examples

Props
