Tally Row

A row of figures that count up once, when half of it scrolls into view: 1,280 projects, $12M, 98%, 8 years. Each figure has a prefix, a suffix, a label and a number of decimals, so "$12M", "98%" and "4.9/5" all work. Long suffixes such as " years" are set smaller than the number; short ones such as "M" or "%" keep full size. The digits are tabular, so nothing shifts while they change.

The final numbers are always in the page. With reduced motion, on the Framer canvas and in the server-rendered HTML you get the finished figures, and a screen reader hears each figure and its label as one plain line, not the running count. After the count it stays put; scrolling back up does not restart it.

Set it up in the properties panel: up to 12 figures (value, prefix, suffix, label, decimals), how many to show, columns (1 to 6; two on narrow screens, one in a very narrow container), duration, start on view or on load, a group label for screen readers, and a Skin: Paper, warm paper with green ink and a brass rule, or Ink, dark with a lime rule. Four color controls (leave them empty to use the skin colors) and two fonts. Three optional text fields, such as "$6.2M" or "11 weeks", take figures from CMS content and replace the list when filled in. It runs on its defaults, so you can drop it on a page and try it first.

One file, no images, nothing fetched. Works in any Framer plan. Free for personal and commercial projects.

The preview shows the row in its two skins, Paper and Ink, at full width. Resize the window to see the columns step down.