{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "in-den-warenkorb-flug",
 "name": "In-den-Warenkorb-Flug",
 "name_en": "Add to cart / add to basket animation",
 "kurz": "Salz-Manufaktur aus Lüneburg: Das Produktbild fliegt im Bogen zum Warenkorb, das Icon federt, der Zähler rollt hoch und ein Mini-Warenkorb zeigt den Weg zum Gratisversand.",
 "kategorie": "Mikroanimationen",
 "kategorie_slug": "mikroanimationen",
 "kategorie_nr": 9,
 "bau_chat": "C4",
 "prioritaet": "C",
 "trendstatus": "etabliert",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "verspielt"
 ],
 "stimmung_roh": [
  "verspielt",
  "kommerziell"
 ],
 "technik": [
  "css",
  "vanilla-js",
  "motion",
  "view-transitions"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "andere"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Beim Hinzufügen fliegt eine Miniatur des Produkts in einem Bogen zum Warenkorb-Icon. Das Icon reagiert mit kurzem Pop oder Squash, der Zähler rollt hoch. Gleichzeitig zeigt der Button Erfolg, zum Beispiel mit Häkchen.",
  "warum_es_wirkt": "Räumliche Verknüpfung: Man sieht, wohin das Produkt gegangen ist, und weiß, wo man es wiederfindet.",
  "wann_einsetzen": "Shops, Merklisten und „Zur Auswahl hinzufügen“ in Konfiguratoren.",
  "wann_nicht": "Wenn der Warenkorb nicht sichtbar ist, das wäre ein Flug ins Nichts. Bei Massenaktionen.",
  "varianten": [
   "Bogen über zwei getrennte Achsen (x linear, y ease-in), wie im Motion-Beispiel „Add to basket“",
   "Bogen per offset-path mit quadratischer Kurve",
   "View Transition als Shared Element zwischen Produktbild und Warenkorb-Icon"
  ],
  "umsetzung": "Klon des Produktbilds fixed an die Startposition setzen. Bogen über zwei getrennte Animationen: äußeres Element x linear, inneres y ease-in, dazu scale 1 → etwa .2, 500 bis 700 ms. Alternativ offset-path: path('M… Q… …') mit offset-distance 0 → 100 %. Danach Klon entfernen und am Warenkorb-Icon eine kurze @keyframes-Animation (pop) abspielen. View-Transition-Variante: view-transition-name am Klon, im Update auf die Icon-Position setzen; das ergibt eine gerade Bahn.",
  "mobil": "Identisch. Der Warenkorb sitzt oft unten oder im klebenden Kopf, Hauptsache sichtbar.",
  "reduzierte_bewegung": "Nur Zähler und Bestätigung, ohne Flug. Pop höchstens ganz kurz oder weglassen.",
  "barrierefreiheit": "Statusmeldung „Zum Warenkorb hinzugefügt“ per aria-live. Klon aria-hidden. Die Anzahl gehört auch ins aria-label des Warenkorb-Links."
 },
 "messwerte": {
  "easing": "x linear / y ease-in für Bogen",
  "dauer_ms": "500–700",
  "stagger_ms": "",
  "distanz": "",
  "sonstiges": "",
  "herkunft": "typisch",
  "quelle": ""
 },
 "kurve": {
  "bezier": [
   0.42,
   0,
   1,
   1
  ],
  "css": "cubic-bezier(0.42, 0, 1, 1)",
  "name": "ease-in",
  "dauer_ms": 500
 },
 "gesehen_bei": [
  {
   "seite": "Motion Examples: Add to basket",
   "url": "https://motion.dev/examples/js-add-to-basket",
   "auszeichnung": "",
   "beobachtung": "Offizielles Beispiel (JS/React).",
   "art": "demo"
  }
 ],
 "tutorials": [
  {
   "titel": "Motion: Add to basket",
   "url": "https://motion.dev/examples/js-add-to-basket"
  }
 ],
 "kombinierbar_mit": [
  "button-zustaende",
  "zahlen-odometer",
  "toast-stapel"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/mikroanimationen/in-den-warenkorb-flug/",
  "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/in-den-warenkorb-flug/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/mikroanimationen/in-den-warenkorb-flug/demo"
 },
 "herkunft": {
  "quelldateien": [
   "hover.json"
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Salz-Manufaktur aus Lüneburg: Das Produktbild fliegt im Bogen zum Warenkorb, das Icon federt, der Zähler rollt hoch und ein Mini-Warenkorb zeigt den Weg zum Gratisversand.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "flug_ms": 600,
   "bogen": "zwei getrennte Achsen per Web Animations API: äußeres Element translateX linear, inneres translateY cubic-bezier(0.42, 0, 1, 1) (ease-in) plus scale 1 → 26 px / Bildbreite",
   "offset_path": "path(\"M start Q kontrollpunkt ziel\"), Kontrollpunkt mittig, 160 px über dem höheren Punkt; offset-distance 0 → 100 %, offset-rotate 0deg, offset-anchor center, 600 ms cubic-bezier(0.42, 0, 1, 1), gleiches Schrumpfen",
   "view_transition": "document.startViewTransition, view-transition-name: flug am Klon, ::view-transition-group(flug) 600 ms cubic-bezier(0.42, 0, 1, 1), nur das alte Bild sichtbar; Wurzel mit view-transition-name: none, damit die Seite nicht überblendet; ohne Unterstützung Bogen",
   "klon": "Kopie des Produktbilds, fixed an der Startposition, aria-hidden, Radius 12 px, Schatten 0 10px 30px rgba(33,33,33,.18), nach der Landung entfernt",
   "pop": "Warenkorb-Icon @keyframes 420 ms cubic-bezier(0, 0, 0.2, 1): scale(1.22, .82) bei 35 %, scale(.92, 1.1) bei 65 %, transform-origin 50 % 80 %",
   "zaehler": "alte Zahl nach oben, neue von unten, je translateY 0 → -100 %, 250 ms cubic-bezier(0, 0, 0.2, 1); Badge 700 ms grün #10714e (Übergang 300 ms)",
   "button": "Druck scale .97 in 150 ms; Erfolg 1600 ms: Fläche #10714e, Text wechselt mit opacity und 8 px Versatz in 200 ms, Häkchen per stroke-dashoffset 20 → 0 in 250 ms nach 120 ms",
   "mini_warenkorb": "öffnet 280 ms cubic-bezier(0, 0, 0.2, 1) (opacity, translateY -8 px → 0), schließt 200 ms cubic-bezier(0.4, 0, 1, 1), schließt nach 2600 ms von selbst; Versandbalken scaleX in 400 ms bis zur Schwelle 39 €",
   "bedingung": "Flug nur, wenn Warenkorb-Icon und Produktbild im Viewport sind; sonst nur Pop, Zähler und Mini-Warenkorb",
   "status": "aria-live polite: „<Produkt> wurde in den Warenkorb gelegt. n Artikel, Summe.“",
   "vorfuehren": "erster Klick nach 2200 ms, dann alle 2800 ms das nächste Produkt; Variante je Runde Bogen, offset-path, Bogen, View Transition; nach 8 Artikeln zurück auf 0",
   "farben": "#f5f4f1 Grund, #ece9e2 Kachel, #212121 Text und Button, #666666 Grundpreis, #10714e Erfolg und Versand, #b4472b Akzent Neu-Badge",
   "schriften": "Young Serif 400 nur für Claim clamp(2.25rem, 1.4rem + 3.6vw, 4.5rem)/1.05; Instrument Sans für alles andere, Produktname 600 1.0625rem, Preis tabular-nums, Labels 0.75rem versal +0.06em"
  },
  "ausloeser": "klick",
  "touch": "Identisch: Tippen auf „In den Warenkorb“ löst Flug, Pop, Zähler und Mini-Warenkorb aus. Der Warenkorb sitzt im klebenden Kopf und bleibt sichtbar. Kein Hover-Zoom auf den Bildern.",
  "reduziert": "Kein Flug und kein Pop. Der Button zeigt den Erfolg per Überblenden, Zähler und Mini-Warenkorb wechseln ohne Weg, die Statusmeldung kommt wie sonst.",
  "korrekturen": {
   "beschreibung": "Beim Hinzufügen fliegt eine Miniatur des Produkts in einem Bogen zum Warenkorb-Icon. Das Icon reagiert mit kurzem Pop oder Squash, der Zähler rollt hoch. Gleichzeitig zeigt der Button Erfolg, zum Beispiel mit Häkchen.",
   "warum_es_wirkt": "Räumliche Verknüpfung: Man sieht, wohin das Produkt gegangen ist, und weiß, wo man es wiederfindet.",
   "wann_einsetzen": "Shops, Merklisten und „Zur Auswahl hinzufügen“ in Konfiguratoren.",
   "wann_nicht": "Wenn der Warenkorb nicht sichtbar ist, das wäre ein Flug ins Nichts. Bei Massenaktionen.",
   "varianten": [
    "Bogen über zwei getrennte Achsen (x linear, y ease-in), wie im Motion-Beispiel „Add to basket“",
    "Bogen per offset-path mit quadratischer Kurve",
    "View Transition als Shared Element zwischen Produktbild und Warenkorb-Icon"
   ],
   "umsetzung": "Klon des Produktbilds fixed an die Startposition setzen. Bogen über zwei getrennte Animationen: äußeres Element x linear, inneres y ease-in, dazu scale 1 → etwa .2, 500 bis 700 ms. Alternativ offset-path: path('M… Q… …') mit offset-distance 0 → 100 %. Danach Klon entfernen und am Warenkorb-Icon eine kurze @keyframes-Animation (pop) abspielen. View-Transition-Variante: view-transition-name am Klon, im Update auf die Icon-Position setzen; das ergibt eine gerade Bahn.",
   "mobil": "Identisch. Der Warenkorb sitzt oft unten oder im klebenden Kopf, Hauptsache sichtbar.",
   "reduzierte_bewegung": "Nur Zähler und Bestätigung, ohne Flug. Pop höchstens ganz kurz oder weglassen.",
   "barrierefreiheit": "Statusmeldung „Zum Warenkorb hinzugefügt“ per aria-live. Klon aria-hidden. Die Anzahl gehört auch ins aria-label des Warenkorb-Links."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Rezept d2c-produkt-zuerst (Signatur-Muster), erfundene Salz-Manufaktur Siedewerk aus Lüneburg mit vier Bestsellern als eigene SVG-Packshots (Glas, Steingut, Papierbeutel). Zeigt Flug, Icon-Pop, rollenden Zähler, Erfolgs-Button und Mini-Warenkorb mit Gratisversand-Schwelle; drei Flug-Varianten per Umschalter unter dem Raster. Kurven aus dem Rezept: Öffnen (0, 0, 0.2, 1), Schließen (0.4, 0, 1, 1), Flug y ease-in laut Messwert. Referenzen: fellowproducts.com, brightland.co, labourandwait.co.uk, manufactum.de. AD-Review 01.11.2026: Note 5 Zugang 02.11.2026: --leise #6B6B6B auf #666666 (4,7:1 auf Kachel), Produktbild-Links mit aria-label (Produktname), Icon-SVG aria-hidden, Knopfrahmen im Kontrastmodus."
 }
}