{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "konfetti-erfolg",
 "name": "Konfetti / Erfolgs-Feier",
 "name_en": "Confetti / success celebration",
 "kurz": "Spendenformular eines Küstenvereins: Nach dem Absenden wechselt die Karte zum Dank, Konfetti in Vereinsfarben schießt aus dem Spenden-Knopf, der Spendenbalken wächst.",
 "kategorie": "Mikroanimationen",
 "kategorie_slug": "mikroanimationen",
 "kategorie_nr": 9,
 "bau_chat": "C4",
 "prioritaet": "C",
 "trendstatus": "etabliert",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "verspielt",
  "laut"
 ],
 "stimmung_roh": [
  "verspielt",
  "freundlich",
  "laut"
 ],
 "technik": [
  "canvas",
  "vanilla-js"
 ],
 "technik_gruppen": [
  "js",
  "canvas"
 ],
 "leistungskosten": "mittel",
 "steckbrief": {
  "beschreibung": "Nach einem echten Meilenstein fällt einmal ein Partikelregen. Beispiele: Kauf abgeschlossen, Konto erstellt, Spende gesendet. Die Teile starten am auslösenden Knopf oder am Bildschirmrand. Sie fliegen gestreut nach oben, werden langsamer, fallen mit Schwerkraft und flattern dabei. Farben kommen aus der Markenpalette, Formen können auch Emoji, Logo oder Text sein. Nach ein bis drei Sekunden verschwindet die Leinwand. Gleichzeitig bestätigt ein klarer Text den Erfolg.",
  "warum_es_wirkt": "Ein Höhepunkt am Ende eines Ablaufs bleibt in Erinnerung (Peak-End-Effekt) und belohnt. Konfetti in Markenfarben stärkt die Wiedererkennung.",
  "wann_einsetzen": "Abschluss des Onboardings, erster veröffentlichter Inhalt, erfolgreiche Bestellung oder Spende, Gewinnspiele, Lern-Apps, Easter Eggs wie ein Klick aufs Logo.",
  "wann_nicht": "Bei Routineaktionen wie jedem Speichern. In seriösen Kontexten wie Bank, Gesundheit, Behörden oder B2B-Rechnungen. Bei Fehlern oder unsicherem Ergebnis. Nicht mehrfach pro Sitzung.",
  "varianten": [
   "Burst vom Knopf aus (Ursprung = Knopfposition)",
   "Seitenkanonen links und rechts (zwei Schüsse mit Winkel 60° und 120°)",
   "Fallender Regen über mehrere Sekunden",
   "Emoji- oder Logo-Konfetti (shapeFromText, shapeFromPath)",
   "Sterne-Burst am Element (siehe like-herz-burst)",
   "Lottie- oder Rive-Animation statt Partikelsystem"
  ],
  "umsetzung": "Mit canvas-confetti: die Bibliothek erst beim Erfolg per import() laden, dann confetti({ particleCount: 80, spread: 70, origin: { x: knopfX / innerWidth, y: knopfY / innerHeight }, colors: ['#hex1', '#hex2'], disableForReducedMotion: true }). Seitenkanonen sind zwei Aufrufe mit angle 60 und 120 und origin.x 0 bzw. 1. Eigene Formen über confetti.shapeFromText({ text: '🎉', scalar: 2 }). Für flüssiges Scrollen confetti.create(canvas, { useWorker: true }). Ohne Bibliothek reicht ein Canvas mit einfacher Physik: Tempo pro Tick mit 0,9 multiplizieren, Schwerkraft konstant addieren, nach 200 Ticks ausblenden. Parallel die Erfolgsmeldung im DOM mit role=status zeigen.",
  "mobil": "particleCount halbieren, scalar 0.8. useWorker nutzen, damit Scrollen nicht ruckelt.",
  "reduzierte_bewegung": "Konfetti entfällt komplett (disableForReducedMotion: true). Die Erfolgsmeldung als Text bleibt, gern mit einer statischen Illustration.",
  "barrierefreiheit": "Canvas mit aria-hidden und pointer-events: none. Den Erfolg zusätzlich als Text mit role=status melden. Keine Blitze oder Flackern (WCAG 2.3.1). Den Fokus nicht verschieben."
 },
 "messwerte": {
  "easing": "physikalisch (decay 0.9 pro Tick, gravity 1)",
  "dauer_ms": "ca. 1500–3000 (ticks 200 als Bibliotheksstandard)",
  "stagger_ms": "Mehrfach-Bursts 150–250 versetzt",
  "distanz": "startVelocity 45, spread 45° (Standard) bzw. 60–90° für Feier",
  "sonstiges": "Bibliotheks-Standardwerte canvas-confetti: particleCount 50, angle 90, spread 45, startVelocity 45, decay 0.9, gravity 1, drift 0, ticks 200, scalar 1, zIndex 100; disableForReducedMotion standardmäßig false (manuell auf true setzen)",
  "herkunft": "typisch",
  "quelle": "https://catdad.github.io/canvas-confetti/ (README der Bibliothek)"
 },
 "kurve": null,
 "gesehen_bei": [
  {
   "seite": "canvas-confetti – Demo-Seite",
   "url": "https://catdad.github.io/canvas-confetti/",
   "auszeichnung": "",
   "beobachtung": "Offizielle Demo der verbreitetsten Bibliothek (npm-Version 1.9.4) mit Presets (Basic, Random Direction, Realistic Look, Fireworks, Stars, Snow, School Pride, Custom Shapes, Emoji).",
   "art": "demo"
  }
 ],
 "tutorials": [
  {
   "titel": "canvas-confetti – Demo und Optionen",
   "url": "https://catdad.github.io/canvas-confetti/"
  }
 ],
 "kombinierbar_mit": [
  "button-zustaende",
  "like-herz-burst",
  "maskottchen-zustaende",
  "toast-stapel",
  "hold-to-confirm"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/mikroanimationen/konfetti-erfolg/",
  "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/konfetti-erfolg/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/mikroanimationen/konfetti-erfolg/demo"
 },
 "herkunft": {
  "quelldateien": [
   "patch-luecken-b.json"
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Spendenformular eines Küstenvereins: Nach dem Absenden wechselt die Karte zum Dank, Konfetti in Vereinsfarben schießt aus dem Spenden-Knopf, der Spendenbalken wächst.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "physik": "eigene Canvas-Partikel mit den Standardwerten von canvas-confetti: decay 0.9 pro Tick, gravity 1 (= 3 px pro Tick, konstant), drift 0, ticks 200, scalar 1; Tick = 1/60 s, Zeitschritt auf die Bildrate normiert (max. 3 Ticks pro Bild)",
   "start": "Winkel = Richtung ± Streuung/2 zufällig; Tempo = startVelocity × (0.5 bis 1.5)",
   "teilchen": "Größe 7–11 px × scalar; 45 % Rechteck (1 × 0.64), 30 % Kreis (Radius 0.38), 25 % Welle (Bézier-Strich 0.26); Drehung ±0.08 rad pro Tick, Kippen (scaleY = cos) 0.08–0.14 rad pro Tick, Flattern seitlich 6 px",
   "deckkraft": "voll, in den letzten 30 % der ticks linear auf 0",
   "burst": "Ursprung Mitte Spenden-Knopf; Schuss 1: 80 Teile, Winkel 90°, Streuung 70°, startVelocity 45; Schuss 2 nach 180 ms: 40 Teile, Streuung 110°, startVelocity 30",
   "seitenkanonen": "Ursprung x 0 und x 1, y 0.72 des Fensters; je 60 Teile, Winkel 60° bzw. 120°, Streuung 55°, startVelocity 55; zweiter Schuss 200 ms versetzt",
   "regen": "2400 ms lang 3 Teile pro Bild von oben (y −20 bis −60 px, x zufällig), startVelocity 0, gravity 0.8 ± 20 %, drift ±0.4, ticks 400, scalar 0.6–1",
   "mobil": "unter 640 px oder ohne Hover: Teilezahl × 0.5, scalar 0.8",
   "farben": "#002e6d (doppelt gewichtet), #008fc3 (doppelt), #b8d8ea, #ffffff mit Kontur rgba(0,46,109,.35), #ffca0a, #dfdfd7",
   "leinwand": "position fixed, z-index 50, pointer-events none, aria-hidden; devicePixelRatio max. 2; nach dem letzten Teil geleert und ausgeblendet",
   "kartenwechsel": "Formular aus: opacity und translateY −16 px, 300 ms; Dank ein: opacity und translateY 16 → 0 px, 600 ms, 200 ms verzögert; Kurve cubic-bezier(0.645, 0.045, 0.355, 1)",
   "siegel": "scale 0.6 → 1, rotate −12° → 0°, 600 ms cubic-bezier(0.34, 1.56, 0.64, 1), 150 ms verzögert (einziger Überschwinger)",
   "absenden": "Ladezustand 450 ms (Drehrad 700 ms linear pro Umdrehung), dann Erfolg",
   "spendenbalken": "transform scaleX, 1000 ms cubic-bezier(0.645, 0.045, 0.355, 1)",
   "ui": "Farben 150 ms linear; Umschalter einmalig/monatlich translate 200 ms cubic-bezier(0.645, 0.045, 0.355, 1); Knopfdruck scale 0.98",
   "reduziert": "kein Konfetti, kein Siegel-Sprung; Dank blendet in 150 ms linear ein"
  },
  "ausloeser": "klick",
  "touch": "Identisch per Tippen; Konfetti mit halber Teilezahl und scalar 0.8, Layout einspaltig, Karte unter Bild und Spendenziel.",
  "reduziert": "Konfetti entfällt komplett (wie disableForReducedMotion). Die Karte blendet in 150 ms zum Dank über, Siegel steht still, die Erfolgsmeldung kommt als Text per role=status.",
  "korrekturen": {
   "beschreibung": "Nach einem echten Meilenstein fällt einmal ein Partikelregen. Beispiele: Kauf abgeschlossen, Konto erstellt, Spende gesendet. Die Teile starten am auslösenden Knopf oder am Bildschirmrand. Sie fliegen gestreut nach oben, werden langsamer, fallen mit Schwerkraft und flattern dabei. Farben kommen aus der Markenpalette, Formen können auch Emoji, Logo oder Text sein. Nach ein bis drei Sekunden verschwindet die Leinwand. Gleichzeitig bestätigt ein klarer Text den Erfolg.",
   "warum_es_wirkt": "Ein Höhepunkt am Ende eines Ablaufs bleibt in Erinnerung (Peak-End-Effekt) und belohnt. Konfetti in Markenfarben stärkt die Wiedererkennung.",
   "wann_einsetzen": "Abschluss des Onboardings, erster veröffentlichter Inhalt, erfolgreiche Bestellung oder Spende, Gewinnspiele, Lern-Apps, Easter Eggs wie ein Klick aufs Logo.",
   "wann_nicht": "Bei Routineaktionen wie jedem Speichern. In seriösen Kontexten wie Bank, Gesundheit, Behörden oder B2B-Rechnungen. Bei Fehlern oder unsicherem Ergebnis. Nicht mehrfach pro Sitzung.",
   "varianten": [
    "Burst vom Knopf aus (Ursprung = Knopfposition)",
    "Seitenkanonen links und rechts (zwei Schüsse mit Winkel 60° und 120°)",
    "Fallender Regen über mehrere Sekunden",
    "Emoji- oder Logo-Konfetti (shapeFromText, shapeFromPath)",
    "Sterne-Burst am Element (siehe like-herz-burst)",
    "Lottie- oder Rive-Animation statt Partikelsystem"
   ],
   "umsetzung": "Mit canvas-confetti: die Bibliothek erst beim Erfolg per import() laden, dann confetti({ particleCount: 80, spread: 70, origin: { x: knopfX / innerWidth, y: knopfY / innerHeight }, colors: ['#hex1', '#hex2'], disableForReducedMotion: true }). Seitenkanonen sind zwei Aufrufe mit angle 60 und 120 und origin.x 0 bzw. 1. Eigene Formen über confetti.shapeFromText({ text: '🎉', scalar: 2 }). Für flüssiges Scrollen confetti.create(canvas, { useWorker: true }). Ohne Bibliothek reicht ein Canvas mit einfacher Physik: Tempo pro Tick mit 0,9 multiplizieren, Schwerkraft konstant addieren, nach 200 Ticks ausblenden. Parallel die Erfolgsmeldung im DOM mit role=status zeigen.",
   "mobil": "particleCount halbieren, scalar 0.8. useWorker nutzen, damit Scrollen nicht ruckelt.",
   "reduzierte_bewegung": "Konfetti entfällt komplett (disableForReducedMotion: true). Die Erfolgsmeldung als Text bleibt, gern mit einer statischen Illustration.",
   "barrierefreiheit": "Canvas mit aria-hidden und pointer-events: none. Den Erfolg zusätzlich als Text mit role=status melden. Keine Blitze oder Flackern (WCAG 2.3.1). Den Fokus nicht verschieben."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Rezept verein-nonprofit-wirkung, erfundener Verein Küstenpaten e.V. aus Rostock (Dünenpflanzung Diedrichshagen), Big Shoulders und Archivo, Navy #002e6d mit Gelb nur am Spenden-Knopf. Gelb ist im Konfetti dabei, weil es aus dem Spenden-Knopf kommt; das Rezept erlaubt Konfetti genau einmal als Dank nach der Spende. Spendenformular (einmalig/monatlich, drei Beträge mit Wirkung), nach dem Absenden Dank mit Siegel, Spendenbalken wächst ehrlich um den Betrag. Konfetti als eigene Canvas-Physik nach den Standardwerten von canvas-confetti, Varianten Burst, Seitenkanonen, Regen. Bildwelt als eigene SVG (Vordüne, Strandhafer, Leuchtturm). Referenzen: charitywater.org, sea-watch.org, catdad.github.io. AD-Review 01.11.2026: Note 4"
 }
}