{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "karussell-karten-verformen",
 "name": "Karussell mit verformten Karten",
 "name_en": "Card deform carousel (bend, wave, roll)",
 "kurz": "Arbeiten eines Ludwigshafener Studios als Karussell: die Karte in der Mitte liegt flach, die Nachbarn biegen sich weg, schlagen beim Ziehen Wellen oder rollen sich vom Rand her ein.",
 "kategorie": "Galerien & Slider",
 "kategorie_slug": "galerien-slider",
 "kategorie_nr": 12,
 "bau_chat": "C6",
 "prioritaet": "F",
 "trendstatus": "aufsteigend",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "verspielt",
  "laut",
  "experimentell"
 ],
 "stimmung_roh": [
  "experimentell",
  "verspielt",
  "laut"
 ],
 "technik": [
  "three",
  "webgl-shader",
  "vanilla-js",
  "pointer-events",
  "css"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "webgl"
 ],
 "leistungskosten": "hoch",
 "steckbrief": {
  "beschreibung": "Ein Karussell, in dem die Karte in der Mitte flach liegt und die Karten daneben sich je nach Abstand verformen: Sie biegen sich nach hinten weg, schlagen beim Ziehen Wellen oder rollen sich vom äußeren Rand her ein. Die Verformung hängt an Position und Tempo, nicht an der Zeit. Beim Loslassen rastet die nächste Karte ein und glättet sich.",
  "warum_es_wirkt": "Die Karten verhalten sich wie Papier oder Stoff. Das macht das Ziehen körperlich: Schnelles Wischen lässt die Karten flattern, langsames Ziehen biegt sie nur. Die flache Mitte lenkt den Blick, ohne dass Nachbarn abgedunkelt werden müssen.",
  "wann_einsetzen": "Showcase eines Kreativstudios, Kampagnen- oder Lookbook-Seiten mit wenigen, starken Motiven (5 bis 9 Karten). Als Experiment, wenn das Karussell selbst die Haltung zeigen soll.",
  "wann_nicht": "Produkte, Zimmer, Immobilien oder Werke, die unverfälscht wirken müssen (die Verformung verzerrt Kanten und Proportionen). Inhalte, die man vergleichen oder lesen muss. Auf Touch ohne funktionierenden Fallback. Seiten mit Lenis-Pflicht oder mehreren WebGL-Ebenen. Lange Listen.",
  "varianten": [
   "biegen: Nachbarkarten krümmen sich um eine senkrechte Achse nach hinten, Stärke nach Abstand zur Mitte",
   "welle: Beim Ziehen läuft eine Sinuswelle über die Karten, Amplitude nach Tempo, klingt beim Einrasten aus",
   "rollen: Nachbarkarten rollen sich vom äußeren Rand her um einen Zylinder ein (Page-Curl-Prinzip)",
   "zerfallen: Karten zerfallen zu Staub (nicht gebaut, hohe Kosten)"
  ],
  "umsetzung": "DOM bleibt die Quelle: eine Liste echter Karten (Link, Bild mit Alt-Text, Titel) in einer Spur, die per transform verschoben wird. Darüber ein WebGL-Canvas (three, pointer-events: none). Je Karte eine PlaneGeometry mit 48 × 8 Segmenten (Rollen 64 × 8), die der Lage der DOM-Karte folgt; das DOM-Bild wird unsichtbar, bleibt aber für Screenreader da. Im Vertex-Shader steuert der Abstand d zur Mitte die Verformung: Biegen krümmt die Außenkante nach hinten, Welle legt einen Sinus nach Tempo darüber, Rollen legt alles jenseits einer wandernden Kante auf einen Zylinder. Ziehen per Pointer Events mit Trägheit, Einrasten mit expo.out. Ohne WebGL: rotateY und scale je nach Abstand. Reduzierte Bewegung: normales Karussell.",
  "mobil": "Wischen mit Trägheit, Einrasten auf die nächste Karte. Pixelverhältnis höchstens 1,5. Karten 78 % der Breite, Nachbarn ragen an den Rändern herein.",
  "reduzierte_bewegung": "Normales Karussell ohne Verformung und ohne WebGL. Wechsel springen ohne Animation, Ziehen bleibt möglich.",
  "barrierefreiheit": "Section mit aria-roledescription „Karussell“ und Namen, Karten als Liste mit aria-roledescription „Folie“ und „2 von 7: Titel“. Alle Karten-Links sind per Tab erreichbar; der Fokus holt die Karte in die Mitte, er landet also nie im Unsichtbaren. Pfeiltasten, Pos1 und Ende wenn der Fokus im Karussell ist. Vor/Zurück als echte Buttons mit Namen. Wechsel per aria-live polite angesagt. Keine automatische Rotation, daher kein Pause-Knopf nötig (WCAG 2.2.2). Ziehen hat eine Alternative per Klick und Tastatur (WCAG 2.5.7)."
 },
 "messwerte": {
  "easing": "cubic-bezier(0.16, 1, 0.3, 1) (expo.out) für Einrasten und Wechsel",
  "dauer_ms": "Einrasten 900, UI 150",
  "stagger_ms": "",
  "distanz": "eine Kartenbreite plus Abstand je Schritt",
  "sonstiges": "Biegung −0.45 · a · t² (in Kartenbreiten), Welle bis 0.12 · Breite, Rollradius 0.12 · Breite",
  "herkunft": "eigene Festlegung",
  "quelle": ""
 },
 "kurve": {
  "bezier": [
   0.16,
   1.0,
   0.3,
   1.0
  ],
  "css": "cubic-bezier(0.16, 1, 0.3, 1)",
  "name": "expo.out",
  "dauer_ms": 900
 },
 "gesehen_bei": [
  {
   "seite": "Slider Revolution Changelog 7.2.5 und 7.2.6",
   "url": "https://www.sliderrevolution.com/changelog/?cst&query-12-page=2",
   "auszeichnung": "",
   "beobachtung": "7.2.5 (26.10.2026): neuer Karussell-Typ „Card Deform“, die Karten neben der mittleren knittern, falten, rollen, wellen, zerspringen oder verdrillen, die Mitte liegt flach. 7.2.6: Variante „Dust“, Nachbarkarten zerfallen vom äußeren Rand her zu Staub. Nur das Prinzip, kein Code übernommen. Abgerufen 02.11.2026.",
   "art": "artikel"
  },
  {
   "seite": "Codrops: Building a WebGL Carousel with React Three Fiber and GSAP (2023)",
   "url": "https://tympanus.net/codrops/2023/04/27/building-a-webgl-carousel-with-react-three-fiber-and-gsap",
   "auszeichnung": "",
   "beobachtung": "WebGL-Karussell mit Planes; Welle über sin() im Vertex-Shader, Stärke über ein Uniform uProgress, das GSAP animiert; Ziehen und Scrollen steuern den Fortschritt.",
   "art": "tutorial"
  }
 ],
 "tutorials": [
  {
   "titel": "Codrops: Creating Wavy Infinite Carousels in React Three Fiber with GLSL Shaders (26.11.2025)",
   "url": "https://tympanus.net/codrops/2025/11/26/creating-wavy-infinite-carousels-in-react-three-fiber-with-glsl-shaders"
  },
  {
   "titel": "Codrops: Building a WebGL Carousel with React Three Fiber and GSAP",
   "url": "https://tympanus.net/codrops/2023/04/27/building-a-webgl-carousel-with-react-three-fiber-and-gsap"
  }
 ],
 "kombinierbar_mit": [
  "drag-slider-traegheit-loop",
  "kontextueller-cursor",
  "token-editorial-langsam",
  "schrift-hero-viewportbreit"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/galerien-slider/karussell-karten-verformen/",
  "meta": "https://cecodesign.de/lab/fundus/galerien-slider/karussell-karten-verformen/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/galerien-slider/karussell-karten-verformen/demo"
 },
 "herkunft": {
  "quelldateien": [
   "Buttons/SR-Recherche 02.11.2026"
  ],
  "pruefnotizen": [
   "Codrops 2025 (Wavy Infinite Carousels) nur per Suche belegt, Seite nicht abrufbar.",
   "Abgrenzung: 3d-karussell-zylinder dreht starre Karten auf einem Zylinder, webgl-bildverzerrung verzerrt Bildinhalte unter dem Zeiger. Hier verformt sich die Karte selbst, abhängig vom Abstand zur Mitte."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Arbeiten eines Ludwigshafener Studios als Karussell: die Karte in der Mitte liegt flach, die Nachbarn biegen sich weg, schlagen beim Ziehen Wellen oder rollen sich vom Rand her ein.",
  "demo": true,
  "abhaengigkeiten": [
   "three@0.186.0"
  ],
  "werte": {
   "aufbau": "DOM ist die Quelle: ul.spur mit 7 Karten (Link, Bild mit Alt-Text), per translate3d verschoben. Darüber ein Canvas in der Bühne (pointer-events none, aria-hidden), PerspectiveCamera fov 30, Abstand (Höhe/2)/tan(15°), damit 1 Einheit = 1 CSS-Pixel. Je Karte eine Plane 1 × 1 mit scale (Breite, Höhe, Breite) an der DOM-Position; DOM-Bild opacity 0, bleibt für Screenreader.",
   "karte": "Breite clamp(210px, min(24vw, 28svh), 380px), Format 4:5, Abstand clamp(18px, 2.4vw, 36px); Telefon 78vw; Pixelverhältnis höchstens 1.5",
   "abstand": "d = Index − pos (in Kartenschritten), a = min(|d|, 1.2), t = 0 an der Innenkante bis 1 außen",
   "biegen": "z = −0.45 · a · t², x −= 0.18 · a · t², danach Drehung um y um 0.22 · a rad; Schatten 0.55 · a · t (× 0.6); Plane 48 × 8 Segmente",
   "welle": "z = 0.12 · v · sin(3π · x + 6 · Zeit + 2d) · (0.6 + 0.4 · cos(π · y)) plus Grundbiegung −0.15 · a · t²; v = Tempo in px/s / 900, auf ±1 begrenzt, Lerp 6 pro s; Schatten aus der Steigung",
   "rollen": "Radius 0.12 · Breite, Rollkante bei 0.5 − 0.42 · a; jenseits der Kante x = Kante + r · sin θ, z = r · (1 − cos θ), ab θ = π flach oben auf (z = 2r); Rückseite Papier #e9e5dc (gl_FrontFacing), Drehung 0.12 · a rad; Plane 64 × 8",
   "einrasten": "900 ms expo.out (1 − 2^(−10t) ≈ cubic-bezier(0.16, 1, 0.3, 1)) auf die nächste Karte",
   "ziehen": "Pointer Events, Schwelle 6 px, dann setPointerCapture; Wurf = −Tempo · 0.18 s, höchstens ±1.5 Karten; Gummiband an den Enden × 0.35",
   "tastatur": "Pfeil links/rechts, Pos1, Ende im Karussell; Tab auf eine Karte holt sie in die Mitte; Vor/Zurück-Knöpfe 56 px, an den Enden disabled",
   "titelwechsel": "raus 150 ms Deckkraft, rein 350 ms Deckkraft und 900 ms translateY 10 px → 0, Kurve cubic-bezier(0.16, 1, 0.3, 1)",
   "titelbilder": "7 Plakate selbst auf Canvas 2D gezeichnet (800 × 1000, TikTok Sans und DM Mono), als JPEG-Daten-URL ins DOM-Bild und als CanvasTexture (ohne Farbraumumwandlung)",
   "render": "nur zeichnen, solange gezogen, eingerastet oder die Welle ausschwingt; Karten mehr als eine Breite außerhalb unsichtbar",
   "ohne_webgl": "CSS-Fallback: perspective 1400px, je Karte rotateY(−Vorzeichen · a · 26°) scale(1 − 0.14 · a), transform-origin an der Innenkante",
   "ui": "Knöpfe 200 ms cubic-bezier(0.16, 1, 0.3, 1)"
  },
  "ausloeser": "ziehen",
  "touch": "Wischen mit Trägheit (touch-action pan-y, senkrechtes Scrollen bleibt), Einrasten auf die nächste Karte; Karten 78vw, Nachbarn ragen an den Rändern herein; Pfeilknöpfe 56 px.",
  "reduziert": "Kein WebGL, keine Verformung, keine CSS-Drehung: normales Karussell, Wechsel springen ohne Animation, Ziehen bleibt möglich.",
  "korrekturen": {
   "barrierefreiheit": "Section mit aria-roledescription „Karussell“ und Namen, Karten als Liste mit aria-roledescription „Folie“ und „2 von 7: Titel“. Alle Karten-Links sind per Tab erreichbar; der Fokus holt die Karte in die Mitte, er landet also nie im Unsichtbaren. Pfeiltasten, Pos1 und Ende wenn der Fokus im Karussell ist. Vor/Zurück als echte Buttons mit Namen. Wechsel per aria-live polite angesagt. Keine automatische Rotation, daher kein Pause-Knopf nötig (WCAG 2.2.2). Ziehen hat eine Alternative per Klick und Tastatur (WCAG 2.5.7).",
   "umsetzung": "DOM bleibt die Quelle: eine Liste echter Karten (Link, Bild mit Alt-Text, Titel) in einer Spur, die per transform verschoben wird. Darüber ein WebGL-Canvas (three, pointer-events: none). Je Karte eine PlaneGeometry mit 48 × 8 Segmenten (Rollen 64 × 8), die der Lage der DOM-Karte folgt; das DOM-Bild wird unsichtbar, bleibt aber für Screenreader da. Im Vertex-Shader steuert der Abstand d zur Mitte die Verformung: Biegen krümmt die Außenkante nach hinten, Welle legt einen Sinus nach Tempo darüber, Rollen legt alles jenseits einer wandernden Kante auf einen Zylinder. Ziehen per Pointer Events mit Trägheit, Einrasten mit expo.out. Ohne WebGL: rotateY und scale je nach Abstand. Reduzierte Bewegung: normales Karussell."
  },
  "geprueft": "02.11.2026",
  "notiz": "Rezept kreativstudio-buehne (TikTok Sans wdth 75/800, DM Mono, Schwarz/Weiß mit Signal #c8f04a, eine Out-Kurve). Erfundenes Studio Krempe in Ludwigshafen mit sieben eigenen, auf Canvas gezeichneten Plakaten. Start auf der zweiten Arbeit, damit links und rechts Nachbarn liegen. Prinzip nach dem Card-Deform-Karussell im Slider-Revolution-Changelog 7.2.5 (sliderrevolution.com), Welle nach tympanus.net; kein Code übernommen. AD-Review 02.11.2026: Note 5. Signalfarbe von Orange #ff5a1f auf Hellgrün #c8f04a gewechselt, weil fluessig-marmor-hintergrund (Strudel) dieselbe Schrift und dasselbe Orange trägt; die Plakate behalten ihre eigenen Farben.",
  "varianten": [
   {
    "id": "biegen",
    "name": "Biegen",
    "wann": "Studio-Showcase, Lookbook: ruhigste Form, die Nachbarn krümmen sich weg wie Karton, die Mitte bleibt unverzerrt.",
    "werte": {
     "biegung": "−0.45 · a · t²",
     "drehung": "0.22 · a rad"
    }
   },
   {
    "id": "welle",
    "name": "Welle nach Tempo",
    "wann": "Kampagne, Festival, Musik: die Karten flattern nur beim Ziehen und Einrasten wie Stoff, in Ruhe liegen sie fast flach.",
    "werte": {
     "amplitude": "0.12 · Breite · v",
     "v": "px/s / 900, Lerp 6/s",
     "grundbiegung": "−0.15 · a · t²"
    }
   },
   {
    "id": "rollen",
    "name": "Rollen",
    "wann": "Plakat-, Druck- und Papierarbeiten: die Nachbarn rollen sich vom Rand her ein und zeigen ihre Papierrückseite.",
    "werte": {
     "radius": "0.12 · Breite",
     "rollkante": "0.5 − 0.42 · a",
     "rueckseite": "#e9e5dc"
    }
   }
  ]
 }
}