{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "papier-druck-textur",
 "name": "Papier- und Drucktextur",
 "name_en": "Paper texture / print & risograph look",
 "kurz": "Mittagskarte eines Regensburger Wirtshauses als Riso-Bogen: Papierfasern im Streiflicht des Zeigers, zwei versetzte Druckfarben, Klebeband und Ausriss; jede Ebene einzeln schaltbar.",
 "kategorie": "Glas & Material",
 "kategorie_slug": "glas-material",
 "kategorie_nr": 10,
 "bau_chat": "C5",
 "prioritaet": "C",
 "trendstatus": "aufsteigend",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "verspielt",
  "warm"
 ],
 "stimmung_roh": [
  "warm",
  "analog",
  "handgemacht",
  "verspielt"
 ],
 "technik": [
  "css",
  "webgl-shader",
  "svg-filter"
 ],
 "technik_gruppen": [
  "css",
  "webgl",
  "canvas"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Der Hintergrund bekommt eine Papierstruktur aus Fasern und leichten Helligkeitswolken, als Shader oder als hochaufgelöstes Tile. Text und Grafik werden leicht fehlregistriert gedruckt: Wie beim Risographen sind die Farbebenen um 1 bis 2 px versetzt, die Kanten sind unruhig. Bilder bekommen Körnung und wenige Farben. Optional kommen Knick- und Falzschatten als Verläufe dazu.",
  "warum_es_wirkt": "Ein Gegenpol zur glatten, generierten Optik. Papier und Druckfehler zeigen Handarbeit und wirken warm und greifbar.",
  "wann_einsetzen": "Kultur, Gastronomie, Handwerk, Bildung, Editorial, Kinder- und Familienprojekte. Am stärksten, wenn die Marke selbst druckt: Speisekarte, Plakat, Zine.",
  "wann_nicht": "Bei High-Tech-Produkten mit Präzisionsanspruch. Nicht als Struktur unter langem Fließtext.",
  "varianten": [
   "Papier-Shader, optional mit Streiflicht vom Zeiger",
   "Risograph-Fehlregistrierung mit zwei oder drei Farbebenen",
   "Collage mit Klebeband und Ausriss"
  ],
  "umsetzung": "Meist genügt ein statisches Tile. Ein Shader lohnt sich erst bei Interaktion, etwa Licht, das über das Papier wandert. Die Druckfarben als getrennte Ebenen mit mix-blend-mode: multiply anlegen, die zweite per translate um 1 bis 2 px versetzen. Unruhige Kanten und Farbaussparungen liefert ein SVG-Filter aus feTurbulence, feDisplacementMap und feComposite. Text bleibt echter HTML-Text. Award-Belege fehlen bisher.",
  "mobil": "Unverändert. Hover-Licht entfällt oder folgt einem Tippen.",
  "reduzierte_bewegung": "Kein Handlungsbedarf, die Textur ist statisch. Bewegtes Licht oder Einblendungen ohne Animation setzen.",
  "barrierefreiheit": "Kontrast des Textes auf dem strukturierten Grund prüfen, auch im hellsten und dunkelsten Bereich. Der SVG-Filter verändert nur die Darstellung; der Text bleibt auswählbar und lesbar für Screenreader. Schrift nicht so stark aufrauen, dass kleine Größen zerfallen."
 },
 "messwerte": {
  "easing": "",
  "dauer_ms": "",
  "stagger_ms": "",
  "distanz": "Fehlregistrierung 1–2px",
  "sonstiges": "",
  "herkunft": "typisch",
  "quelle": ""
 },
 "kurve": {
  "bezier": [
   0.16,
   1.0,
   0.3,
   1.0
  ],
  "css": "cubic-bezier(0.16, 1, 0.3, 1)",
  "name": "expo.out",
  "dauer_ms": 700
 },
 "gesehen_bei": [
  {
   "seite": "Figma – Web design trends 2026",
   "url": "https://www.figma.com/resource-library/web-design-trends/",
   "auszeichnung": "",
   "beobachtung": "Collage-Trend mit Ausschnitten, Stickern, gerissenen Texturen.",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "Paper Shaders – Paper texture",
   "url": "https://shaders.paper.design/"
  }
 ],
 "kombinierbar_mit": [
  "grain-noise-overlay",
  "halbton-raster",
  "graustufen-zu-farbe"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/glas-material/papier-druck-textur/",
  "meta": "https://cecodesign.de/lab/fundus/glas-material/papier-druck-textur/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/glas-material/papier-druck-textur/demo"
 },
 "herkunft": {
  "quelldateien": [
   "material3d.json",
   "patch-belege-2.json"
  ],
  "pruefnotizen": [
   "patch-belege-2.json: Kein Produktionsbeleg gefunden; bleibt C."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Mittagskarte eines Regensburger Wirtshauses als Riso-Bogen: Papierfasern im Streiflicht des Zeigers, zwei versetzte Druckfarben, Klebeband und Ausriss; jede Ebene einzeln schaltbar.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "aufbau": "Bogen im Format 1 : 1.414, um −1.6° gedreht, mit Schatten per drop-shadow (0 1px 1px / 0 18px 26px, rgba(53,56,57,.12/.16)). Darin ein WebGL-Canvas für das Papier und der Druck als echter HTML-Text in zwei Farbebenen.",
   "papier_shader": "Eigener WebGL-1-Shader ohne Bibliothek. Höhe = fbm(p / 170) · 0.8 + Fasern · 0.4 + noise(p · 0.85) · 0.22; Fasern = drei um 2.1 rad gedrehte Rauschfelder, gestreckt (0.07 × 1.5), smoothstep(0.74, 0.98). Normale aus Differenzen über 1 px, Relief 5.0. Wolken fbm(p / 240), Farbe #F7F3E9 · (0.96 + 0.06 · Wolke) · (0.89 + 0.13 · Licht) + 0.035 · Nähe zum Licht. Pixelratio max. 1.5, gemalt nur bei Bewegung.",
   "licht": "Punktlicht 260 px über dem Papier an der Zeigerposition, Nachlauf 0.08 pro Frame bei 60 fps (1 − 0.92^dt); Startpunkt 30 % / 20 %",
   "fehlregistrierung": "zweite Trommel (Koralle) um 1.5 px nach rechts und 1 px nach oben (translate), Messwert 1–2 px",
   "trommeln": "Tannengrün #293E3A für Schrift und Konturen, Koralle #E0805F für Flächen, Tage und Preise; mix-blend-mode multiply",
   "riso_filter": "SVG-Filter: feTurbulence 0.8 / 2 Oktaven → feDisplacementMap scale 1.4 (unruhige Kanten); feTurbulence 1.7 → Deckung = 2.15 − 2.6 · R (Farbaussparungen); feComposite in",
   "collage": "zwei Klebebänder rgba(234,193,110,.62) mit gezacktem clip-path, Zettel um 4.5° gedreht; Ausriss unten als clip-path-Polygon mit 34 Zacken von 1 bis 11 px, glatte und gerissene Form mit gleich vielen Punkten, damit clip-path überblendet",
   "dauer_ms": "700 für alle Ebenenwechsel (Opazität, Versatz, Ausriss, Zettel 12 px), UI 200",
   "easing": "cubic-bezier(0.16, 1, 0.3, 1)",
   "vorfuehrung": "Takt 1900 ms: glatt → Papier → Papier und Riso → alle drei Ebenen (zwei Takte), Licht kreist in 9.5 s über den Bogen",
   "rezept": "gastro-warm-appetitlich: Fraunces 500 SOFT 100 (h1 clamp(2.5rem, 1.6rem + 4vw, 5rem), −0.01em, Zeilenhöhe 1.02), Commissioner FLAR 0 1.0625rem/1.55, Labels Commissioner FLAR 80 0.75rem +0.15em; Grund #F0ECE0, Text #353839, Tanne #293E3A, Salbei #7F937A, Senf #EAC16E, Rosé #E1A894; Öffnungsstatus aus den echten Zeiten berechnet, mobil feste Leiste Reservieren / Karte / Route / Anrufen"
  },
  "ausloeser": "hover, klick",
  "touch": "Tippen auf den Bogen setzt das Licht an diese Stelle und es gleitet dorthin. Die Ebenen-Schalter sind 40 px hoch. Unten liegt die feste Leiste Reservieren / Karte / Route / Anrufen.",
  "reduziert": "Das Licht springt ohne Nachlauf an die Zeigerposition. Ebenen wechseln ohne Überblendung. Papier, Druck und Collage bleiben als statisches Bild sichtbar.",
  "korrekturen": {
   "beschreibung": "Der Hintergrund bekommt eine Papierstruktur aus Fasern und leichten Helligkeitswolken, als Shader oder als hochaufgelöstes Tile. Text und Grafik werden leicht fehlregistriert gedruckt: Wie beim Risographen sind die Farbebenen um 1 bis 2 px versetzt, die Kanten sind unruhig. Bilder bekommen Körnung und wenige Farben. Optional kommen Knick- und Falzschatten als Verläufe dazu.",
   "warum_es_wirkt": "Ein Gegenpol zur glatten, generierten Optik. Papier und Druckfehler zeigen Handarbeit und wirken warm und greifbar.",
   "wann_einsetzen": "Kultur, Gastronomie, Handwerk, Bildung, Editorial, Kinder- und Familienprojekte. Am stärksten, wenn die Marke selbst druckt: Speisekarte, Plakat, Zine.",
   "wann_nicht": "Bei High-Tech-Produkten mit Präzisionsanspruch. Nicht als Struktur unter langem Fließtext.",
   "varianten": [
    "Papier-Shader, optional mit Streiflicht vom Zeiger",
    "Risograph-Fehlregistrierung mit zwei oder drei Farbebenen",
    "Collage mit Klebeband und Ausriss"
   ],
   "umsetzung": "Meist genügt ein statisches Tile. Ein Shader lohnt sich erst bei Interaktion, etwa Licht, das über das Papier wandert. Die Druckfarben als getrennte Ebenen mit mix-blend-mode: multiply anlegen, die zweite per translate um 1 bis 2 px versetzen. Unruhige Kanten und Farbaussparungen liefert ein SVG-Filter aus feTurbulence, feDisplacementMap und feComposite. Text bleibt echter HTML-Text. Award-Belege fehlen bisher.",
   "mobil": "Unverändert. Hover-Licht entfällt oder folgt einem Tippen.",
   "reduzierte_bewegung": "Kein Handlungsbedarf, die Textur ist statisch. Bewegtes Licht oder Einblendungen ohne Animation setzen.",
   "barrierefreiheit": "Kontrast des Textes auf dem strukturierten Grund prüfen, auch im hellsten und dunkelsten Bereich. Der SVG-Filter verändert nur die Darstellung; der Text bleibt auswählbar und lesbar für Screenreader. Schrift nicht so stark aufrauen, dass kleine Größen zerfallen."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Rezept gastro-warm-appetitlich, erfundenes Wirtshaus Wöhrdküche am Unteren Wöhrd in Regensburg. Die Regel des Rezepts (Papier-Textur nur bei Karte mit Print-Charakter) gibt den Anlass: Die Mittagskarte wird wirklich auf dem Risographen gedruckt, die Seite zeigt den Bogen. Der Schalter Papier / Riso / Collage zeigt jede Variante einzeln und im Vergleich zur glatten Fassung. In echtem Einsatz Relief und Körnung schwächer setzen, damit die Textur kaum sichtbar bleibt; die Demo übertreibt leicht, damit die Vorschau sie zeigt. Referenzen (nur Prinzipien): lynnandtonic.com, alexaugustusmusic.com, grit.pictures. AD-Review 01.11.2026: Note 4 Zugang 02.11.2026: Notizzettel der Collage role=img mit vorhandenem aria-label (aria-label auf div ohne Rolle war ungültig); Kontrastmodus-Rahmen für Knöpfe. Offen (Absicht): „Mittwoch“ im Riso-Rot auf dem Zettel (7,7 px, Teil der Druckgrafik, 2,7:1), Inhalt steht im aria-label."
 }
}