Stat Side Panel
DataA ring gauge, a heading and a list that builds one point at a time, sized as a hard-edged column beside a talking head
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 · 7 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.
- Percent *percent · number
Ring value. The number in the middle counts up to it as the arc sweeps.
now: 78
- Title *title · string
The heading under the ring. Two or three words, set large.
now: Costs Increase
- Bullets *bullets · array
Points that appear one at a time under the heading. Keep each to a line or two. This column is narrow on purpose.
now: 4 items
- Sideside · "right" | "left"
Which edge the panel occupies. The presenter takes the other one.
now: right
- Width fractionwidthFraction · number
Panel width as a fraction of the frame. Below about a third the bullets start wrapping badly.
now: 0.36
- Fillfill · boolean
Paint the panel's ground. Turn it off to render with an alpha channel and drop the panel straight over your own footage in any editor.
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
A hard-edged panel occupying one third of the frame beside a presenter: a thick ring gauge sweeping to a percentage with the number counting up inside it, a large heading, a soft glowing chevron divider, and a list of points that arrive one at a time with small square accent bullets. The panel wipes in from its own edge rather than fading. The ring keeps sweeping after the bullets have landed so something is still moving through the hold, and the ground can be switched off entirely to render the panel with an alpha channel.
