P2503 · Theme · SDC · P2503-82

SDC: Big Numbers — animierte Kennzahlen

REFINED P2503-173 Erstellt: 2026-05-22 Figma: 61447:26224

User Story

Als Redakteur:in möchte ich Kennzahlen mit animierten Hochzähl-Effekten auf einer Canvas-Seite einsetzen können, damit Besucher:innen zentrale Zahlen (z. B. Kundenzufriedenheit, abgeschlossene Projekte) einprägsam präsentiert bekommen.

Betroffene SDCs

SDCVerzeichnisArt
byte_theme:big-numbers components/big-numbers/ Neu — Canvas-Block-Type, Grid-Container für Items
byte_theme:big-number-item components/big-number-item/ Neu — Slot-Child, ein Kennzahl-Element mit Animation

Architektur-Entscheidungen (Grilling 2026-05-22)

Topologie
Container+Item-Split (analog slider-container / slider-item). big-numbers ist Canvas-Block-Type mit Slots; big-number-item ist Slot-Child-SDC. Reihenfolge via Canvas Drag&Drop.
Wertformat-Schema
Strukturierte Felder statt Freitext-Parsing: animated_value (number, Pflicht) + format (enum: none | thousands, Default: none) + suffix (string, optional). Beispiel: Wert 9/10 → animated_value: 9, suffix: /10. Wert 100.300 → animated_value: 100300, format: thousands. Wert 95% → animated_value: 95, suffix: %.
Animation-Trigger
IntersectionObserver (Scroll-Trigger): Animation startet, sobald die Komponente den Viewport betritt. Bei prefers-reduced-motion: reduce wird der Endwert direkt ohne Animation dargestellt.
Spaltenanzahl
Automatisch aus Item-Anzahl abgeleitet. Kein explizites columns-Prop — flex-Layout mit flex: 1 0 0 auf Items, Gap 32px. Figma-Varianten (3/4/5) entsprechen der natürlichen Item-Anzahl.
Responsives Verhalten
Desktop (≥1024px): alle Items nebeneinander (auto). Tablet (768–1023px): 2 Spalten. Mobile (<768px): 1 Spalte. Items strecken sich gleichmäßig über die volle Breite.
Hintergrundfarbe
big-numbers ist transparent, Schrift weiß fix. Dunkler Hintergrund kommt vom umgebenden Section-Block (Standard-Pattern im Theme). Kein eigener Background-Prop.

Props-Schema

big-numbers (Container)

Kein eigener Prop — steuert nur das Grid-Layout. Slots: items (0–5 big-number-item-Instanzen).

big-number-item

PropTypPflichtDefaultBeschreibung
animated_valuenumberja—Der numerische Zielwert der Animation (z. B. 9, 95, 100300)
formatstring enumneinnonenone: keine Formatierung; thousands: Tausender-Trenner mit . (dt.)
suffixstringneinleerStatischer Rest nach dem animierten Wert (z. B. %, /10)
labelstringja—Beschriftungstext unter der Zahl (z. B. „Kundenzufriedenheit")

Figma-Tokens

ElementToken / Wert
Zahl (animated_value + suffix)Montserrat ExtraBold, 45px, leading-none, uppercase, weiß
LabelScala Sans LF Regular, 19px, leading-[1.35], weiß
Gap (Zahl → Label)var(--xs, 24px)
Gap (Item → Item)32px
Container-Breitemax 1120px (entspricht Theme-Content-Width)

JS-Verhalten

Die Animation läuft als Drupal.behaviors-Behavior in einem separaten big-numbers.js-Modul (type: module).

  • Ein IntersectionObserver beobachtet jeden .big-number-item-Container.
  • Beim ersten Eintreten in den Viewport startet die Zähl-Animation (0 → animated_value).
  • Die Animation läuft einmalig (Observer wird nach dem Trigger abgemeldet — kein Re-Trigger beim Scrollen).
  • Animationsdauer: 1,5 s, Easing: ease-out.
  • Bei prefers-reduced-motion: reduce wird der Endwert direkt gesetzt, kein Observer nötig.
  • Wenn format: thousands: Formatierung mit toLocaleString('de-DE') nach der Animation.
  • Der suffix wird als statisches <span> neben dem animierten Wert gerendert — nie mitgezählt.

Akzeptanzkriterien

  1. Es existiert eine neue SDC byte_theme:big-numbers, die im Canvas-Editor als Block-Type auswählbar und konfigurierbar ist.
  2. Redakteur:innen können bis zu 5 big-number-item-Instanzen als Slots anlegen, jede mit animated_value, format, suffix und label. Reihenfolge ist via Canvas Drag&Drop steuerbar.
  3. Im Frontend werden die Zahlenwerte beim Scrollen in den Viewport von 0 zum Zielwert hochgezählt. Bei Werten im Format X/Y (z. B. animated_value: 9, suffix: /10) zählt ausschließlich X hoch, /Y bleibt statisch. Das Grid-Layout passt sich der Anzahl der Items an (Mobile: 1 Spalte, Tablet: 2 Spalten, Desktop: auto).
  4. Das Aussehen (Typografie, Farben, Abstände) entspricht dem Figma-Frame 61447:26224.

QA-Plan

Test-URL: https://solcom.ddev.site/page/73

AK 1 — SDC auswählbar in Canvas

Canvas-Editor auf page/73 öffnen → Block hinzufügen → „Big Numbers" in der Suche eingeben → Block erscheint in der Liste und lässt sich einfügen.

AK 2 — Items anlegen, Reihenfolge steuern

Im Canvas-Editor 5 big-number-item-Slots anlegen: (1) animated_value: 11, label: Projekte; (2) animated_value: 95, suffix: %, label: Kundenzufriedenheit; (3) animated_value: 1782, format: none, label: Experten; (4) animated_value: 9, suffix: /10, label: Weiterempfehlung; (5) animated_value: 100300, format: thousands, label: Vermittlungen. Alle 5 Items werden gespeichert und im Frontend dargestellt.
Item 1 und Item 5 per Drag&Drop im Canvas-Editor tauschen → Reihenfolge im Frontend ändert sich entsprechend.

AK 3 — Animation, X/Y-Format, Grid-Layout

Seite aufrufen, zur Big-Numbers-Komponente scrollen: alle 5 Zahlen zählen von 0 hoch. Item 4 (9/10): nur die 9 zählt, /10 steht während der gesamten Animation statisch daneben.
Item 5 (100300, format: thousands): animierter Wert wird am Ende als 100.300 angezeigt (Tausender-Punkt).
Viewport auf 375px (DevTools): Items stapeln sich in 1 Spalte untereinander.
Viewport auf 800px: Items in 2 Spalten.
DevTools: prefers-reduced-motion: reduce simulieren → Zahlen erscheinen sofort als Endwert, keine Animation.

AK 4 — Design-Compliance

Desktop-Screenshot der gerenderten Komponente mit Figma-Frame 61447:26224 vergleichen: Montserrat ExtraBold 45px für Zahlenwerte, Scala Sans LF 19px für Labels, weiße Schrift, Gap Zahl→Label 24px, Gap Item→Item 32px.
Komponente in eine Section mit dunklem Hintergrund einbetten: big-numbers selbst hat keinen eigenen Hintergrund (transparent), weiße Schrift ist auf Dark-BG sichtbar.