{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "geriffeltes-glas",
 "name": "Geriffeltes Glas (Fluted Glass)",
 "name_en": "Fluted / reeded glass effect",
 "kurz": "Hero einer Erfurter Kanzlei: Besprechungsraum, Domblick und Archiv liegen hinter einer Riffelglasscheibe, das Bild driftet langsam und folgt dem Zeiger, die Riffel brechen es in Streifen.",
 "kategorie": "Glas & Material",
 "kategorie_slug": "glas-material",
 "kategorie_nr": 10,
 "bau_chat": "C5",
 "prioritaet": "B",
 "trendstatus": "aufsteigend",
 "belegstatus": "teilbelegt",
 "website_belege": 1,
 "stimmung": [
  "ruhig",
  "präzise",
  "luxuriös",
  "warm"
 ],
 "stimmung_roh": [
  "architektonisch",
  "ruhig",
  "hochwertig",
  "warm"
 ],
 "technik": [
  "webgl-shader",
  "svg-filter"
 ],
 "technik_gruppen": [
  "webgl",
  "canvas"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Ein Bild liegt hinter einer virtuellen Riffelglasscheibe. Der Shader teilt die Fläche quer zur Riffelrichtung in Streifen und berechnet die Lage innerhalb jedes Streifens: local = fract(uv.x · n). Jeder Streifen wirkt wie eine Zylinderlinse und verschiebt die Leseposition abhängig von local, zur Mitte hin gestaucht oder gespiegelt. An den Riffelkanten kommen eine Fase, Licht und Schatten dazu. Bewegt sich das Bild hinter dem Glas (Drift, Zeiger, Scroll), flimmern die Streifen wie bei Duschglas.",
  "warum_es_wirkt": "Riffelglas kennt man aus Architektur und Interior. Es wirkt taktil und handwerklich und bringt ein echtes Material auf den Bildschirm. Das Bild bleibt als Stimmung lesbar, Details verschwinden. So entsteht Diskretion, ohne etwas zu verstecken.",
  "wann_einsetzen": "Heros für Architektur, Interior, Beauty, Hotellerie und Portfolios. Überall, wo Vertraulichkeit Teil der Marke ist, etwa bei Kanzleien oder Praxen. Auch als Übergang zwischen zwei Bildern.",
  "wann_nicht": "Über Text, Formularen oder Bildinhalten, die man erkennen muss (Produktfotos, Personen, Karten). Nicht für Marken, die laut und schnell auftreten.",
  "varianten": [
   "Vertikale Riffel (klassische Scheibe)",
   "Diagonale Riffel, z. B. 0.36 rad wie bei Function Health",
   "Horizontale Riffel",
   "Riffel nur in einem Feld (Fenster), daneben klares Glas",
   "Stehend als SVG-Filter (feDisplacementMap mit Streifen-Karte) ohne WebGL: das Glas wird erst auf Knopfdruck klar (Demo-Variante still)"
  ],
  "umsetzung": "Bevorzugt als WebGL-Shader auf einem Vollbild-Quad. Pro Pixel: Lage im Riffel f = fract(s) − 0.5, Linsenversatz quer zum Riffel, an der Fase zusätzlich gebrochen, Rot und Blau leicht getrennt gelesen. Hinter dem Glas eine leicht weichgezeichnete Fassung des Bildes verwenden, die Riffelkanten bleiben trotzdem scharf. Drift und Zoom zeitbasiert und linear. Ohne WebGL: das Bild mit backdrop-filter: blur() und einem repeating-linear-gradient als Streifen belegen. SVG-Variante: feImage mit waagerechtem Rot-Verlauf als wiederholte Streifen, feDisplacementMap nur auf x. Die Award-Belege sind nicht verifiziert; das Muster ist aufgenommen, weil es in Shader-Toolkits und als Materialtrend verbreitet ist.",
  "mobil": "Unproblematisch. Ein einzelner Shader ist günstig. Auf dem Telefon die Frequenz senken (Function Health: 64.8 statt 82.8) und den Winkel anpassen. Statt Zeiger koppelt man die Verschiebung an Drift und Scroll.",
  "reduzierte_bewegung": "Drift, Zoom und die Kopplung an Zeiger und Scroll abschalten. Das Riffelglas bleibt als stehendes Bild sichtbar, Bildwechsel ohne Überblendung.",
  "barrierefreiheit": "Das Canvas ist dekorativ (aria-hidden). Die Fläche bekommt role=img mit einer Beschreibung dessen, was hinter dem Glas zu sehen ist, oder das Originalbild bleibt mit alt-Text im DOM. Automatische Bildwechsel per aria-live ankündigen, Text nie hinter das Glas legen."
 },
 "messwerte": {
  "easing": "linear (Drift zeitbasiert)",
  "dauer_ms": "",
  "stagger_ms": "",
  "distanz": "Riffel-Frequenz Desktop 82.8 / Mobil 64.8; Amplitude 0.0255 uv",
  "sonstiges": "Function Health: driftSpeed 0.543, chromaticAberration 0.04, Riffelwinkel Desktop 0.36 / Mobil −0.11 rad, highlight/shadow 0.02, bevelIntensity 0.0095, bevelWidth 0.195, Zoom ab 1.08; max. Slide-Dauer 30 s",
  "herkunft": "beobachtet",
  "quelle": "https://www.functionhealth.com/_astro/HeroSection.astro_astro_type_script_index_0_lang.CC76O7Nw.js"
 },
 "kurve": {
  "bezier": [
   0,
   0,
   1,
   1
  ],
  "css": "cubic-bezier(0, 0, 1, 1)",
  "name": "linear",
  "dauer_ms": null
 },
 "gesehen_bei": [
  {
   "seite": "Function Health",
   "url": "https://www.functionhealth.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): Hero „Flutie“: WebGL-Canvas (.flute-canvas, data-flutie-hero) über einer Bildfolge, Shader sampleFluted() mit diagonaler Riffelung, Drift und Ken-Burns-Zoom; Startbild als WebP-Fallback, aria-hidden Canvas, Status per aria-live.",
   "art": "website",
   "browser_gemessen": true
  }
 ],
 "tutorials": [
  {
   "titel": "Paper Shaders – Fluted glass",
   "url": "https://shaders.paper.design/"
  }
 ],
 "kombinierbar_mit": [
  "grain-noise-overlay",
  "webgl-bildverzerrung"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/glas-material/geriffeltes-glas/",
  "meta": "https://cecodesign.de/lab/fundus/glas-material/geriffeltes-glas/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/glas-material/geriffeltes-glas/demo"
 },
 "herkunft": {
  "quelldateien": [
   "material3d.json",
   "patch-belege-2.json"
  ],
  "pruefnotizen": [
   "patch-belege-2.json: 1 Produktionsbeleg mit vollständigem Parametersatz."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Hero einer Erfurter Kanzlei: Besprechungsraum, Domblick und Archiv liegen hinter einer Riffelglasscheibe, das Bild driftet langsam und folgt dem Zeiger, die Riffel brechen es in Streifen.",
  "demo": true,
  "abhaengigkeiten": [
   "three@0.186.0"
  ],
  "werte": {
   "aufbau": "Ein Canvas in der Glasfläche (aria-hidden), Größe per ResizeObserver; Vollbild-Quad mit ShaderMaterial in einer OrthographicCamera; Pixelratio max. 1.5. Die Glasfläche trägt role=img mit wechselndem aria-label, Raumwechsel per aria-live.",
   "riffel": "Periode = Viewport-Breite / Frequenz; Frequenz 82.8 (Desktop) bzw. 64.8 (bis 760 px). Bei 1440 px sind das 17.4 px, bei 390 px 6.0 px. s = dot(px − Mitte, n) / Periode, f = fract(s) − 0.5",
   "linse": "Versatz quer zum Riffel: (−2 · f · 0.0255 + sign(f) · Fase · 0.0095) uv, Fase = smoothstep(0.5 − 0.195, 0.5, |f|); y-Anteil mit Seitenverhältnis korrigiert",
   "aberration": "Rot liest den Versatz × 1.04, Blau × 0.96, Grün × 1.0",
   "licht": "an der Fase links +0.02 · 6, rechts −0.02 · 6; Wölbung (0.5 − |f|) · 0.08 − 0.02; Trübung mix 0.06 Richtung #EDEDF5",
   "diffusion": "hinter dem Glas eine weiche Fassung jedes Raums (auf 1/4 verkleinert und wieder vergrößert, ca. 4 px Unschärfe); klare Fassung nur im klaren Teil der Fenster-Variante",
   "winkel": "Vertikal 0 rad; Diagonal 0.36 rad (Desktop) bzw. −0.11 rad (Telefon); Fenster 0 rad, Glas erst ab 40 % der Breite, 6 px Rahmenprofil #2A2A2E",
   "drift": "linear, (Sekunden seit Raumbeginn − 5) · 0.543 · 0.01 uv, also ±0.027 uv über 10 s",
   "zoom": "Ken Burns 1.08 → 1.00 linear über 10 s je Raum",
   "raumwechsel": "alle 10000 ms (Beleg: max. 30 s), Überblendung 1200 ms linear im Shader",
   "zeiger": "Versatz x ± 0.025 uv (0.05 × Abstand zur Mitte), y ± 0.01 uv; Nachlauf Lerp 0.06 pro Frame, framerate-unabhängig 1 − 0.94^dt",
   "scroll": "zusätzlicher x-Versatz bis 0.04 uv, solange die Scheibe aus dem Viewport scrollt",
   "ui": "Rezept-Kurve cubic-bezier(0.4, 0, 0.22, 1): 125 ms für Farben und Unterstreichung, 250 ms für Pfeil und Türschild",
   "rezept": "kanzlei-beratung-souveraen: Newsreader 400 (h1 clamp(2.25rem, 1.3rem + 2.6vw, 3.75rem), Zeilenhöhe 1.06), Schibsted Grotesk 400/500, Grund #F9F8F8, Fläche #EFEBEB, Linien #D2CDC7, Marke #1E1E50, Text #212529, Meta #8E7C6D, Fokus #00BEE6"
  },
  "ausloeser": "dauer",
  "touch": "Kein Zeigerversatz. Das Bild driftet weiter, Scrollen verschiebt es zusätzlich. Tippen auf die Scheibe wechselt den Raum, die Raumbalken unter dem Bild sind 36 px hoch. Telefon nutzt Frequenz 64.8 und in der Diagonale −0.11 rad. Variante still: Tippen auf „Raum ansehen“ oder auf das Bild macht das Glas klar, Reiter und Knopf sind 48 px hoch; auf dem Telefon Bild 4:5.",
  "reduziert": "Ein stehendes Bild hinter dem Glas: keine Drift, kein Zoom (fest 1.04), kein Zeiger- oder Scrollversatz, kein automatischer Raumwechsel. Räume wechseln nur per Klick und ohne Überblendung. Gezeichnet wird nur bei Änderungen. Variante still: das Glas wird ohne Übergang klar oder trüb, Raumbilder wechseln in 500 ms nur über die Deckkraft.",
  "korrekturen": {
   "beschreibung": "Ein Bild liegt hinter einer virtuellen Riffelglasscheibe. Der Shader teilt die Fläche quer zur Riffelrichtung in Streifen und berechnet die Lage innerhalb jedes Streifens: local = fract(uv.x · n). Jeder Streifen wirkt wie eine Zylinderlinse und verschiebt die Leseposition abhängig von local, zur Mitte hin gestaucht oder gespiegelt. An den Riffelkanten kommen eine Fase, Licht und Schatten dazu. Bewegt sich das Bild hinter dem Glas (Drift, Zeiger, Scroll), flimmern die Streifen wie bei Duschglas.",
   "warum_es_wirkt": "Riffelglas kennt man aus Architektur und Interior. Es wirkt taktil und handwerklich und bringt ein echtes Material auf den Bildschirm. Das Bild bleibt als Stimmung lesbar, Details verschwinden. So entsteht Diskretion, ohne etwas zu verstecken.",
   "wann_einsetzen": "Heros für Architektur, Interior, Beauty, Hotellerie und Portfolios. Überall, wo Vertraulichkeit Teil der Marke ist, etwa bei Kanzleien oder Praxen. Auch als Übergang zwischen zwei Bildern.",
   "wann_nicht": "Über Text, Formularen oder Bildinhalten, die man erkennen muss (Produktfotos, Personen, Karten). Nicht für Marken, die laut und schnell auftreten.",
   "varianten": [
    "Vertikale Riffel (klassische Scheibe)",
    "Diagonale Riffel, z. B. 0.36 rad wie bei Function Health",
    "Horizontale Riffel",
    "Riffel nur in einem Feld (Fenster), daneben klares Glas",
    "Stehend als SVG-Filter (feDisplacementMap mit Streifen-Karte) ohne WebGL: das Glas wird erst auf Knopfdruck klar (Demo-Variante still)"
   ],
   "umsetzung": "Bevorzugt als WebGL-Shader auf einem Vollbild-Quad. Pro Pixel: Lage im Riffel f = fract(s) − 0.5, Linsenversatz quer zum Riffel, an der Fase zusätzlich gebrochen, Rot und Blau leicht getrennt gelesen. Hinter dem Glas eine leicht weichgezeichnete Fassung des Bildes verwenden, die Riffelkanten bleiben trotzdem scharf. Drift und Zoom zeitbasiert und linear. Ohne WebGL: das Bild mit backdrop-filter: blur() und einem repeating-linear-gradient als Streifen belegen. SVG-Variante: feImage mit waagerechtem Rot-Verlauf als wiederholte Streifen, feDisplacementMap nur auf x. Die Award-Belege sind nicht verifiziert; das Muster ist aufgenommen, weil es in Shader-Toolkits und als Materialtrend verbreitet ist.",
   "mobil": "Unproblematisch. Ein einzelner Shader ist günstig. Auf dem Telefon die Frequenz senken (Function Health: 64.8 statt 82.8) und den Winkel anpassen. Statt Zeiger koppelt man die Verschiebung an Drift und Scroll.",
   "reduzierte_bewegung": "Drift, Zoom und die Kopplung an Zeiger und Scroll abschalten. Das Riffelglas bleibt als stehendes Bild sichtbar, Bildwechsel ohne Überblendung.",
   "barrierefreiheit": "Das Canvas ist dekorativ (aria-hidden). Die Fläche bekommt role=img mit einer Beschreibung dessen, was hinter dem Glas zu sehen ist, oder das Originalbild bleibt mit alt-Text im DOM. Automatische Bildwechsel per aria-live ankündigen, Text nie hinter das Glas legen."
  },
  "geprueft": "02.11.2026",
  "notiz": "Kanzlei Vellmar Rothe, Erfurt (Rezept kanzlei-beratung-souveraen). Das Rezept passt: Riffelglas steht für Diskretion im Besprechungsraum, und die Bewegung bleibt ruhig und linear. Drei selbst gemalte Canvas-Räume (Besprechung, angestrahlter Dom mit St. Severi, Mandantenarchiv) mit 10 s Ken Burns und Drift. Umschalter Vertikal, Diagonal, Fenster. Das Türschild liegt als massives Element auf dem Glas, nie Text hinter dem Glas. Werte aus dem Function-Health-Beleg; die Skalierung der Drift (× 0.01 uv/s) und Zeiger-, Scroll- und Trübungswerte sind eigene Festlegungen. Vorführung: gedachter Zeiger gleitet über die Scheibe, Varianten wechseln alle 6 s (Diagonal, Fenster, Vertikal), Räume alle 10 s. Ohne WebGL: gemalter Raum mit CSS-Streifen und backdrop-filter. AD-Review 01.11.2026: Note 5. Zugang 02.11.2026: --meta #8e7c6d → #6e5f52 (5,8:1); Knopf „Bewegung anhalten“ (aria-pressed, 28 px, Rand --linie) rechts neben den Raum-Fortschrittsbalken, nutzt pause() und setzt die Raumfolge beim Fortsetzen ohne Sprung fort (in Vorschau und reduziert ausgeblendet); Bühne minmax(0, 1fr), Unterzeile bei ≤ 480 px enger und bei ≤ 360 px zweizeilig (kein Querscrollen); Knopf-Rahmen im Kontrastmodus. Varianten 02.11.2026: Regel 13 (?v=basis|still, Umschalter „Variante“ im Fuß der Bühne schreibt die URL). basis ist die bisherige WebGL-Demo, unverändert; three.js wird jetzt per import() erst geladen, wenn basis gezeigt wird. still für das Rezept bestattung-wuerdig (erfundenes Bestattungshaus Wehrend, Warburg): vier gezeichnete Räume ohne Menschen und ohne Symbole (Abschiedsraum, Feierhalle, Garten, Beratungszimmer) hinter einem SVG-Riffelglas, das nur auf „Raum ansehen“ in 1,4 s klar wird. Nichts bewegt sich von selbst, deshalb kein Pause-Knopf. Werte der SVG-Fassung (Riffelbreite 13 px, scale 46, Unschärfe 3.2, Milch .12) sind eigene Festlegungen; Dauer und Kurve aus dem Rezept.",
  "varianten": [
   {
    "id": "basis",
    "name": "WebGL-Scheibe mit Drift (three.js)",
    "knopf": "WebGL",
    "wann": "Hero mit ruhiger Bewegung für Kanzlei, Architektur, Interior oder Hotel: das Bild driftet, folgt dem Zeiger und wechselt alle 10 s; Riffelung vertikal, diagonal oder als Fenster.",
    "werte": {
     "technik": "three.js r186, ShaderMaterial auf einem Vollbild-Quad, three wird per import() geladen",
     "riffel": "Frequenz 82.8 (Desktop) bzw. 64.8 (bis 760 px) je Viewport-Breite, Amplitude 0.0255 uv",
     "winkel": "Vertikal 0, Diagonal 0.36 / −0.11 rad, Fenster: Glas ab 40 %",
     "bewegung": "Drift 0.543 × 0.01 uv/s linear, Ken Burns 1.08 → 1.00 über 10 s, Raumwechsel 1200 ms linear",
     "zeiger": "±0.025 uv, Lerp 0.06",
     "rezept": "kanzlei-beratung-souveraen (Newsreader, Schibsted Grotesk)"
    }
   },
   {
    "id": "still",
    "name": "Stehendes Riffelglas, klar auf Knopfdruck (SVG, ohne three.js)",
    "knopf": "Still",
    "wann": "Wo nichts von selbst laufen darf und Diskretion Teil des Angebots ist: Bestattungshaus, Hospiz, Praxis, Besprechungsräume. Riffelglas vor Raumfotos ohne Menschen; der Besucher entscheidet, wann er hineinsieht.",
    "werte": {
     "technik": "SVG-Filter feGaussianBlur → feDisplacementMap (xChannelSelector R, yChannelSelector G) mit feImage als Karte, color-interpolation-filters sRGB; keine Bibliothek, three.js wird in dieser Variante nicht geladen",
     "karte": "je Riffel ein Rot-Verlauf 255 → 0 (Zylinderlinse, Versatz nur waagerecht), Grün 128; als PNG aus einem Canvas, 16 px je Riffel, preserveAspectRatio none über 1200 × 900",
     "riffel": "Anzahl = gezeigte Bildbreite / 13 px, begrenzt auf 24 bis 72 (58 Riffel bei 750 px Breite, 12.9 px je Riffel); neu berechnet per ResizeObserver",
     "trueb": "scale 46, stdDeviation 3.2, Glanz je Riffel als pattern (Weiß .34 → 0 an der linken Kante, Schwarz .2 an der rechten), Milch #F4F1EB mit Deckkraft .12",
     "klar": "alle vier Werte → 0 in 1400 ms mit cubic-bezier(0.37, 0, 0.63, 1) (token-luxus-weich), danach wird das filter-Attribut entfernt; zurück zu trüb ebenso",
     "knopf": "„Raum ansehen“ als echter button mit aria-pressed, 48 px hoch, oben links auf dem Bild; Klick auf das Bild schaltet ebenso. aria-label des Bildes beschreibt den Raum trüb und klar",
     "raeume": "vier Reiter (role=tab, Pfeiltasten, Pos1/Ende, automatische Aktivierung); Raumbild blendet in 1400 ms mit derselben Kurve über, der Glas-Zustand bleibt",
     "rand": "Raumgruppe um 4 % vergrößert, damit der Versatz am Bildrand keine leeren Streifen zeigt",
     "bewegung_sonst": "keine Drift, kein Zeiger- oder Scrollversatz, kein automatischer Raumwechsel",
     "reduziert": "Glas wird ohne Übergang klar oder trüb; Raumbilder 500 ms linear, nur Deckkraft",
     "vorfuehrung": "1,7 s trüb, Knopf, 3,6 s klar, Knopf, 1,8 s, nächster Raum, in Schleife",
     "rezept": "bestattung-wuerdig: Source Serif 4 400 (h1 clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem)), Commissioner 19 px, FLAR 0, VOLM 0, Zeilenhöhe 1.65; Kalk #F4F1EB, Text #24221F, Sandstein #E8E1D5, Schiefer #2B2D2C, Moos #3F5B48 nur für Anrufen, Sekundär #5A554D, Linien #D3CCC0"
    }
   }
  ]
 }
}