{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "radial-bogen-slider",
 "name": "Radial- und Bogen-Slider (Karten auf Kreisbahn)",
 "name_en": "Radial cards slider / orbit carousel",
 "kurz": "Uhrenkarten liegen auf einem großen Kreis, dessen Mitte weit unter der Bühne sitzt: Man zieht den Bogen, er rastet auf der obersten Karte ein.",
 "kategorie": "Galerien & Slider",
 "kategorie_slug": "galerien-slider",
 "kategorie_nr": 12,
 "bau_chat": "C6",
 "prioritaet": "C",
 "trendstatus": "aufsteigend",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "verspielt",
  "laut"
 ],
 "stimmung_roh": [
  "verspielt",
  "dynamisch",
  "frisch"
 ],
 "technik": [
  "css",
  "gsap",
  "draggable"
 ],
 "technik_gruppen": [
  "css",
  "gsap"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Karten liegen auf einem großen Kreis, dessen Mittelpunkt weit unter (oder neben) dem Viewport liegt. Sichtbar ist nur ein flacher Bogen. Jede Karte ist um ihren Winkel gedreht und steht damit tangential zur Bahn. Ziehen, Pfeile oder Tasten drehen den ganzen Kreis; danach rastet die oberste Karte ein. Als Laufband dreht sich der Kreis mit CSS gleichmäßig weiter.",
  "warum_es_wirkt": "Die Geometrie ist ungewohnt und bleibt trotzdem lesbar. Der Bogen gibt der Bewegung eine natürliche Richtung, und die oberste Karte ist ohne weitere Auszeichnung die wichtigste.",
  "wann_einsetzen": "Produkt- oder Featurekarten, Kollektionen, Testimonials und Kategorien. Gut, wenn eine Auswahl mit gleich großen Bildern gezeigt werden soll.",
  "wann_nicht": "Bei langen Texten auf den Karten, in streng rasterbasierten Layouts und bei weniger als sechs Elementen, weil der Kreis dann Lücken zeigt.",
  "varianten": [
   "Bogen mit Ziehen und Einrasten (GSAP Draggable)",
   "Laufband: der Kreis dreht sich mit reinem CSS",
   "3D: Karten als Spirale oder Tornado",
   "Orbit-Kacheln als Endlosschleife"
  ],
  "umsetzung": "Ein Ring ohne Größe sitzt im Kreismittelpunkt. Karte i bekommt rotate(i × Winkelschritt) translateY(−R), der Ring wird als Ganzes gedreht. Bei vollem Kreis (Anzahl × Schritt = 360°) braucht es keine Wrap-Logik. Ziehen über Draggable auf einem Proxy, Weg in Grad umrechnen (180 / (π · R) je Pixel). Einrasten: Math.round(winkel / schritt) × schritt. Laufband: @keyframes rotate 0 → −360deg, linear, infinite, auf einem inneren Element, damit es sich nicht mit der GSAP-Drehung stört. Fallstricke: große Transform-Flächen und Clipping am Container (overflow hidden).",
  "mobil": "Flacherer Bogen, größere Karten und Wischen. Nachbarkarten sollen sichtbar anschneiden, damit die Bahn erkennbar bleibt.",
  "reduzierte_bewegung": "Laufband anhalten, Einrasten ohne Animation.",
  "barrierefreiheit": "Logische DOM-Reihenfolge, Buttons für Vor und Zurück, Pfeiltasten auf dem fokussierten Bogen, aria-live für die Angaben der aktiven Karte. Das Laufband braucht einen Knopf zum Anhalten."
 },
 "messwerte": {
  "easing": "Einrasten power3.out bzw. cubic-bezier(0.625,0.05,0,1); Marquee linear",
  "dauer_ms": "Einrasten 600–800; Marquee 30000–60000 pro Umdrehung",
  "stagger_ms": "",
  "distanz": "Winkelschritt 8–15°",
  "sonstiges": "",
  "herkunft": "typisch",
  "quelle": ""
 },
 "kurve": {
  "bezier": [
   0.25,
   1,
   0.5,
   1
  ],
  "css": "cubic-bezier(0.25, 1, 0.5, 1)",
  "name": "power3.out",
  "dauer_ms": 600
 },
 "gesehen_bei": [
  {
   "seite": "Osmo – Radial Cards Slider (GSAP) und Radial Cards Marquee (CSS)",
   "url": "https://www.osmo.supply/resource/radial-cards-slider-gsap",
   "auszeichnung": "",
   "beobachtung": "In der Osmo-Ressourcenliste geführt (Marquee: https://www.osmo.supply/resource/radial-cards-marquee-css); Details nicht geprüft.",
   "art": "demo"
  },
  {
   "seite": "Osmo – 3D Cards Tornado und Orbit Tiles Infinite Loop",
   "url": "https://www.osmo.supply/resource/3d-cards-tornado",
   "auszeichnung": "",
   "beobachtung": "In der Osmo-Ressourcenliste geführt (Orbit: https://www.osmo.supply/resource/orbit-tiles-infinite-loop); Details nicht geprüft.",
   "art": "demo"
  }
 ],
 "tutorials": [
  {
   "titel": "Osmo: Radial Cards Slider (GSAP)",
   "url": "https://www.osmo.supply/resource/radial-cards-slider-gsap"
  }
 ],
 "kombinierbar_mit": [
  "flick-karten-stapel",
  "token-federnd-verspielt"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/galerien-slider/radial-bogen-slider/",
  "meta": "https://cecodesign.de/lab/fundus/galerien-slider/radial-bogen-slider/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/galerien-slider/radial-bogen-slider/demo"
 },
 "herkunft": {
  "quelldateien": [
   "galerien_stile.json",
   "patch-belege-2.json"
  ],
  "pruefnotizen": [
   "patch-belege-2.json: Kein Produktionsbeleg; bleibt C."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Uhrenkarten liegen auf einem großen Kreis, dessen Mitte weit unter der Bühne sitzt: Man zieht den Bogen, er rastet auf der obersten Karte ein.",
  "demo": true,
  "abhaengigkeiten": [
   "gsap@3.15.0",
   "Draggable@3.15.0"
  ],
  "werte": {
   "winkelschritt_grad": 15,
   "karten": "24 auf dem vollen Kreis (12 Modelle zweimal, 180° versetzt, nie gleichzeitig sichtbar)",
   "radius": "R = Kartenbreite × 1,38 / (2 · sin 7,5°), Telefon Faktor 1,1; bei 1440 px rund 1000 px",
   "kartenbreite": "clamp(150px, 13.2vw, 196px), Telefon min(52vw, 220px); Höhe × 1,3",
   "aufbau": "Ring 0 × 0 px auf (50 %, 46 px + Kartenhöhe/2 + R); Karte i: rotate(i · 15°) translateY(−R); Ring per GSAP rotation",
   "einrasten": "power3.out 700 ms (cubic-bezier(0.25, 1, 0.5, 1)), Ziel = Math.round(winkel / 15) · 15",
   "ziehen": "Draggable type x auf unsichtbarem Proxy, trigger = Bogen; Grad je px = 180 / (π · R); Schwung = Tempo der letzten 100 ms · 0,12 s, höchstens ±2 Karten",
   "laufband": "@keyframes rotate 0 → −360deg, 48 s je Umdrehung, linear, infinite; Hover und Knopf „Anhalten“ setzen animation-play-state: paused",
   "minuterie": "120 Striche alle 3°, jeder fünfte lang, Radius R + Kartenhöhe/2 + 26 px; Messing-Index steht fest auf zwölf Uhr",
   "text_wechsel": "aus 200 ms cubic-bezier(0.1, 0.6, 0.4, 1), ein 300 ms cubic-bezier(0.1, 0.9, 0.3, 1), Versatz 4 px",
   "ui": "Hover und Farbe 200 ms cubic-bezier(0.1, 0.6, 0.4, 1), Öffnen 300 ms cubic-bezier(0.1, 0.9, 0.3, 1)",
   "abblendung": "Verlauf Anthrazit an den Seiten (0–24 %, 76–100 %) und unten (bis 34 %)"
  },
  "ausloeser": "ziehen",
  "touch": "Wischen dreht den Bogen, vertikales Scrollen bleibt möglich (touch-action pan-y, Draggable type x). Größere Karten, flacherer Abstand, Nachbarn ragen ins Bild. Laufband hält nur über den Knopf an.",
  "reduziert": "Einrasten ohne Animation, Pfeile und Tasten springen sofort. Das Laufband steht. Texte wechseln ohne Versatz und Blende. Die Vorführung springt alle 1,8 s eine Karte weiter.",
  "korrekturen": {
   "beschreibung": "Karten liegen auf einem großen Kreis, dessen Mittelpunkt weit unter (oder neben) dem Viewport liegt. Sichtbar ist nur ein flacher Bogen. Jede Karte ist um ihren Winkel gedreht und steht damit tangential zur Bahn. Ziehen, Pfeile oder Tasten drehen den ganzen Kreis; danach rastet die oberste Karte ein. Als Laufband dreht sich der Kreis mit CSS gleichmäßig weiter.",
   "warum_es_wirkt": "Die Geometrie ist ungewohnt und bleibt trotzdem lesbar. Der Bogen gibt der Bewegung eine natürliche Richtung, und die oberste Karte ist ohne weitere Auszeichnung die wichtigste.",
   "wann_einsetzen": "Produkt- oder Featurekarten, Kollektionen, Testimonials und Kategorien. Gut, wenn eine Auswahl mit gleich großen Bildern gezeigt werden soll.",
   "wann_nicht": "Bei langen Texten auf den Karten, in streng rasterbasierten Layouts und bei weniger als sechs Elementen, weil der Kreis dann Lücken zeigt.",
   "varianten": [
    "Bogen mit Ziehen und Einrasten (GSAP Draggable)",
    "Laufband: der Kreis dreht sich mit reinem CSS",
    "3D: Karten als Spirale oder Tornado",
    "Orbit-Kacheln als Endlosschleife"
   ],
   "umsetzung": "Ein Ring ohne Größe sitzt im Kreismittelpunkt. Karte i bekommt rotate(i × Winkelschritt) translateY(−R), der Ring wird als Ganzes gedreht. Bei vollem Kreis (Anzahl × Schritt = 360°) braucht es keine Wrap-Logik. Ziehen über Draggable auf einem Proxy, Weg in Grad umrechnen (180 / (π · R) je Pixel). Einrasten: Math.round(winkel / schritt) × schritt. Laufband: @keyframes rotate 0 → −360deg, linear, infinite, auf einem inneren Element, damit es sich nicht mit der GSAP-Drehung stört. Fallstricke: große Transform-Flächen und Clipping am Container (overflow hidden).",
   "mobil": "Flacherer Bogen, größere Karten und Wischen. Nachbarkarten sollen sichtbar anschneiden, damit die Bahn erkennbar bleibt.",
   "reduzierte_bewegung": "Laufband anhalten, Einrasten ohne Animation.",
   "barrierefreiheit": "Logische DOM-Reihenfolge, Buttons für Vor und Zurück, Pfeiltasten auf dem fokussierten Bogen, aria-live für die Angaben der aktiven Karte. Das Laufband braucht einen Knopf zum Anhalten."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Rezept luxus-manufaktur-stille, erfundene Uhrenmanufaktur Prießnitz aus Glashütte mit zwölf Referenzen (Modellnamen nach Orten im Müglitztal). Anthrazit-Bühne, Bodoni Moda und Instrument Sans, Messing nur als Linie. Zifferblätter als eigene SVG-Zeichnungen auf hellgrauer Produktfläche. Eine Minuterie läuft mit dem Ring, der Messing-Index auf zwölf Uhr steht fest: Der Bogen wird zur Lünette. Zwei Varianten (Bogen, Laufband). Referenzen nur als Prinzip: h-moser.com, junghans.de, alange-soehne.com, nomos-glashuette.com. AD-Review 01.11.2026: Note 5."
 }
}