{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "linien-punkt-raster",
 "name": "Linien- und Punktraster",
 "name_en": "Line grid / dot grid backgrounds, visible layout grid",
 "kurz": "Ein feines Punktraster unter der Fahrschul-Route wölbt sich um den Zeiger; dazu die reine CSS-Fassung und ein Linienraster mit Plus-Marken.",
 "kategorie": "Glas & Material",
 "kategorie_slug": "glas-material",
 "kategorie_nr": 10,
 "bau_chat": "C5",
 "prioritaet": "B",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 2,
 "stimmung": [
  "ruhig",
  "präzise"
 ],
 "stimmung_roh": [
  "technisch",
  "präzise",
  "ruhig",
  "architektonisch"
 ],
 "technik": [
  "css",
  "canvas",
  "webgl-shader"
 ],
 "technik_gruppen": [
  "css",
  "webgl",
  "canvas"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Ein feines Raster aus Punkten oder Linien liegt hinter dem Inhalt. Punktraster: ein radial-gradient mit 1 px Punkt und weicher Kante, wiederholt alle 16 bis 24 px. Linienraster: zwei linear-gradients (90deg und 0deg) mit 1 px Linie alle 32 bis 64 px. Eine radiale Maske blendet das Raster zum Rand hin aus. Als Steigerung reagieren die Punkte auf den Cursor (Canvas oder Shader: Punkte in der Nähe werden größer, heller oder weichen aus), oder die Spaltenlinien des Layouts werden sichtbar, mit Plus-Marken an den Schnittpunkten.",
  "warum_es_wirkt": "Das Raster steht für Präzision, Planung und Blaupause. Es gibt leeren Flächen Struktur, ohne mit dem Inhalt zu konkurrieren. Liegen Inhalte sichtbar auf den Rasterpunkten, wirkt das Layout gebaut statt zufällig.",
  "wann_einsetzen": "Tech-, Dev-Tool-, Architektur- und Studioseiten. Hintergründe von Feature-Sektionen. Swiss- und Editorial-Layouts mit sichtbaren Spalten. Überall, wo ein Plan, ein Ablauf oder eine Karte gezeigt wird.",
  "wann_nicht": "Wenn das Raster nur Leere füllt und nichts darauf Bezug nimmt. In Kombination mit Aurora-Glow (Klischee von 2025). Hinter langen Fließtexten.",
  "varianten": [
   "Statisches Punktraster mit radialem Ausblenden (reines CSS)",
   "Interaktives Punktraster mit Cursor-Wölbung (Canvas)",
   "Linienraster oder sichtbare Spaltenlinien mit Plus-Marken",
   "Blinkende Punkte mit hartem Wechsel (steps)",
   "Isometrisches Raster",
   "Shader-Punktraster (Paper Shaders: Dot grid)"
  ],
  "umsetzung": "Die CSS-Fassung kostet fast nichts: ein Hintergrundbild plus mask-image. Interaktiv: Canvas 2D mit Punkten im Rasterabstand. Pro Frame wird die gelerpte Mausposition nachgeführt und für jeden Punkt im Einflussradius f = 1 − smoothstep(0, R, d) berechnet, Radius = Grundradius + k·f. Canvas mit devicePixelRatio skalieren, sonst werden die Punkte unscharf oder es entsteht Moiré. Ruhige Punkte in einem gemeinsamen Pfad zeichnen und die Schleife im Ruhezustand anhalten. Punkte, Linien und Inhalte teilen sich einen Rasterursprung. Belege: Nothing (Punktraster per CSS), Linear (blinkende Punkte mit steps(1)).",
  "mobil": "Die Cursor-Reaktion entfällt, das statische Raster bleibt. Optional setzt ein Tippen die Wölbung kurz an die getippte Stelle.",
  "reduzierte_bewegung": "Cursor-Reaktion und Blinken aus. Das Raster bleibt sichtbar.",
  "barrierefreiheit": "Rein dekorativ: aria-hidden und pointer-events: none. Linien und Punkte hinter Text sehr leise halten (hier 9 bis 26 % Deckkraft) und zum Text hin ausblenden. Informationen, die auf dem Raster liegen (hier die Route), zusätzlich als echte Liste im Markup."
 },
 "messwerte": {
  "easing": "Lerp 0.1–0.15 pro Frame für Cursor",
  "dauer_ms": "",
  "stagger_ms": "",
  "distanz": "Raster 16–24px (Punkte), 32–64px (Linien); Einflussradius 80–160px",
  "sonstiges": "Produktion: Punkt 1px mit 0,5px weicher Kante (white 1px, transparent 1.5px); Linear: Grundzustand opacity 0.3, Takt 2800 ms steps(1). Typisch: Raster 16–24px, Deckkraft 6–12 %.",
  "herkunft": "beobachtet",
  "quelle": "https://nothing.tech/"
 },
 "kurve": null,
 "gesehen_bei": [
  {
   "seite": "Nothing",
   "url": "https://nothing.tech/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): Punktraster rein per CSS: background-image radial-gradient(circle at center, white 1px, transparent 1.5px), background-size var(--cell-size), Position per calc versetzt.",
   "art": "website"
  },
  {
   "seite": "Linear",
   "url": "https://linear.app/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): Animiertes Punktraster (.grid-dot-x-y): pro Punkt eigene Keyframes opacity 0.3 ↔ 1, animation 2800ms steps(1, end) infinite – Punkte blinken hart statt zu faden.",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "Paper Shaders – Dot grid / Dot orbit",
   "url": "https://shaders.paper.design/"
  }
 ],
 "kombinierbar_mit": [
  "karten-spotlight-glow",
  "verlaufs-rahmen",
  "css-3d-transforms"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/glas-material/linien-punkt-raster/",
  "meta": "https://cecodesign.de/lab/fundus/glas-material/linien-punkt-raster/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/glas-material/linien-punkt-raster/demo"
 },
 "herkunft": {
  "quelldateien": [
   "material3d.json",
   "patch-belege-2.json"
  ],
  "pruefnotizen": [
   "patch-belege-2.json: 2 Produktionsbelege."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Ein feines Punktraster unter der Fahrschul-Route wölbt sich um den Zeiger; dazu die reine CSS-Fassung und ein Linienraster mit Plus-Marken.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "punkt_raster_px": 20,
   "punkt_radius_px": "1 (weiche Kante bis 1,5 px)",
   "punkt_farbe": "rgba(20, 43, 80, .26)",
   "css_punkte": "background-image: radial-gradient(circle at center, rgba(20,43,80,.26) 1px, transparent 1.5px); background-size: 20px 20px",
   "linien_raster_px": 60,
   "linien": "linear-gradient(90deg, rgba(20,43,80,.09) 1px, transparent 1px), linear-gradient(0deg, …) · background-size 60px 60px",
   "plus_marken": "11 × 11 px, Strich 1 px, an jedem zweiten Linienschnitt (120 px), Grund-Deckkraft 0.3",
   "blinken": "jede vierte Marke: opacity 0.3 ↔ 1, 2800ms steps(1, end) infinite, versetzte negative Delays",
   "fade": "mask-image: radial-gradient(ellipse at 66% 52%, #000 40%, transparent 75%); Telefon ellipse at 50% 74%",
   "rasterursprung": "mittig: ox = (Breite mod 60) / 2, oy = (Höhe mod 60) / 2; Punkte, Linien und Route teilen ihn",
   "cursor_lerp": "0.12 pro Frame bei 60 fps, bildratenunabhängig: k = 1 − (1 − 0.12)^(dt/16.67)",
   "einflussradius_px": 140,
   "falloff": "f = 1 − smoothstep(0, 140, d)",
   "radius_wachstum": "r = 1.25 + 2.4·f px (max. 3,65 px inkl. Kante)",
   "ausweichen_px": "6·f·min(1, 2d/140) nach außen",
   "deckkraft_cursor": "0.26 → 0.9 mit f; Farbe Navy #142B50 → Himmelblau #3FBADF mit f²",
   "canvas": "Canvas 2D, Größe × devicePixelRatio (max. 2); ruhige Punkte in einem Pfad, nur Punkte im Einflussradius einzeln; Schleife stoppt im Ruhezustand",
   "variantenwechsel_ms": "600 opacity, cubic-bezier(0.16, 1, 0.3, 1)",
   "route_zeichnen": "stroke-dashoffset 1600 ms expo.out, Stationen erscheinen 800 ms cubic-bezier(0.16, 1, 0.3, 1) mit 8 px",
   "buttons": "transform 350 ms cubic-bezier(0.34, 1.56, 0.64, 1), translateY −2 / −3 px",
   "klassenwahl": "150 ms cubic-bezier(0.4, 0, 0.2, 1)",
   "vorfuehrung": "Runde 14 s: Punkte · Cursor 7,6 s (Zeiger fährt 6,4 s die Straße ab, 34 px darüber), Linien 3,6 s, CSS-Punkte 2,8 s",
   "schriften": "Bricolage Grotesque 700 opsz 96 (h1 clamp(2.5rem, 1rem + 6.5vw, 6rem)), Atkinson Hyperlegible Next, Geist Mono für Demo-Bedienung"
  },
  "ausloeser": "hover",
  "touch": "Raster bleibt statisch; Tippen auf eine freie Fläche setzt die Wölbung an die Stelle, nach 700 ms klingt sie mit demselben Lerp ab. Bedienelemente reagieren normal, Telefon-Layout mit senkrechter Straße.",
  "reduziert": "Keine Cursor-Reaktion (Canvas zeichnet nur das ruhige Raster), Plus-Marken blinken nicht (fest 0.45), Route ist sofort gezeichnet, Varianten blenden in 150 ms linear über.",
  "korrekturen": {
   "beschreibung": "Ein feines Raster aus Punkten oder Linien liegt hinter dem Inhalt. Punktraster: ein radial-gradient mit 1 px Punkt und weicher Kante, wiederholt alle 16 bis 24 px. Linienraster: zwei linear-gradients (90deg und 0deg) mit 1 px Linie alle 32 bis 64 px. Eine radiale Maske blendet das Raster zum Rand hin aus. Als Steigerung reagieren die Punkte auf den Cursor (Canvas oder Shader: Punkte in der Nähe werden größer, heller oder weichen aus), oder die Spaltenlinien des Layouts werden sichtbar, mit Plus-Marken an den Schnittpunkten.",
   "warum_es_wirkt": "Das Raster steht für Präzision, Planung und Blaupause. Es gibt leeren Flächen Struktur, ohne mit dem Inhalt zu konkurrieren. Liegen Inhalte sichtbar auf den Rasterpunkten, wirkt das Layout gebaut statt zufällig.",
   "wann_einsetzen": "Tech-, Dev-Tool-, Architektur- und Studioseiten. Hintergründe von Feature-Sektionen. Swiss- und Editorial-Layouts mit sichtbaren Spalten. Überall, wo ein Plan, ein Ablauf oder eine Karte gezeigt wird.",
   "wann_nicht": "Wenn das Raster nur Leere füllt und nichts darauf Bezug nimmt. In Kombination mit Aurora-Glow (Klischee von 2025). Hinter langen Fließtexten.",
   "varianten": [
    "Statisches Punktraster mit radialem Ausblenden (reines CSS)",
    "Interaktives Punktraster mit Cursor-Wölbung (Canvas)",
    "Linienraster oder sichtbare Spaltenlinien mit Plus-Marken",
    "Blinkende Punkte mit hartem Wechsel (steps)",
    "Isometrisches Raster",
    "Shader-Punktraster (Paper Shaders: Dot grid)"
   ],
   "umsetzung": "Die CSS-Fassung kostet fast nichts: ein Hintergrundbild plus mask-image. Interaktiv: Canvas 2D mit Punkten im Rasterabstand. Pro Frame wird die gelerpte Mausposition nachgeführt und für jeden Punkt im Einflussradius f = 1 − smoothstep(0, R, d) berechnet, Radius = Grundradius + k·f. Canvas mit devicePixelRatio skalieren, sonst werden die Punkte unscharf oder es entsteht Moiré. Ruhige Punkte in einem gemeinsamen Pfad zeichnen und die Schleife im Ruhezustand anhalten. Punkte, Linien und Inhalte teilen sich einen Rasterursprung. Belege: Nothing (Punktraster per CSS), Linear (blinkende Punkte mit steps(1)).",
   "mobil": "Die Cursor-Reaktion entfällt, das statische Raster bleibt. Optional setzt ein Tippen die Wölbung kurz an die getippte Stelle.",
   "reduzierte_bewegung": "Cursor-Reaktion und Blinken aus. Das Raster bleibt sichtbar.",
   "barrierefreiheit": "Rein dekorativ: aria-hidden und pointer-events: none. Linien und Punkte hinter Text sehr leise halten (hier 9 bis 26 % Deckkraft) und zum Text hin ausblenden. Informationen, die auf dem Raster liegen (hier die Route), zusätzlich als echte Liste im Markup."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Rezept fahrschule-freundlich-buchbar, erfundene Fahrschule Kurvenlicht aus Kassel. Das Raster bekommt eine Aufgabe: Die Straße mit den fünf Ausbildungsschritten rastet auf die 60-px-Schnittpunkte ein und zeichnet sich beim Laden. Umschalter für drei Varianten (Canvas-Punkte mit Cursor-Wölbung, reine CSS-Punkte, Linienraster mit Plus-Marken und Linear-Blinken). Die Vorführung lässt einen gedachten Zeiger die Straße abfahren (Kurvenlicht) und wechselt danach durch die Varianten. Die Stationen sind eine echte ol und auch ohne Animation lesbar. Deckkraft 26 % für Navy-Punkte auf hellem Grund, weil 6 bis 12 % (Messwert für helle Punkte auf Dunkel) auf Creme kaum sichtbar sind. AD-Review 01.11.2026: Note 4."
 }
}