The library

Techniques, not templates

Every trick recreated from the source video as a live, self-contained demo. Search, filter, open, steal.

1 / 2

Animated Counting Stats with Tabular Figures

Animate numbers from zero to a target value using a smooth ease-out curve, ensuring digits maintain consistent width with `font-variant-numeric: tabular-nums` to prevent visual 'dancing'. The animation respects user's `prefers-reduced-motion` settings.

animationcssjavascriptnumbersa11ystatistics

2 / 2

Tabular Numbers for Aligned Prices

This trick ensures numbers in a column align perfectly, especially decimal points, by using fixed-width digits. It contrasts the default 'proportional-nums' where digits like '1' are narrower than '0', causing a subtle wobble in price columns, with 'tabular-nums' for a precise, 'audited' look.

csslayouttypographytableprecisionnumbers