Metric Chip Stack
DataStat blocks wipe open one after another, each with its caption on a small pill straddling the bottom edge
This is the format it was composed for. Switch above to see it lay itself out for another: same animation, re-arranged for the frame.
What you can change · 4 settings
Everything below can be changed without touching the animation. Hand the list to an agent, or edit the values at the bottom of the component file.
- Chips *chips · array
One to five chips, stacked and revealed in order. Three is the sweet spot; past five the stack is taller than the safe area of a vertical cut.
now: 3 items
- Alignalign · "center" | "left"
Centred sits the stack in frame. Left is for putting it beside a talking head.
now: center
- Dotsdots · boolean
Fine dot texture over the accent fill. Stops a large flat block reading as a solid colour swatch, and is barely visible until it is missing.
now: true
- Brandbrand · string
Brand token id, one of the keys of BRANDS.
now: ledger
For developers · source, dependencies and provenance
Dependencies
No Tailwind, no CSS, no asset files. Inline styles only.
Source
Provenance
Prompt
Stacked stat chips in the finance-explainer style: each is a solid accent block with the figure set large in white, and a small dark pill outlined in the accent sits half-off the block's bottom edge carrying the caption. The blocks wipe open left to right one after another, never fade, because a flat saturated field looks broken at partial opacity, and each caption pill springs in just after its own block finishes. A fine dot texture over the fill keeps the block from reading as a plain colour swatch.
