{ "slug": "stat-counter", "title": "Stat counter", "tagline": "A big number counts up from zero (pure CSS @property animation, so it seeks perfectly), with label and delta pill. 4 s, 16:9.", "description": "Free CC0 animated statistic motion template: number count-up driven by a registered CSS property, label, delta badge, grid backdrop. Self-contained HTML, deterministic, agent-friendly.", "category": "chart", "tags": [ "number", "counter", "kpi", "stat", "data" ], "tier": "free", "license": "CC0", "spec": { "width": 1920, "height": 1080, "fps": 30, "duration": 4, "aspect": "16:9" }, "kind": "html", "params_schema": { "type": "object", "properties": { "value": { "type": "integer", "minimum": 0, "maximum": 999999999, "default": 12500, "description": "Final integer value (no thousands separators — add them via suffix/prefix text if needed)" }, "prefix": { "type": "string", "default": "", "maxLength": 6, "description": "Text before the number ($, €, ~)" }, "suffix": { "type": "string", "default": "+", "maxLength": 6, "description": "Text after the number (+, %, k, M)" }, "label": { "type": "string", "default": "Templates rendered", "maxLength": 40, "description": "Uppercase label under the number" }, "delta": { "type": "string", "default": "▲ 38% this month", "maxLength": 32, "description": "Small pill (empty string hides it)" }, "accent": { "type": "string", "format": "color", "default": "#22c55e", "description": "Pill, underline colour" }, "bg": { "type": "string", "format": "color", "default": "#0b0c10", "description": "Background" }, "countSeconds": { "type": "number", "minimum": 0.3, "maximum": 3.2, "default": 2.2, "description": "How long the count-up takes" } } }, "default_params": { "value": 12500, "prefix": "", "suffix": "+", "label": "Templates rendered", "delta": "▲ 38% this month", "accent": "#22c55e", "bg": "#0b0c10", "countSeconds": 2.2 }, "preview": { "poster": "https://gimgs.net/motion/media/stat-counter/poster-0403d1d1f280.jpg", "video": "" }, "variants": [], "credits": { "author": "gimgs", "url": "https://gimgs.net/motion" }, "page_url": "https://gimgs.net/motion/stat-counter.html", "json_url": "https://gimgs.net/motion/stat-counter.json", "template_url": "https://gimgs.net/motion/stat-counter/template.html", "play_url": "https://gimgs.net/motion/stat-counter/play", "markdown_url": "https://gimgs.net/motion/stat-counter.md", "updated_at": "2026-09-24T07:24:41.486Z", "prompt": "## When to use\nOne KPI on screen: users, revenue, downloads, savings. Reports, pitch videos, year-in-review, product updates.\n\n## How to adapt\n- Big numbers read better scaled: `value: 12, suffix: \"M\"` instead of `12000000`.\n- `prefix`/`suffix` are rendered through CSS `content`, so keep them short and plain (currency symbols and % are fine).\n- The count-up is a CSS animation on a registered custom property (`@property --n`), which is why any frame `t` renders the exact same digits — needs Chromium ≥ 85 (Playwright/Chrome headless are fine).\n- Timeline: grid fade 0–1 s, pop 0.2–0.8 s, count 0.3 → 0.3 + `countSeconds`, label 1.2–1.8 s, delta 1.8–2.4 s, underline 0.4–2.0 s.\n- Sequence several KPIs by rendering one clip per stat with the same `accent`/`bg`.\n\n## Do not change\n`window.motion`, `#stage` size, `@property --n`, `animation-fill-mode: both`.", "flow": [ { "step": "Pick the stat", "note": "Round it; scale with suffix (k/M)." }, { "step": "Render", "cmd": "frames 0…119 at t=i/30 → ffmpeg -framerate 30 -i frame-%04d.png -c:v libx264 -pix_fmt yuv420p stat.mp4" } ], "files": [], "contract": "Self-contained HTML. Declares window.motion = { width, height, fps, duration, params, apply(params) [, seek(t)] }; root element #stage sized width×height; animations are CSS/WAAPI with animation-fill-mode: both so any t can be seeked via document.getAnimations(). The host runtime (injected by /play) merges ?p params, calls apply(), scales #stage to the viewport and, when ?t is given, pauses and seeks deterministically.", "render": { "frames": 120, "frame_url": "https://gimgs.net/motion/stat-counter/play?p=&t=", "note": "Open frame_url in a headless browser with viewport width×height (deviceScaleFactor 1), wait for document.documentElement.dataset.motionReady === '1', screenshot; repeat for t = i/fps (i = 0…frames-1); then `ffmpeg -framerate -i frame-%04d.png -c:v libx264 -pix_fmt yuv420p out.mp4`. Or drop ?t to play it live." }, "source": "\n\n\n\nStat counter\n\n\n\n
\n
\n
\n
\n
\n\n\n\n" }