Skip to content

Components / Data

Animated numbers and charts

9 components · 4 at 0 B

Animated numbers and small charts for Astro: rolling digits, a price toggle, a flip countdown, sparklines and bars that grow into view.

A bar chart whose bars grow from the baseline one after another when it scrolls into view; hovering a bar shows its value.

every browserscroll

A flip clock counting down to a date: days, hours, minutes, seconds, each a card whose top half folds down over the hinge when the number changes.

every browserload

Gauge

Data

A ring, a three-quarter arc or a half circle that fills to a value as it scrolls into view, the number counting up in the middle with it and a label under it.

newly · Chrome 91 · Firefox 128 · Safari 17scroll

1,284

A number whose digits roll to the new value when it changes.

newly · Chrome 125 · Firefox 118 · Safari 15.4click

One line that says whether a place is open now and until when, or when it opens next, read from the week's hours in the place's own time zone, whatever the reader's clock says.

every browserload

sample prices

Starter

$12/mo$115/yr

one site

Studio

$48/mo$460/yr

up to ten

A monthly / yearly toggle whose prices roll to the other amount instead of swapping.

newly · Chrome 125 · Firefox 129 · Safari 17.5click

A QR code for a URL or a short text, encoded at build and drawn as one SVG path inside the quiet zone a reader needs.

every browseralways

A small line chart that draws itself from left to right when it scrolls into view; the last point lands and pulses.

every browserscroll