What this file is. Five chart forms, three animations each, every one a
pure function of a single clock. Nothing here uses a CSS transition, a
@keyframes rule or a library — because none of those advance in a
rendered frame. Scrub the bar to inspect any moment; that is the same thing
remotion still --frame=N will do. Offset spreads the fifteen
samples across the loop so the page is watchable; switch it off to compare
two animations at the identical moment.
1 · Horizontal bars — ranked magnitude
Render speed of everything we have measured, in frames per second, RAM free.
GLASS wears the accent because it is the one the sentence is about;
the rest are context. Values sit at the tip of each bar — never on an axis
the viewer has to walk back to.
1a
Grow
Render speed
frames per second, 1920×1080
Five events. Each bar wipes out from the axis on
its own, 60 ms apart, and its number counts with it. Reads as five
separate facts arriving.
1b
Unified wipe
Render speed
frames per second, 1920×1080
One event. A single edge travels across the whole
plot and the bars appear behind it. Cheaper on attention — the chart is
one object, not five.
1c
Figure‑led
Render speed
frames per second, 1920×1080
The number leads, the bar follows 140 ms behind.
Puts the reading first and the comparison second. Use where the figure is
the claim and the ranking is support.
2 · Vertical columns — magnitude across a set
Megabytes on this machine, measured today. Kokoro wears the accent:
one model, fifty‑four voices, and less disk than three Piper voices.
Columns carry their value on the cap; the axis carries the rest.
2a
Grow
Disk per model
megabytes, this machine
Up from the baseline, 60 ms apart, left to right.
The safe one. A column that grows from its axis can only be read as a
quantity.
2b
Drop
Disk per model
megabytes, this machine
Falls from above and lands. Physical, and it
pins the eye to the top of each column — which is where the value is.
Costs the illusion that the bar grew out of the axis.
2c
Spotlight
Disk per model
megabytes, this machine
All arrive dim, then a highlight walks the set and
stops on the one that matters. Focus and context. The only variant that
can carry a sentence per column.
3 · Line — a trend over time
Visual events per minute, episode by episode — the number gate 2 measures.
One series, so no legend: the title already says what is plotted. Only
the endpoint is labelled.
3a
Draw‑on
Visual events per minute
by episode · ep05 is the hybrid
The stroke draws itself, dots pop as it reaches
them, the area fades last. The classic. Reads as being plotted.
3b
Sweep
Visual events per minute
by episode · ep05 is the hybrid
A vertical edge uncovers line, area and dots together.
Everything at a given x arrives at once, so the chart never shows a line
floating above an empty fill.
3c
Rise
Visual events per minute
by episode · ep05 is the hybrid
The whole series lifts off the axis into its shape.
No drawing — the line is present from the first frame and the
values animate. The shape is the last thing you learn.
4 · The number — one figure is the point
The same figure three ways, so what you are judging is the motion and not the
number. All three land on exactly 371.23 — a counter that ends on
371.19 because the easing ran out is the silent-failure shape this project
keeps meeting.
4a
Count‑up
MEDIAN COLD START
0.00ms
Forty runs, warm cache.
Sweeps to the value on ease‑out cubic over
1.1 s. It performs the measurement. Everyone does this, which is
both the argument for and against.
4b
Odometer
MEDIAN COLD START
ms
Forty runs, warm cache.
Each digit rolls to its own value, 70 ms
apart, left settling first. Mechanical, precise, and it makes the
decimals the last thing to stop — which is the point of a
measurement.
4c
Type‑in
MEDIAN COLD START
ms
Forty runs, warm cache.
No counting at all. The glyphs rise from behind
their own edge, 45 ms apart. The number arrives as type rather than
performing — the calm option, and the only one that never displays a
figure we did not measure.
5 · Donut — part of a whole, at a glance
One day of free ZeroGPU quota, in seconds, by what spends it. Five segments —
the catalogue's ceiling is six, and it is only ever for part‑to‑whole at a
glance, never for telling close values apart. One hue, stepped by share,
because the bed gives us one accent and a rainbow would be inventing meaning.
5a
Sweep
A day's free GPU
seconds of quota, by call
One hand travels clockwise from twelve and the
segments appear behind it. The whole is drawn once, so it reads as a
single quantity being divided.
5b
Bloom
A day's free GPU
seconds of quota, by call
Each segment opens from its own start edge,
80 ms apart, largest first. Reads as five things being counted,
rather than one thing being split.
5c
Sweep + centre
A day's free GPU
seconds of quota, by call
The ring sweeps while the hole counts, both
resolving on the same frame. The donut becomes a frame around the one
number you wanted said aloud.
Notes
Sizes are frame sizes. The stage is a true 1920 px column, so each of
these panes is 500 px wide in the finished frame — a card, not a
full‑bleed chart. A chart that has to carry a whole beat gets rebuilt wider,
and the mark specs (≤ 24 px bars, 2 px lines) do not change when it does.
Three of the catalogue's eight audit categories do not apply to us.
Interruptibility, reduced‑motion and hover‑gating all assume a viewer who can
act. A rendered MP4 has no pointer, no scroll and no preferences — which is
also why there is not one CSS transition in this file.