{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "3d-raum-uebergaenge",
 "name": "3D-Kipp-Übergänge (Würfel, Ecke, Riss)",
 "name_en": "3D cube / peel / tear transitions",
 "kurz": "Die alte Seite kippt als Würfelfläche weg, schält sich von der Ecke ab oder reißt mittig auf, darunter liegt die neue.",
 "kategorie": "Seitenübergänge",
 "kategorie_slug": "seitenuebergaenge",
 "kategorie_nr": 1,
 "bau_chat": "C3",
 "prioritaet": "C",
 "trendstatus": "abklingend",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "verspielt",
  "laut",
  "experimentell"
 ],
 "stimmung_roh": [
  "verspielt",
  "retro",
  "laut"
 ],
 "technik": [
  "css",
  "gsap",
  "webgl-shader"
 ],
 "technik_gruppen": [
  "css",
  "gsap",
  "webgl"
 ],
 "leistungskosten": "mittel",
 "steckbrief": {
  "beschreibung": "Beim Seitenwechsel bewegt sich die alte Seite wie ein physisches Objekt. Sie dreht als Würfelfläche weg (rotateY 90°, perspective 1200–2000 px), schält sich wie Papier von einer Ecke ab oder reißt auf. Dahinter oder als Nachbarfläche erscheint die neue Seite.",
  "warum_es_wirkt": "Der Wechsel wird greifbar und überrascht. Heute wirkt das vor allem als bewusstes Retro-Zitat oder als Spieltrieb.",
  "wann_einsetzen": "Bei verspielten Kampagnen, Spielen, Experimenten und Studioseiten, deren Idee das Räumliche ist, etwa vier Seiten als vier Flächen eines Würfels.",
  "wann_nicht": "Bei seriösen Marken und Portfolios, die Zurückhaltung brauchen. Der Effekt erinnert schnell an Keynote-Folienübergänge.",
  "varianten": [
   "Würfel: zwei Flächen eines Würfels, der sich um 90° dreht (Interlude cube12, Osmo 3D Cube)",
   "Ecke: die Seite löst sich von einer Ecke wie ein Blatt (Interlude peel08, corner13)",
   "Riss: die Seite reißt mittig auf und fällt in zwei Hälften (Interlude tear14, dort per Shader)"
  ],
  "umsetzung": "Würfel: Wrapper mit perspective, darin ein Würfel-Element mit transform-style: preserve-3d. Die alte Fläche bekommt translateZ(W/2), die neue rotateY(90deg) translateZ(W/2), beide backface-visibility: hidden. Der Würfel dreht von rotateY(0) auf rotateY(-90deg) und steht dabei auf translateZ(-W/2), damit die Fläche in Ruhe genau in der Bildebene liegt. Ecke: die alte Seite per clip-path an einer wandernden Faltlinie beschneiden, die Rückseite als gespiegeltes Polygon darüberlegen. Riss: die alte Seite zweimal zeigen, je mit gezacktem clip-path, und die Hälften auseinanderdrehen. Echte Papierkrümmung gibt es nur per WebGL-Plane mit Vertex-Deformation. Im echten Einsatz läuft das in einem Router (Barba, Astro, Swup) oder mit View Transitions: Die neue Seite wird geladen, beide Seiten liegen kurz übereinander, danach wird die alte entfernt. Die Demo simuliert das mit vier Seitenzuständen in einer Datei.",
  "mobil": "Der Würfel funktioniert, gern per Wischgeste. Ecke und Riss lieber weglassen.",
  "reduzierte_bewegung": "Unbedingt ersetzen, Rotationen belasten stark. Stattdessen eine kurze Überblendung.",
  "barrierefreiheit": "Rotationen lösen häufig Bewegungsübelkeit aus, prefers-reduced-motion strikt beachten. Nach dem Wechsel den Fokus auf die neue Überschrift setzen und den Seitenwechsel per aria-live ansagen. Kopien der alten Seite während des Übergangs inert und aria-hidden."
 },
 "messwerte": {
  "easing": "power2.inOut",
  "dauer_ms": "800–1100",
  "stagger_ms": "",
  "distanz": "rotateY 90°",
  "sonstiges": "perspective 1200–2000 px",
  "herkunft": "typisch",
  "quelle": ""
 },
 "kurve": {
  "bezier": [
   0.65,
   0,
   0.35,
   1
  ],
  "css": "cubic-bezier(0.65, 0, 0.35, 1)",
  "name": "power2.inOut",
  "dauer_ms": 900
 },
 "gesehen_bei": [
  {
   "seite": "Interlude Demo",
   "url": "https://interlude.crnacura.workers.dev/",
   "auszeichnung": "",
   "beobachtung": "cube12, peel08, corner13 und tear14 in 'Moving the page'.",
   "art": "demo"
  },
  {
   "seite": "Osmo Page Transition Course",
   "url": "https://www.osmo.supply/product/page-transition-course",
   "auszeichnung": "",
   "beobachtung": "Vorlage '3D Cube'.",
   "art": "demo"
  }
 ],
 "tutorials": [
  {
   "titel": "Interlude: A Starter for Custom Page Transitions in Astro (Codrops)",
   "url": "https://tympanus.net/codrops/2026/10/07/interlude-astro-page-transitions/"
  }
 ],
 "kombinierbar_mit": [
  "richtungsbewusste-uebergaenge"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/seitenuebergaenge/3d-raum-uebergaenge/",
  "meta": "https://cecodesign.de/lab/fundus/seitenuebergaenge/3d-raum-uebergaenge/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/seitenuebergaenge/3d-raum-uebergaenge/demo"
 },
 "herkunft": {
  "quelldateien": [
   "uebergaenge.json",
   "patch-belege-3.json"
  ],
  "pruefnotizen": [
   "patch-belege-3.json: Auf rund 80 geprüften Award- und Studio-Seiten kein Produktionsbeleg gefunden; bleibt C als Demo-Effekt. Interlude bleibt einziger Demo-Beleg."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Die alte Seite kippt als Würfelfläche weg, schält sich von der Ecke ab oder reißt mittig auf, darunter liegt die neue.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "power2.inOut = cubic-bezier(0.65, 0, 0.35, 1), für alle drei Varianten",
   "dauer_ms": {
    "wuerfel": 900,
    "ecke": 1100,
    "riss": 1100,
    "reduziert_fade": 200,
    "ui_hover": 200
   },
   "wuerfel": "Flächen translateZ(W/2), neue Fläche rotateY(±90deg) translateZ(W/2); Würfel translateZ(-W/2 - 0.28 W · sin(π·e)) rotateY(0 → ∓90deg); abgewandte Fläche dunkelt 0 → 0.55 (schwarzes Overlay); backface-visibility hidden",
   "perspective": "1600px Desktop, 1200px bis 640 px Breite; perspective-origin 50% 50%",
   "ecke": "Faltlinie senkrecht zur Richtung (∓W, -0.82 H) ab Ecke unten rechts (vorwärts) bzw. unten links (zurück); alte Seite clip-path Polygon, Rückseite = Spiegelung des abgelösten Teils an der Faltlinie, Verlauf #8c83ff → #2a1fc4 → #4b3bff → #7a6fff; Schlagschatten blur 16px, rgba(0,0,0,.5), um 14 px versetzt; neue Seite an der Falz bis 0.72 abgedunkelt",
   "riss": "gezackte Linie aus 34 Segmenten bei 38–62 % Breite; Faserkante 3–9 px #fbfaf6; Hälften rotate ±13deg (rechts 0.85×), rotateY ±24deg, x ±0.75 W · e², y +0.12 H · e², Ursprung am unteren Ende des Risses; neue Seite 0.6 → 0 abgedunkelt",
   "richtung": "kürzester Weg auf dem Würfel: vorwärts dreht nach links, zurück nach rechts; Ecke spiegelt die Startecke",
   "signalfarbe": "#4b3bff (Raum hinter dem Würfel, Rückseite des Blatts, CTA)"
  },
  "ausloeser": "klick",
  "touch": "Nur die Würfel-Variante: Ecke und Riss sind unter (hover: none) ausgeblendet. Waagerecht wischen (über 50 px) dreht den Würfel zur nächsten oder vorherigen Fläche, senkrechtes Scrollen bleibt frei (touch-action: pan-y). Steuerung startet eingeklappt.",
  "reduziert": "Kein 3D, keine Drehung, kein Riss: die neue Seite blendet in 200 ms linear über die alte. Die Werte-Anzeige nennt das.",
  "korrekturen": {
   "name": "3D-Kipp-Übergänge (Würfel, Ecke, Riss)",
   "beschreibung": "Beim Seitenwechsel bewegt sich die alte Seite wie ein physisches Objekt. Sie dreht als Würfelfläche weg (rotateY 90°, perspective 1200–2000 px), schält sich wie Papier von einer Ecke ab oder reißt auf. Dahinter oder als Nachbarfläche erscheint die neue Seite.",
   "warum_es_wirkt": "Der Wechsel wird greifbar und überrascht. Heute wirkt das vor allem als bewusstes Retro-Zitat oder als Spieltrieb.",
   "wann_einsetzen": "Bei verspielten Kampagnen, Spielen, Experimenten und Studioseiten, deren Idee das Räumliche ist, etwa vier Seiten als vier Flächen eines Würfels.",
   "wann_nicht": "Bei seriösen Marken und Portfolios, die Zurückhaltung brauchen. Der Effekt erinnert schnell an Keynote-Folienübergänge.",
   "varianten": [
    "Würfel: zwei Flächen eines Würfels, der sich um 90° dreht (Interlude cube12, Osmo 3D Cube)",
    "Ecke: die Seite löst sich von einer Ecke wie ein Blatt (Interlude peel08, corner13)",
    "Riss: die Seite reißt mittig auf und fällt in zwei Hälften (Interlude tear14, dort per Shader)"
   ],
   "umsetzung": "Würfel: Wrapper mit perspective, darin ein Würfel-Element mit transform-style: preserve-3d. Die alte Fläche bekommt translateZ(W/2), die neue rotateY(90deg) translateZ(W/2), beide backface-visibility: hidden. Der Würfel dreht von rotateY(0) auf rotateY(-90deg) und steht dabei auf translateZ(-W/2), damit die Fläche in Ruhe genau in der Bildebene liegt. Ecke: die alte Seite per clip-path an einer wandernden Faltlinie beschneiden, die Rückseite als gespiegeltes Polygon darüberlegen. Riss: die alte Seite zweimal zeigen, je mit gezacktem clip-path, und die Hälften auseinanderdrehen. Echte Papierkrümmung gibt es nur per WebGL-Plane mit Vertex-Deformation. Im echten Einsatz läuft das in einem Router (Barba, Astro, Swup) oder mit View Transitions: Die neue Seite wird geladen, beide Seiten liegen kurz übereinander, danach wird die alte entfernt. Die Demo simuliert das mit vier Seitenzuständen in einer Datei.",
   "mobil": "Der Würfel funktioniert, gern per Wischgeste. Ecke und Riss lieber weglassen.",
   "reduzierte_bewegung": "Unbedingt ersetzen, Rotationen belasten stark. Stattdessen eine kurze Überblendung.",
   "barrierefreiheit": "Rotationen lösen häufig Bewegungsübelkeit aus, prefers-reduced-motion strikt beachten. Nach dem Wechsel den Fokus auf die neue Überschrift setzen und den Seitenwechsel per aria-live ansagen. Kopien der alten Seite während des Übergangs inert und aria-hidden."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt nach Rezept kreativstudio-buehne: erfundenes Digitalstudio „Kubatur³“ in der Tabakfabrik Linz. Die Website hat vier Seiten, die als vier Flächen eines Würfels gedacht sind (Start, Arbeiten, Studio, Kontakt). Hell und dunkel wechseln, Signalfarbe #4b3bff ist der Raum hinter dem Würfel und die Rückseite des Blatts. TikTok Sans wdth 75/800, DM Mono. Alle drei Varianten ohne WebGL: Würfel mit CSS 3D, Ecke als wandernde clip-path-Faltlinie mit gespiegelter Rückseite, Riss mit gezacktem clip-path und Faserkante. Eigene Uhr per requestAnimationFrame, damit pause() alles anhält. Vorführung: Würfel, Ecke, Riss im Wechsel rund um den Würfel. Referenzen (nur Prinzipien): cuberto.com, fantasy.co, k72.ca, aircord.co.jp. AD-Review 01.11.2026: Note 5 Zugang 02.11.2026: Hochgestellte ³ der Marke auf dunklen Flächen in der helleren Signalstufe #7d71ff (5,3:1). Bei 200 % Zoom (≤ 640 × 560 px) entfällt das Showreel-Bild der Startfläche, damit ihr Text bei gesperrter Seite ganz im Bild steht. Kontrastmodus: Knöpfe mit Rahmen ButtonText. Offen: die Flächen Arbeiten, Studio, Kontakt bei 200 % nicht einzeln gemessen."
 }
}