Zähler 1.2.0

The <velin-counter> Web Komponente 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 Seiten. English: Counter

Reifegrad: Dokumentiert als stabil in VelinStyle 1.2.0. Design Intelligence (Plan / Review / Agent-Meta) ist separat und Beta / Grundlage wo entsprechend angegeben.

Wann verwenden

Animate a number into view (stats, KPIs) with <velin-counter>.
When formatting helpers (currency, percent) on this Seite match the metric you show.

Wann nicht verwenden

Deadline timers — use Countdown.
Trend mini-charts — use Sparkline.

Grundlagen

<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>

Prozent

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

Attribut

Attribut	Standard	Hinweise
`from`	0	Startwert
`to`	0	Zielwert
`duration`	900	ms
`decimals`	auto	Feste Nachkommastellen
`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).
Nutzer with prefers-reduced-motion: reduce see the final value immediately, no animation.
The formatted text is selectable and copyable.