{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "webgl-bildverzerrung",
 "name": "WebGL-Bildverzerrung per Shader (Hover, Linse, RGB-Shift)",
 "name_en": "WebGL image hover distortion / lens / RGB shift / WebGL hover distortion (bulge, ripple, curve, lens)",
 "kurz": "Projektraster eines Zeichenateliers: Die Bilder geben unter dem Zeiger nach, als Quadrat-Linse mit RGB-Shift, als Wölbung oder als Strömung nach Mausgeschwindigkeit; beim Scrollen biegen sie sich.",
 "kategorie": "3D & WebGL",
 "kategorie_slug": "3d-webgl",
 "kategorie_nr": 11,
 "bau_chat": "C5",
 "prioritaet": "A",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 3,
 "stimmung": [
  "ruhig",
  "editorial",
  "präzise",
  "verspielt",
  "laut",
  "experimentell"
 ],
 "stimmung_roh": [
  "verspielt",
  "flüssig",
  "editorial",
  "technisch",
  "experimentell",
  "laut"
 ],
 "technik": [
  "three",
  "webgl-shader",
  "gsap",
  "lenis",
  "r3f",
  "svg"
 ],
 "technik_gruppen": [
  "gsap",
  "lenis",
  "webgl",
  "canvas"
 ],
 "leistungskosten": "mittel",
 "steckbrief": {
  "beschreibung": "Die HTML-Bilder bleiben die Layout-Quelle. Ein WebGL-Canvas liegt fixiert darüber und zeichnet für jedes Bild eine Plane, deren Größe und Position aus dem DOM kommen. Ein Fragment-Shader verschiebt die UVs abhängig von Zeigerposition und Geschwindigkeit: als Linse, als Wölbung oder als Strömung in Bewegungsrichtung. Beim RGB-Shift werden Rot, Grün und Blau mit leicht unterschiedlichem Versatz gelesen. Zeigerwerte werden pro Frame gelerpt, deshalb federt die Verzerrung nach und klingt ab.",
  "warum_es_wirkt": "Die Bilder reagieren wie Glas oder Flüssigkeit auf den Zeiger. Das macht Portfolios und Listen greifbar, ohne Inhalt zu verdecken. Kaum ein Effekt signalisiert so deutlich „Award-Seite“, und er wirkt auch auf einem schlichten Raster.",
  "wann_einsetzen": "Projektlisten, Galerien, Portfolio-Teaser und Produktkacheln in Mode, Musik, Kultur und bei Studios. Besonders günstig, wenn ohnehin ein WebGL-Canvas läuft.",
  "wann_nicht": "Bei Produktfotos, deren Details exakt erkennbar bleiben müssen. Bei einem einzelnen Bild ohne bestehende WebGL-Szene, weil Bundle und GPU-Last dann nicht lohnen. Bei sehr vielen Bildern ohne Instancing oder Texturatlas. Bei konservativen Business-Zielgruppen.",
  "varianten": [
   "Quadrat-Linse, die dem Zeiger folgt, mit Vergrößerung und RGB-Shift",
   "Wölbung (Bulge) um den Zeiger, dazu leichte Hover-Skalierung",
   "Strömung: UVs fließen in Zeigerrichtung, RGB-Split nach Mausgeschwindigkeit",
   "Wasser: Wellengleichung im Ping-Pong, Wellen breiten sich vom Zeiger aus (Ripple Water)",
   "Verzerrung nach Scroll-Geschwindigkeit (Biegung der Plane)",
   "Sinus-Krümmung des ganzen Bildes",
   "Flüssigkeitsspur: Der Zeiger malt in eine Geschwindigkeitstextur (Flowmap, FBO)",
   "Hover-Wechsel zwischen zwei Bildern per Displacement-Textur (siehe shader-uebergang-dissolve)",
   "Leichte Variante ohne WebGL: SVG-Filter mit feTurbulence und feDisplacementMap",
   "Umsetzung mit WebGPU und TSL"
  ],
  "umsetzung": "Ein Canvas für alle Bilder, position: fixed, pointer-events: none. Eine OrthographicCamera in CSS-Pixeln, pro img eine Plane, jedes Frame per getBoundingClientRect positioniert. Mit Lenis läuft der Scroll im selben Frame wie das Rendern, so kleben die Planes am DOM. Texturen im Shader mit cover-Seitenverhältnis lesen (Bildgröße und Plane-Größe als Uniforms). Bulge-Kern: vec2 d = vUv - uMouse; float f = smoothstep(uRadius, 0., length(d)) * uHover; vec2 uv = vUv - d * f * uStrength. uHover per Tween (power3.out, 400 ms ein, 600 ms aus), uMouse pro Frame mit 0.1 lerpen. Pixelratio auf 2 begrenzen, nur rendern, wenn sich etwas ändert, Texturen erst bei Sichtbarkeit laden. Das DOM-Bild bleibt als Fallback stehen, ohne WebGL reicht ein CSS-Hover-Scale.",
  "mobil": "Ohne Hover entfällt die Zeigerverzerrung. Stattdessen eine dezente Verzerrung nach Scroll-Geschwindigkeit, ein kurzer Impuls beim Tippen oder ganz ohne Canvas mit normalen Bildern.",
  "reduzierte_bewegung": "Keine Verzerrung und kein Shader. Nur ein Wechsel von Helligkeit oder Deckkraft beim Hover.",
  "barrierefreiheit": "Das Original-img mit Alt-Text bleibt im DOM (opacity 0 statt display: none) und ist die Quelle der Wahrheit. Der Canvas ist aria-hidden. Links bleiben fokussierbar mit sichtbarem Fokus, der Fokus löst dieselbe Hervorhebung aus wie der Hover."
 },
 "messwerte": {
  "easing": "Lerp 0.08–0.12 pro Frame; power3.out (Übergang, Thibault); Geschwindigkeitsfeld (Lusion)",
  "dauer_ms": "Abklingen 400–800",
  "stagger_ms": "",
  "distanz": "Immersive Garden: Hover-Skalierung 3 % der Plane-Größe; RGB-Offset typ. 0.002–0.01 uv; UV-Versatz 0.15, RGB-Shift 0.025 (Thibault); amount 20, 9 Samples (Lusion)",
  "sonstiges": "Linsengröße 150–300px; Peak der Verzerrung bei 50 % Fortschritt (parabola k=2); Lusion: rgbShift 1, shade 1.25",
  "herkunft": "beobachtet",
  "quelle": "https://immersive-g.com/assets/entry.DyxL_KXi.js; https://lusion.co/_astro/hoisted.CUO_IjfL.js"
 },
 "kurve": {
  "bezier": [
   0.25,
   1,
   0.5,
   1
  ],
  "css": "cubic-bezier(0.25, 1, 0.5, 1)",
  "name": "power3.out",
  "dauer_ms": 400
 },
 "gesehen_bei": [
  {
   "seite": "Codrops – Mouse-Following Square Lens Effect",
   "url": "https://tympanus.net/codrops/2026/08/25/building-a-mouse-following-square-lens-effect-with-three-js-and-glsl/",
   "auszeichnung": "",
   "beobachtung": "Laut Feed: cursorfolgende Linse, die Bilder verzerrt, RGB-Kanäle verschiebt und per Shader animiert.",
   "art": "artikel"
  },
  {
   "seite": "Olivier Larose: Mouse Image Distortion",
   "url": "https://blog.olivierlarose.com/tutorials/mouse-image-distortion",
   "auszeichnung": "",
   "beobachtung": "Bild-Krümmung per Sinusfunktion, React Three Fiber + Framer Motion; Quellcode auf GitHub verlinkt.",
   "art": "artikel"
  },
  {
   "seite": "Olivier Larose: Bulge Effect / Ripple Shader",
   "url": "https://blog.olivierlarose.com/tutorials/bulge-effect",
   "auszeichnung": "",
   "beobachtung": "Bulge-Verzerrung per GLSL in R3F; Ripple-Shader als separates Tutorial.",
   "art": "artikel"
  },
  {
   "seite": "Codrops SVGImageHover / ThumbHoverSVGFilter (Repos)",
   "url": "https://github.com/codrops/SVGImageHover",
   "auszeichnung": "",
   "beobachtung": "SVG-Filter-Distortion auf Bildern beim Link-Hover bzw. Thumbnail-Hover – leichte Alternative ohne WebGL.",
   "art": "demo"
  },
  {
   "seite": "Immersive Garden",
   "url": "https://immersive-g.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): Bild-Planes mit Shader-Uniforms uHover, uMaskParallax, tMaskNoise: Hover skaliert die Plane um 3 % (hoverScale = 1 − 0.03/uPlaneSize), Kantenverzerrung per smoothstep über uScaleEdgeFactor.",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Lusion",
   "url": "https://lusion.co/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): hoisted.CUO_IjfL.js: Post-Effekt 'ScreenPaintDistortion' über der ganzen Szene: Maus malt in eine Geschwindigkeits-Textur (ScreenPaint), der Shader verschiebt die UVs entlang dieser Geschwindigkeit mit 9 Samples (Bewegungsunschärfe) und addiert einen RGB-Versatz sin(vel·40 + (0,2,4)·u_rgbShift); Defaults amount 20, rgbShift 1, multiplier 1.25, colorMultiplier 1, shade 1.25, renderOrder 75; Blue-Noise gegen Banding.",
   "art": "website"
  },
  {
   "seite": "Thibault Guignand Portfolio",
   "url": "https://www.thibaultguignand.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): index-BKlZLtrc.js: Projektvideos als OGL-Texturen; Wechsel per Shader mit uDisplaceIntensity .15, uRGBShift .025, uNoisePixelSize 5, uNoiseSpeed .04; Verzerrung und RGB-Versatz folgen parabola(progress, 2) und erreichen ihr Maximum in der Mitte; progress-Tween power3.out. Zusätzlich Maus-Flowmap (uFalloff, uDissipation, uVelocity) als Verzerrungsquelle.",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "Building a Mouse-Following Square Lens Effect with Three.js and GLSL",
   "url": "https://tympanus.net/codrops/2026/08/25/building-a-mouse-following-square-lens-effect-with-three-js-and-glsl/"
  },
  {
   "titel": "Olivier Larose: Bulge Effect",
   "url": "https://blog.olivierlarose.com/tutorials/bulge-effect"
  },
  {
   "titel": "Olivier Larose: Ripple Shader",
   "url": "https://blog.olivierlarose.com/tutorials/ripple-shader"
  },
  {
   "titel": "Olivier Larose: Mouse Image Distortion",
   "url": "https://blog.olivierlarose.com/tutorials/mouse-image-distortion"
  },
  {
   "titel": "Codrops: Mouse-following square lens shader (08/2026)",
   "url": "https://tympanus.net/codrops/?p=119046"
  }
 ],
 "kombinierbar_mit": [
  "3d-karussell-zylinder",
  "grain-noise-overlay",
  "shader-uebergang-dissolve",
  "bild-zoom-in-maske",
  "listen-hover-bildvorschau",
  "cursor-masken-reveal"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/3d-webgl/webgl-bildverzerrung/",
  "meta": "https://cecodesign.de/lab/fundus/3d-webgl/webgl-bildverzerrung/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/3d-webgl/webgl-bildverzerrung/demo"
 },
 "herkunft": {
  "quelldateien": [
   "material3d.json",
   "hover.json",
   "patch-belege-2.json",
   "r3-belege-a.json"
  ],
  "pruefnotizen": [
   "patch-belege-2.json: 1 Produktionsbeleg; Ziel ≥2 nicht erreicht.",
   "r3-belege-a.json (Runde 3, 31.10.2026): Der Thibault-Übergang steht im Katalog schon bei shader-uebergang-dissolve. Hier zählt er als Beleg für Verzerrung plus RGB-Shift auf Bild- bzw. Videotexturen. Lusion verzerrt den ganzen Bildschirm nach der Maus, nicht einzelne Bilder."
  ],
  "zusammengelegt_aus": [
   "bild-shader-hover",
   "webgl-distortion-hover"
  ],
  "querverweis_kategorien": [
   "Hover"
  ],
  "leistungskosten_spanne": "mittel–hoch (je nach Variante)"
 },
 "bau": {
  "status": "fertig",
  "kurz": "Projektraster eines Zeichenateliers: Die Bilder geben unter dem Zeiger nach, als Quadrat-Linse mit RGB-Shift, als Wölbung oder als Strömung nach Mausgeschwindigkeit; beim Scrollen biegen sie sich.",
  "demo": true,
  "abhaengigkeiten": [
   "three@0.186.0",
   "lenis@1.3.26"
  ],
  "werte": {
   "aufbau": "Ein Canvas position: fixed über der Seite, pointer-events: none, aria-hidden. Pro .bild-Rahmen eine Plane (PlaneGeometry 1 × 1, 32 × 1 Segmente) in einer OrthographicCamera in CSS-Pixeln; Position und Größe jedes Frame aus getBoundingClientRect. DOM-img bleibt mit Alt-Text stehen (opacity 0).",
   "bildanpassung": "object-fit cover im Shader über uImg (Bildgröße) und uPlane (Plane in px); Pixelratio max. 2",
   "lerp": "Zeiger-UV und Geschwindigkeit je 0.1 pro Frame (bei 60 fps, framerate-unabhängig 1 − 0.9^dt); beim Eintritt springt der Zeigerwert ohne Lerp an die Eintrittsstelle",
   "uHover": "eigener Tween mit power3.out = 1 − (1 − t)^4 = cubic-bezier(0.25, 1, 0.5, 1); ein 400 ms, aus 600 ms",
   "linse": "Quadrat 240 px, höchstens 60 % der Kachelbreite, Eckradius 6 px, wächst mit uHover; Zoom 1.6×, innen zusätzlich gewölbt (Faktor 0.78 in der Mitte bis 1.0 am Rand); RGB-Offset 0.006 UV radial, zum Rand stärker (35 % → 100 %), plus bis 0.004 UV in Zeigerrichtung nach Tempo; Linse 4 % heller, Umgebung 12 % dunkler; 1-px-Haarlinie Weiß 70 %",
   "woelbung": "d = (uv − uMouse) · Seitenverhältnis; f = smoothstep(0.45, 0, |d|) · uHover; uv −= d · f · 0.4; Hover-Skalierung 3 % (Textur zoomt um 0.03 · uHover); RGB-Offset 0.03 · d · f",
   "stroemung": "Tempo s = clamp(|v| · 30, 0, 1), v in UV pro Frame; Wirkradius smoothstep(0.55, 0, |d|); UV-Versatz 0.15 · s in Zeigerrichtung; 9 Samples entlang des Versatzes (Bewegungsunschärfe); RGB-Shift 0.025 · s, je Sample 0.5–1.5-fach; Abklingen nach dem Stopp ≈ 470 ms (Lerp 0.1)",
   "scroll": "Scroll-Tempo normiert auf ±1 bei 30 px/Frame, gelerpt 0.1; Vertex-Biegung sin(π · uv.x) · 24 px (Mitte bleibt zurück); RGB-Versatz senkrecht 0.012 UV · Tempo",
   "lenis": "lerp 0.1, autoRaf false, lenis.raf() im selben Frame wie das Rendern, damit die Planes am DOM kleben; nur mit Maus und ohne reduzierte Bewegung",
   "render": "nur zeichnen, wenn sich Hover, Zeiger, Tempo oder Scroll ändern; Planes außerhalb des Viewports unsichtbar",
   "ui": "Umschalter 150 ms linear; Punkt an der Bildunterschrift scale 0 → 1 in 400 ms power3.out"
  },
  "ausloeser": "hover",
  "touch": "Kein Hover: Tippen löst an der Tippstelle einen Impuls aus (uHover 400 ms ein, 600 ms aus; bei Strömung mit kurzem Tempostoß in zufälliger Richtung). Scrollen biegt die Bilder nach Tempo. Natives Scrollen ohne Lenis, Text sagt „Tippen“ statt „Maus“. Wasser: Tippen lässt an der Tippstelle einen Tropfen fallen.",
  "reduziert": "Kein Canvas, keine Verzerrung, kein Lenis. Die DOM-Bilder bleiben sichtbar, Hover und Fokus dunkeln das Bild auf Helligkeit 0.9 ab, der Punkt an der Bildunterschrift erscheint ohne Animation. Wasser: ebenso aus.",
  "korrekturen": {
   "beschreibung": "Die HTML-Bilder bleiben die Layout-Quelle. Ein WebGL-Canvas liegt fixiert darüber und zeichnet für jedes Bild eine Plane, deren Größe und Position aus dem DOM kommen. Ein Fragment-Shader verschiebt die UVs abhängig von Zeigerposition und Geschwindigkeit: als Linse, als Wölbung oder als Strömung in Bewegungsrichtung. Beim RGB-Shift werden Rot, Grün und Blau mit leicht unterschiedlichem Versatz gelesen. Zeigerwerte werden pro Frame gelerpt, deshalb federt die Verzerrung nach und klingt ab.",
   "warum_es_wirkt": "Die Bilder reagieren wie Glas oder Flüssigkeit auf den Zeiger. Das macht Portfolios und Listen greifbar, ohne Inhalt zu verdecken. Kaum ein Effekt signalisiert so deutlich „Award-Seite“, und er wirkt auch auf einem schlichten Raster.",
   "wann_einsetzen": "Projektlisten, Galerien, Portfolio-Teaser und Produktkacheln in Mode, Musik, Kultur und bei Studios. Besonders günstig, wenn ohnehin ein WebGL-Canvas läuft.",
   "wann_nicht": "Bei Produktfotos, deren Details exakt erkennbar bleiben müssen. Bei einem einzelnen Bild ohne bestehende WebGL-Szene, weil Bundle und GPU-Last dann nicht lohnen. Bei sehr vielen Bildern ohne Instancing oder Texturatlas. Bei konservativen Business-Zielgruppen.",
   "varianten": [
    "Quadrat-Linse, die dem Zeiger folgt, mit Vergrößerung und RGB-Shift",
    "Wölbung (Bulge) um den Zeiger, dazu leichte Hover-Skalierung",
    "Strömung: UVs fließen in Zeigerrichtung, RGB-Split nach Mausgeschwindigkeit",
    "Wasser: Wellengleichung im Ping-Pong, Wellen breiten sich vom Zeiger aus (Ripple Water)",
    "Verzerrung nach Scroll-Geschwindigkeit (Biegung der Plane)",
    "Sinus-Krümmung des ganzen Bildes",
    "Flüssigkeitsspur: Der Zeiger malt in eine Geschwindigkeitstextur (Flowmap, FBO)",
    "Hover-Wechsel zwischen zwei Bildern per Displacement-Textur (siehe shader-uebergang-dissolve)",
    "Leichte Variante ohne WebGL: SVG-Filter mit feTurbulence und feDisplacementMap",
    "Umsetzung mit WebGPU und TSL"
   ],
   "umsetzung": "Ein Canvas für alle Bilder, position: fixed, pointer-events: none. Eine OrthographicCamera in CSS-Pixeln, pro img eine Plane, jedes Frame per getBoundingClientRect positioniert. Mit Lenis läuft der Scroll im selben Frame wie das Rendern, so kleben die Planes am DOM. Texturen im Shader mit cover-Seitenverhältnis lesen (Bildgröße und Plane-Größe als Uniforms). Bulge-Kern: vec2 d = vUv - uMouse; float f = smoothstep(uRadius, 0., length(d)) * uHover; vec2 uv = vUv - d * f * uStrength. uHover per Tween (power3.out, 400 ms ein, 600 ms aus), uMouse pro Frame mit 0.1 lerpen. Pixelratio auf 2 begrenzen, nur rendern, wenn sich etwas ändert, Texturen erst bei Sichtbarkeit laden. Das DOM-Bild bleibt als Fallback stehen, ohne WebGL reicht ein CSS-Hover-Scale.",
   "mobil": "Ohne Hover entfällt die Zeigerverzerrung. Stattdessen eine dezente Verzerrung nach Scroll-Geschwindigkeit, ein kurzer Impuls beim Tippen oder ganz ohne Canvas mit normalen Bildern.",
   "reduzierte_bewegung": "Keine Verzerrung und kein Shader. Nur ein Wechsel von Helligkeit oder Deckkraft beim Hover.",
   "barrierefreiheit": "Das Original-img mit Alt-Text bleibt im DOM (opacity 0 statt display: none) und ist die Quelle der Wahrheit. Der Canvas ist aria-hidden. Links bleiben fokussierbar mit sichtbarem Fokus, der Fokus löst dieselbe Hervorhebung aus wie der Hover."
  },
  "geprueft": "02.11.2026",
  "notiz": "Projektraster des erfundenen Ateliers Saalfeld mit sechs Arbeiten und einem gemeinsamen Canvas. Umschalter für drei Varianten (Linse mit RGB, Wölbung, Strömung nach Tempo); Werte und Live-Messung (uHover, |v|, Scroll) dezent im Fuß. Scroll-Biegung gilt in allen Varianten. Vorführung: gedachter Zeiger fährt je Variante 3,8 s eine Lissajous-Bahn durch eine eigene Kachel und drückt dann den nächsten Umschalter (Schleife 16,8 s). Werte aus Thibault (UV-Versatz 0.15, RGB 0.025), Immersive Garden (Hover-Skalierung 3 %) und Lusion (9 Samples). Bilder 01.11.2026: eigene Bilder statt Portfolio. Zugang 02.11.2026: --leise Alpha .56 auf .64 (5:1), Variantenknöpfe mit eigenem Fokusring (outline 2px Tinte, Abstand 3 px) statt outline none, Kontrastmodus: Knopfrahmen und Fokus-Outline an den Bildkacheln. Korrektur 02.11.2026: Variante wasser (Ripple-Water-Prinzip, eigener Code): Wellengleichung auf einem Gitter in ¼ Viewport, ein Ping-Pong-Durchlauf je Schritt, Zeiger zieht Tropfen als Kapsel, Brechung plus Glanzlicht im Bild-Shader, ruht 4 s nach dem letzten Tropfen. Modi als Varianten nach Regel 13 (?v=linse|woelbung|stroemung|wasser, replaceState); mit ?v= fährt die Vorführung eine Bahn über alle drei Kacheln in dieser Variante.",
  "varianten": [
   {
    "id": "linse",
    "name": "Quadrat-Linse mit RGB-Shift",
    "knopf": "Linse · RGB",
    "wann": "Portfolio- oder Projektraster eines Studios, in dem der Zeiger Details der Arbeiten vergrößert.",
    "werte": {
     "modus": "Quadrat-Linse 240 px, Zoom 1.6×, RGB 0.006 UV + Tempo 0.004"
    }
   },
   {
    "id": "woelbung",
    "name": "Wölbung um den Zeiger",
    "knopf": "Wölbung",
    "wann": "Ruhigere Raster (Architektur, Manufaktur), in denen das Bild nur sanft nachgeben soll.",
    "werte": {
     "modus": "Wölbung, Radius 0.45, Stärke 0.4, Hover-Skalierung 3 %"
    }
   },
   {
    "id": "stroemung",
    "name": "Strömung nach Mausgeschwindigkeit",
    "knopf": "Strömung · Tempo",
    "wann": "Laute Kreativ- und Musikseiten: das Bild verwischt in Zeigerrichtung, je schneller, desto stärker.",
    "werte": {
     "modus": "Strömung, UV-Versatz 0.15 × Tempo, 9 Samples, RGB 0.025"
    }
   },
   {
    "id": "wasser",
    "name": "Wasser: Wellen breiten sich vom Zeiger aus",
    "knopf": "Wasser",
    "wann": "Bilder mit Wasser-, Glas- oder Kosmetikbezug (Bad, Spa, Getränk, Parfum), bei denen der Zeiger Wellen auf der Oberfläche zieht; nicht für Produktfotos, die unverfälscht wirken müssen.",
    "werte": {
     "feld": "Höhenfeld in Bildschirmkoordinaten, ¼ Viewport-Auflösung, HalfFloat RGBA, R = h, G = h vorher (Ping-Pong, ein Durchlauf je Schritt)",
     "welle": "h_neu = (Σ 4 Nachbarn / 2 − h_vorher) × 0,985",
     "schritte": "1 je 60-Hz-Bild, bei langsamen Geräten höchstens 2",
     "tropfen": "Kapsel vom letzten zum neuen Zeigerpunkt, Radius 4 Zellen, Profil (1 + cos(π·d))/2, Amplitude 0,9 × min(1, Weg/14 px); Tippen und Tastaturfokus: ein voller Tropfen",
     "scroll": "Feld wandert per uv-Versatz mit dem Scroll mit",
     "brechung": "UV-Versatz = Steigung × 0,05, RGB-Saum 0,25 × Versatz",
     "glanz": "Normale (−∇h · 5, 1), Licht (−0,45, 0,55, 0,7), pow 40 × 0,4; Tal/Kamm ± 6 % Helligkeit",
     "nachlauf_ms": "4000 nach dem letzten Tropfen, dann wird das Feld geleert und das Zeichnen ruht"
    }
   }
  ]
 }
}