{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "like-herz-burst",
 "name": "Like/Herz mit Partikel-Burst",
 "name_en": "Like button burst / animated icon",
 "kurz": "Merk-Herz auf Objektkarten: Das Herz springt aus null mit Überschwinger, kleine Partikel und ein Ring zerstreuen sich, der Zähler der Merkliste rollt weiter.",
 "kategorie": "Mikroanimationen",
 "kategorie_slug": "mikroanimationen",
 "kategorie_nr": 9,
 "bau_chat": "C4",
 "prioritaet": "B",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 2,
 "stimmung": [
  "verspielt",
  "warm"
 ],
 "stimmung_roh": [
  "verspielt",
  "warm",
  "freundlich"
 ],
 "technik": [
  "css",
  "vanilla-js",
  "svg",
  "canvas"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "canvas"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Beim Aktivieren schrumpft das Herz auf 0 und springt mit Überschwinger über 1,2 bis 1,25 zurück auf 1. Dabei füllt es sich mit Farbe. Gleichzeitig fliegen 6 bis 12 kleine Partikel radial aus und verblassen, oft dehnt sich dazu ein Ring aus. Deaktivieren bleibt schlicht: Die Farbe geht, es gibt keinen Burst. Ein Zähler daneben rollt eine Ziffer weiter.",
  "warum_es_wirkt": "Der kurze Burst belohnt die Handlung. Die Bestätigung fühlt sich gut an und lädt dazu ein, wieder zu interagieren.",
  "wann_einsetzen": "Favoriten und Merklisten, Applaus oder Feedback unter Artikeln, Reaktionen.",
  "wann_nicht": "In sehr nüchternen Kontexten wie Banking und bei Massenaktionen, die man oft hintereinander ausführt. In seriösen Branchen nur dezent: Markenfarben, kurze Reichweite.",
  "varianten": [
   "Burst, Ring oder Wirbel als animiertes Icon (Prinzip der mo.js-Animocons)",
   "Element zerfällt in Partikel und setzt sich wieder zusammen (Codrops ParticleEffectsButtons)",
   "Konfetti beim Erfolg, sparsam (eigener Eintrag konfetti-erfolg)",
   "Squash and Stretch des Icons (siehe icon-squash-stretch)"
  ],
  "umsetzung": "Ohne Bibliothek: 8 bis 12 Partikel als Spans mit Winkel, per CSS-Keyframes oder Web Animations API von innen nach außen bewegen, dabei verkleinern und ausblenden (ease-out, 400 bis 600 ms, Reichweite 20 bis 40 px). Herz-Pop als Keyframes scale 0 → 1,25 → 1 in 300 bis 450 ms, etwa mit cubic-bezier(.2, 0, 0, 1). Den Zustand trägt aria-pressed. Den Burst nur beim Aktivieren abspielen. Sitzt das Herz in einem runden Knopf, die Reichweite ab dem Knopfrand rechnen und die Effektebene hinter den Knopf legen.",
  "mobil": "Identisch. Touch ist der Hauptanwendungsfall, Trefferfläche mindestens 44 px.",
  "reduzierte_bewegung": "Nur die Farbfüllung wechseln, kein Pop und kein Burst.",
  "barrierefreiheit": "Ein <button> mit aria-pressed=\"true|false\" und eindeutigem Namen, etwa „Objekt merken“. Zählerstand sparsam über eine aria-live-Region ansagen. Partikel sind aria-hidden."
 },
 "messwerte": {
  "easing": "easeInOutCubic (Particles-Default); ease-out für Burst; cubic-bezier(.2,0,0,1) (Every-Pop)",
  "dauer_ms": "1000 (Particles); Herz-Pop 300–450; Burst 400–600; 350 (Herz-Pop, Every)",
  "stagger_ms": "",
  "distanz": "Partikelradius 20–40 px; Pop-Scale 1.25; Partikel 3 px",
  "sonstiges": "Partikel-Reichweite als CSS-Variable",
  "herkunft": "beobachtet",
  "quelle": "https://github.com/codrops/ParticleEffectsButtons (README); https://nerdy.dev/ ; https://every.to/"
 },
 "kurve": {
  "bezier": [
   0.65,
   0,
   0.35,
   1
  ],
  "css": "cubic-bezier(0.65, 0, 0.35, 1)",
  "name": "easeinoutcubic",
  "dauer_ms": 1000
 },
 "gesehen_bei": [
  {
   "seite": "Codrops Animocons (Repo)",
   "url": "https://github.com/codrops/Animocons",
   "auszeichnung": "",
   "beobachtung": "Animierte Icons mit mo.js (Burst-Effekte für Like/Favorit).",
   "art": "demo"
  },
  {
   "seite": "Codrops ParticleEffectsButtons (Repo)",
   "url": "https://github.com/codrops/ParticleEffectsButtons",
   "auszeichnung": "",
   "beobachtung": "Bibliothek: duration 1000, easing easeInOutCubic, particlesAmountCoefficient 3, oscilationCoefficient 20, type circle/rectangle/triangle, direction left/right/top/bottom; disintegrate()/integrate().",
   "art": "demo"
  },
  {
   "seite": "nerdy.dev (Adam Argyle)",
   "url": "https://nerdy.dev/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (style.css + HTML): .like-button mit aria-pressed und aria-label ('Like this post. 24 likes.'); Effektebene .like-fx mit .like-particle (3 px, drei Farbtöne neon-pink/purple/cyan), .like-ring (Ring in Icongröße) und --like-fx-reach (1 bzw. .45 in Listen); Herz füllt sich mit animierter Flüssigkeit (like-wave-drift 4.5s/7s linear infinite).",
   "art": "website"
  },
  {
   "seite": "Every",
   "url": "https://every.to/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (Bundle 09p52w9y-0whf.css): @keyframes heart-pop scale 1 → 1.25 (40 %) → 1, .animate-heart-pop .35s var(--ease-swift) = cubic-bezier(.2,0,0,1).",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "Codrops: Particle Effects for Buttons",
   "url": "https://tympanus.net/codrops/?p=34685"
  }
 ],
 "kombinierbar_mit": [
  "zahlen-odometer",
  "icon-squash-stretch",
  "token-federnd-verspielt"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/mikroanimationen/like-herz-burst/",
  "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/like-herz-burst/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/mikroanimationen/like-herz-burst/demo"
 },
 "herkunft": {
  "quelldateien": [
   "hover.json",
   "patch-luecken-b.json",
   "r3-belege-b.json"
  ],
  "pruefnotizen": [
   "patch-luecken-b.json: Variante ‚Konfetti beim Erfolg (sparsam)‘ ist jetzt eigener Eintrag konfetti-erfolg (mit canvas-confetti-Standardwerten); gegenseitig verlinken.",
   "r3-belege-b.json (Runde 3, 31.10.2026): Burst-Partikel per CSS-Klassen belegt (Animation selbst per JS, Chunk nicht geprüft); Every liefert die Pop-Kurve."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Merk-Herz auf Objektkarten: Das Herz springt aus null mit Überschwinger, kleine Partikel und ein Ring zerstreuen sich, der Zähler der Merkliste rollt weiter.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "knopf": "48 × 48 px, Icon 22 px; Effektebene hinter dem Knopf, Partikel starten unter dem Rand",
   "punkte": {
    "herz_pop": "350 ms cubic-bezier(0.2, 0, 0, 1), scale 0 → 1.25 (40 %) → 1",
    "ring": "400 ms cubic-bezier(0, 0, 0.58, 1), scale 1 → 1.6, Rand 2 → 0.5 px, Deckkraft 0.9 → 0",
    "partikel": "8 Richtungen × 2 (Hauptpunkt 5 px, Begleiter 3 px um 13° versetzt), Start 20 px ab Mitte, Ziel 24 + 28 px (Begleiter 24 + 19.6 px), scale 1 → 0.2",
    "dauer_ms": 500,
    "verzoegerung_ms": 60,
    "easing": "cubic-bezier(0, 0, 0.58, 1)"
   },
   "funken": {
    "herz_pop": "400 ms cubic-bezier(0.2, 0, 0, 1), scale 0 → 1.2 (60 %) → 1",
    "ring": "450 ms cubic-bezier(0, 0, 0.58, 1), scale 1 → 1.45",
    "partikel": "12 Striche 10 × 2 px, radial ausgerichtet, Start 22 px, Ziel 24 + 22 px, scaleX 1 → 0",
    "dauer_ms": 450,
    "verzoegerung_ms": 40,
    "easing": "cubic-bezier(0, 0, 0.58, 1)"
   },
   "wirbel": {
    "herz_pop": "450 ms cubic-bezier(0.2, 0, 0, 1), scale 0 → 1.25 (40 %) → 1",
    "ring": "keiner",
    "partikel": "10 Punkte 5/3 px auf Spiralbahn (13 Stützpunkte), Drehung 70°, Start 18 px, Ziel 24 + 36 px, scale 1 → 0.35, Deckkraft ein bis 10 %, aus ab 60 %",
    "dauer_ms": 1000,
    "verzoegerung_ms": 0,
    "easing": "cubic-bezier(0.65, 0, 0.35, 1) (easeInOutCubic)"
   },
   "farben_partikel": "#02385c (Markenton), #b8913e (Gold), #c0785a (Ton); Ring #fcfaf5 mit 1 px Kontur rgba(2, 56, 92, .22)",
   "deaktivieren": "Füllung opacity 1 → 0, 200 ms cubic-bezier(0.165, 0.84, 0.44, 1), kein Burst",
   "zaehler": "Ziffernsäule translate um 1.2em je Schritt, 400 ms cubic-bezier(0.165, 0.84, 0.44, 1); Kopf-Herz Pop 1 → 1.2 → 1, 350 ms, 180 ms verzögert",
   "hover": "scale 1.06, 200 ms cubic-bezier(0.165, 0.84, 0.44, 1); Druck scale 0.92, 150 ms",
   "reduziert": "Füllung 150 ms linear, kein Pop, kein Burst, Zähler springt"
  },
  "ausloeser": "klick",
  "touch": "Identisch per Tippen (48-px-Ziel), kein Hover-Zoom, keine Tap-Markierung; Karten untereinander.",
  "reduziert": "Nur die Farbfüllung blendet in 150 ms ein; kein Pop, keine Partikel, kein Ring, Zähler wechselt ohne Rollen.",
  "korrekturen": {
   "beschreibung": "Beim Aktivieren schrumpft das Herz auf 0 und springt mit Überschwinger über 1,2 bis 1,25 zurück auf 1. Dabei füllt es sich mit Farbe. Gleichzeitig fliegen 6 bis 12 kleine Partikel radial aus und verblassen, oft dehnt sich dazu ein Ring aus. Deaktivieren bleibt schlicht: Die Farbe geht, es gibt keinen Burst. Ein Zähler daneben rollt eine Ziffer weiter.",
   "warum_es_wirkt": "Der kurze Burst belohnt die Handlung. Die Bestätigung fühlt sich gut an und lädt dazu ein, wieder zu interagieren.",
   "wann_einsetzen": "Favoriten und Merklisten, Applaus oder Feedback unter Artikeln, Reaktionen.",
   "wann_nicht": "In sehr nüchternen Kontexten wie Banking und bei Massenaktionen, die man oft hintereinander ausführt. In seriösen Branchen nur dezent: Markenfarben, kurze Reichweite.",
   "varianten": [
    "Burst, Ring oder Wirbel als animiertes Icon (Prinzip der mo.js-Animocons)",
    "Element zerfällt in Partikel und setzt sich wieder zusammen (Codrops ParticleEffectsButtons)",
    "Konfetti beim Erfolg, sparsam (eigener Eintrag konfetti-erfolg)",
    "Squash and Stretch des Icons (siehe icon-squash-stretch)"
   ],
   "umsetzung": "Ohne Bibliothek: 8 bis 12 Partikel als Spans mit Winkel, per CSS-Keyframes oder Web Animations API von innen nach außen bewegen, dabei verkleinern und ausblenden (ease-out, 400 bis 600 ms, Reichweite 20 bis 40 px). Herz-Pop als Keyframes scale 0 → 1,25 → 1 in 300 bis 450 ms, etwa mit cubic-bezier(.2, 0, 0, 1). Den Zustand trägt aria-pressed. Den Burst nur beim Aktivieren abspielen. Sitzt das Herz in einem runden Knopf, die Reichweite ab dem Knopfrand rechnen und die Effektebene hinter den Knopf legen.",
   "mobil": "Identisch. Touch ist der Hauptanwendungsfall, Trefferfläche mindestens 44 px.",
   "reduzierte_bewegung": "Nur die Farbfüllung wechseln, kein Pop und kein Burst.",
   "barrierefreiheit": "Ein <button> mit aria-pressed=\"true|false\" und eindeutigem Namen, etwa „Objekt merken“. Zählerstand sparsam über eine aria-live-Region ansagen. Partikel sind aria-hidden."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Rezept immobilien-diskret-hochwertig, erfundener Makler Seeli & Brunnmatt (Luzern), Libre Caslon Display und Hanken Grotesk, Objektbilder als eigene SVG. Das Rezept passt, weil Merklisten in Immobilienportalen Standard sind; der Burst bleibt diskret (Markenfarben, Reichweite ab Knopfrand 22 bis 36 px). Drei Objektkarten mit Merk-Herz, Varianten Punkte, Funken, Wirbel per Umschalter, Merkliste im Kopf zählt mit (Ziffernrolle). Vorführung: Zeiger merkt zwei Objekte, nimmt sie wieder heraus, wechselt dann die Variante. Partikel per Web Animations API, nach Ende entfernt. AD-Review 01.11.2026: Note 4. Zugang 02.11.2026: 320 px: bis 360 px Kopf mit 14 px Abstand und engerer Laufweite der Marke, damit „Merkliste“ nicht quer scrollt. Kontrastmodus: Knöpfe mit Rahmen ButtonText."
 }
}