{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "maskottchen-zustaende",
 "name": "Figuren-/Maskottchen-Zustände",
 "name_en": "Mascot / character state animations",
 "kurz": "Lernbegleiter Kalle in einem Kurs-Quiz: atmet, blinzelt, schaut dem Zeiger nach, denkt beim Prüfen, hüpft bei der richtigen Antwort und lässt bei der falschen den Trieb hängen.",
 "kategorie": "Mikroanimationen",
 "kategorie_slug": "mikroanimationen",
 "kategorie_nr": 9,
 "bau_chat": "C4",
 "prioritaet": "C",
 "trendstatus": "aufsteigend",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "verspielt",
  "warm"
 ],
 "stimmung_roh": [
  "warm",
  "verspielt",
  "persönlich"
 ],
 "technik": [
  "svg",
  "gsap"
 ],
 "technik_gruppen": [
  "gsap",
  "canvas"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Eine kleine SVG-Figur, etwa ein Logo-Charakter, Avatar oder nur Augen, hat Ruhe-Animationen: Sie atmet und blinzelt in zufälligen Abständen. Dazu kommen Zustände wie denkt, freut sich oder schaut zum Zeiger. Zwischen den Zuständen wechseln GSAP-Timelines oder Rive-State-Machines. Die Figur reagiert auf Ereignisse der Oberfläche: Formular gesendet, Fehler, Laden.",
  "warum_es_wirkt": "Die Figur gibt dem Produkt Persönlichkeit und Wärme. Seit KI-Assistenten eigene Maskottchen haben, ist das Thema 2026 wieder stärker im Gespräch.",
  "wann_einsetzen": "Marken mit Charakter, Lade- und Leerzustände, Onboarding, 404-Seiten, Kontaktformulare, Lern- und Quiz-Oberflächen.",
  "wann_nicht": "In nüchternen B2B-Kontexten. Wenn die Figur Inhalte verdeckt oder dauernd zappelt.",
  "varianten": [
   "SVG mit GSAP-Timelines pro Zustand",
   "Augen folgen dem Zeiger (atan2)",
   "Rive-State-Machine",
   "Lottie für einfache Loops"
  ],
  "umsetzung": "Blinzeln: gsap.timeline().to(augen, { scaleY: .1, duration: .08, transformOrigin: 'center' }).to(augen, { scaleY: 1, duration: .12 }), danach mit zufälliger Pause von 2 bis 6 s neu starten. Atmen: Skalierung 1 → 1,02 als yoyo über 2 bis 3 s mit sine.inOut. Für jeden Zustand eine eigene Timeline; beim Wechsel die laufende beenden und kurz über eine neutrale Pose gehen. Münder mit gleicher Pfadstruktur lassen sich per attr: { d } ohne Morph-Plugin überblenden. Blick: Winkel per Math.atan2 zur Figurmitte, Pupillen per gsap.quickTo um wenige Pixel verschieben.",
  "mobil": "Identisch. Ohne Hover schaut die Figur kurz zur Tippstelle.",
  "reduzierte_bewegung": "Statische Pose. Zustände wechseln ohne Übergang und ohne Loop.",
  "barrierefreiheit": "Die Figur ist aria-hidden, wenn sie rein dekorativ ist. Zustände zusätzlich als Text zeigen, etwa in einer Sprechblase mit aria-live=\"polite\"."
 },
 "messwerte": {
  "easing": "sine.inOut (Atmen)",
  "dauer_ms": "Blinzeln ~200; Atmen 2000–3000",
  "stagger_ms": "",
  "distanz": "",
  "sonstiges": "",
  "herkunft": "typisch",
  "quelle": ""
 },
 "kurve": {
  "bezier": [
   0.37,
   0,
   0.63,
   1
  ],
  "css": "cubic-bezier(0.37, 0, 0.63, 1)",
  "name": "sine.inOut",
  "dauer_ms": 200
 },
 "gesehen_bei": [
  {
   "seite": "Codrops: Reverse-Engineering Claude AI's Mascot Animations with SVG and GSAP (05/2026)",
   "url": "https://tympanus.net/codrops/2026/05/05/reverse-engineering-claude-ais-mascot-animations-with-svg-and-gsap/",
   "auszeichnung": "",
   "beobachtung": "Im Codrops-Telegram-Kanal gelistet; Artikel beim Abruf nicht lesbar – Technikdetails nicht verifiziert.",
   "art": "artikel"
  }
 ],
 "tutorials": [],
 "kombinierbar_mit": [
  "button-zustaende",
  "skeleton-shimmer"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/mikroanimationen/maskottchen-zustaende/",
  "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/maskottchen-zustaende/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/mikroanimationen/maskottchen-zustaende/demo"
 },
 "herkunft": {
  "quelldateien": [
   "hover.json"
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Lernbegleiter Kalle in einem Kurs-Quiz: atmet, blinzelt, schaut dem Zeiger nach, denkt beim Prüfen, hüpft bei der richtigen Antwort und lässt bei der falschen den Trieb hängen.",
  "demo": true,
  "abhaengigkeiten": [
   "gsap@3.15.0",
   "CustomEase@3.15.0"
  ],
  "werte": {
   "kurven": "Basis easeOutQuint cubic-bezier(0.22, 1, 0.36, 1) per CustomEase 'quint'; Atmen, Blinzeln, Wiegen sine.inOut (cubic-bezier(0.37, 0, 0.63, 1)); Überschwinger cubic-bezier(0.34, 1.56, 0.64, 1) per CustomEase 'feder' nur im Zustand Freut sich",
   "zustandswechsel": "jede Pose eine gsap.timeline; Wechsel killt Timeline und Loops, geht in 200 ms 'quint' über neutral; gsap.defaults({ overwrite: 'auto' })",
   "atmen": "scaleY 1 → 1.02, scaleX 1 → 1.005, 1400 ms sine.inOut, yoyo, repeat −1 (Zyklus 2800 ms), Ursprung Fußmitte",
   "blinzeln": "scaleY 1 → 0.1 in 80 ms, zurück in 120 ms, sine.inOut; Pause zufällig 2000–6000 ms; in 20 % der Fälle doppelt mit 80 ms Abstand; nur in Ruhe, Denkt, Oops",
   "blick": "gsap.quickTo auf x/y, 300 ms 'quint'; Winkel per atan2 zur Figurmitte, Stärke = Abstand / 320 px (max. 1); Pupille max. 6 px, Gesicht max. 3 px waagerecht, 2 px senkrecht",
   "ruhe": "Lächeln; Trieb wiegt −4° ↔ 4°, 1300 ms sine.inOut, yoyo",
   "denkt": "Blick oben rechts (0.7 / −0.75), Mund 'o' per attr d, rechte Braue y −7, rotate −12°; drei Gedankenpunkte scale 0 → 1, 300 ms 'quint', 120 ms versetzt, danach Puls opacity 1 ↔ 0.45, 450 ms sine.inOut; Figur wiegt ±2°, 600 ms sine.inOut",
   "freut_sich": "Augen werden Bögen (100 ms), Mund offen; Ducken scaleX 1.08 / scaleY 0.9, 120 ms 'quint'; Sprung y −34 px, 320 ms power2.out (dabei scale 0.96 / 1.06, Schatten scaleX 0.7); Landung 280 ms power2.in; Nachfedern scale 1, 500 ms 'feder'; Trieb −10° → 0°, 500 ms 'feder'; Blüte scale 0 → 1, 500 ms 'feder' ab 500 ms; Blätter scale 1.18 ab 450 ms",
   "oops": "Blick unten (−0.2 / 0.8), Mund traurig, Brauen innen hoch ±22°, Trieb −24° in 400 ms 'quint', Wangen 0.45 → 0.2; Kopfschütteln x 0 ↔ 4 px, 80 ms sine.inOut, 6 Halbschritte",
   "schlaeft": "Augen zu (150 ms), Trieb −12° in 600 ms sine.inOut; Atmen tiefer scaleY 1.035 / scaleX 1.01, 2400 ms sine.inOut; drei Z steigen y 8 → −6 → −22 px, 800 + 1600 ms sine.inOut, 800 ms versetzt, Endlosschleife; Leerzustand nach 25 s ohne Eingabe",
   "mund": "ein Pfad mit gleicher Struktur M Q Q Z für alle Münder, GSAP tweent attr d direkt (ohne MorphSVG)",
   "quiz": "Prüfen 900 ms Denkt, dann Freut sich oder Oops; Modulsegment füllt grün scaleX 0 → 1, 500 ms cubic-bezier(0.34, 1.56, 0.64, 1)",
   "ui": "Rahmen und Farben der Antworten 150 ms cubic-bezier(0.22, 1, 0.36, 1); Knopfdruck scale 0.97",
   "reduziert": "statische Posen, Wechsel ohne Übergang (Dauer 0), kein Atmen, kein Blinzeln, keine Loops, Blick bleibt mittig"
  },
  "ausloeser": "klick",
  "touch": "Kein Hover: Beim Tippen schaut Kalle 1200 ms zur Tippstelle und dann wieder nach vorn. Unter 820 px steht die Figur klein neben der Sprechblase über dem Quiz.",
  "reduziert": "Kalle zeigt jede Pose sofort und still: kein Atmen, kein Blinzeln, kein Hüpfen, keine wandernden Z. Der Blick folgt dem Zeiger nicht. Zustand und Text der Sprechblase wechseln wie sonst.",
  "korrekturen": {
   "beschreibung": "Eine kleine SVG-Figur, etwa ein Logo-Charakter, Avatar oder nur Augen, hat Ruhe-Animationen: Sie atmet und blinzelt in zufälligen Abständen. Dazu kommen Zustände wie denkt, freut sich oder schaut zum Zeiger. Zwischen den Zuständen wechseln GSAP-Timelines oder Rive-State-Machines. Die Figur reagiert auf Ereignisse der Oberfläche: Formular gesendet, Fehler, Laden.",
   "warum_es_wirkt": "Die Figur gibt dem Produkt Persönlichkeit und Wärme. Seit KI-Assistenten eigene Maskottchen haben, ist das Thema 2026 wieder stärker im Gespräch.",
   "wann_einsetzen": "Marken mit Charakter, Lade- und Leerzustände, Onboarding, 404-Seiten, Kontaktformulare, Lern- und Quiz-Oberflächen.",
   "wann_nicht": "In nüchternen B2B-Kontexten. Wenn die Figur Inhalte verdeckt oder dauernd zappelt.",
   "varianten": [
    "SVG mit GSAP-Timelines pro Zustand",
    "Augen folgen dem Zeiger (atan2)",
    "Rive-State-Machine",
    "Lottie für einfache Loops"
   ],
   "umsetzung": "Blinzeln: gsap.timeline().to(augen, { scaleY: .1, duration: .08, transformOrigin: 'center' }).to(augen, { scaleY: 1, duration: .12 }), danach mit zufälliger Pause von 2 bis 6 s neu starten. Atmen: Skalierung 1 → 1,02 als yoyo über 2 bis 3 s mit sine.inOut. Für jeden Zustand eine eigene Timeline; beim Wechsel die laufende beenden und kurz über eine neutrale Pose gehen. Münder mit gleicher Pfadstruktur lassen sich per attr: { d } ohne Morph-Plugin überblenden. Blick: Winkel per Math.atan2 zur Figurmitte, Pupillen per gsap.quickTo um wenige Pixel verschieben.",
   "mobil": "Identisch. Ohne Hover schaut die Figur kurz zur Tippstelle.",
   "reduzierte_bewegung": "Statische Pose. Zustände wechseln ohne Übergang und ohne Loop.",
   "barrierefreiheit": "Die Figur ist aria-hidden, wenn sie rein dekorativ ist. Zustände zusätzlich als Text zeigen, etwa in einer Sprechblase mit aria-live=\"polite\"."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Rezept kurs-coaching-lernweg, erfundene Online-Gartenschule Beetschule aus Erfurt (Kurs Dein erstes Hochbeet, Trainerin Thekla), Bricolage Grotesque, Onest, Shantell Sans für Modul-Label und Sprechblasen-Kopf. Maskottchen Kalle: Körper im Markenton #7491ff, Keimtrieb in der Erfolgsfarbe #10bf7a, Blüte in #f7c325 nur beim Erfolg. Quiz zu Modul 03 mit fünf Zuständen (Ruhe, Denkt, Freut sich, Oops, Schläft) und Blick zum Zeiger; Pult zum direkten Umschalten. Feder-Kurve nur beim Erfolg, wie das Rezept verlangt. Vorführung: Zeiger fährt über die Antworten (Kalle schaut mit), falsch, Oops, richtig, Freude, dann Schlaf. Referenzen: ncase.me, brilliant.org, joshwcomeau.com. AD-Review 01.11.2026: Note 4"
 }
}