Counter
A big number that counts up in pixel type when it scrolls into view.
<piix-stat>DOM + canvas<piix-stat value="12480" suffix="+">teams building with it</piix-stat>
Tone
The number rolls up from zero the first time it's on screen, in chunky pixel digits with a hard shadow, and each digit flickers as it changes. Whatever you put inside is the label under it.
Installation
<!-- once, anywhere on the page: every component --> <script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/piixpal.min.js"></script>
<!-- just counter (the shared engine loads itself, once) --> <script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/dist/c/stat.min.js"></script>
npm install piixpal // once, in your entry file import "piixpal";
// npm install piixpal
import "piixpal";
export default function Page() {
return (
<piix-stat value="12480" suffix="+">teams building with it</piix-stat>
);
}
Usage
<piix-stat value="12480" suffix="+">teams building with it</piix-stat>
Examples
A stats row
<div class="ex-grid"> <piix-stat value="12480" suffix="+">teams</piix-stat> <piix-stat value="99.98" decimals="2" suffix="%" tone="sky">uptime</piix-stat> <piix-stat value="2.4" decimals="1" prefix="$" suffix="M" tone="coral">saved</piix-stat> </div>
API reference
| Attribute | What it does | Default |
|---|---|---|
value | the number | – |
prefix | before it, like $ | – |
suffix | after it, like + or % | – |
decimals | digits after the point | 0 |
duration | seconds to count | 1.6 |
tone | lime coral violet sky sun mint ink paper | lime |
Accessibility
- Screen readers get the final number and the label straight away.
- With reduced motion it shows the final number.