{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "fluessig-marmor-hintergrund",
 "name": "Flüssiger Marmor-Hintergrund",
 "name_en": "Liquid marble background (domain-warped fBM shader)",
 "kurz": "Ein langsam fließender Marmor aus einem einzigen Shader trägt den Schrift-Hero, in Hausfarben statt Pastell-Aurora.",
 "kategorie": "Glas & Material",
 "kategorie_slug": "glas-material",
 "kategorie_nr": 10,
 "bau_chat": "C5",
 "prioritaet": "C",
 "trendstatus": "aufsteigend",
 "belegstatus": "teilbelegt",
 "website_belege": 1,
 "stimmung": [
  "ruhig",
  "laut",
  "warm",
  "experimentell"
 ],
 "stimmung_roh": [
  "experimentell",
  "fließend",
  "selbstbewusst",
  "materiell"
 ],
 "technik": [
  "webgl-shader",
  "vanilla-js",
  "css",
  "intersection-observer"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "webgl"
 ],
 "leistungskosten": "mittel",
 "steckbrief": {
  "beschreibung": "Ein flächiger Hintergrund, der langsam fließt wie Marmor, Tinte in Wasser oder Öl auf einer Pfütze. Er wirkt wie Material, nicht wie Licht: Schlieren, Falten und dünne Adern statt weicher Farbwolken. Technisch ist es ein einziger Fragment-Shader mit Domain Warping nach Inigo Quilez: Ein Rauschmuster wird an Koordinaten ausgewertet, die selbst schon durch Rauschen verschoben sind, zweimal hintereinander. Die Farben kommen aus CSS-Variablen der Marke. Über dem Hintergrund liegt eine Kontrastschicht, damit fette Schrift darauf immer lesbar bleibt.",
  "warum_es_wirkt": "Das Auge liest gefaltete Schlieren als echtes Material mit Zähigkeit und Gewicht, nicht als Bildschirmeffekt. Weil sich die Fläche sehr langsam bewegt, wirkt die Seite lebendig, ohne vom Inhalt abzulenken. Eine harte Groteske davor gibt den Gegenpol: ruhige Schrift, bewegter Grund.",
  "wann_einsetzen": "Als Bühne für einen Schrift-Hero, eine Kampagne, einen Launch oder ein Festival-Key-Visual. Bei Kreativstudios und Kulturhäusern, wenn das Studio Bewegung als Haltung zeigen will. Für Mode und Beauty in Produktfarben (Launch-Seite, nicht im Shop-Raster). Für Eigenprojekte und Labore.",
  "wann_nicht": "Nicht in Pastell-Lila, Pink und Cyan als Standard: Das ist dasselbe Klischee wie der Aurora-Hintergrund (Leitfaden C2, Anti-Muster). Diese Farbigkeit gibt es hier nur als Experiment (Variante seifenhaut, Priorität F). Nicht hinter Fließtext, nicht zusammen mit einem Foto-Hero und nicht neben einem zweiten Material-Effekt (Glas, Chrom, Verlauf) in derselben Ansicht. Nicht für SaaS, Kanzlei, Praxis, Pflege, Handwerk und Vereine. Nicht ohne Standbild für schwache Geräte. Abgrenzung: mesh-gradient-shader macht weiche Farbwolken aus wandernden Zentren (Licht), webgl-fluid-cursor ist eine echte Strömungssimulation, die der Zeiger antreibt. Dieses Muster ist Material, läuft ohne Zeiger und kostet einen einzigen Shader-Durchlauf.",
  "varianten": [
   "marmor: heller Grund, ein Band in der Signalfarbe, dünne dunkle Adern (Grundvariante)",
   "tinte: dunkler Grund, Signalfarbe als Tinte in Wasser, weiche helle Schleier",
   "seifenhaut: irisierende Dünnschicht-Farben auf Creme (Experiment, Priorität F)",
   "lava: warme Tropfen, die langsam verschmelzen und sich trennen (Smooth-Min-SDF)",
   "bild: ein eigenes Foto wird mit demselben Warp-Feld verflüssigt"
  ],
  "umsetzung": "Rohes WebGL 1, kein three.js: ein Dreieck über den ganzen Bildschirm, ein Fragment-Shader. Rauschen als Value Noise mit sinusfreiem Hash, fbm mit 4 Oktaven und Drehmatrix je Oktave. Warp nach Quilez: q = (fbm(p + 0.05t), fbm(p + (5.2, 1.3))), r = (fbm(p + k·q + (1.7, 9.2)), fbm(p + k·q + (8.3, 2.8))), f = fbm(p + k·r) mit k = 3 bis 3,5. Einfärben je Variante: marmor über Isolinien von f (Adern) und ein Band in r.x (Signalfarbe); tinte über f und |q|; seifenhaut über eine zyklische Rampe aus drei Farben entlang f + |r|; lava über Smooth-Min-SDF aus sechs Kreisen, deren Ränder q leicht verbiegt; bild verschiebt die Textur-Koordinaten um (r − 0,5). Farben liest das Skript aus CSS-Variablen (--fl-0 bis --fl-3). Koordinaten auf die Höhe normiert und zentriert, so passt das Standbild (object-fit: cover) zum ersten Bild des Shaders. Leistung: Gerätepixel auf 1 begrenzt, Renderfaktor 0,75, auf schwachen Geräten (≤ 4 Kerne, ≤ 4 GB, Touch oder Datensparen) und bei langsamen Bildern automatisch 0,5; höchstens 30 Bilder pro Sekunde. Pause per IntersectionObserver, visibilitychange und Pause-Knopf. Fallback: Standbild (WebP, aus demselben Shader-Code in Python gerendert) liegt immer unter dem Canvas; ohne WebGL oder bei Kontextverlust bleibt es stehen und driftet langsam per CSS; bei reduzierter Bewegung zeigt der Shader ein einziges Bild. Kontrastschicht: Verlauf in der Grundfarbe (Deckkraft 0,62) unter Kopfzeile und Text.",
  "mobil": "Gleiches Bild, auf Touch-Geräten mit halber Auflösung und 30 fps. Keine Zeiger-Reaktion. Der Pause-Knopf bleibt sichtbar und hat 44 px Trefferfläche. Das Wort im Hero passt sich der Breite an.",
  "reduzierte_bewegung": "Kein Fließen: Der Shader zeichnet ein einziges Standbild (ohne WebGL das WebP-Standbild), keine Drift, keine Zeiger-Reaktion. Der Pause-Knopf entfällt, weil sich nichts bewegt.",
  "barrierefreiheit": "Der Hintergrund ist Dekoration (aria-hidden, Canvas ohne Inhalt). Er bewegt sich länger als 5 Sekunden, darum gibt es einen sichtbaren Pause-Knopf „Bewegung anhalten“ mit aria-pressed (WCAG 2.2.2). Die Kontrastschicht hält Text auch über der hellsten und der dunkelsten Stelle bei mindestens 4,5 : 1 (WCAG 1.4.3); in der Demo am Standbild gemessen. Außerhalb des Bildschirms und im versteckten Tab steht der Shader. prefers-reduced-motion zeigt ein Standbild."
 },
 "messwerte": {
  "easing": "cubic-bezier(0.16, 1, 0.3, 1)",
  "dauer_ms": "Variantenwechsel 200 aus, 600 ein; Hover 300, Pult 150",
  "stagger_ms": "",
  "distanz": "",
  "sonstiges": "Shader-Zeit 0,12 Einheiten pro Sekunde (lava 0,5), Vorführung 3-fach; fbm 4 Oktaven; Warp 3,0 bis 3,5; Renderfaktor 0,75 / 0,5; 30 fps; Kontrastschicht Deckkraft 0,62",
  "herkunft": "eigene Festlegung",
  "quelle": "Technik nach iquilezles.org/articles/warp, Parametrik nach shaders.paper.design/warp; Kurve aus Rezept kreativstudio-buehne"
 },
 "kurve": {
  "bezier": [
   0.16,
   1.0,
   0.3,
   1.0
  ],
  "css": "cubic-bezier(0.16, 1, 0.3, 1)",
  "name": "expo.out",
  "dauer_ms": 200
 },
 "gesehen_bei": [
  {
   "seite": "Inigo Quilez: Domain Warping",
   "url": "https://iquilezles.org/articles/warp",
   "auszeichnung": "",
   "beobachtung": "Grundlage der Technik: f(p) wird zu fbm(p + 4.0*r), wobei q aus zwei fbm-Aufrufen mit Versatz (0,0) und (5.2,1.3) und r aus fbm(p + 4.0*q) mit Versatz (1.7,9.2) und (8.3,2.8) entsteht. Die Zwischenwerte q und r eignen sich zum Einfärben. Zeit als Parameter ergibt die Animation.",
   "art": "artikel"
  },
  {
   "seite": "Paper Shaders: Warp",
   "url": "https://shaders.paper.design/warp",
   "auszeichnung": "",
   "beobachtung": "„Animated color fields warped by noise and swirls“, bis zu 10 Farben, Regler proportion, softness, distortion, swirl. Laut Seite „great for fluid, smoky, or marbled effects“. Vorbild für die Parameter der Demo (Weichheit, Warp-Stärke, Skala).",
   "art": "demo"
  },
  {
   "seite": "Amanda Ghassaei: Digital Marbling",
   "url": "https://blog.amandaghassaei.com/2022/10/25/digital-marbling/",
   "auszeichnung": "",
   "beobachtung": "Echte Marmorierung mit Tropfen und Kämmen braucht eine eigene Fluid-Simulation; laut Autorin ein Forschungsprototyp. Begründet, warum der Hero mit Domain Warping arbeitet statt zu simulieren.",
   "art": "artikel"
  },
  {
   "seite": "Slider Revolution: Fluid Dynamics Add-on",
   "url": "https://www.sliderrevolution.com/addons/fluid-dynamics/",
   "auszeichnung": "",
   "beobachtung": "WebGL-Fluid als Ebene („ink in water“), läuft autonom oder folgt der Maus, getrennte DPR- und Qualitätsgrenzen für Mobilgeräte. Zeigt, dass flüssige Hintergründe 2026 als fertiger Baustein in Seiten-Baukästen angeboten werden.",
   "art": "website"
  },
  {
   "seite": "Slider Revolution: Distortion Add-on",
   "url": "https://www.sliderrevolution.com/addons/distortion/",
   "auszeichnung": "",
   "beobachtung": "Verzerrt den Folienhintergrund animiert über Graustufen-Maps, auch mit eigenem Bild, reagiert auf die Maus. Vorbild für die Variante bild.",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "Inigo Quilez: Domain Warping",
   "url": "https://iquilezles.org/articles/warp"
  },
  {
   "titel": "Paper Shaders: Warp (Parameter proportion, softness, distortion, swirl)",
   "url": "https://shaders.paper.design/warp"
  },
  {
   "titel": "The Book of Shaders: Fractal Brownian Motion",
   "url": "https://thebookofshaders.com/13/"
  }
 ],
 "kombinierbar_mit": [
  "schrift-hero-viewportbreit",
  "versal-kondensiert-fit-to-width",
  "bewegung-pausieren-schalter",
  "grain-noise-overlay",
  "split-mask-reveal"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/glas-material/fluessig-marmor-hintergrund/",
  "meta": "https://cecodesign.de/lab/fundus/glas-material/fluessig-marmor-hintergrund/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/glas-material/fluessig-marmor-hintergrund/demo"
 },
 "herkunft": {
  "quelldateien": [
   "Buttons/SR-Recherche 02.11.2026"
  ],
  "pruefnotizen": [
   "02.11.2026: Technik belegt (Quilez, Paper Shaders Warp, beide abgerufen). Als Seiten-Baustein belegt über die Add-on-Seiten eines Slider-Baukastens; eine Award-Seite mit genau diesem Material-Hintergrund fehlt noch als Beleg.",
   "Anlass war ein Hero-Screenshot mit irisierendem Pastell-Liquid. Nachgebaut ist nur das Prinzip, mit eigenem Shader-Code, eigener Marke und eigenen Farben. Die Pastell-Farbigkeit des Vorbilds steckt nur in der Experiment-Variante seifenhaut.",
   "Rezept kreativstudio-buehne schließt Aurora-/Glow-Hintergründe aus. Die Grundvariante bleibt darum in den Hausfarben (Schwarz, Hellgrau, eine Signalfarbe) und wirkt über Struktur, nicht über Farbe.",
   "Kontrastwerte in der Demo am Standbild gemessen, nicht an jedem Bild der Animation. Bei eigenen Farben neu prüfen."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Ein langsam fließender Marmor aus einem einzigen Shader trägt den Schrift-Hero, in Hausfarben statt Pastell-Aurora.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "technik": "WebGL 1, ein Vollbild-Dreieck, ein Fragment-Shader; kein three.js",
   "warp": "q = fbm(p), r = fbm(p + k·q), f = fbm(p + k·r); fbm 4 Oktaven, Drehmatrix (1.6, 1.2, -1.2, 1.6)",
   "marmor": "skala 0.9, warp 3.0, weich 0.006, tempo 0.12/s",
   "farben": "--fl-0 bis --fl-3 aus CSS: #f2f2f2 Grund, #8a8a8a, #ff5a1f Signal, #0b0b0b Adern",
   "startzeit": 7.0,
   "renderfaktor": "0.75 der CSS-Pixel (Gerätepixel auf 1 begrenzt); 0.5 auf schwachen Geräten (≤ 4 Kerne, ≤ 4 GB, Touch, Datensparen) oder wenn 30 Bilder im Schnitt > 55 ms brauchen",
   "fps_deckel": 30,
   "vorfuehrung": "Zeit 3-fach, gedachter Zeiger kreist (0.45 rad/s), Wirbelstärke 0.9",
   "zeiger": "Wirbel exp(-d²·9)·1.1 rad, Lerp 0.06 Position / 0.04 Stärke, klingt 1200 ms nach der letzten Mausbewegung ab",
   "kontrastschicht": "Grundfarbe mit Deckkraft 0.62 unter Kopfzeile (+72 px Auslauf) und Textzone (+96 px Auslauf), Höhe per Skript gemessen",
   "kontrast_gemessen": "marmor ≥ 6,9:1, tinte ≥ 11,5:1, seifenhaut ≥ 13,7:1, lava ≥ 9,2:1, bild ≥ 6,6:1 (über das ganze Standbild)",
   "variantenwechsel": "Canvas 200 ms aus, 600 ms ein, cubic-bezier(0.16, 1, 0.3, 1)",
   "ui": "Hover 300 ms, Pult 150 ms, cubic-bezier(0.16, 1, 0.3, 1)",
   "fallback_drift": "ohne WebGL: Standbild 48 s ease-in-out alternate, scale 1.04 → 1.12, translate(-2.5 %, 1.5 %)",
   "wortmarke": "TikTok Sans wght 800, wdth 75, -0.03em, Zeilenhöhe 0.8, Fit-to-Width per ResizeObserver, höchstens 44 % der Bühnenhöhe"
  },
  "ausloeser": "dauer",
  "touch": "Gleiches Fließen ohne Zeiger-Wirbel, Renderfaktor 0,5 und 30 fps. Pause-Knopf mit 44 px Trefferfläche bleibt sichtbar, Steuerung als Knopf eingeklappt.",
  "reduziert": "Kein Fließen und keine Drift: Der Shader zeichnet ein einziges Bild (dasselbe wie das Standbild), ohne WebGL steht das WebP. Der Pause-Knopf entfällt, Variantenwechsel ohne Überblendung.",
  "korrekturen": {},
  "geprueft": "02.11.2026",
  "notiz": "Welt: Rezept kreativstudio-buehne, erfundenes Studio „Strudel“ aus Dessau-Roßlau, TikTok Sans 800/wdth 75 und DM Mono, Hausfarben Schwarz, Hellgrau, Signal #ff5a1f. Vorbild war ein Slider-Hero mit irisierendem Liquid-Grund (nur das Prinzip, eigener Shader). Standbilder je Variante als WebP in medien/fluessig-marmor-hintergrund-*.webp (aus dem Shader-Code gerendert), bild nutzt das eigene stoff-stapel.jpg. Pause per Knopf (aria-pressed), IntersectionObserver und visibilitychange; Knopf „Standbild ohne WebGL“ im Pult zeigt den Fallback. Fünf Varianten auf ausdrücklichen Wunsch (Regel 13 nennt höchstens drei). Referenzen: iquilezles.org, shaders.paper.design. AD-Review 02.11.2026: Note 4. Fünf Varianten klar verschieden, seifenhaut trifft den gewünschten Liquid-Look als Experiment; marmor wirkt durch die grauen Isolinien etwas kartografisch (offen, Standbilder müssten neu gerendert werden).",
  "varianten": [
   {
    "id": "marmor",
    "name": "Marmor",
    "wann": "Grundvariante für Kreativstudio, Mode und Kultur: heller Grund, ein Band in der Signalfarbe, dünne dunkle Adern; wirkt über Struktur, nicht über Farbe.",
    "werte": {
     "skala": 0.9,
     "warp": 3.0,
     "weich": 0.006,
     "tempo": 0.12,
     "farben": "#f2f2f2, #8a8a8a, #ff5a1f, #0b0b0b"
    }
   },
   {
    "id": "tinte",
    "name": "Tinte",
    "wann": "Dunkle Bühne für Festival-Key-Visual, Kulturhaus oder Studio mit invertiertem Auftritt: Signalfarbe als Tinte in Wasser.",
    "werte": {
     "skala": 1.0,
     "warp": 3.0,
     "weich": 0.04,
     "tempo": 0.12,
     "farben": "#0b0b0b, #8a8a8a, #ff5a1f, #f2f2f2",
     "text": "#ffffff"
    }
   },
   {
    "id": "seifenhaut",
    "name": "Seifenhaut (Experiment)",
    "wann": "Nur als Experiment oder Eigenprojekt (Priorität F): irisierende Dünnschicht-Farben wie im Vorbild. Nie als Standard für Kunden, Pastell-Lila ist Leitfaden C2.",
    "werte": {
     "skala": 1.0,
     "warp": 3.5,
     "weich": 0.1,
     "tempo": 0.12,
     "farben": "#f4f1ea, #7fe3b0, #c79bf2, #f4a6cf",
     "rampe": "zyklisch entlang f·1.6 + |r|·0.9, Exponent 3"
    }
   },
   {
    "id": "lava",
    "name": "Lava",
    "wann": "Für Launch- oder Event-Seiten mit warmer Hausfarbe, wenn Tropfen statt Schlieren gewünscht sind: wenige große Formen, ruhiger als Marmor.",
    "werte": {
     "skala": 1.6,
     "warp": 2.0,
     "weich": 0.1,
     "tempo": 0.5,
     "farben": "#0b0b0b, #ff5a1f, #ffc2a3, #7a1d05",
     "sdf": "Smooth-Min aus 6 Kreisen, k 0.38, Radius 0.11 ± 0.05, Rand um (q − 0.5)·0.22 verbogen"
    }
   },
   {
    "id": "bild",
    "name": "Bild verflüssigt",
    "wann": "Für Mode, Textil oder Material-Marken mit eigenem Detailfoto: dasselbe Warp-Feld verschiebt die Bildkoordinaten, das Foto bleibt erkennbar.",
    "werte": {
     "skala": 0.9,
     "warp": 3.0,
     "versatz": 0.18,
     "tempo": 0.12,
     "bild": "medien/stoff-stapel.jpg",
     "zoom": 0.42,
     "mitte": "0.5, 0.53"
    }
   }
  ]
 }
}