{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "mesh-gradient-shader",
 "name": "Animierter Mesh-Verlauf",
 "name_en": "Animated mesh gradient / noise gradient shader",
 "kurz": "Warmer Mesh-Verlauf aus vier Markenfarben, der langsam atmet und einer Glaskarte etwas zum Brechen gibt, wahlweise als schräges Band oder als CSS-Fallback.",
 "kategorie": "Glas & Material",
 "kategorie_slug": "glas-material",
 "kategorie_nr": 10,
 "bau_chat": "C5",
 "prioritaet": "B",
 "trendstatus": "abklingend",
 "belegstatus": "belegt",
 "website_belege": 3,
 "stimmung": [
  "ruhig",
  "präzise",
  "verspielt"
 ],
 "stimmung_roh": [
  "modern",
  "weich",
  "technisch",
  "optimistisch"
 ],
 "technik": [
  "webgl-shader",
  "canvas",
  "css"
 ],
 "technik_gruppen": [
  "css",
  "webgl",
  "canvas"
 ],
 "leistungskosten": "mittel",
 "steckbrief": {
  "beschreibung": "Ein Canvas liegt vollflächig hinter dem Hero. Ein Fragment-Shader mischt drei bis fünf Farben. Jede Farbe hat ein Zentrum, das langsam wandert. Die Gewichtung folgt der inversen Distanz. Vorher verschiebt Noise die Koordinaten (distortion), eine leichte Drehung kommt dazu (swirl). Korn im selben Shader verhindert Banding. Die Stripe-Variante legt die Fläche schräg (skewY -12deg) und zeichnet fließende Farbwellen.",
  "warum_es_wirkt": "Die Fläche trägt Markenfarben, ganz ohne Bildmaterial. Die Bewegung ist so langsam, dass sie lebendig wirkt und trotzdem Hintergrund bleibt.",
  "wann_einsetzen": "Für Hero- und Abschnittshintergründe von Tech-, Finanz- und Kreativmarken. Hinter Glas-Elementen, damit das Glas etwas zum Brechen hat.",
  "wann_nicht": "Wenn starke Fotografie schon die Bühne trägt. Nicht in generischem Lila-Blau-Pink: Das gilt 2026 als KI-SaaS-Klischee. Farben immer aus der Marke ableiten.",
  "varianten": [
   "Statisch: mehrere radial-gradients übereinander, reines CSS",
   "Animiert per WebGL-Shader (wie Paper MeshGradient)",
   "Schräges Band im Stripe-Stil, Text mit color-burn",
   "Mit Maus-Einfluss: ein Farbzentrum folgt dem Zeiger",
   "Körnig (grain gradient)"
  ],
  "umsetzung": "Ein Fullscreen-Triangle und ein Fragment-Shader. Uniforms für Farben, Zeit und Auflösung. Die Farben kommen aus CSS-Variablen (getComputedStyle). Die Zeit läuft linear: zeit += dt · speed. DPR auf 1,5 begrenzen oder in halber Auflösung rendern, Verläufe vertragen das. Per IntersectionObserver außerhalb des Viewports pausieren. Fallback ohne WebGL: gestapelte radial-gradients, deren Positionen über @property animiert werden.",
  "mobil": "In halber Auflösung und mit 30 fps rendern oder ein statisches Standbild zeigen.",
  "reduzierte_bewegung": "Zeit einfrieren und ein einziges Standbild rendern.",
  "barrierefreiheit": "Rein dekorativ: Canvas mit aria-hidden. Den Textkontrast an der hellsten und an der dunkelsten Stelle des Verlaufs prüfen."
 },
 "messwerte": {
  "easing": "linear (zeitbasiert, speed 0.75); linear (zeitbasiert, Plaid)",
  "dauer_ms": "Zyklus 20–60 s",
  "stagger_ms": "",
  "distanz": "",
  "sonstiges": "Produktion Paper: 2 Farben (#EFEFE4/#FCFCF9 bzw. #000/#222), distortion 0.85, swirl 0.6, scale 1.27, grainMixer 0.35, grainOverlay 0. Bibliotheks-Default: 4 Farben, distortion 0.8, swirl 0.1. Stripe-Analyse: 4 Farben, --section-skew-Y -12deg.; Plaid: minigl amp 320, seed 5, freqX 14e-5, freqY 29e-5, 4 CSS-Variablen-Farben, Canvas mit blur(4px). Pitch: statischer Mesh-Verlauf (animate false), 3 Punkte, radius 10, noise 0.",
  "herkunft": "beobachtet",
  "quelle": "https://paper.design/_next/static/immutable/chunks/0t1o_zyzayk7e.js; https://plaid.com/_next/static/chunks/pages/_app-ca42ef1d33542cee.js"
 },
 "kurve": {
  "bezier": [
   0,
   0,
   1,
   1
  ],
  "css": "cubic-bezier(0, 0, 1, 1)",
  "name": "linear",
  "dauer_ms": null
 },
 "gesehen_bei": [
  {
   "seite": "Stripe-Gradient (Analyse)",
   "url": "https://kevinhufnagl.com/how-to-stripe-website-gradient-effect/",
   "auszeichnung": "",
   "beobachtung": "Minimales WebGL (minigl), 4 Farben aus CSS-Variablen, Skew -12deg, ScrollObserver pausiert außerhalb des Viewports, Text mit mix-blend-mode color-burn über dem Verlauf.",
   "art": "artikel"
  },
  {
   "seite": "Paper (paper.design)",
   "url": "https://paper.design/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): Hintergrundebenen (u. a. fixed inset-0 auf kleineren Viewports, zusätzlich um 315° gedrehte Ebene) mit Paper-Shaders-Mesh-Gradient (Fragment-Shader mit u_colors[10], u_distortion, u_swirl, u_grainMixer): speed .75, scale 1.27, distortion .85, swirl .6, grainMixer .35, grainOverlay 0; Farben hell #EFEFE4/#FCFCF9, dunkel #000/#222.",
   "art": "website"
  },
  {
   "seite": "Plaid",
   "url": "https://plaid.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): _app-Bundle (pages/_app-ca42ef1d33542cee.js): Stripe-Gradient-Klasse mit minigl: amp 320, seed 5, freqX 14e-5, freqY 29e-5, freqDelta 1e-5, u_vertDeform (noiseFreq [3,4], noiseFlow 3, offsetBottom −.5), Wellen-Layer mit noiseSpeed 11+.3·i und noiseFlow 6.5+.3·i, scrollObserver; Farben aus --gradient-color-1…4 (z. B. #D8C2FB/#E9F/#42F0CD/#56DDF7 bzw. #E4D3FA/#8DD9FF/#E4D3FA/#B6F3F8) auf Canvas-Elementen 278×239 bzw. 100 %+8px × 239 mit border-radius 40 und filter blur(4px).",
   "art": "website"
  },
  {
   "seite": "Pitch",
   "url": "https://pitch.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): Framer-Code-Komponente MeshGradient.CpZwKyaZ.mjs (WebGL2-Fragment-Shader mit u_baseColor, u_colors[n], u_positions[n], u_radius[n], u_noise, psrdnoise); auf der Startseite eingebunden mit baseColor rgb(40,15,97), drei Farbpunkten rgb(98,61,179) bei (2.6 %, 29.5 %), (0 %, 72.9 %), (70.4 %, 92.9 %), radius 10, noise 0, animate false.",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "How to recreate the Stripe website gradient effect",
   "url": "https://kevinhufnagl.com/how-to-stripe-website-gradient-effect/"
  },
  {
   "titel": "Paper Shaders (Quellcode)",
   "url": "https://github.com/paper-design/shaders"
  },
  {
   "titel": "Paper Shaders – Mesh gradient",
   "url": "https://shaders.paper.design/"
  }
 ],
 "kombinierbar_mit": [
  "grain-noise-overlay",
  "frosted-glass-erweitert",
  "liquid-glass-refraktion"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/glas-material/mesh-gradient-shader/",
  "meta": "https://cecodesign.de/lab/fundus/glas-material/mesh-gradient-shader/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/glas-material/mesh-gradient-shader/demo"
 },
 "herkunft": {
  "quelldateien": [
   "material3d.json",
   "patch-belege-2.json",
   "r3-belege-a.json"
  ],
  "pruefnotizen": [
   "patch-belege-2.json: 1 Produktionsbeleg. Achtung: stripe.com lädt am 31.10.2026 keinen MiniGl-Gradienten mehr (40 Bundles geprüft) – Stripe nur noch als historische Referenz führen. Ziel ≥2 nicht erreicht.",
   "r3-belege-a.json (Runde 3, 31.10.2026): Plaid ist ein klarer Beleg für die animierte Stripe-Variante, allerdings als kleine weichgezeichnete Kachel statt als Hero. Pitch zählt nur eingeschränkt: Die Komponente kann animieren, ist auf der Startseite aber statisch eingestellt.",
   "02.11.2026: Priorität A → B, Trendstatus etabliert → abklingend (Lückenrecherche K2), weil Leitfaden C2 führt den Aurora-Verlauf als Anti-Muster, 5 Rezepte schließen ihn aus."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Warmer Mesh-Verlauf aus vier Markenfarben, der langsam atmet und einer Glaskarte etwas zum Brechen gibt, wahlweise als schräges Band oder als CSS-Fallback.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "linear, zeitbasiert (zeit += dt * speed)",
   "speed": 0.75,
   "distortion": 0.85,
   "swirl": 0.6,
   "scale": 1.27,
   "grainMixer": 0.35,
   "farben": [
    "#ede5d8 Leinen",
    "#f0a571 Aprikose",
    "#d4623a Ziegel",
    "#9cb8a0 Salbei"
   ],
   "farben_quelle": "CSS-Variablen --verlauf-1 bis --verlauf-4, per getComputedStyle gelesen",
   "zyklus_s": "Zentren-Perioden ca. 42 / 35 / 30 / 26 s (Frequenz 0.2 + 0.04·i rad pro Shader-Sekunde)",
   "gewichtung": "inverse Distanz 1 / (d^3.2 + 0.006), Korn in der Distanz (grainMixer · 0.5)",
   "dither": "± 1/255 gegen Banding",
   "dpr_max": 1.5,
   "touch_aufloesung": "0.5 × DPR, 30 fps",
   "maus": "Ziegel-Zentrum folgt dem Zeiger, Lerp 0.04, Einfluss 0.55",
   "band_skew": "skewY(-12deg), transform-origin 0 100%",
   "band_wellen": "3 Layer, fbm-Kanten, Text mix-blend-mode color-burn",
   "css_fallback": "3 radial-gradient + Grundfarbe, @property-Positionen, 42 / 52 / 60 s linear, SVG-Grain opacity 0.35 soft-light",
   "ui_wechsel": "Variantenwechsel 0.9 s cubic-bezier(0.16, 1, 0.3, 1), Überblendung 0.6 s linear",
   "vorfuehrung": "Mesh 9 s mit kreisendem Zeiger, Band 7 s, CSS 6 s, Schleife"
  },
  "ausloeser": "dauer",
  "touch": "Kein Zeiger-Einfluss; Shader rendert in halber Auflösung mit 30 fps. Varianten per Tippen.",
  "reduziert": "Zeit steht: ein einziges Standbild (WebGL) bzw. feste Positionen (CSS), keine Animationsschleife.",
  "korrekturen": {
   "beschreibung": "Ein Canvas liegt vollflächig hinter dem Hero. Ein Fragment-Shader mischt drei bis fünf Farben. Jede Farbe hat ein Zentrum, das langsam wandert. Die Gewichtung folgt der inversen Distanz. Vorher verschiebt Noise die Koordinaten (distortion), eine leichte Drehung kommt dazu (swirl). Korn im selben Shader verhindert Banding. Die Stripe-Variante legt die Fläche schräg (skewY -12deg) und zeichnet fließende Farbwellen.",
   "warum_es_wirkt": "Die Fläche trägt Markenfarben, ganz ohne Bildmaterial. Die Bewegung ist so langsam, dass sie lebendig wirkt und trotzdem Hintergrund bleibt.",
   "wann_einsetzen": "Für Hero- und Abschnittshintergründe von Tech-, Finanz- und Kreativmarken. Hinter Glas-Elementen, damit das Glas etwas zum Brechen hat.",
   "wann_nicht": "Wenn starke Fotografie schon die Bühne trägt. Nicht in generischem Lila-Blau-Pink: Das gilt 2026 als KI-SaaS-Klischee. Farben immer aus der Marke ableiten.",
   "varianten": [
    "Statisch: mehrere radial-gradients übereinander, reines CSS",
    "Animiert per WebGL-Shader (wie Paper MeshGradient)",
    "Schräges Band im Stripe-Stil, Text mit color-burn",
    "Mit Maus-Einfluss: ein Farbzentrum folgt dem Zeiger",
    "Körnig (grain gradient)"
   ],
   "umsetzung": "Ein Fullscreen-Triangle und ein Fragment-Shader. Uniforms für Farben, Zeit und Auflösung. Die Farben kommen aus CSS-Variablen (getComputedStyle). Die Zeit läuft linear: zeit += dt · speed. DPR auf 1,5 begrenzen oder in halber Auflösung rendern, Verläufe vertragen das. Per IntersectionObserver außerhalb des Viewports pausieren. Fallback ohne WebGL: gestapelte radial-gradients, deren Positionen über @property animiert werden.",
   "mobil": "In halber Auflösung und mit 30 fps rendern oder ein statisches Standbild zeigen.",
   "reduzierte_bewegung": "Zeit einfrieren und ein einziges Standbild rendern.",
   "barrierefreiheit": "Rein dekorativ: Canvas mit aria-hidden. Den Textkontrast an der hellsten und an der dunkelsten Stelle des Verlaufs prüfen."
  },
  "geprueft": "31.10.2026",
  "notiz": "Hero einer erfundenen Buchhaltungs-App (Saldo, Leipzig) mit Glaskarte über dem Verlauf. Eigener WebGL-Shader ohne Bibliothek, Werte aus der Paper-Produktion (speed, distortion, swirl, scale, grainMixer). Umschalter: Mesh mit Maus-Einfluss, schräges Band nach Stripe/Plaid (skewY -12deg, color-burn), CSS-Fallback mit @property, der ohne WebGL automatisch greift. Die Shader-Abbildung von distortion/swirl ist eigene Interpretation, nicht Paper-Code."
 }
}