{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "unendliche-leinwand-galerie",
 "name": "Endlose Leinwand – Drag-Galerie in alle Richtungen",
 "name_en": "Infinite canvas / pan-anywhere draggable grid / Infinite canvas / draggable infinite grid",
 "kurz": "Eine Bildwand ohne Ränder: ziehen, werfen, in jede Richtung weiter. Das Archiv wirkt größer als der Bildschirm und lädt zum Stöbern ein.",
 "kategorie": "Galerien & Slider",
 "kategorie_slug": "galerien-slider",
 "kategorie_nr": 12,
 "bau_chat": "C6",
 "prioritaet": "A",
 "trendstatus": "aufsteigend",
 "belegstatus": "teilbelegt",
 "website_belege": 1,
 "stimmung": [
  "präzise",
  "luxuriös",
  "filmisch",
  "verspielt",
  "experimentell"
 ],
 "stimmung_roh": [
  "explorativ",
  "verspielt",
  "künstlerisch",
  "luxuriös",
  "immersiv",
  "technisch"
 ],
 "technik": [
  "vanilla-js",
  "gsap",
  "three",
  "webgl-shader",
  "webgpu",
  "css",
  "lerp",
  "canvas"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "gsap",
  "webgl",
  "canvas"
 ],
 "leistungskosten": "mittel",
 "steckbrief": {
  "beschreibung": "1) Ein Satz Kacheln (Bilder in verschiedenen Formaten, oft mit Masonry-Versatz) wird so oft kopiert, dass in jede Richtung eine Kopie bereitsteht. 2) Ziehen und Mausrad (deltaX und deltaY) verschieben einen Zielwert; der aktuelle Wert folgt ihm in jedem Frame per Lerp. 3) Jede Kachel wird über Modulo der Satzgröße positioniert. Verlässt sie eine Kante, springt sie um eine volle Satzbreite oder -höhe auf die Gegenseite. 4) Jede Kachel hat einen leicht zufälligen Faktor (0,5 bis 1,0). Er steuert Maus-Parallaxe und Nachlauf und erzeugt Tiefe. 5) Ein Klick öffnet die Kachel per FLIP groß, die Leinwand bleibt dahinter stehen. 6) Intro: Die Kacheln fliegen mit expo.inOut in 2 s und 50 ms Versatz auf ihren Platz.",
  "warum_es_wirkt": "Der Nutzer erkundet, statt zu scrollen. Das Werk wirkt größer als der Bildschirm. Freie Bewegung in zwei Achsen ist auf Websites ungewohnt und bleibt deshalb hängen; die Trägheit hält sie trotzdem kontrolliert. Das vermittelt Fülle und weckt Neugier.",
  "wann_einsetzen": "Bildlastige Portfolios, Fotografie, Studios mit vielen Projekten, Kampagnen-Archive, Moodboards, Team- oder Projektwände.",
  "wann_nicht": "Wenn Inhalte gelesen oder verglichen werden müssen oder Nutzer gezielt etwas suchen. Bei wenigen Bildern: unter etwa 12 fallen die Wiederholungen auf. Nie als einziger Zugang zu wichtigen Inhalten, immer eine Listen- oder Indexansicht anbieten.",
  "varianten": [
   "Masonry mit Tiefe (Standard der Demo): Spalten mit Versatz, Kachel-Faktor 0,5–1,0 für Maus-Parallaxe und Nachlauf",
   "Raster (Basic): gleichmäßige Zellen ohne Parallaxe; flache DOM-Version mit translate3d bis etwa 60 Kacheln",
   "Zoom-Stufe: Strg+Rad oder Pinch zoomt zwischen Übersicht und Detail; beim Ziehen zoomt die Leinwand heraus",
   "WebGL/Three.js mit Chunks: nur sichtbare Felder werden instanziiert, für große Archive",
   "WebGL-Leinwand mit Verzerrung beim Ziehen",
   "Kuppel- oder Kugelkrümmung der Leinwand (siehe kuppel-kugel-galerie)",
   "Liquid-Glass-Grid mit Videobrechung (WebGPU/TSL)",
   "Kachelfläche mit Hover-Reveal",
   "Als Projektübersicht oder Startseite, mit Umschalter zur Liste"
  ],
  "umsetzung": "Zustand: ziel {x, y} und ist {x, y}. Lerp-Faktor 0,08–0,12 pro Frame, zeitbasiert: k = 1 − (1 − f)^(dt × 60). Wrap: x = ((basisX + ist.x) % W + W) % W − Puffer. Nur transform setzen (translate3d), nie top/left. Kacheln außerhalb des Fensters auf visibility: hidden.\n\nPointer Events mit setPointerCapture; ein Klick zählt nur, wenn die Bewegung unter 5 px blieb. Rad-Delta mit Faktor (hier 0,4) aufs Ziel. Bilder mit decoding=async und srcset, vorab mit img.decode() laden; Videos außerhalb des Sichtbereichs pausieren. Für sehr viele Bilder auf WebGL mit Instancing wechseln.\n\nFallstricke: Trackpads liefern sehr kleine Rad-Deltas, Safari meldet Pinch als gesturechange. Der Fokus darf nicht in kopierte Kacheln laufen.",
  "mobil": "Touch-Pan mit touch-action: none nur auf der Leinwand. Auf kleinen Displays größere Kacheln und weniger Parallaxe. Die Listenansicht prominent anbieten.",
  "reduzierte_bewegung": "Keine Trägheit (Lerp-Faktor 1), keine Parallaxe, Intro als einfaches Einblenden. Zusätzlich eine statische Liste oder ein Raster mit normalem Scrollen als Umschalter.",
  "barrierefreiheit": "Eine Leinwand ist für Tastatur und Screenreader schwer erfassbar. Deshalb eine echte Projektliste als gleichwertige Alternative mit sichtbarem Umschalter Leinwand/Liste. Pfeiltasten verschieben die Leinwand, Tab fokussiert Projekte und holt sie in die Mitte. Kopien bekommen aria-hidden und inert (oder tabindex -1)."
 },
 "messwerte": {
  "easing": "Intro expo.inOut (≈ cubic-bezier(0.87,0,0.13,1)); Bewegung Lerp",
  "dauer_ms": "Intro 2000",
  "stagger_ms": "Intro 50; Textzeilen 150",
  "distanz": "Maus-Parallaxe bis ±30 % der Kachelgröße; Rad-Faktor 0,4",
  "sonstiges": "Kachel-Ease zufällig 0,5–1,0; Lerp-Wert im Artikel nicht genannt, typisch 0,08–0,12",
  "herkunft": "beobachtet",
  "quelle": "https://tympanus.net/codrops/2025/06/11/building-an-infinite-parallax-grid-with-gsap-and-seamless-tiling/",
  "aus_eintrag": [
   "infinite-canvas-pan-galerie"
  ]
 },
 "kurve": {
  "bezier": [
   0.87,
   0,
   0.13,
   1
  ],
  "css": "cubic-bezier(0.87, 0, 0.13, 1)",
  "name": "expo.inOut",
  "dauer_ms": 2000
 },
 "gesehen_bei": [
  {
   "seite": "Codrops – Infinite Canvas: Building a Seamless, Pan-Anywhere Image Space (01/2026)",
   "url": "https://tympanus.net/codrops/2026/01/07/infinite-canvas-building-a-seamless-pan-anywhere-image-space/",
   "auszeichnung": "Codrops-Tutorial 01/2026",
   "beobachtung": "Laut Teaser: frei verschiebbare Bildleinwand, die in Chunks rendert (Artikeltext nicht abrufbar).",
   "art": "artikel",
   "weitere_beobachtung": "Nur Titel gesehen („Building a Seamless, Pan-Anywhere Image Space“)."
  },
  {
   "seite": "Codrops – Building an Infinite Parallax Grid with GSAP and Seamless Tiling (06/2025, Jorge Toloza, DDS Studio)",
   "url": "https://tympanus.net/codrops/2025/06/11/building-an-infinite-parallax-grid-with-gsap-and-seamless-tiling/",
   "auszeichnung": "",
   "beobachtung": "Kachelsatz 2×2 dupliziert; Wrap über extraX/extraY; Rad-Delta × 0,4; Kachel-Ease zufällig 0,5–1,0; Scroll-Parallaxe Delta × 5 × Ease; Maus-Parallaxe (mouse − 0,5) × Kachelgröße × 0,6; Intro 2 s expo.inOut, Stagger 0,05 s; Bildunterschrift-Zeilen i × 0,15 s.",
   "art": "artikel"
  },
  {
   "seite": "Osmo – Infinite Draggable Grid (Basic / Masonry)",
   "url": "https://www.osmo.supply/resource/infinite-draggable-grid-masonary",
   "auszeichnung": "",
   "beobachtung": "Laut Ressourcenliste zwei Varianten (Basic und Masonry); Detailseite war gesperrt.",
   "art": "demo"
  },
  {
   "seite": "Codrops – Building an Infinite Liquid Glass Grid with Three.js, WebGPU and TSL (09/2026)",
   "url": "https://tympanus.net/codrops/2026/09/08/building-an-infinite-liquid-glass-grid-with-three-js-webgpu-and-tsl/",
   "auszeichnung": "",
   "beobachtung": "Laut Teaser: endloses Glas-Grid mit Videobrechung über WebGPU und eigene Shader.",
   "art": "artikel"
  },
  {
   "seite": "Héloïse Thibodeau Architecte",
   "url": "https://htarchitecte.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): Projektseite mit Ansichtswechsel data-view=\"list\" / \"grid\"; Grid-Modus als WebGL-Raster (Three.js) mit GSAP-Observer für Ziehen/Scrollen, Lenis. Commarts Webpick beschreibt das „infinite grid“.",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "Codrops: Infinite Canvas – Pan-Anywhere Image Space",
   "url": "https://tympanus.net/codrops/2026/01/07/infinite-canvas-building-a-seamless-pan-anywhere-image-space/"
  },
  {
   "titel": "Codrops: Infinite Parallax Grid with GSAP and Seamless Tiling",
   "url": "https://tympanus.net/codrops/2025/06/11/building-an-infinite-parallax-grid-with-gsap-and-seamless-tiling/"
  },
  {
   "titel": "Codrops: Infinite Liquid Glass Grid (WebGPU/TSL)",
   "url": "https://tympanus.net/codrops/2026/09/08/building-an-infinite-liquid-glass-grid-with-three-js-webgpu-and-tsl/"
  }
 ],
 "kombinierbar_mit": [
  "galerie-shared-element-vollbild",
  "flip-zustandswechsel",
  "token-physik-traege",
  "token-editorial-langsam",
  "collage-scrapbook",
  "projektindex-hover-vorschau"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/galerien-slider/unendliche-leinwand-galerie/",
  "meta": "https://cecodesign.de/lab/fundus/galerien-slider/unendliche-leinwand-galerie/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/galerien-slider/unendliche-leinwand-galerie/demo"
 },
 "herkunft": {
  "quelldateien": [
   "galerien_stile.json",
   "layouts.json",
   "patch-belege-2.json",
   "r3-belege-a.json"
  ],
  "pruefnotizen": [
   "patch-belege-2.json: 1 Produktionsbeleg; drei Awwwards-Inspiration-URLs entfernen (nicht abrufbar, keine echte Website). Fiddle.Digital geprüft: dort nur ziehbares Laufband, keine Leinwand.",
   "r3-belege-a.json (Runde 3, 31.10.2026): Kein weiterer Produktionsbeleg. Rund 520 Websites wurden per Bundle-Suche geprüft (Katalog-Websites, rund 140 bekannte Produkt- und Agenturseiten, 239 Communication-Arts-Webpicks). Raycorral und No Art haben nur CSS-Klassen .infinite-grid ohne zugehöriges Script auf der Startseite, das zählt nicht. Die übrigen Treffer für gsap.utils.wrap sind horizontale Laufbänder (horizontalLoop), keine 2D-Leinwand."
  ],
  "zusammengelegt_aus": [
   "infinite-canvas-pan-galerie",
   "unendliche-leinwand"
  ],
  "querverweis_kategorien": [
   "Hero & Section-Layouts"
  ],
  "leistungskosten_spanne": "mittel–hoch (je nach Variante)"
 },
 "bau": {
  "status": "fertig",
  "kurz": "Eine Bildwand ohne Ränder: ziehen, werfen, in jede Richtung weiter. Das Archiv wirkt größer als der Bildschirm und lädt zum Stöbern ein.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "expo.inOut = cubic-bezier(0.87, 0, 0.13, 1) für Intro, Variantenwechsel, Öffnen und Textzeilen · Bewegung der Leinwand per Lerp",
   "lerp": "0,1 pro Frame bei 60 Hz, zeitbasiert: k = 1 − (1 − 0,1)^(dt / 16,67 ms)",
   "dauer_ms": "Intro 2000 · Variantenwechsel 1200 · Öffnen 1200 · Schließen 1000 · Textzeilen 1000 · UI 150",
   "stagger_ms": "Intro 50 (nach Abstand zur Mitte, höchstens 24 Stufen) · Wechsel 20 (höchstens 30 Stufen) · Textzeilen 150",
   "intro": "alle Kacheln aus der Bildmitte, scale 0,25 → 1, Deckkraft in den ersten 33 % der Kurve",
   "rad": "deltaX und deltaY × 0,4 (deltaMode Zeile × 16)",
   "werfen": "geglättete Zeigergeschwindigkeit (px/ms, 0,7 alt / 0,3 neu) × 220 aufs Ziel, nur wenn die letzte Bewegung jünger als 80 ms ist",
   "klick": "zählt nur unter 5 px Bewegung zwischen pointerdown und pointerup",
   "pfeiltasten": "0,75 Kachelbreiten je Druck",
   "kachel": "Breite u = 13,5 % der Fensterbreite, 150–230 px (unter 640 px: 42 %, 140–200 px) · Lücke 0,3 u · 6 Spalten × 4 Kacheln = 24 je Satz · Formate 4:5, 3:2, 1:1",
   "masonry": "gleich breite Spalten, Spaltenversatz 0 / 0,42 / 0,18 / 0,63 / 0,3 / 0,08 u; Lücken je Spalte so verteilt, dass alle Spalten gleich hoch sind (nahtloser Umbruch)",
   "raster": "quadratische Zellen u × u, Lücke 0,3 u, ohne Parallaxe",
   "wrap": "x = ((basisX + kopie × W + ist.x + nachlauf) mod (nx × W)) − nx × W / 2, ebenso y; Kopien nx = ⌈(Breite / zMin + 3 u) / W⌉, ny = ⌈(Höhe / zMin + 3,5 u) / H⌉",
   "parallaxe": "Kachel-Ease 0,5–1,0 (fest gesät) · Maus −(m − 0,5) × u × 0,6 × Ease, also bis ±30 % der Kachel · Nachlauf beim Ziehen (ist − ziel) × (1 − Ease) × 0,6, höchstens 0,35 u · Bild im Rahmen scale 1,14, ±3 % gegen die Lage auf dem Bildschirm",
   "zoom": "Variante Zoom: beim Ziehen × 0,8 (zMin 0,56) · Strg/Cmd + Rad 70–120 % (Faktor e^(−deltaY × 0,002)) · Knöpfe ±10 %",
   "zeiger": "Ring 64 px, Lerp 0,25; beim Ziehen scale 0,42, über Kacheln 1,25 mit „Öffnen“",
   "dimmen": "Leinwand beim Öffnen auf Deckkraft 0,14, Fläche darüber rgba(19, 19, 18, 0,7)"
  },
  "ausloeser": "ziehen",
  "touch": "Ziehen mit dem Finger (touch-action: none nur auf der Leinwand), Werfen mit Schwung, Tippen öffnet. Größere Kacheln (42 % der Breite), keine Maus-Parallaxe, kein Zeiger-Ring; Werte und Hinweis ausgeblendet.",
  "reduziert": "Lerp 1: die Leinwand folgt ohne Trägheit, kein Werfen, keine Parallaxe, kein Zoom beim Ziehen. Intro als Einblenden in 400 ms, Varianten wechseln ohne Flug, das Detail blendet in 150 ms ein. Index-Liste bleibt als statische Alternative.",
  "korrekturen": {
   "beschreibung": "1) Ein Satz Kacheln (Bilder in verschiedenen Formaten, oft mit Masonry-Versatz) wird so oft kopiert, dass in jede Richtung eine Kopie bereitsteht. 2) Ziehen und Mausrad (deltaX und deltaY) verschieben einen Zielwert; der aktuelle Wert folgt ihm in jedem Frame per Lerp. 3) Jede Kachel wird über Modulo der Satzgröße positioniert. Verlässt sie eine Kante, springt sie um eine volle Satzbreite oder -höhe auf die Gegenseite. 4) Jede Kachel hat einen leicht zufälligen Faktor (0,5 bis 1,0). Er steuert Maus-Parallaxe und Nachlauf und erzeugt Tiefe. 5) Ein Klick öffnet die Kachel per FLIP groß, die Leinwand bleibt dahinter stehen. 6) Intro: Die Kacheln fliegen mit expo.inOut in 2 s und 50 ms Versatz auf ihren Platz.",
   "warum_es_wirkt": "Der Nutzer erkundet, statt zu scrollen. Das Werk wirkt größer als der Bildschirm. Freie Bewegung in zwei Achsen ist auf Websites ungewohnt und bleibt deshalb hängen; die Trägheit hält sie trotzdem kontrolliert. Das vermittelt Fülle und weckt Neugier.",
   "wann_einsetzen": "Bildlastige Portfolios, Fotografie, Studios mit vielen Projekten, Kampagnen-Archive, Moodboards, Team- oder Projektwände.",
   "wann_nicht": "Wenn Inhalte gelesen oder verglichen werden müssen oder Nutzer gezielt etwas suchen. Bei wenigen Bildern: unter etwa 12 fallen die Wiederholungen auf. Nie als einziger Zugang zu wichtigen Inhalten, immer eine Listen- oder Indexansicht anbieten.",
   "varianten": [
    "Masonry mit Tiefe (Standard der Demo): Spalten mit Versatz, Kachel-Faktor 0,5–1,0 für Maus-Parallaxe und Nachlauf",
    "Raster (Basic): gleichmäßige Zellen ohne Parallaxe; flache DOM-Version mit translate3d bis etwa 60 Kacheln",
    "Zoom-Stufe: Strg+Rad oder Pinch zoomt zwischen Übersicht und Detail; beim Ziehen zoomt die Leinwand heraus",
    "WebGL/Three.js mit Chunks: nur sichtbare Felder werden instanziiert, für große Archive",
    "WebGL-Leinwand mit Verzerrung beim Ziehen",
    "Kuppel- oder Kugelkrümmung der Leinwand (siehe kuppel-kugel-galerie)",
    "Liquid-Glass-Grid mit Videobrechung (WebGPU/TSL)",
    "Kachelfläche mit Hover-Reveal",
    "Als Projektübersicht oder Startseite, mit Umschalter zur Liste"
   ],
   "umsetzung": "Zustand: ziel {x, y} und ist {x, y}. Lerp-Faktor 0,08–0,12 pro Frame, zeitbasiert: k = 1 − (1 − f)^(dt × 60). Wrap: x = ((basisX + ist.x) % W + W) % W − Puffer. Nur transform setzen (translate3d), nie top/left. Kacheln außerhalb des Fensters auf visibility: hidden.\n\nPointer Events mit setPointerCapture; ein Klick zählt nur, wenn die Bewegung unter 5 px blieb. Rad-Delta mit Faktor (hier 0,4) aufs Ziel. Bilder mit decoding=async und srcset, vorab mit img.decode() laden; Videos außerhalb des Sichtbereichs pausieren. Für sehr viele Bilder auf WebGL mit Instancing wechseln.\n\nFallstricke: Trackpads liefern sehr kleine Rad-Deltas, Safari meldet Pinch als gesturechange. Der Fokus darf nicht in kopierte Kacheln laufen.",
   "mobil": "Touch-Pan mit touch-action: none nur auf der Leinwand. Auf kleinen Displays größere Kacheln und weniger Parallaxe. Die Listenansicht prominent anbieten.",
   "reduzierte_bewegung": "Keine Trägheit (Lerp-Faktor 1), keine Parallaxe, Intro als einfaches Einblenden. Zusätzlich eine statische Liste oder ein Raster mit normalem Scrollen als Umschalter.",
   "barrierefreiheit": "Eine Leinwand ist für Tastatur und Screenreader schwer erfassbar. Deshalb eine echte Projektliste als gleichwertige Alternative mit sichtbarem Umschalter Leinwand/Liste. Pfeiltasten verschieben die Leinwand, Tab fokussiert Projekte und holt sie in die Mitte. Kopien bekommen aria-hidden und inert (oder tabindex -1)."
  },
  "geprueft": "31.10.2026",
  "notiz": "Archiv des erfundenen Studios Werkraum Ost: 24 Kacheln je Satz (16 eigene Arbeiten aus medien/, dazu Farbmuster, Zahl, Leitsatz, Schrift). Ohne Bibliothek. Umschalter Masonry, Raster, Zoom; Wechsel fliegen per FLIP von der alten in die neue Lage. Klick öffnet das Projekt per FLIP, Index-Ansicht als Liste. Die Vorführung zieht, wirft und öffnet eine Kachel, jede Runde in einer anderen Variante (24 s). Bilder 01.11.2026: eigene Bilder statt Portfolio. Zugang 02.11.2026: Farbkacheln wählen die Labelfarbe jetzt auch nach WCAG-Kontrast: Mitteltöne wie Ziegelrot #D1402D bekommen reines Weiß und Labels mit voller Deckkraft (4,7:1), statt #efece5 mit .7. Kontrastmodus: Knöpfe mit Rahmen ButtonText. Die 142 Kontrasttreffer der Prüfung stammen aus dem Intro (2000 ms Einblenden, gemessen nach 1,5 s); nach 5 s bleiben keine. „inhalt-unerreichbar“ bei 200 %/320 px ist die unendliche Leinwand selbst, erreichbar per Ziehen, Rad und Pfeiltasten."
 }
}