{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "bildstapel-intro",
 "name": "Bildstapel-Intro (Stapel flippt durch und verteilt sich ins Layout)",
 "name_en": "Image stack intro",
 "kurz": "Sechs Studien-Deckel einer Würzburger Kanzlei flackern als Stapel durch und verteilen sich per Flip ins Insights-Raster, zur Hero oder an den runden Tisch.",
 "kategorie": "Preloader & Intro",
 "kategorie_slug": "preloader-intro",
 "kategorie_nr": 2,
 "bau_chat": "C3",
 "prioritaet": "B",
 "trendstatus": "etabliert",
 "belegstatus": "teilbelegt",
 "website_belege": 1,
 "stimmung": [
  "editorial",
  "laut"
 ],
 "stimmung_roh": [
  "kuratiert",
  "dynamisch",
  "editorial"
 ],
 "technik": [
  "gsap",
  "flip",
  "css",
  "vanilla-js"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "gsap"
 ],
 "leistungskosten": "mittel",
 "steckbrief": {
  "beschreibung": "In der Bildschirmmitte liegt ein kleiner Stapel Bilder in Karten- oder Polaroidgröße. Die Bilder wechseln schnell hintereinander wie ein Daumenkino. Das ist die Ladephase. Danach löst sich der Stapel auf: Die Bilder fliegen per Flip an ihre Plätze im Raster, ordnen sich im Kreis an, oder ein Bild wächst zur Hero, während die anderen das Bild verlassen. Zuletzt erscheinen Headline und Navigation.",
  "warum_es_wirkt": "In zwei Sekunden sieht man die Bandbreite der Arbeit, und das Intro mündet direkt in die Navigation. Loader und Inhalt sind dasselbe Material. Deshalb fühlt sich nichts wie Warten an.",
  "wann_einsetzen": "Bei Foto-, Design- und Architektur-Portfolios und überall, wo die Startseite ein Bild-Raster hat. Auch bei inhaltsgetriebenen Seiten, deren Publikationen eigene Deckel haben (Studien, Magazine, Berichte).",
  "wann_nicht": "Bei Seiten ohne starkes Bildmaterial. Und wenn das Intro bei jedem Besuch erneut läuft: dann nur einmal pro Sitzung zeigen.",
  "varianten": [
   "Stapel wird zum Raster (Flip)",
   "Stapel wird zum Kreis (Codrops 2024)",
   "Stapel wird zur Hero: ein Bild wächst, die anderen verlassen nach oben und unten das Bild (Bisous)",
   "Hover-Motion-Grid mit Intro (Codrops 2024)",
   "Image-Trail als Intro (Codrops 2022)"
  ],
  "umsetzung": "Die Bilder stehen im finalen Layout im DOM. Zum Start in einen zentrierten Stapel-Container hängen (übereinander, absolut). Flackern: eine gsap.timeline mit zwölf Aufrufen im Abstand von 2/12 s, die jeweils zIndex und autoAlpha des nächsten Bildes setzen. Auflösen: const state = Flip.getState(bilder); Bilder zurück an ihre Plätze hängen; Flip.from(state, { absolute: true, duration: 1, ease: 'expo.out', stagger: i => Math.floor(i / 2) * 0.05 }). Innenbild dabei von scale 1.5 auf 1. Variante Hero: das eine Bild mit 1.8 s expo.inOut wachsen lassen, die übrigen abwechselnd um ±Index × Viewporthöhe verschieben (1 s expo.out). Vorher die Bilder dekodieren: Promise.all(imgs.map(i => i.decode())) mit Timeout als Rückfall. Fallstrick: Ist ein Bild LCP-Kandidat, darf es nicht unsichtbar warten. Ein Bild des Stapels sofort sichtbar lassen.",
  "mobil": "Kleinere Bildvarianten per srcset. Den Stapel auf etwa halbe Bildschirmbreite setzen und in eine oder zwei Spalten oder in eine Hero auflösen.",
  "reduzierte_bewegung": "Kein Flackern, kein Stapel. Das Layout ist sofort da, höchstens mit kurzem Fade (250 ms).",
  "barrierefreiheit": "Das Flackern ist ein Blitz-Risiko (WCAG 2.3.1). Der gemessene Takt von rund 167 ms liegt über drei Wechseln pro Sekunde. Das ist nur vertretbar, wenn die flackernde Fläche klein bleibt (WCAG-Richtwert: kleiner als 341 × 256 px bei 1024 × 768). Sonst langsamer takten oder weich überblenden. Überspringen per Klick und Taste anbieten. Während des Intros den Inhalt mit aria-busy markieren und den Stapel per aria-hidden ausblenden."
 },
 "messwerte": {
  "easing": "expo.out (Verteilen), expo.inOut (Wachsen)",
  "dauer_ms": "Flicker 2000 (12 Wechsel), Verteilen 1000, Wachsen 1800",
  "stagger_ms": "Flicker ca. 167; Verteilen 50 je Paar",
  "distanz": "Stapel im Platzhalter → ±Viewporthöhe",
  "sonstiges": "Zähler-Zeichen erscheinen mit Stagger .1 from random",
  "herkunft": "beobachtet",
  "quelle": "https://bisous-production.com/wp-content/themes/beaucoup/public/js/app.714b3b.js"
 },
 "kurve": {
  "bezier": [
   0.16,
   1,
   0.3,
   1
  ],
  "css": "cubic-bezier(0.16, 1, 0.3, 1)",
  "name": "expo.out",
  "dauer_ms": 2000
 },
 "gesehen_bei": [
  {
   "seite": "Codrops: Image Stack Intro Animation",
   "url": "https://tympanus.net/codrops/2020/11/24/image-stack-intro-animation/",
   "auszeichnung": "Awwwards-Inspiration-Eintrag 'Playground: Image Stack Intro Animation'",
   "beobachtung": "Laut Codrops-Tag-Übersicht zwei einfache Intros, bei denen ein Bildstapel ins Grid wandert. Awwwards führt einen Inspirationseintrag dazu (nur Titel gesehen).",
   "art": "artikel"
  },
  {
   "seite": "Codrops: Image Stack Entrance Animations",
   "url": "https://tympanus.net/codrops/2024/04/10/image-stack-entrance-animations/",
   "auszeichnung": "",
   "beobachtung": "Mehrere Bewegungssequenzen eines Bildstapels, die jeweils in einer kreisförmigen Anordnung enden.",
   "art": "artikel"
  },
  {
   "seite": "Codrops: Hover Motion Intro Animation",
   "url": "https://tympanus.net/codrops/2024/05/29/hover-motion-intro-animation/",
   "auszeichnung": "",
   "beobachtung": "Grid mit Hover-Bewegung kombiniert mit einer Intro-Animation.",
   "art": "artikel"
  },
  {
   "seite": "Bisous (CGI-Studio, Beaucoup)",
   "url": "https://bisous-production.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (app.714b3b.js): Loader-Werke (Bild/Video) liegen als Stapel in einem Platzhalter (auf Platzhalterbreite skaliert, Innenbild scale 1.5) und blitzen in 12 Wechseln über 2s auf; danach verteilen sie sich abwechselnd nach oben/unten (y ±Index×Höhe, 1s expo.out, Versatz .05) und wachsen auf Vollgröße (1.8s expo.inOut, Innenbild 1.5 → 1).",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "Image Stack Intro Animation (Codrops)",
   "url": "https://tympanus.net/codrops/2020/11/24/image-stack-intro-animation/"
  },
  {
   "titel": "Image Stack Entrance Animations (Codrops)",
   "url": "https://tympanus.net/codrops/2024/04/10/image-stack-entrance-animations/"
  },
  {
   "titel": "Image Trail Animation for an Intro (Codrops)",
   "url": "https://tympanus.net/codrops/2022/05/03/image-trail-animation-for-an-intro/"
  },
  {
   "titel": "PolaroidStackGrid (Codrops GitHub)",
   "url": "https://github.com/codrops/PolaroidStackGrid"
  }
 ],
 "kombinierbar_mit": [
  "loader-wird-layout",
  "split-mask-reveal",
  "einmal-intro-session"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/preloader-intro/bildstapel-intro/",
  "meta": "https://cecodesign.de/lab/fundus/preloader-intro/bildstapel-intro/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/preloader-intro/bildstapel-intro/demo"
 },
 "herkunft": {
  "quelldateien": [
   "uebergaenge.json",
   "patch-belege-3.json"
  ],
  "pruefnotizen": [
   "patch-belege-3.json: Nur ein Produktionsbeleg gefunden (Bisous); Vorschlag B."
  ],
  "prioritaet_hinweis": "31.10.2026: A → B laut patch-belege-3.json (Nur ein Produktionsbeleg gefunden (Bisous); Vorschlag B.)"
 },
 "bau": {
  "status": "fertig",
  "kurz": "Sechs Studien-Deckel einer Würzburger Kanzlei flackern als Stapel durch und verteilen sich per Flip ins Insights-Raster, zur Hero oder an den runden Tisch.",
  "demo": true,
  "abhaengigkeiten": [
   "gsap@3.15.0",
   "Flip@3.15.0"
  ],
  "werte": {
   "flicker": "12 Wechsel in 2000 ms (Abstand 2/12 s ≈ 167 ms), Start nach 200 ms, letzter Deckel bleibt 150 ms + 167 ms liegen; Reihenfolge 6 → 1, zweimal; harter Wechsel (zIndex + autoAlpha), kein Tween",
   "zeichen": "Marke im Vorspann: autoAlpha 0 → 1, 500 ms expo.out, stagger 100 ms from random",
   "verteilen": "Raster und Kreis: Flip.from(state, { absolute: true }), 1000 ms expo.out, Versatz 50 ms je Paar (Math.floor(i / 2) * 0.05)",
   "innenbild": "Motiv im Stapel scale 1.5 → 1, gleiche Dauer, Kurve und Versatz wie die Karte; Maske hält Kopf- und Titelzone frei: linear-gradient(transparent 10.5%, #000 13.5%, #000 60%, transparent 66%)",
   "wachsen": "Hero: Flip.from 1800 ms expo.inOut, Innenbild 1.5 → 1 synchron; übrige Deckel y = ±(Math.floor(i / 2) + 1) × innerHeight, abwechselnd nach unten und oben, 1000 ms expo.out, stagger 50 ms",
   "text": "Header, Headline, Lead, Bildunterschriften: y 16 px → 0 + autoAlpha, 900 ms expo.out, stagger 60 ms; Start 350 ms nach Verteilbeginn (Raster, Kreis) bzw. 900 ms (Hero, halbe Wachsdauer)",
   "vorspann_aus": "Marke, Zähler, Überspringen-Knopf: autoAlpha → 0, 250 ms linear",
   "easing": "expo.out cubic-bezier(0.16, 1, 0.3, 1); expo.inOut nur für das Wachsen",
   "ui": "125 ms cubic-bezier(0.4, 0, 0.22, 1) für Unterstreichung, Portal-Knopf, Links (Rezept-Kurve); 150 ms für die Pult-Knöpfe",
   "stapel": "clamp(150px, 15vw, 224px) breit, 4:5, mittig im Viewport (Telefon 46vw); Schatten 0 1px 2px rgba(30,30,80,.1), 0 14px 26px -20px rgba(30,30,80,.34)",
   "kreis": "6 Plätze bei -60°, 0°, 60°, 120°, 180°, 240°; left 50% + 41% × cos, top 50% + 37% × sin; Kartenbreite clamp(84px, min(10vw, 16vh), 168px); Telefon: quadratischer Ring unter dem Text, Radius 37 %, Karte 23vw",
   "reduziert_fade": "250 ms linear (Layout steht sofort)",
   "vorfuehren": "Schleife Raster → Hero → Kreis, nach jedem Durchlauf 2400 ms stehen lassen (reduziert: 4000 ms)",
   "farben": "#F9F8F8 Grund, #EFEBEB und #D2CDC7 Deckel/Linien, #1E1E50 Marke, #212529 Text, #736458 Meta, #00BEE6 nur Fokus",
   "schriften": "Newsreader (opsz) 400 für Headlines und Deckeltitel, h1 clamp(2rem, 1.3rem + 2.6vw, 3.5rem) / 1.1, -0.01em; Schibsted Grotesk 400/500 für Text, Navigation, Meta (Tabellenziffern); Deckel-Typo in cqi"
  },
  "ausloeser": "laden",
  "touch": "Läuft ohne Hover gleich ab. Stapel 46vw breit, Raster zweispaltig, Hero einspaltig unter dem Text, Kreis als quadratischer Ring unter dem Text. Überspringen durch Tippen auf den Stapel oder den Knopf; die Esc-Taste wird auf Touch nicht angezeigt.",
  "reduziert": "Kein Stapel, kein Flackern, keine Flip-Bewegung. Das gewählte Layout steht sofort und blendet in 250 ms ein; Überspringen führt in denselben Zustand.",
  "korrekturen": {
   "beschreibung": "In der Bildschirmmitte liegt ein kleiner Stapel Bilder in Karten- oder Polaroidgröße. Die Bilder wechseln schnell hintereinander wie ein Daumenkino. Das ist die Ladephase. Danach löst sich der Stapel auf: Die Bilder fliegen per Flip an ihre Plätze im Raster, ordnen sich im Kreis an, oder ein Bild wächst zur Hero, während die anderen das Bild verlassen. Zuletzt erscheinen Headline und Navigation.",
   "warum_es_wirkt": "In zwei Sekunden sieht man die Bandbreite der Arbeit, und das Intro mündet direkt in die Navigation. Loader und Inhalt sind dasselbe Material. Deshalb fühlt sich nichts wie Warten an.",
   "wann_einsetzen": "Bei Foto-, Design- und Architektur-Portfolios und überall, wo die Startseite ein Bild-Raster hat. Auch bei inhaltsgetriebenen Seiten, deren Publikationen eigene Deckel haben (Studien, Magazine, Berichte).",
   "wann_nicht": "Bei Seiten ohne starkes Bildmaterial. Und wenn das Intro bei jedem Besuch erneut läuft: dann nur einmal pro Sitzung zeigen.",
   "varianten": [
    "Stapel wird zum Raster (Flip)",
    "Stapel wird zum Kreis (Codrops 2024)",
    "Stapel wird zur Hero: ein Bild wächst, die anderen verlassen nach oben und unten das Bild (Bisous)",
    "Hover-Motion-Grid mit Intro (Codrops 2024)",
    "Image-Trail als Intro (Codrops 2022)"
   ],
   "umsetzung": "Die Bilder stehen im finalen Layout im DOM. Zum Start in einen zentrierten Stapel-Container hängen (übereinander, absolut). Flackern: eine gsap.timeline mit zwölf Aufrufen im Abstand von 2/12 s, die jeweils zIndex und autoAlpha des nächsten Bildes setzen. Auflösen: const state = Flip.getState(bilder); Bilder zurück an ihre Plätze hängen; Flip.from(state, { absolute: true, duration: 1, ease: 'expo.out', stagger: i => Math.floor(i / 2) * 0.05 }). Innenbild dabei von scale 1.5 auf 1. Variante Hero: das eine Bild mit 1.8 s expo.inOut wachsen lassen, die übrigen abwechselnd um ±Index × Viewporthöhe verschieben (1 s expo.out). Vorher die Bilder dekodieren: Promise.all(imgs.map(i => i.decode())) mit Timeout als Rückfall. Fallstrick: Ist ein Bild LCP-Kandidat, darf es nicht unsichtbar warten. Ein Bild des Stapels sofort sichtbar lassen.",
   "mobil": "Kleinere Bildvarianten per srcset. Den Stapel auf etwa halbe Bildschirmbreite setzen und in eine oder zwei Spalten oder in eine Hero auflösen.",
   "reduzierte_bewegung": "Kein Flackern, kein Stapel. Das Layout ist sofort da, höchstens mit kurzem Fade (250 ms).",
   "barrierefreiheit": "Das Flackern ist ein Blitz-Risiko (WCAG 2.3.1). Der gemessene Takt von rund 167 ms liegt über drei Wechseln pro Sekunde. Das ist nur vertretbar, wenn die flackernde Fläche klein bleibt (WCAG-Richtwert: kleiner als 341 × 256 px bei 1024 × 768). Sonst langsamer takten oder weich überblenden. Überspringen per Klick und Taste anbieten. Während des Intros den Inhalt mit aria-busy markieren und den Stapel per aria-hidden ausblenden."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Seubert Kilger, Rechtsanwälte und Steuerberater in Würzburg (Rezept kanzlei-beratung-souveraen). Das Rezept will Inhalte statt Bildwelten, deshalb sind die Bilder hier die Deckel der eigenen Insights (Studie, Mandantenbrief, Checkliste, Leitfaden) mit eigenen SVG-Strichzeichnungen (Alte Mainbrücke mit Festung, Barockfassade, Wochenplan, Belege, Weinberg, Umschlag). Für eine Kanzlei gehört so ein Intro nur einmal pro Sitzung auf die Insights- oder Startseite. Drei Auflösungen per Umschalter: Raster, Hero (Bisous-Werte), Kreis als runder Tisch. Alle Werte aus den Bisous-Messungen; die Rezept-Kurve gilt nur für Bedienelemente. Deckel-Typo in Container-Einheiten, damit Flip über width/height sauber skaliert. Überspringen mit Klick, Esc oder jeder Taste. AD-Review 01.11.2026: Note 5 (Pult in der Vorschau ausgeblendet, Bühne nutzt die volle Höhe). Zugang 02.11.2026: --meta #8E7C6D auf #736458 (4,8:1 auf Fläche, 5,6:1 auf Grund; Labels, „Intro überspringen“, Pult), Knopfrahmen im Kontrastmodus."
 }
}