{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "flick-karten-stapel",
 "name": "Karten-Stapel und Fächer zum Wegschnippen",
 "name_en": "Stacked cards slider / flick cards",
 "kurz": "Probelektion einer Würzburger Weinschule als Lernkarten: oberste Karte nach rechts wischen heißt gemerkt, sie landet federnd hinten im Stapel; als Fächer mit mittiger Karte.",
 "kategorie": "Galerien & Slider",
 "kategorie_slug": "galerien-slider",
 "kategorie_nr": 12,
 "bau_chat": "C6",
 "prioritaet": "C",
 "trendstatus": "aufsteigend",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "verspielt",
  "warm"
 ],
 "stimmung_roh": [
  "verspielt",
  "warm",
  "taktil",
  "jung"
 ],
 "technik": [
  "gsap",
  "draggable",
  "css",
  "vanilla-js"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "gsap"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Karten liegen absolut übereinander, leicht abwechselnd gedreht (bis ±4°), oder als Fächer: Nachbarn um 25 % bzw. 45 % versetzt, um 10° bzw. 15° gedreht und auf 0,9 bzw. 0,8 verkleinert. Nur die oberste oder mittlere Karte ist ziehbar. Beim Ziehen mischen alle Karten ihre Lage zwischen jetziger und nächster Position, proportional zum Zug. Unter 10 % der Breite federt die Karte zurück; darüber fliegt sie weg und wandert ans Ende des Stapels. Die nächste Karte springt mit elastischer Feder an ihren Platz. Knöpfe lösen dieselbe Bewegung aus.",
  "warum_es_wirkt": "Die Geste kennt jeder aus Apps. Sie ist körperlich und spielerisch. Die elastische Landung gibt Charakter, solange sie kurz bleibt.",
  "wann_einsetzen": "Lernkarten, Testimonials, Team, Produktvarianten, Moodboards und Feature-Karten auf verspielten Marken-, Kurs- und Agenturseiten.",
  "wann_nicht": "Wenn viele Elemente verglichen werden müssen. In seriösen B2B-Kontexten ohne verspielte Markenpersönlichkeit.",
  "varianten": [
   "Gedrehter Stapel: oberste Karte wegwerfen, sie wandert nach hinten (rechts/links mit eigener Bedeutung, z. B. gemerkt/nochmal)",
   "Fächer mit mittiger aktiver Karte",
   "Fallender Kartenstapel beim Scrollen",
   "Radialer Fächer oder Bogen"
  ],
  "umsetzung": "Eine Konfigurationstabelle je relativer Position statt Einzellogik: offset = (i − aktiv + n) % n, auf −n/2 bis n/2 gefaltet; Zwischenwerte linear mischen. Während des Ziehens gsap.set mit den gemischten Werten, nach dem Loslassen gsap.to mit elastic.out. Draggable auf einem unsichtbaren Proxy, Auslöser ist die Bühne. Bewegung unter 4 px gilt als Klick. Fallstricke: Kartenbreite bei Resize neu messen. Elastische Kurven nie auf opacity anwenden; Deckkraft in einem eigenen Tween. Mindestens 7 Karten für den Fächer.",
  "mobil": "Sehr gut für Touch. Karten fast vollbreit. Senkrechtes Scrollen nicht blockieren (type x, allowNativeTouchScrolling oder lockAxis).",
  "reduzierte_bewegung": "Keine elastische Kurve, sondern 200 ms ease-out ohne Rotation. Die Stapelneigung bleibt statisch.",
  "barrierefreiheit": "Knöpfe für Vor und Zurück zusätzlich zur Geste, Pfeiltasten auf der fokussierbaren Bühne. Nur die oberste Karte ist erreichbar, die darunter sind inert. Eine Live-Region meldet die neue Karte."
 },
 "messwerte": {
  "easing": "Landung elastic.out(1.2, 1) bzw. elastic.out(1, 0.75); Rückfedern power1.out / power2.out; UI cubic-bezier(0.625,0.05,0,1)",
  "dauer_ms": "Landung 600 bzw. 1000; Rückfedern 200–300; Schatten 250",
  "stagger_ms": "",
  "distanz": "Neigung ±4° bis ±20°; Schwelle 10 % der Breite",
  "sonstiges": "edgeResistance 0,8; Klick-Toleranz 4 px",
  "herkunft": "beobachtet",
  "quelle": "https://www.osmo.supply/resource/flick-cards-slider"
 },
 "kurve": {
  "bezier": [
   0.5,
   1,
   0.89,
   1
  ],
  "css": "cubic-bezier(0.5, 1, 0.89, 1)",
  "name": "power1.out",
  "dauer_ms": 600
 },
 "gesehen_bei": [
  {
   "seite": "Osmo – Flick Cards Slider (Original von Dennis Snellenberg)",
   "url": "https://www.osmo.supply/resource/flick-cards-slider",
   "auszeichnung": "",
   "beobachtung": "Positionen: aktiv 0/0/0°/1; ±1: xPercent ±25, yPercent 1, ±10°, scale 0,9; ±2: ±45, 5, ±15°, 0,8; Rest ±55, ±20°, 0,6, unsichtbar. Bewegung 0,6 s elastic.out(1.2, 1); Drag edgeResistance 0,8, Schwelle 10 % der Breite, Rückfedern 0,3 s power1.out; Klick bei unter 4 px; mindestens 7 Karten.",
   "art": "demo"
  },
  {
   "seite": "Osmo – Stacked Cards Slider (Original von Dennis Snellenberg)",
   "url": "https://www.osmo.supply/resource/stacked-cards-slider",
   "auszeichnung": "",
   "beobachtung": "Neigung ±4°; vor dem Loslassen 0,2 s Power2.easeOut, nach dem Loslassen 1 s elastic.out(1, 0.75); Schwellen 10 % (zurück), 10–115 % (wegwerfen), über 115 % (stärkerer Abgang); Schatten-Übergang 0,25 s cubic-bezier(0.625, 0.05, 0, 1).",
   "art": "demo"
  }
 ],
 "tutorials": [
  {
   "titel": "Osmo: Flick Cards Slider",
   "url": "https://www.osmo.supply/resource/flick-cards-slider"
  },
  {
   "titel": "Osmo: Stacked Cards Slider",
   "url": "https://www.osmo.supply/resource/stacked-cards-slider"
  }
 ],
 "kombinierbar_mit": [
  "token-federnd-verspielt",
  "token-studio-signatur"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/galerien-slider/flick-karten-stapel/",
  "meta": "https://cecodesign.de/lab/fundus/galerien-slider/flick-karten-stapel/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/galerien-slider/flick-karten-stapel/demo"
 },
 "herkunft": {
  "quelldateien": [
   "galerien_stile.json",
   "patch-belege-2.json"
  ],
  "pruefnotizen": [
   "patch-belege-2.json: Kein Produktionsbeleg außerhalb von Osmo-Demos gefunden. Herabstufung bis zum Fund."
  ],
  "prioritaet_hinweis": "31.10.2026: B → C laut patch-belege-2.json (Kein Produktionsbeleg außerhalb von Osmo-Demos gefunden. Herabstufung bis zum Fund.)"
 },
 "bau": {
  "status": "fertig",
  "kurz": "Probelektion einer Würzburger Weinschule als Lernkarten: oberste Karte nach rechts wischen heißt gemerkt, sie landet federnd hinten im Stapel; als Fächer mit mittiger Karte.",
  "demo": true,
  "abhaengigkeiten": [
   "gsap@3.15.0",
   "Draggable@3.15.0"
  ],
  "werte": {
   "stapel_neigung_grad": [
    -2,
    3,
    -4,
    4
   ],
   "stapel_versatz_y_px": [
    0,
    18,
    34,
    48
   ],
   "stapel_scale": [
    1,
    0.95,
    0.9,
    0.85
   ],
   "stapel_sichtbar": "4 Karten, ab Tiefe 4 opacity 0",
   "stapel_drag": "oberste Karte x = dx, rotation = −2° + dx / Breite × 14°; darunter rücken die Karten mit Fortschritt |dx| / (0,6 × Breite) eine Tiefe auf",
   "faecher_konfiguration": "0: 0 / 0 / 0° / 1; ±1: xPercent ±25, yPercent 1, ±10°, scale 0,9; ±2: ±45, 5, ±15°, 0,8; Rest: ±55, 5, ±20°, 0,6, opacity 0",
   "faecher_drag": "relative Position = offset + dx / (0,25 × Breite), Konfiguration linear gemischt; aktive Karte folgt dem Finger bis zur Nachbarposition",
   "schwelle": "10 % der Kartenbreite",
   "weiter_abgang": "über 115 %: x ±1,6 × Breite, ±26° statt ±1,15 × Breite, ±18°",
   "wurf": "0,3 s power2.out",
   "landung_stapel": "1 s elastic.out(1, 0.75)",
   "landung_faecher": "0,6 s elastic.out(1.2, 1)",
   "rueckfedern": "0,3 s power1.out",
   "deckkraft": "immer 0,3 s power1.out, nie elastisch",
   "schatten": "250 ms cubic-bezier(0.625, 0.05, 0, 1)",
   "klick_toleranz_px": 4,
   "stempel": "Gemerkt/Nochmal-Stempel ab 4 % Zug sichtbar, voll bei 14 %",
   "erfolg": "Zähler hüpft 500 ms cubic-bezier(0.34, 1.56, 0.64, 1), Balken 300 ms cubic-bezier(0.22, 1, 0.36, 1) in #10bf7a",
   "ui": "150 ms cubic-bezier(0.22, 1, 0.36, 1)",
   "kartenbreite": "clamp(248px, min(26vw, 45svh), 350px), Höhe × 1,27; Telefon min(76vw, 330px)",
   "reduziert": "0,2 s power2.out, keine Drehung beim Ziehen, keine Feder",
   "karteninhalt": "Raster minmax(0, 1fr) / auto / auto / auto: Bildfeld füllt die Restfläche, Erklärtext min-height 6em (4 Zeilen à 15 px, Zeilenhöhe 1,5)"
  },
  "ausloeser": "ziehen",
  "touch": "Waagerecht wischen (Draggable type x mit allowNativeTouchScrolling, senkrechtes Scrollen bleibt frei). Karten fast vollbreit; im Fächer holt Antippen einer Nachbarkarte sie in die Mitte. Knöpfe Nochmal/Gemerkt bzw. Zurück/Weiter darunter.",
  "reduziert": "Keine elastische Landung, kein Wurf: alle Wechsel 200 ms power2.out ohne Rotation. Die Stapelneigung bleibt statisch (±2°), der Zähler hüpft nicht.",
  "korrekturen": {
   "beschreibung": "Karten liegen absolut übereinander, leicht abwechselnd gedreht (bis ±4°), oder als Fächer: Nachbarn um 25 % bzw. 45 % versetzt, um 10° bzw. 15° gedreht und auf 0,9 bzw. 0,8 verkleinert. Nur die oberste oder mittlere Karte ist ziehbar. Beim Ziehen mischen alle Karten ihre Lage zwischen jetziger und nächster Position, proportional zum Zug. Unter 10 % der Breite federt die Karte zurück; darüber fliegt sie weg und wandert ans Ende des Stapels. Die nächste Karte springt mit elastischer Feder an ihren Platz. Knöpfe lösen dieselbe Bewegung aus.",
   "warum_es_wirkt": "Die Geste kennt jeder aus Apps. Sie ist körperlich und spielerisch. Die elastische Landung gibt Charakter, solange sie kurz bleibt.",
   "wann_einsetzen": "Lernkarten, Testimonials, Team, Produktvarianten, Moodboards und Feature-Karten auf verspielten Marken-, Kurs- und Agenturseiten.",
   "wann_nicht": "Wenn viele Elemente verglichen werden müssen. In seriösen B2B-Kontexten ohne verspielte Markenpersönlichkeit.",
   "varianten": [
    "Gedrehter Stapel: oberste Karte wegwerfen, sie wandert nach hinten (rechts/links mit eigener Bedeutung, z. B. gemerkt/nochmal)",
    "Fächer mit mittiger aktiver Karte",
    "Fallender Kartenstapel beim Scrollen",
    "Radialer Fächer oder Bogen"
   ],
   "umsetzung": "Eine Konfigurationstabelle je relativer Position statt Einzellogik: offset = (i − aktiv + n) % n, auf −n/2 bis n/2 gefaltet; Zwischenwerte linear mischen. Während des Ziehens gsap.set mit den gemischten Werten, nach dem Loslassen gsap.to mit elastic.out. Draggable auf einem unsichtbaren Proxy, Auslöser ist die Bühne. Bewegung unter 4 px gilt als Klick. Fallstricke: Kartenbreite bei Resize neu messen. Elastische Kurven nie auf opacity anwenden; Deckkraft in einem eigenen Tween. Mindestens 7 Karten für den Fächer.",
   "mobil": "Sehr gut für Touch. Karten fast vollbreit. Senkrechtes Scrollen nicht blockieren (type x, allowNativeTouchScrolling oder lockAxis).",
   "reduzierte_bewegung": "Keine elastische Kurve, sondern 200 ms ease-out ohne Rotation. Die Stapelneigung bleibt statisch.",
   "barrierefreiheit": "Knöpfe für Vor und Zurück zusätzlich zur Geste, Pfeiltasten auf der fokussierbaren Bühne. Nur die oberste Karte ist erreichbar, die darunter sind inert. Eine Live-Region meldet die neue Karte."
  },
  "geprueft": "01.11.2026",
  "notiz": "Rezept kurs-coaching-lernweg. Erfundene Weinschule Mainschleife aus Würzburg mit Online-Kurs „Frankenwein verstehen“ (Trainerin Theresa Kleinhenz): acht Lernkarten aus Modul 02 mit eigenen SVG-Zeichnungen. Rechts wischen = gemerkt (Erfolgsgrün, Zähler mit Feder), links = kommt wieder; so ist die elastische Landung ein Erfolgsmoment, wie das Rezept Federn erlaubt. Bricolage Grotesque, Onest, Shantell Sans für Modul-Labels und Stempel. Varianten Stapel und Fächer mit den Osmo-Werten. Referenzen: osmo.supply, brilliant.org, designacademy.nl. AD-Review 01.11.2026: Note 4. Nachgebessert: Bildfeld füllt die Restfläche der Karte (vorher überlappte das Label bei 960 × 720 das Bild), Text mindestens 4 Zeilen; Knopf „Platz sichern“ in #4f6be6 für Kontrast; Weinfakten vorsichtiger und genauer (trocken nach EU-Regel, Bocksbeutel in Deutschland, Schoppen „in Franken meist“, Muschelkalk „gelten als“). Zugang 02.11.2026: --marke-tief #4f6be6 → #4561d8 (Notiz 4,9:1, CTA weiß darauf entsprechend kräftiger); Kontrastmodus-Rahmen für Knöpfe."
 }
}