{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "footer-3d-buehne",
 "name": "Footer als 3D-/Shader-Bühne",
 "name_en": "WebGL / 3D footer scene",
 "kurz": "Bleilettern aus three.js als Schlussbühne eines Mainzer Studios: eine Letter folgt dem Zeiger, die ganze Wortmarke steht spiegelverkehrt im Satz oder zerfällt in Partikel.",
 "kategorie": "Footer",
 "kategorie_slug": "footer",
 "kategorie_nr": 13,
 "bau_chat": "C6",
 "prioritaet": "C",
 "trendstatus": "aufsteigend",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "präzise",
  "luxuriös",
  "filmisch"
 ],
 "stimmung_roh": [
  "immersiv",
  "luxuriös",
  "technisch",
  "kinematisch"
 ],
 "technik": [
  "three",
  "webgl-shader",
  "ogl",
  "intersection-observer"
 ],
 "technik_gruppen": [
  "js",
  "webgl"
 ],
 "leistungskosten": "hoch",
 "steckbrief": {
  "beschreibung": "Der Footer wird zur Bühne einer WebGL-Szene: ein 3D-Objekt wie das Logo, die ganze Wortmarke aus Körpern, Partikel, Flüssigkeit oder Kristall. Die Szene reagiert auf Zeiger und Scroll, sie neigt sich, weicht aus oder wirft Wellen. Typografie und Links bleiben HTML und liegen darüber. Oft ist sie als Endszene inszeniert, die den Erzählbogen der Seite schließt.",
  "warum_es_wirkt": "Ein bildstarker Schlusspunkt. Besonders stark, wenn die Seite schon mit einer 3D-Szene beginnt: Anfang und Ende bilden eine Klammer.",
  "wann_einsetzen": "Immersive Marken- und Kampagnenseiten. Studios, die WebGL beherrschen und das zeigen wollen.",
  "wann_nicht": "Wenn die übrige Seite kein WebGL nutzt, denn dann entsteht die ganze Last nur für den Footer. Bei schwachen Zielgeräten.",
  "varianten": [
   "Logo-Objekt, das dem Zeiger folgt",
   "Endszene: die ganze Wortmarke als 3D-Körper",
   "Partikel-Wortmarke, die dem Zeiger ausweicht",
   "Flüssigkeits- oder Kristall-Shader als Fläche"
  ],
  "umsetzung": "Canvas absolut hinter dem Footer-Inhalt, Texte und Links als HTML darüber. Den Renderer erst anlegen, wenn der Footer nahe am Viewport ist (IntersectionObserver, rootMargin 50 %), und die Render-Schleife außerhalb anhalten. Hat die Seite schon eine WebGL-Szene, denselben Renderer weiterverwenden (ein GL-Kontext). Pixel-Ratio auf 2 deckeln, mobil auf 1 bis 1,5. Objekte an leeren Platzhalter-Elementen im Layout ausrichten, so bleibt die Szene responsiv und überdeckt keinen Text. Shader vorab mit renderer.compile übersetzen, sonst ruckelt der erste Variantenwechsel. Ohne WebGL ein Standbild zeigen.",
  "mobil": "Vereinfachte Szene mit weniger Partikeln und Pixel-Ratio 1 bis 1,5, oder ein Standbild bzw. Video. Kein Zeiger-Folgen, höchstens eine Reaktion auf Antippen.",
  "reduzierte_bewegung": "Standbild der Szene oder Szene ohne Eigenbewegung. Nur bei Eingaben neu rendern.",
  "barrierefreiheit": "Canvas mit aria-hidden. Den Kontrast der Texte über allen Szenenzuständen sichern, am einfachsten mit einem eigenen Bereich für die Szene. Was die Szene zeigt (etwa die Wortmarke), zusätzlich als Text anbieten."
 },
 "messwerte": {
  "easing": "Lerp 0.05–0.1 für Maus-Reaktion",
  "dauer_ms": "",
  "stagger_ms": "",
  "distanz": "",
  "sonstiges": "DPR-Deckel 2 (Desktop), 1–1.5 (Mobil)",
  "herkunft": "typisch",
  "quelle": ""
 },
 "kurve": null,
 "gesehen_bei": [
  {
   "seite": "Awwwards Inspiration: Liquid crystal footer",
   "url": "https://www.awwwards.com/inspiration/liquid-crystal-footer",
   "auszeichnung": "Awwwards Inspiration (Element-Sammlung)",
   "beobachtung": "Nur Titel gesehen.",
   "art": "website-ungeprueft"
  },
  {
   "seite": "Awwwards Inspiration: Footer end scene (Elef)",
   "url": "https://www.awwwards.com/inspiration/footer-end-scene-elef",
   "auszeichnung": "Awwwards Inspiration (Element-Sammlung)",
   "beobachtung": "Nur Titel gesehen.",
   "art": "website-ungeprueft"
  },
  {
   "seite": "Contra: 3D Interactive Footer by Matt Kettelkamp",
   "url": "https://contra.com/p/m7mlqPOB-new-project",
   "auszeichnung": "",
   "beobachtung": "Nur Titel gesehen.",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "Codrops: How to Animate WebGL Shaders with GSAP – Ripples, Reveals, Dynamic Blur",
   "url": "https://tympanus.net/codrops/2025/10/08/how-to-animate-webgl-shaders-with-gsap-ripples-reveals-and-dynamic-blur-effects/"
  }
 ],
 "kombinierbar_mit": [
  "footer-reveal",
  "footer-cta-riesen-wortmarke"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/footer/footer-3d-buehne/",
  "meta": "https://cecodesign.de/lab/fundus/footer/footer-3d-buehne/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/footer/footer-3d-buehne/demo"
 },
 "herkunft": {
  "quelldateien": [
   "navigation.json",
   "patch-belege-3.json"
  ],
  "pruefnotizen": [
   "patch-belege-3.json: Kein live geprüfter Produktionsbeleg; bleibt C."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Bleilettern aus three.js als Schlussbühne eines Mainzer Studios: eine Letter folgt dem Zeiger, die ganze Wortmarke steht spiegelverkehrt im Satz oder zerfällt in Partikel.",
  "demo": true,
  "abhaengigkeiten": [
   "three@0.186.0"
  ],
  "werte": {
   "lerp": "0.08 je Bild bei 60 Bildern/s, umgerechnet 1 − (1 − 0.08)^(dt·60)",
   "neigung": "Logo-Objekt: zum Zeiger bis 0.55 rad (y) und 0.3 rad (x), Grundhaltung 0.32 / −0.62 rad, Pendeln ±0.12 rad",
   "kurve": "cubic-bezier(0.16, 1, 0.3, 1) (expo.out) für Auftritt, Canvas-Einblendung und UI",
   "auftritt": "Lettern 1200 ms, 80 ms versetzt; Partikel 1600 ms, 0–600 ms versetzt von links nach rechts",
   "canvas_einblenden": "opacity 1000 ms",
   "endszene": "Letter unter dem Zeiger hebt sich bis 0.55 Einheiten und neigt sich bis 0.5 rad, Gauß-Breite 1.1 Einheiten",
   "partikel": "4200 Punkte (Touch 1800) aus der Wortmarke auf Canvas abgetastet, Abstoßradius 0.9 Kegelhöhen, Ausweichen (1 − d/r)², nahe Punkte in Signalfarbe",
   "pixelratio": "max. 2, Touch max. 1.5",
   "start": "IntersectionObserver rootMargin 50 % 0px, Render-Schleife steht außerhalb",
   "kamera": "PerspectiveCamera fov 28, z 16",
   "licht": "eigene Studio-Umgebung (7 Softboxen) über PMREM, DirectionalLight 2.2, ACES-Tonemapping 1.05",
   "material": "Kegel metalness 1 / roughness 0.48, Bild metalness 1 / roughness 0.26",
   "ui": "Hover 200 ms, Text-Roll im Knopf 400 ms, gleiche Kurve",
   "vorfuehrung": "gedachter Zeiger auf Lissajous-Bahn, Variantenwechsel alle 6.5 s"
  },
  "ausloeser": "hover",
  "touch": "Kein Zeiger-Folgen. Die Szene ruht mit leichtem Schweben, Antippen der Bühne lenkt sie 1,4 s zum Finger. Pixel-Ratio 1.5, 1800 statt 4200 Partikel, die Letter steht mittig im Band. Die Steuerung ist als Knopf eingeklappt.",
  "reduziert": "Standbild der Szene: kein Auftritt, kein Schweben, keine Zeiger-Reaktion. Gerendert wird nur bei Variantenwechsel oder Größenänderung. Die Vorführung wechselt nur die Varianten (alle 3 s).",
  "korrekturen": {
   "beschreibung": "Der Footer wird zur Bühne einer WebGL-Szene: ein 3D-Objekt wie das Logo, die ganze Wortmarke aus Körpern, Partikel, Flüssigkeit oder Kristall. Die Szene reagiert auf Zeiger und Scroll, sie neigt sich, weicht aus oder wirft Wellen. Typografie und Links bleiben HTML und liegen darüber. Oft ist sie als Endszene inszeniert, die den Erzählbogen der Seite schließt.",
   "warum_es_wirkt": "Ein bildstarker Schlusspunkt. Besonders stark, wenn die Seite schon mit einer 3D-Szene beginnt: Anfang und Ende bilden eine Klammer.",
   "wann_einsetzen": "Immersive Marken- und Kampagnenseiten. Studios, die WebGL beherrschen und das zeigen wollen.",
   "wann_nicht": "Wenn die übrige Seite kein WebGL nutzt, denn dann entsteht die ganze Last nur für den Footer. Bei schwachen Zielgeräten.",
   "varianten": [
    "Logo-Objekt, das dem Zeiger folgt",
    "Endszene: die ganze Wortmarke als 3D-Körper",
    "Partikel-Wortmarke, die dem Zeiger ausweicht",
    "Flüssigkeits- oder Kristall-Shader als Fläche"
   ],
   "umsetzung": "Canvas absolut hinter dem Footer-Inhalt, Texte und Links als HTML darüber. Den Renderer erst anlegen, wenn der Footer nahe am Viewport ist (IntersectionObserver, rootMargin 50 %), und die Render-Schleife außerhalb anhalten. Hat die Seite schon eine WebGL-Szene, denselben Renderer weiterverwenden (ein GL-Kontext). Pixel-Ratio auf 2 deckeln, mobil auf 1 bis 1,5. Objekte an leeren Platzhalter-Elementen im Layout ausrichten, so bleibt die Szene responsiv und überdeckt keinen Text. Shader vorab mit renderer.compile übersetzen, sonst ruckelt der erste Variantenwechsel. Ohne WebGL ein Standbild zeigen.",
   "mobil": "Vereinfachte Szene mit weniger Partikeln und Pixel-Ratio 1 bis 1,5, oder ein Standbild bzw. Video. Kein Zeiger-Folgen, höchstens eine Reaktion auf Antippen.",
   "reduzierte_bewegung": "Standbild der Szene oder Szene ohne Eigenbewegung. Nur bei Eingaben neu rendern.",
   "barrierefreiheit": "Canvas mit aria-hidden. Den Kontrast der Texte über allen Szenenzuständen sichern, am einfachsten mit einem eigenen Bereich für die Szene. Was die Szene zeigt (etwa die Wortmarke), zusätzlich als Text anbieten."
  },
  "geprueft": "01.11.2026",
  "notiz": "Rezept kreativstudio-buehne: erfundenes Studio Winkel aus Mainz (Bleisatz, Winkelhaken), Schwarz mit Signalfarbe #ff5a1f, TikTok Sans wdth 75/800 und DM Mono. Die Bühne zeigt Bleilettern aus three.js: Kegel mit Signatur-Rille und erhabenem, spiegelverkehrtem Bild, Glyphen als eigene Polygone. Drei Varianten: Logo-Objekt, Endszene (Wortmarke spiegelverkehrt als Druckform), Partikel-Wortmarke (aus Canvas abgetastet). Szene an Platzhaltern im Layout ausgerichtet, Renderer per IntersectionObserver, Standbild-SVG ohne WebGL. Referenzen nur als Prinzip: nouvellenoire.ch, madebynull.com, koto.com. AD-Review 01.11.2026: Note 4. Zugang 02.11.2026: Footer-Links in den Spalten inline-block mit padding-block 2px und margin-block −2px (Zielhöhe 27 px statt 21, Layout gleich). Pause-Knopf „Bewegung anhalten“ (button, aria-pressed) rechts in der Bildnotiz-Zeile, ruft dieselbe Pause wie FUNDUS_DEMO.pause; Telefon nur Zeichen; bei reduzierter Bewegung, ohne WebGL und in der Vorschau aus."
 }
}