{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "grain-noise-overlay",
 "name": "Grain-/Noise-Überlagerung",
 "name_en": "Film grain / noise overlay, grainy gradients",
 "kurz": "Eine kleine feTurbulence-Kachel legt Korn über Verlauf, Bild und Schrift und macht die digitale Fläche analog und greifbar.",
 "kategorie": "Glas & Material",
 "kategorie_slug": "glas-material",
 "kategorie_nr": 10,
 "bau_chat": "C5",
 "prioritaet": "A",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 3,
 "stimmung": [
  "editorial",
  "filmisch",
  "warm"
 ],
 "stimmung_roh": [
  "analog",
  "editorial",
  "warm",
  "filmisch"
 ],
 "technik": [
  "css",
  "svg",
  "svg-filter",
  "webgl-shader"
 ],
 "technik_gruppen": [
  "css",
  "webgl",
  "canvas"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Eine feine Rauschtextur liegt als Ebene über Flächen, Verläufen, Fotos oder der ganzen Seite. Das Korn entsteht mit feTurbulence (fractalNoise) als kleine, nahtlose Kachel von 128 bis 256 px. Gängig sind drei Formen: ein statisches Overlay mit mix-blend-mode overlay oder soft-light, animiertes Filmkorn, bei dem die Kachel alle 80 bis 120 ms springt, und der Grainy Gradient, bei dem Rauschen unter einem Verlauf per contrast und brightness hart gemacht wird.",
  "warum_es_wirkt": "Perfekt glatte digitale Flächen wirken steril. Korn bricht diese Glätte, verhindert sichtbare Stufen (Banding) in Verläufen und gibt Flächen, Glas und Fotos einen analogen, fast stofflichen Charakter.",
  "wann_einsetzen": "Bei großen Farbflächen, Verläufen und dunklen Seiten. Passt zu Editorial-, Fashion- und Studio-Auftritten. Gut auch als letzter Schliff auf Shader- oder Mesh-Hintergründen.",
  "wann_nicht": "Wenn kleine, feine Schrift auf hellem Grund steht und das Korn sie sichtbar anraut. Animiertes Korn nicht großflächig auf schwachen Geräten.",
  "varianten": [
   "Statisches Overlay über der ganzen Seite (body::after)",
   "Animiertes Filmkorn: Kachel springt per steps(1) alle 80 bis 120 ms",
   "Grainy Gradient: Rauschen unter Verlauf, contrast(170%) brightness(1000%), Farbe per multiply",
   "Korn im Shader, z. B. als letzter Schritt eines Mesh-Gradients",
   "Korn nur auf Bildern oder einzelnen Flächen statt global",
   "Korn auf Button-Flächen: Kachel per ::before über einem Verlauf (soft-light oder multiply), Text darüber, flimmert nur bei Hover"
  ],
  "umsetzung": "Die Kachel als SVG-Data-URL oder kleines PNG/WebP anlegen und als background-image mit fester Größe kacheln. So rendert der Browser das Rauschen einmal; feTurbulence live auf großer Fläche ist teuer. Die Ebene liegt mit position fixed bzw. absolute, inset 0 und pointer-events none über dem Inhalt, mit mix-blend-mode overlay und opacity 0.04 bis 0.9 je nach Alpha der Kachel. Filmkorn über transform auf einem übergroßen Pseudo-Element bewegen, nicht über background-position. Für den Grainy Gradient braucht der Container isolation: isolate, damit multiply nur innen mischt. Blink und WebKit mischen mix-blend-mode leicht unterschiedlich, deshalb in beiden prüfen. Im Dark Mode die Deckkraft etwas erhöhen.",
  "mobil": "Statisches Korn ist unproblematisch. Animiertes Korn auf Touch-Geräten abschalten.",
  "reduzierte_bewegung": "Animiertes Korn anhalten, statisches Korn behalten.",
  "barrierefreiheit": "Textkontrast über dem Korn prüfen. Die Korn-Ebene ist rein dekorativ: aria-hidden=\"true\" und pointer-events: none. Auf Buttons immer eine deckende Grundfarbe als Rückfall setzen und den Kontrast an der hellsten und an der dunkelsten Stelle des Verlaufs prüfen."
 },
 "messwerte": {
  "easing": "steps(1) bei animiertem Korn",
  "dauer_ms": "Kornwechsel ca. 80–120 ms",
  "stagger_ms": "",
  "distanz": "",
  "sonstiges": "Produktion: Linear overlay-Blend, opacity .6–.9, Kachel 256px; Arc feTurbulence fractalNoise baseFrequency 0.9, numOctaves 2, Kachel 160px, Alpha 0.55; Alternativ PNG/WebP-Kachel (Arc, makemepulse, Dogstudio, BASIC/DEPT). CSS-Tricks-Referenz: baseFrequency 0.65, numOctaves 3.",
  "herkunft": "beobachtet",
  "quelle": "https://static.linear.app/web/_next/static/css/Du_PUr_E.css"
 },
 "kurve": null,
 "gesehen_bei": [
  {
   "seite": "CSS-Tricks – Grainy Gradients",
   "url": "https://css-tricks.com/grainy-gradients/",
   "auszeichnung": "",
   "beobachtung": "Referenztechnik: feTurbulence-Noise unter Verlauf, contrast/brightness-Härtung, multiply-Overlay, isolation.",
   "art": "artikel"
  },
  {
   "seite": "Linear",
   "url": "https://linear.app/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): Eigene Grain-Ebene .SPbJba_grain (pointer-events none, opacity .9, mix-blend-mode overlay, border-radius inherit); Variante grainSubtle mit opacity .6 und background-size 256px; Bereich _grainOverlay mit opacity .25.",
   "art": "website"
  },
  {
   "seite": "Arc (The Browser Company)",
   "url": "https://arc.net/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): Fenster-Overlay als SVG-Data-URI: feTurbulence type fractalNoise, baseFrequency 0.9, numOctaves 2, stitchTiles stitch, Kachel 160×160, Alpha über feColorMatrix 0.55; Hero zusätzlich background-image url(/noise-light.png) auf Markenblau.",
   "art": "website"
  },
  {
   "seite": "makemepulse",
   "url": "https://www.makemepulse.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): Seitenhintergrund #f2f2f2 mit gekachelter Korn-Textur /_nuxt/gray-light-noise.webp (14 Vorkommen im CSS).",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "Grainy Gradients",
   "url": "https://css-tricks.com/grainy-gradients/"
  },
  {
   "titel": "Paper Shaders – Grain gradient",
   "url": "https://shaders.paper.design/"
  }
 ],
 "kombinierbar_mit": [
  "mesh-gradient-shader",
  "frosted-glass-erweitert",
  "halbton-raster",
  "graustufen-zu-farbe"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/glas-material/grain-noise-overlay/",
  "meta": "https://cecodesign.de/lab/fundus/glas-material/grain-noise-overlay/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/glas-material/grain-noise-overlay/demo"
 },
 "herkunft": {
  "quelldateien": [
   "material3d.json",
   "patch-belege-2.json"
  ],
  "pruefnotizen": [
   "patch-belege-2.json: 3 Produktionsbelege; weitere Seiten mit Noise-Kachel: dogstudio.co (/assets/images/noise.png), basicagency.com (noise.png)."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Eine kleine feTurbulence-Kachel legt Korn über Verlauf, Bild und Schrift und macht die digitale Fläche analog und greifbar.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "kachel_statisch": "SVG-Data-URL, feTurbulence type=fractalNoise, baseFrequency 0.9, numOctaves 2, stitchTiles=stitch, 160 × 160 px, Graustufen per feColorMatrix, Alpha 0.55 (Arc)",
   "blend_statisch": "Ebene über allem, pointer-events none, mix-blend-mode overlay, opacity 0.9 (Linear .grain)",
   "filmkorn": "dieselbe Kachel auf ::before mit inset -160px, @keyframes mit 8 transform-Lagen (Versatz bis 84 px), 800 ms, steps(1), infinite: Kornwechsel alle 100 ms",
   "kachel_grainy": "feTurbulence fractalNoise, baseFrequency 0.65, numOctaves 3, stitchTiles=stitch, 256 × 256 px, ohne Farbmatrix (CSS-Tricks)",
   "grainy_gradient": "Schicht 1: radial-gradient(115% 85% at 88% 108%, transparent 16%, rgba(20,14,16,.6) 46%, #140e10 64%, transparent 90%) über der Rauschkachel, filter contrast(170%) brightness(1000%); Schicht 2: Farbverlauf mit mix-blend-mode multiply; Container isolation: isolate",
   "verlauf": "radial-gradient(115% 85% at 88% 108%, #f7c27a 0%, #ec8746 20%, #c9473a 40%, #7d2338 60%, transparent 82%), radial-gradient(70% 60% at 6% -4%, #3a4c86, transparent 72%), #140e10",
   "variantenwechsel": "opacity 150 ms linear",
   "vergleichslinie": "clip-path: inset(0 0 0 var(--teil)) auf allen Korn-Ebenen, Linie folgt dem Zeiger mit Lerp 0.14 pro Frame",
   "auftritt": "opacity und translateY 28 px, 1.2 s cubic-bezier(0.16, 1, 0.3, 1), Stagger 90 ms",
   "vorfuehrung": "Linie 50 → 84 → 16 → 50 % als Sinus in 3600 ms, danach nächste Variante (Grainy, Statisch, Filmkorn)"
  },
  "ausloeser": "hover",
  "touch": "Vergleichslinie per Tippen oder Ziehen am Griff (touch-action pan-y, senkrechtes Scrollen bleibt). Das animierte Filmkorn steht unter (hover: none) still, die Werte-Anzeige sagt das.",
  "reduziert": "Filmkorn-Animation aus, statisches Korn bleibt. Linie springt ohne Lerp, Auftritt nur 250 ms Einblenden. Die Vorführung fährt die Linie nicht, sondern wechselt bei 50 % alle 2,4 s die Variante.",
  "korrekturen": {
   "beschreibung": "Eine feine Rauschtextur liegt als Ebene über Flächen, Verläufen, Fotos oder der ganzen Seite. Das Korn entsteht mit feTurbulence (fractalNoise) als kleine, nahtlose Kachel von 128 bis 256 px. Gängig sind drei Formen: ein statisches Overlay mit mix-blend-mode overlay oder soft-light, animiertes Filmkorn, bei dem die Kachel alle 80 bis 120 ms springt, und der Grainy Gradient, bei dem Rauschen unter einem Verlauf per contrast und brightness hart gemacht wird.",
   "warum_es_wirkt": "Perfekt glatte digitale Flächen wirken steril. Korn bricht diese Glätte, verhindert sichtbare Stufen (Banding) in Verläufen und gibt Flächen, Glas und Fotos einen analogen, fast stofflichen Charakter.",
   "wann_einsetzen": "Bei großen Farbflächen, Verläufen und dunklen Seiten. Passt zu Editorial-, Fashion- und Studio-Auftritten. Gut auch als letzter Schliff auf Shader- oder Mesh-Hintergründen.",
   "wann_nicht": "Wenn kleine, feine Schrift auf hellem Grund steht und das Korn sie sichtbar anraut. Animiertes Korn nicht großflächig auf schwachen Geräten.",
   "varianten": [
    "Statisches Overlay über der ganzen Seite (body::after)",
    "Animiertes Filmkorn: Kachel springt per steps(1) alle 80 bis 120 ms",
    "Grainy Gradient: Rauschen unter Verlauf, contrast(170%) brightness(1000%), Farbe per multiply",
    "Korn im Shader, z. B. als letzter Schritt eines Mesh-Gradients",
    "Korn nur auf Bildern oder einzelnen Flächen statt global",
    "Korn auf Button-Flächen: Kachel per ::before über einem Verlauf (soft-light oder multiply), Text darüber, flimmert nur bei Hover"
   ],
   "umsetzung": "Die Kachel als SVG-Data-URL oder kleines PNG/WebP anlegen und als background-image mit fester Größe kacheln. So rendert der Browser das Rauschen einmal; feTurbulence live auf großer Fläche ist teuer. Die Ebene liegt mit position fixed bzw. absolute, inset 0 und pointer-events none über dem Inhalt, mit mix-blend-mode overlay und opacity 0.04 bis 0.9 je nach Alpha der Kachel. Filmkorn über transform auf einem übergroßen Pseudo-Element bewegen, nicht über background-position. Für den Grainy Gradient braucht der Container isolation: isolate, damit multiply nur innen mischt. Blink und WebKit mischen mix-blend-mode leicht unterschiedlich, deshalb in beiden prüfen. Im Dark Mode die Deckkraft etwas erhöhen.",
   "mobil": "Statisches Korn ist unproblematisch. Animiertes Korn auf Touch-Geräten abschalten.",
   "reduzierte_bewegung": "Animiertes Korn anhalten, statisches Korn behalten.",
   "barrierefreiheit": "Textkontrast über dem Korn prüfen. Die Korn-Ebene ist rein dekorativ: aria-hidden=\"true\" und pointer-events: none. Auf Buttons immer eine deckende Grundfarbe als Rückfall setzen und den Kontrast an der hellsten und an der dunkelsten Stelle des Verlaufs prüfen."
  },
  "geprueft": "02.11.2026",
  "notiz": "Hero eines erfundenen Kölner Gestaltungsbüros mit Abendlicht-Verlauf und Magazinbild. Eine Vergleichslinie trennt ohne und mit Korn; sie folgt dem Zeiger, auf Touch wird sie gezogen, per Tastatur über einen Regler bedient. Umschalter für Statisch, Filmkorn und Grainy Gradient, Werte werden eingeblendet. Darunter drei Proben mit den Rezepten. Kachelwerte aus Arc (0.9/2/160 px/Alpha 0.55), Blend aus Linear (overlay 0.9), Grainy Gradient nach CSS-Tricks (0.65/3, contrast 170 %, brightness 1000 %). Bilder 01.11.2026: eigene Bilder statt Portfolio. Zugang 02.11.2026: Bei ≤ 360 px stehen die Proben einspaltig, lange Filterwerte brechen um (kein Querscrollen); Knopf-Rahmen im Kontrastmodus. Korrektur 02.11.2026: Varianten nach Regel 13 (?v=basis|button); die drei Korn-Arten stehen in der Grundvariante unter „Korn“. button: Kaufbox der erfundenen Duftmanufaktur Kalmus in Coburg (Rezept d2c-produkt-zuerst, Bild flakon aus medien), „In den Warenkorb“ als dunkler Kobalt-Verlauf mit Korn (soft-light), „Duftprobe“ als Sand-Verlauf (multiply); Zustände Hover (Verlauf fährt, Korn flimmert), Fokus, Druck, deaktiviert (100 ml ausverkauft) und Laden; Grundpreis je 100 ml angegeben.",
  "varianten": [
   {
    "id": "basis",
    "name": "Korn über der Fläche (Gestaltungsbüro)",
    "knopf": "Fläche",
    "wann": "Ganze Flächen, Verläufe und Bilder bekommen analoges Korn: statisch, Filmkorn oder Grainy Gradient, mit Vergleichslinie (Unterumschalter Korn).",
    "werte": {
     "welt": "Atelier Abendrot, Gestaltungsbüro Köln",
     "kachel": "fractalNoise 0.9, 2 Oktaven, 160 px, Alpha 0.55",
     "blend": "overlay .9 über allem"
    }
   },
   {
    "id": "button",
    "name": "Körnung auf Button-Flächen (Kaufbox)",
    "knopf": "Button",
    "wann": "Shops und Marken mit Handwerks- oder Analogcharakter (Duft, Kaffee, Keramik, Druck): Primär- und Zweitbutton tragen feines Korn über einem Verlauf, das nur bei Hover flimmert. Nicht auf Knöpfen unter 44 px und nicht, wenn das Korn die Schrift anraut.",
    "werte": {
     "rezept": "d2c-produkt-zuerst",
     "aufbau": "button mit isolation: isolate und overflow hidden; background-color deckend (Rückfall) plus Verlauf als background-image, background-size 200% 100%; ::before inset 0, z-index −1, Kachel 160 px, mix-blend-mode und opacity je Button; Text als Kind mit position: relative darüber",
     "kachel": "feTurbulence fractalNoise 0.9, numOctaves 2, stitchTiles, 160 × 160 px, Alpha 0.55 (wie Grundvariante)",
     "kauf": "linear-gradient(105deg, #121212 0%, #15183a 35%, #0b2a8f 70%, #0137ba 100%), Grundfarbe #15183a, Korn soft-light .95, Text #fff (über 8:1 an jeder Stelle)",
     "probe": "linear-gradient(105deg, #ece9e2 0%, #e3dbd0 50%, #d6c6b2 100%), Korn multiply .32, Text #212121, Kontur inset 1.5px rgba(33,33,33,.22), Hover .45",
     "hover": "background-position 0% → 100% in 600 ms cubic-bezier(0.16, 1, 0.3, 1); Korn flimmert nur dann: background-position in 8 Lagen, 800 ms steps(1) (Kornwechsel alle 100 ms)",
     "druck": "scale(.98) in 150 ms linear",
     "fokus": "outline 2px #212121, Abstand 3px",
     "hoehe": "min-height 56 px, Pille",
     "deaktiviert": "aria-disabled=\"true\", Fläche #dedcd6 ohne Verlauf, Korn .18, Text #4d4d4d; Grund und Ausweg im role=status",
     "laden": "data-laedt: „Wird hinzugefügt …“, Kreis 16 px 800 ms, Korn flimmert, nach 1400 ms Meldung im role=status und Zähler im Warenkorb",
     "touch": "Antippen fährt den Verlauf einmal (900 ms), das Korn steht",
     "reduziert": "Korn steht, keine Verlaufsfahrt",
     "kontrastmodus": "border 2px ButtonText, deaktiviert GrayText",
     "schrift": "Young Serif 400 h1 clamp(2.25rem, 1.4rem + 3.2vw, 4.25rem), -0.01em; Instrument Sans 600 1rem im Button"
    }
   }
  ]
 }
}