Chart-Animation 1.2.0

Fünf Keyframes und passende Utility-Klassen, genutzt von den neuen Sparkline-, Counter- und Live dot-Web-Components. Nutze sie direkt, um einfaches SVG/HTML zu animieren — keine Chart-Bibliothek erforderlich. English: Chart animation

Reifegrad: In VelinStyle 1.2.0 als stable dokumentiert. Studio und die vollständige Utility Engine bleiben geplant — ausgelieferte Utilities sind unter @layer utilities von Hand geschrieben, kein vollständiger Variantengenerator.

Wann verwenden

Animiere Chart-/Sparkline-Präsentationen mit den dokumentierten Chart-Animation-Utilities.

Wann nicht

Stelle statische Fallbacks bereit, wenn Bewegung reduziert ist.

Keyframes

Name	Was animiert wird
`velin-stroke-draw`	SVG-Stroke-Draw-in über `stroke-dashoffset`
`velin-sparkline-glow`	Pulsierender Drop-Shadow-Halo um einen Pfad
`velin-value-bump`	Skalierung + Farb-Pop für aktualisierte Werte
`velin-live-pulse`	Konzentrischer Box-Shadow-Ring (Live Dot)
`velin-count-fade`	Opacity + Translate-Y-Fade für Counter

Utility-Klassen

Klasse	Wirkung
`.velin-chart-line`	SVG-Pfad mit automatischem Stroke-Draw über `--velin-chart-len` Custom Prop
`.velin-chart-area`	Fade-in für die Flächenfüllung unter einem Chart
`.velin-chart-glow`	Wiederholt `velin-sparkline-glow` auf dem Host-Element
`.velin-spark-tick`	Einmaliger Value-Bump für KPI-Updates
`.velin-live-pulse`	Wiederholter Ring um Dot/Badge
`.velin-count-fade`	Einzelner Fade für neue Counter-Werte

Custom Properties

`--velin-chart-len`	Pfadlänge; automatisch gesetzt von `<velin-sparkline>`
`--velin-chart-glow-color`	Halo-Farbe; Standard ist `--velin-color-primary`
`--velin-chart-bump-color`	Tick-Flash-Farbe
`--velin-chart-area-fill`	Area-Füllfarbe
`--velin-live-color`	Live-Pulse-Farbe

Verwendung

<svg viewBox="0 0 320 96">
  <path class="velin-chart-line" style="--velin-chart-len: 320" d="M0,90 L80,55 L160,30 L240,18 L320,10"/>
</svg>

Reduzierte Bewegung

Alle Chart-Utility-Klassen werden unter prefers-reduced-motion: reduce deaktiviert: Strokes werden vollständig gezeichnet angezeigt, Glows stoppen und Pulses frieren ein. Kein Author-Code nötig.