Counter

The <velin-counter> Web Component animates a number from from to to using requestAnimationFrame and an expo-out easing, then formats via Intl.NumberFormat. Designed for KPI tiles, hero stats, and pricing pages.

Basic

<velin-counter from="0" to="2540" duration="1500"></velin-counter>

Currency & locale

<velin-counter from="0" to="61840"
  format="currency" currency="EUR" locale="de-DE"
  decimals="0" duration="1200"></velin-counter>

Percent

<velin-counter from="0" to="0.94" format="percent" decimals="1"></velin-counter>

Attributes

Attribute	Default	Notes
`from`	0	Starting value
`to`	0	Target value
`duration`	900	ms
`decimals`	auto	Fixed fraction digits
`format`	`number`	`number` / `currency` / `percent`
`currency`	`EUR`	ISO 4217 code, used with `format="currency"`
`locale`	browser	BCP-47 tag (e.g. `de-DE`, `en-US`)
`prefix` / `suffix`	—	Strings wrapped around the formatted number
`autostart`	`true`	Set `false` to start manually via `start()`

JavaScript API

const counter = document.querySelector('velin-counter');
counter.start();   // re-runs the animation
counter.reset();   // jumps back to "from"
counter.setAttribute('to', 99000); // implicit re-animate

The counter auto-starts when scrolled into view via IntersectionObserver (threshold 0.2).
Users with prefers-reduced-motion: reduce see the final value immediately, no animation.
The formatted text is selectable and copyable.