{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "rive-datenbindung",
 "name": "Zustandsautomat mit Datenbindung (Rive-Prinzip)",
 "name_en": "State machine illustration with data binding (Rive principle)",
 "kurz": "Ein Rechner-Hero, dessen Illustration ein Zustandsautomat steuert: Zahl, Schalter und Auslöser treiben Stapel, Prüfstation, Freigabe-Tor und Ergebnis live, wie bei Rive mit View Model und State Machine.",
 "kategorie": "Mikroanimationen",
 "kategorie_slug": "mikroanimationen",
 "kategorie_nr": 9,
 "bau_chat": "C4",
 "prioritaet": "F",
 "trendstatus": "aufsteigend",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "präzise",
  "verspielt"
 ],
 "stimmung_roh": [
  "präzise",
  "technisch",
  "verspielt"
 ],
 "technik": [
  "svg",
  "vanilla-js",
  "rive"
 ],
 "technik_gruppen": [
  "js",
  "canvas"
 ],
 "leistungskosten": "mittel",
 "steckbrief": {
  "beschreibung": "Eine Illustration, die nicht abgespielt, sondern gesteuert wird. Ein Zustandsautomat kennt wenige Zustände (Ruhe, Einlesen, Prüfen, Freigabe, Gebucht) und wechselt sie nach Bedingungen. Eingänge wie bei Rive treiben ihn: eine Zahl, ein Wahrheitswert und ein Auslöser. Über Datenbindung hängen Zahlen und Texte der Illustration direkt an einem Datenmodell (View Model). Typischer Einsatz: der Hero eines Rechners. Der Schieberegler ändert die Menge, die Grafik zeigt sie, das Ergebnis rechnet live mit.",
  "warum_es_wirkt": "Die Grafik erklärt das Produkt, während man es ausprobiert. Jede Eingabe hat eine sichtbare Folge. Das wirkt wie ein Stück der echten App und nicht wie ein Werbefilm.",
  "wann_einsetzen": "Rechner und Konfiguratoren im Hero (Ersparnis, Preis, Raten), Onboarding-Zustände, Status-Illustrationen in Produkten, Maskottchen mit Zuständen. Passt zu SaaS, Handwerk mit Kostenrechner und Kursen.",
  "wann_nicht": "Wenn die Illustration nur Deko ist und kein Wert sie steuert. Wenn niemand die Grafik pflegen kann (eine .riv-Datei braucht den Rive-Editor). Nicht als einzige Stelle für das Ergebnis: Zahlen gehören zusätzlich als Text ins HTML.",
  "varianten": [
   "Rechner-Hero: Zahl und Schalter steuern Illustration und Ergebnis",
   "Status-Illustration in der App (Leer, Lädt, Fertig, Fehler)",
   "Figur oder Maskottchen mit Zuständen (siehe maskottchen-zustaende)",
   "Echte Rive-Datei mit State Machine und View Model über die Web-Runtime",
   "Nachbau ohne Rive: SVG plus kleiner Zustandsautomat in JS"
  ],
  "umsetzung": "Mit Rive: Artboard mit Illustration und State Machine „Fluss“ (Ruhe → Einlesen → Prüfen → Freigabe → Gebucht), dazu ein Layer für den Stapel als 1D-Blend über die Belegzahl. View Model „Rechner“ mit belege (Number), vierAugen (Boolean), durchlauf (Trigger) und ersparnis (String über Formel- und Text-Converter). Übergänge hängen an Bedingungen auf diesen Eigenschaften. Im Web: const r = new rive.Rive({ src: 'rechner.riv', canvas, stateMachine: 'Fluss', autoplay: true, autoBind: true, onLoad() { r.resizeDrawingSurfaceToCanvas(); const vm = r.viewModelInstance; regler.oninput = () => vm.number('belege').value = +regler.value; schalter.onclick = () => vm.boolean('vierAugen').value = an; knopf.onclick = () => vm.trigger('durchlauf').trigger(); vm.string('ersparnis').on(e => ausgabe.textContent = e.data); } }). Paket @rive-app/canvas (MIT), lädt zur Laufzeit eine WASM-Datei. Ohne Rive wie in der Demo: SVG-Illustration, Eigenschaften mit .value/.trigger()/.on(), eine advance(dt)-Schleife mit requestAnimationFrame (1. Änderungen an Bindungen melden, 2. Bedingungen prüfen und Zustand wechseln, 3. Zeitleiste des Zustands zeichnen). Schleife schläft im Ruhezustand. Auslöser während eines Durchlaufs verfallen. Ergebnis immer auch als HTML-Text mit aria-live ausgeben.",
  "mobil": "Gleiches Verhalten, Eingaben unter der Illustration. Schieberegler mit großem Griff, Zahl zusätzlich als Eingabefeld. Bei Rive: isTouchScrollEnabled setzen, damit die Seite über dem Canvas scrollt.",
  "reduzierte_bewegung": "Zustände wechseln sofort, nichts wandert. Zahlen springen auf den Endwert. Die Illustration zeigt immer den Endzustand.",
  "barrierefreiheit": "Die Illustration ist Beiwerk: aria-hidden oder role=img mit kurzer Beschreibung. Eingaben sind echte Formularelemente (input type=range plus Zahlfeld, button role=switch mit aria-checked, normaler button für den Auslöser), mit Tastatur bedienbar. Ergebnis als Text in einer Region mit aria-live=polite, beim Schieben entprellt. Ein Rive-Canvas allein ist für Screenreader leer."
 },
 "messwerte": {
  "easing": "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
  "dauer_ms": "150 Größenwechsel, 100 Tabs (Codrops-Rechner)",
  "stagger_ms": "",
  "distanz": "",
  "sonstiges": "Codrops nennt keine Kurve; die Kurve ist die easeOutQuad des Rezepts saas-produkt-praezise (eigene Festlegung). Mengenbereich im Codrops-Beispiel 1 bis 6, Knöpfe an den Grenzen gesperrt.",
  "herkunft": "beobachtet",
  "quelle": "https://tympanus.net/codrops/2025/07/15/making-animations-smarter-with-data-binding-creating-a-dynamic-gold-calculator-in-rive/"
 },
 "kurve": {
  "bezier": [
   0.25,
   0.46,
   0.45,
   0.94
  ],
  "css": "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
  "name": "eigene Kurve",
  "dauer_ms": 150
 },
 "gesehen_bei": [
  {
   "seite": "Codrops: Making Animations Smarter with Data Binding: Creating a Dynamic Gold Calculator in Rive",
   "url": "https://tympanus.net/codrops/2025/07/15/making-animations-smarter-with-data-binding-creating-a-dynamic-gold-calculator-in-rive/",
   "auszeichnung": "",
   "beobachtung": "Goldbarren-Rechner (Artboard 440 × 900 px). View-Model-Zahlen: Goldpreis pro Gramm (151.75), Barrengröße (0 = 5 g, 1 = 10 g), Menge (1 bis 6), Gesamtpreis. Listener setzen die Zahlen, Converter +1/−1, Formel-Converter für den Preis und Zahl-zu-Text. Übergang der Barrengröße 150 ms, Tabs 100 ms. Keine Angabe zur Kurve und zur Einbindung im Web.",
   "art": "tutorial"
  },
  {
   "seite": "Rive Docs: Data Binding (Web-Runtime)",
   "url": "https://rive.app/docs/runtimes/web/data-binding",
   "auszeichnung": "",
   "beobachtung": "API der Web-Runtime: viewModelByName(), defaultInstance(), bindViewModelInstance() bzw. autoBind: true; Eigenschaften über vmi.number(), boolean(), string(), color(), enum(), trigger(); Werte über .value, Auslöser über .trigger(); Änderungen beobachten mit on()/off(). Werte greifen erst beim nächsten Schritt (advance) der State Machine.",
   "art": "artikel"
  },
  {
   "seite": "Rive Docs: Inputs (Web, Legacy)",
   "url": "https://rive.app/docs/runtimes/web/inputs",
   "auszeichnung": "",
   "beobachtung": "Älteres System mit State-Machine-Eingängen Boolean, Number und Trigger über stateMachineInputs(); laut Seite Legacy, neue Projekte sollen Data Binding nutzen. Beispiel lädt @rive-app/canvas 2.40.1.",
   "art": "artikel"
  },
  {
   "seite": "Rive Blog: Getting started with Data Binding: the core concepts",
   "url": "https://rive.app/blog/getting-started-with-data-binding",
   "auszeichnung": "",
   "beobachtung": "31.07.2025. Begriffe: View Model als Bauplan, Instanzen mit eigenen Werten, Eigenschaften (Number, String, Boolean, Color, Enum, Listen), Converter (Zahl zu Text, Formel, Gruppen). Eigenschaften können Bedingungen der State Machine sein.",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "Codrops: Dynamic Gold Calculator in Rive (Data Binding)",
   "url": "https://tympanus.net/codrops/2025/07/15/making-animations-smarter-with-data-binding-creating-a-dynamic-gold-calculator-in-rive/"
  },
  {
   "titel": "Rive Docs: Data Binding in der Web-Runtime",
   "url": "https://rive.app/docs/runtimes/web/data-binding"
  },
  {
   "titel": "Rive Blog: Getting started with Data Binding",
   "url": "https://rive.app/blog/getting-started-with-data-binding"
  }
 ],
 "kombinierbar_mit": [
  "produkt-ui-hero-perspektiv-tilt",
  "zahlen-odometer",
  "toggle-switch",
  "maskottchen-zustaende",
  "preis-section-editorial"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/mikroanimationen/rive-datenbindung/",
  "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/rive-datenbindung/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/mikroanimationen/rive-datenbindung/demo"
 },
 "herkunft": {
  "quelldateien": [
   "DEF-Recherche 01.11.2026"
  ],
  "pruefnotizen": [
   "01.11.2026: Rive-Runtime @rive-app/canvas geprüft: Lizenz MIT (Repo rive-app/rive-wasm), lokal nicht sinnvoll einsetzbar, weil npm und CDN hier gesperrt sind, die Runtime eine WASM-Datei braucht und keine eigene .riv-Datei ohne Rive-Editor entstehen kann.",
   "Demo ist ein Nachbau des Prinzips (SVG plus Zustandsautomat in JS), keine Rive-Datei.",
   "Kein Produktionsbeleg einer Website mit Rive-Datenbindung geprüft; Recherche nennt Codrops Okt. 2026 (Rive mit Datenbindung, Rechner), der Artikel selbst ist vom 15.07.2025."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Ein Rechner-Hero, dessen Illustration ein Zustandsautomat steuert: Zahl, Schalter und Auslöser treiben Stapel, Prüfstation, Freigabe-Tor und Ergebnis live, wie bei Rive mit View Model und State Machine.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "cubic-bezier(0.25, 0.46, 0.45, 0.94) (easeOutQuad, Rezept saas-produkt-praezise; in JS als 1 − (1 − t)²)",
   "ui_ms": 150,
   "tab_ms": 100,
   "segment_ms": 520,
   "zaehlen_ms": 400,
   "zustaende_ms": "einlesen 520 (Bogen −18 px) · prüfen 1000 (Scanlinie 480 je Durchgang, Funde nach 220/460/700) · freigabe 520 + 640 (Häkchen nach 600/840) · gebucht 520 bzw. 728 ohne Freigabe + 300 Einsinken + 600 Halten",
   "eingaenge": "belege Number 0–2000 (Schritt 10), vierAugen Boolean, durchlauf Trigger; berechnet: stunden = belege × (12 − 2,5 − 1 bei Freigabe) / 60, euro = stunden × 38",
   "stapel": "1D-Blend: Blätter = ceil(belege / 250), höchstens 8, je 5 px versetzt; 0 = Leerzustand",
   "farben": "Grund #fafafa, Karte #ffffff, Text #161616, Meta #62666d, Linie #e4e4e7, Marke #0d7a5f, Fehler #b42318",
   "schrift": "Geist 580 für h1 (−0.022em, Zeilenhöhe 1), Geist Mono 10–11 px versal +0.14em, Tabellenziffern"
  },
  "ausloeser": "klick",
  "touch": "Gleiches Verhalten. Regler mit 26-px-Griff und 36 px Höhe, Zahlfeld, Schalter und Auslöser 44 px hoch; unter 620 px stehen Eingänge untereinander, die SVG-Beschriftung wird größer gesetzt.",
  "reduziert": "Nichts wandert und nichts zählt: jeder Zustand zeigt sein Endbild für seine Dauer (Beleg an der Station, Funde, Häkchen, Stempel), Zahlen springen sofort auf den Endwert.",
  "korrekturen": {
   "umsetzung": "Mit Rive: Artboard mit Illustration und State Machine „Fluss“ (Ruhe → Einlesen → Prüfen → Freigabe → Gebucht), dazu ein Layer für den Stapel als 1D-Blend über die Belegzahl. View Model „Rechner“ mit belege (Number), vierAugen (Boolean), durchlauf (Trigger) und ersparnis (String über Formel- und Text-Converter). Übergänge hängen an Bedingungen auf diesen Eigenschaften. Im Web: const r = new rive.Rive({ src: 'rechner.riv', canvas, stateMachine: 'Fluss', autoplay: true, autoBind: true, onLoad() { r.resizeDrawingSurfaceToCanvas(); const vm = r.viewModelInstance; regler.oninput = () => vm.number('belege').value = +regler.value; schalter.onclick = () => vm.boolean('vierAugen').value = an; knopf.onclick = () => vm.trigger('durchlauf').trigger(); vm.string('ersparnis').on(e => ausgabe.textContent = e.data); } }). Paket @rive-app/canvas (MIT), lädt zur Laufzeit eine WASM-Datei. Ohne Rive wie in der Demo: SVG-Illustration, Eigenschaften mit .value/.trigger()/.on(), eine advance(dt)-Schleife mit requestAnimationFrame (1. Änderungen an Bindungen melden, 2. Bedingungen prüfen und Zustand wechseln, 3. Zeitleiste des Zustands zeichnen). Schleife schläft im Ruhezustand. Auslöser während eines Durchlaufs verfallen. Ergebnis immer auch als HTML-Text mit aria-live ausgeben."
  },
  "geprueft": "02.11.2026",
  "notiz": "Welt: erfundene Rechnungseingangs-Software Belegfluss aus Wetzlar (Rezept saas-produkt-praezise): Geist und Geist Mono, Graustufen, ein Markenton #0d7a5f, Hero mit Nutzen-Satz und zwei CTAs, der Rechner ist das Produktstück. Illustration als eigenes SVG (Stapel, Linse als Prüfstation, Vier-Augen-Tor, Ordner). Zustände inkl. Leerzustand (0 Belege, Auslöser gesperrt) und Fehler im Zahlfeld. Pult zeigt View Model und State Machine live. Rive-Runtime geprüft (MIT, rive-app/rive-wasm), hier nicht einsetzbar: npm/CDN gesperrt, WASM nötig, keine .riv-Datei ohne Editor; daher ehrlicher Nachbau. Werte aus Codrops-Rechner (150/100 ms) und Rezept-Kurve. Referenzen: tympanus.net, rive.app. AD-Review 02.11.2026: Note 4. Zugang 02.11.2026: Kopf-Knopf „Kostenlos testen“ erbte die Tinte (3,4:1 auf Grün), jetzt Weiß wie im Hero (5,4:1); Knopf-Rahmen im Kontrastmodus."
 }
}