{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "vorhang-farbpanel-wipe",
 "name": "Farbvorhang / Panel-Wipe in Markenfarbe",
 "name_en": "Curtain / color panel wipe transition",
 "kurz": "Ein Panel in Markenfarbe fährt über die Seite, zeigt den Seitennamen und gibt nach oben die neue Seite frei: einfach, doppelt oder in der Farbe des geklickten Links.",
 "kategorie": "Seitenübergänge",
 "kategorie_slug": "seitenuebergaenge",
 "kategorie_nr": 1,
 "bau_chat": "C3",
 "prioritaet": "A",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 2,
 "stimmung": [
  "verspielt",
  "laut"
 ],
 "stimmung_roh": [
  "laut",
  "verspielt",
  "markenstark",
  "selbstbewusst"
 ],
 "technik": [
  "css",
  "gsap",
  "barba",
  "taxi",
  "view-transitions",
  "clip-path"
 ],
 "technik_gruppen": [
  "css",
  "gsap"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Beim Klick fährt ein vollflächiges Panel in Markenfarbe von unten (oder von der Seite) über die alte Seite. Sobald es deckt, wird der Inhalt getauscht. Im Panel können der Seitenname, ein Wort oder das Logo stehen. Dann fährt das Panel in derselben Richtung weiter und gibt die neue Seite frei, statt zurückzufahren. Die neue Seite setzt sich mit leichtem Versatz (y 40 bis 80 px, Scale 1.05 auf 1). Gemessen: Snellenberg 500 ms rein und 800 ms raus, darkroom 1100 ms power3.inOut.",
  "warum_es_wirkt": "Die Markenfarbe wird zur Interpunktion: Jeder Seitenwechsel ist ein kleiner Markenmoment. Das Panel verdeckt Ladezeit und Layoutsprünge. Läuft es rein und raus in dieselbe Richtung, wirkt der Wechsel wie ein durchlaufender Film.",
  "wann_einsetzen": "Bei Studio-, Agentur- und Markenseiten mit kräftiger Signalfarbe. Bei Seiten, deren neue Inhalte spürbar laden.",
  "wann_nicht": "Bei inhaltsgetriebenen Seiten mit vielen schnellen Wechseln, etwa Dokumentationen oder Shops mit Filtern. Spätestens ab der dritten Navigation nervt der Vorhang dort.",
  "varianten": [
   "Einfach: ein Panel fährt von unten rein und nach oben durch (Snellenberg: 500 ms Power4.easeIn rein, 800 ms Power3.easeInOut raus)",
   "Doppel-Wipe: zwei Panels in zwei Farben, 80 bis 150 ms versetzt (Osmo „Double Wipe“)",
   "Linkfarbe: Das Panel nimmt die Farbe des geklickten Links oder Projekts an (Gabriel Contassot)",
   "Mit Seitenname oder Logo im Panel (siehe seitenname-typo-uebergang)",
   "Mit gebogener Kante (siehe gebogener-wipe-shape)",
   "Nativ als ::view-transition-new(root) mit clip-path inset (Piccalilli „Star-Wars-Wipe“)"
  ],
  "umsetzung": "Ein fixiertes Overlay: position: fixed; inset: 0; hoher z-index; pointer-events: none; im Ruhezustand translateY(100%). Leave: Panel auf translateY(0) animieren und auf das Ende warten. Dann Inhalt tauschen und auf 0 scrollen. Enter: Panel auf translateY(-100%) weiterfahren, danach zurücksetzen. Mit clip-path statt Transform (inset(100% 0 0 0) auf inset(0), dann inset(0 0 100% 0)) steht das Panel still und nur die Kante wandert. Das ist kantenschärfer, der Panelinhalt fährt dann nicht mit. Mit Barba.js oder Taxi.js gehört das in leave() und enter(), jeweils als Promise. Nativ mit View Transitions: ::view-transition-old(root) { animation: none; } und den neuen Root per clip-path-Keyframe aufdecken, oder ein eigenes Vorhang-Element mit view-transition-name. Für echte Seitenwechsel (MPA) zusätzlich @view-transition { navigation: auto; } in beiden Seiten. Fallstricke: Erst tauschen, wenn das Panel voll deckt (auf onComplete warten). Bei Barba danach Lenis, ScrollTrigger und Webflow-Interaktionen neu initialisieren (Usecue).",
  "mobil": "Funktioniert unverändert. Auf dem Telefon die Gesamtdauer auf 700 bis 900 ms deckeln.",
  "reduzierte_bewegung": "Das Panel nur ein- und ausblenden (opacity) statt fahren, oder direkt tauschen.",
  "barrierefreiheit": "Overlay mit aria-hidden=\"true\". Bei SPA-Routern nach dem Tausch den Fokus auf die H1 der neuen Seite setzen (tabindex=\"-1\") oder auf den Seitenanfang. Den neuen Titel über eine Live Region ansagen und document.title mitziehen."
 },
 "messwerte": {
  "easing": "power3.inOut (darkroom); Power4.easeIn rein / Power3.easeInOut raus (Snellenberg)",
  "dauer_ms": "1100 (darkroom); 500 rein + 800 raus (Snellenberg)",
  "stagger_ms": "Doppel-Wipe 80–150 versetzt (typisch)",
  "distanz": "Panel inset(100% 0 0 0) → 0; alter Inhalt y -50vh + Fade (darkroom)",
  "sonstiges": "Snellenberg: Panel top 100 % → 0 → -100 %, Seitenname dazwischen .8s Power4.easeOut",
  "herkunft": "beobachtet",
  "quelle": "https://darkroom.engineering/_next/static/immutable/chunks/21wpw_k76zfds.js"
 },
 "kurve": {
  "bezier": [
   0.76,
   0,
   0.24,
   1
  ],
  "css": "cubic-bezier(0.76, 0, 0.24, 1)",
  "name": "power3.inOut",
  "dauer_ms": 1100
 },
 "gesehen_bei": [
  {
   "seite": "Brand Creatives (über die Analyse von Usecue)",
   "url": "https://www.usecue.com/blog/page-transitions-done-right/",
   "auszeichnung": "",
   "beobachtung": "Pinker Vorhang mit gebogener Kante bei jedem Seitenwechsel, Original mit Barba.js, GSAP, Lenis und Webflow. Usecue baut ihn nativ mit View Transitions nach. Die URL der Original-Seite habe ich nicht gesehen.",
   "art": "artikel"
  },
  {
   "seite": "Gabriel Contassot Portfolio 2024",
   "url": "https://tympanus.net/codrops/2024/04/24/case-study-gabriel-contassots-portfolio-2024/",
   "auszeichnung": "",
   "beobachtung": "Taxi.js: Ein einzelnes farbiges Element, dessen Farbe zum angeklickten Link passt, wischt nach oben aus dem Bild und markiert so den Seitenwechsel. Promises werden mit await abgewartet.",
   "art": "artikel"
  },
  {
   "seite": "Dennis Snellenberg",
   "url": "https://dennissnellenberg.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (index-new.js, Barba): pageTransitionIn fährt .loading-screen von top 100 % auf 0 (.5s Power4.easeIn), zeigt den Seitennamen und fährt dann auf -100 % (.8s Power3.easeInOut); gebogene Kante über .rounded-div-wrap.",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "darkroom.engineering",
   "url": "https://darkroom.engineering/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (Chunk 21wpw_k76zfds.js): #curtain clipPath inset(100% 0 0 0) → inset(0% 0 0 0) und #curtain-content translateY 100 % → 0, je 1.1s power3.inOut; gleichzeitig main und #webgl y 0 → -50vh, opacity 0 (1s power3.inOut).",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "Some practical examples of view transitions (Piccalilli)",
   "url": "https://piccalil.li/blog/some-practical-examples-of-view-transitions-to-elevate-your-ui/"
  },
  {
   "titel": "Creating Custom Page Transitions in Astro with Barba.js and GSAP (Codrops, 04/2026)",
   "url": "https://tympanus.net/codrops/2026/04/08/creating-custom-page-transitions-in-astro-with-barba-js-and-gsap/"
  },
  {
   "titel": "Interlude: A Starter for Custom Page Transitions in Astro (Codrops, 10/2026)",
   "url": "https://tympanus.net/codrops/2026/10/07/interlude-astro-page-transitions/"
  }
 ],
 "kombinierbar_mit": [
  "seitenname-typo-uebergang",
  "gebogener-wipe-shape",
  "vt-cross-document-mpa",
  "split-mask-reveal"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/seitenuebergaenge/vorhang-farbpanel-wipe/",
  "meta": "https://cecodesign.de/lab/fundus/seitenuebergaenge/vorhang-farbpanel-wipe/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/seitenuebergaenge/vorhang-farbpanel-wipe/demo"
 },
 "herkunft": {
  "quelldateien": [
   "uebergaenge.json",
   "patch-belege-3.json"
  ],
  "pruefnotizen": [
   "patch-belege-3.json: Interlude-Demo durch zwei Produktionsseiten ersetzt."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Ein Panel in Markenfarbe fährt über die Seite, zeigt den Seitennamen und gibt nach oben die neue Seite frei: einfach, doppelt oder in der Farbe des geklickten Links.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "technik": "Web Animations API, Inhaltstausch, wenn das Panel deckt",
   "markenfarbe": "#d6f03c Stromgelb (Panel), Schrift im Panel #0b0b0b; zweite Farbe Doppel-Wipe #0b0b0b (Nacht)",
   "einfach_rein": "transform translateY(100%) → translateY(0%), 500 ms, cubic-bezier(0.64, 0, 0.78, 0) (power4.in)",
   "einfach_raus": "transform translateY(0%) → translateY(-100%), 800 ms, cubic-bezier(0.76, 0, 0.24, 1) (power3.inOut)",
   "doppel": "zwei Panels, clip-path inset(100% 0 0 0) → inset(0% 0 0 0) → inset(0 0 100% 0); rein 500 ms, raus 800 ms, cubic-bezier(0.76, 0, 0.24, 1); Versatz 120 ms; rein zuerst Nacht, dann Stromgelb; raus zuerst Stromgelb, dann Nacht",
   "linkfarbe": "Panelfarbe = --farbe des geklickten Links (Spartenfarben Musik #c4421a, Bühne #3d5f9a, Kunst #2f7d4a, Film #b0186b, Klub #5b3fa6); clip-path inset(100% 0 0 0) → inset(0% 0 0 0) 1100 ms, Panelinhalt translateY(100%) → 0 1100 ms, raus inset(0 0 100% 0) 800 ms, alles cubic-bezier(0.76, 0, 0.24, 1); Schrift im Panel #0b0b0b auf hellen Farben, sonst #ffffff",
   "halten_ms": "300 (Einfach, Doppel), 150 (Linkfarbe) zwischen Tausch und Rausfahren",
   "seitenname": "translateY(110%) → 0, 800 ms, cubic-bezier(0.22, 1, 0.36, 1) (power4.out), startet, wenn das Panel deckt (Einfach, Doppel)",
   "alte_seite": "translateY(0) → translateY(-50vh), opacity 1 → 0; Dauer und Kurve wie das Panel rein (Linkfarbe: 1000 ms power3.inOut)",
   "neue_seite": "translateY(60px) → 0 und Bilder scale(1.05) → 1, 1000 ms, cubic-bezier(0.22, 1, 0.36, 1), startet mit dem Rausfahren",
   "gesamt_ms": "Einfach 1600, Doppel 1840, Linkfarbe 2050 (Panel)",
   "telefon": "bis 600 px Breite alle Dauern × min(1, 900 / Gesamtdauer), Panel also höchstens 900 ms",
   "reduziert": "Panel opacity 0 → 1 → 0, je 200 ms linear, Tausch dazwischen",
   "ui": "Unterstrich der Navigation scaleX 600 ms cubic-bezier(0.22, 1, 0.36, 1); Umschalter 150 ms linear"
  },
  "ausloeser": "klick",
  "touch": "Tippen auf Navigation, Programmzeile, Eröffnungsplakat, Logo oder „Danach im Programm“ löst den Wechsel aus. Bis 600 px Breite laufen alle Dauern auf zusammen höchstens 900 ms. Spartenfarben stehen immer mit Text-Label, Umschalter mit 34 px hohen Knöpfen.",
  "reduziert": "Nichts fährt: Das Panel blendet in 200 ms ein, der Inhalt wird getauscht, das Panel blendet in 200 ms aus. Kein Seitenname-Aufstieg, keine Bewegung der alten oder neuen Seite. Die Werte-Anzeige nennt das.",
  "korrekturen": {
   "beschreibung": "Beim Klick fährt ein vollflächiges Panel in Markenfarbe von unten (oder von der Seite) über die alte Seite. Sobald es deckt, wird der Inhalt getauscht. Im Panel können der Seitenname, ein Wort oder das Logo stehen. Dann fährt das Panel in derselben Richtung weiter und gibt die neue Seite frei, statt zurückzufahren. Die neue Seite setzt sich mit leichtem Versatz (y 40 bis 80 px, Scale 1.05 auf 1). Gemessen: Snellenberg 500 ms rein und 800 ms raus, darkroom 1100 ms power3.inOut.",
   "warum_es_wirkt": "Die Markenfarbe wird zur Interpunktion: Jeder Seitenwechsel ist ein kleiner Markenmoment. Das Panel verdeckt Ladezeit und Layoutsprünge. Läuft es rein und raus in dieselbe Richtung, wirkt der Wechsel wie ein durchlaufender Film.",
   "wann_einsetzen": "Bei Studio-, Agentur- und Markenseiten mit kräftiger Signalfarbe. Bei Seiten, deren neue Inhalte spürbar laden.",
   "wann_nicht": "Bei inhaltsgetriebenen Seiten mit vielen schnellen Wechseln, etwa Dokumentationen oder Shops mit Filtern. Spätestens ab der dritten Navigation nervt der Vorhang dort.",
   "varianten": [
    "Einfach: ein Panel fährt von unten rein und nach oben durch (Snellenberg: 500 ms Power4.easeIn rein, 800 ms Power3.easeInOut raus)",
    "Doppel-Wipe: zwei Panels in zwei Farben, 80 bis 150 ms versetzt (Osmo „Double Wipe“)",
    "Linkfarbe: Das Panel nimmt die Farbe des geklickten Links oder Projekts an (Gabriel Contassot)",
    "Mit Seitenname oder Logo im Panel (siehe seitenname-typo-uebergang)",
    "Mit gebogener Kante (siehe gebogener-wipe-shape)",
    "Nativ als ::view-transition-new(root) mit clip-path inset (Piccalilli „Star-Wars-Wipe“)"
   ],
   "umsetzung": "Ein fixiertes Overlay: position: fixed; inset: 0; hoher z-index; pointer-events: none; im Ruhezustand translateY(100%). Leave: Panel auf translateY(0) animieren und auf das Ende warten. Dann Inhalt tauschen und auf 0 scrollen. Enter: Panel auf translateY(-100%) weiterfahren, danach zurücksetzen. Mit clip-path statt Transform (inset(100% 0 0 0) auf inset(0), dann inset(0 0 100% 0)) steht das Panel still und nur die Kante wandert. Das ist kantenschärfer, der Panelinhalt fährt dann nicht mit. Mit Barba.js oder Taxi.js gehört das in leave() und enter(), jeweils als Promise. Nativ mit View Transitions: ::view-transition-old(root) { animation: none; } und den neuen Root per clip-path-Keyframe aufdecken, oder ein eigenes Vorhang-Element mit view-transition-name. Für echte Seitenwechsel (MPA) zusätzlich @view-transition { navigation: auto; } in beiden Seiten. Fallstricke: Erst tauschen, wenn das Panel voll deckt (auf onComplete warten). Bei Barba danach Lenis, ScrollTrigger und Webflow-Interaktionen neu initialisieren (Usecue).",
   "mobil": "Funktioniert unverändert. Auf dem Telefon die Gesamtdauer auf 700 bis 900 ms deckeln.",
   "reduzierte_bewegung": "Das Panel nur ein- und ausblenden (opacity) statt fahren, oder direkt tauschen.",
   "barrierefreiheit": "Overlay mit aria-hidden=\"true\". Bei SPA-Routern nach dem Tausch den Fokus auf die H1 der neuen Seite setzen (tabindex=\"-1\") oder auf den Seitenanfang. Den neuen Titel über eine Live Region ansagen und document.title mitziehen."
  },
  "geprueft": "01.11.2026",
  "notiz": "Neue Welt (01.11.2026): erfundenes Musik- und Kunstfestival „Festival Nachtstrom, Dresden“ nach Rezept kultur-programm-haltung (Big Shoulders 900 als Festival-Headline laut Rezept, Atkinson Hyperlegible Next im Text, IBM Plex Mono für Daten und Labels; Nacht #0b0b0b und neutrales Off-White #ebeae8, Spartenfarben als System mit Label, Hausfarbe Stromgelb #d6f03c). Seiten: Start (Nacht), Programm mit fünf Veranstaltungen (Datum, Ort, Uhrzeit, Ticket je Zeile), fünf Veranstaltungsseiten in Spartenfarbe, Tickets, Besuch. Alle Bilder sind eigene SVG-Plakate (Schallringe, Leuchtröhren, Tanzformen, Filmstreifen, Sinuswellen, Festivalpass), keine medien/-Bilder. Bewegungswerte und Ablauf unverändert. Demo-Steuerung misst ihre Höhe (--dock), die Seiten enden darüber, damit bei 1440×900 nichts verdeckt wird. Seitenwechsel innerhalb der Demo simuliert: Das Panel deckt, dann wird #seite neu gefüllt. Umschalter Einfach (Snellenberg-Werte), Doppel (zwei Panels, 120 ms versetzt), Linkfarbe (darkroom-Werte, Spartenfarbe des geklickten Links; Veranstaltungsseiten tragen dieselbe Farbe). Fokus auf die H1, Live Region, document.title. Vorführung: gedachter Zeiger klickt Programm, Kaltfront, Tickets, Besuch, Programm, Schichtwechsel, Logo; Variante wechselt bei jedem Klick. Stolperstein Web Animations: Nach cancel() liefert animation.finished ein neues Promise, das ohne erneutes play() nie auflöst; abgebrochene Animationen (playState idle) also nicht abwarten. Zugang 02.11.2026: Riesenwort „Nachtstrom“ mit overflow-wrap: anywhere und margin-right −.06em statt white-space: nowrap (bleibt einzeilig, bei Textabständen 1.4.12 nicht mehr abgeschnitten); Kopfzeile passt bei 200 % Zoom (601–760 px: ohne Markenzusatz, engere Abstände) und bei 320 px (Nav-Abstand 8 px, Marke 17 px), vorher lagen „Festivalpass“ bzw. „Besuch“ außerhalb; Kontrastmodus-Rahmen für Knöpfe."
 }
}