{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "webgl-fluid-cursor",
 "name": "WebGL-Fluid- und Formspur am Cursor",
 "name_en": "WebGL fluid / shaped cursor trail / Fluid simulation / WebGPU fluids",
 "kurz": "Der Zeiger als Zuluft: Eine Stable-Fluids-Simulation strömt durch die Produktansicht einer Lüftungs-Software, wahlweise als Rauch, als Vektorpfeile oder als verzerrter Grundriss.",
 "kategorie": "Cursor",
 "kategorie_slug": "cursor",
 "kategorie_nr": 8,
 "bau_chat": "C4",
 "prioritaet": "B",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 2,
 "stimmung": [
  "ruhig",
  "präzise",
  "luxuriös",
  "verspielt",
  "warm",
  "experimentell"
 ],
 "stimmung_roh": [
  "technisch",
  "experimentell",
  "flüssig",
  "luxuriös",
  "organisch",
  "verspielt",
  "künstlerisch"
 ],
 "technik": [
  "three",
  "webgl-shader",
  "tsl",
  "webgpu",
  "canvas"
 ],
 "technik_gruppen": [
  "webgl",
  "canvas"
 ],
 "leistungskosten": "hoch",
 "steckbrief": {
  "beschreibung": "Ein Canvas liegt mit pointer-events: none über oder hinter dem Inhalt. Die Zeigerbewegung wird als Kraft in eine Simulation geschrieben: eine Fluid-Simulation, eine Ping-Pong-Textur mit Abklingen oder Partikel. Ein Shader macht daraus die sichtbare Spur, etwa flüssige Farbe, eine Verzerrung des Hintergrunds, Lichtbrechung oder eine Spur in eigener Form statt eines Kreises. Ohne neue Eingabe klingt die Spur ab.",
  "warum_es_wirkt": "Jede Bewegung hinterlässt eine einmalige Spur, die sich physikalisch glaubwürdig verhält. Das Feedback ist unmittelbar und wirkt handwerklich und materiell. Mit WebGPU und TSL wird der Effekt günstiger und bleibt 2026 in Kreativ-Portfolios präsent.",
  "wann_einsetzen": "Portfolios von Kreativ-Entwicklern, Tech- und 3D-Studios, Kunst und Kultur, Beauty und Getränke, Lab-Seiten, Hero-Hintergründe. Auf Produktseiten nur, wenn die Strömung selbst zum Produkt gehört, etwa bei Simulation oder Datenvisualisierung.",
  "wann_nicht": "Auf Inhaltsseiten und hinter Fließtext. Auf schwachen Geräten. Wenn niemand im Team Shader warten kann. Nicht als Dauer-Effekt auf Business-Seiten.",
  "varianten": [
   "Rauch (Dye): Stable Fluids auf der GPU, der Zeiger stößt die Strömung an",
   "Vektoren: die Spur in eigener Form, ein Pfeil je Rasterzelle",
   "Verzerrung: ein unsichtbares Geschwindigkeitsfeld verschiebt Bild, Plan oder Typo",
   "Autonom (Nebel): Quellen am Rand blasen nach Zeitplan, ohne Zeiger; für Touch und ruhige Hero-Flächen",
   "Pixel- oder Dithering-Spur",
   "WebGPU mit Compute-Shadern: Partikelfluid oder musikreaktives Goo"
  ],
  "umsetzung": "Grundform: zwei Render-Targets im Ping-Pong. Pro Bild wird die vorige Textur mit 0,96 multipliziert (Abklingen), dazu kommen neue Stempel entlang der Strecke vom letzten zum aktuellen Zeigerpunkt. Die Strecke interpolieren oder als Kapsel stempeln, sonst entstehen bei schneller Bewegung Lücken. Das Ergebnis dient im finalen Shader als Farbe, Maske oder Displacement.\n\nEchte Fluid-Simulation (Stable Fluids): Advektion, Kraft, Divergenz, Druck über Jacobi-Iterationen, Projektion. Beobachtete Werte bei Lando Norris: dissipation 0,96, 4 Poisson-Iterationen, dt 0,014, mouse_force 50, cursor_size 18, Auflösung 0,1 × Viewport, BFECC. Bei Unseen Studio: Auflösung 256, force 50, 2 Iterationen, mouseRadius 0,008. Die Geschwindigkeit in niedriger Auflösung rechnen (128 bis 256), Farbe (Dye) feiner. Half-Float-Texturen verwenden und auf iOS prüfen.\n\nFallstricke: Pixeldichte begrenzen. Die Simulation bei Inaktivität, im Hintergrund-Tab und außerhalb des Viewports pausieren. WebGPU nur mit WebGL-Fallback, ohne WebGL ein statisches Bild oder einen Verlauf zeigen.",
  "mobil": "Touch-Ziehen zeichnet die Spur, Scrollen muss möglich bleiben. Ohne Eingabe eine ruhige Leerlauf-Bewegung oder ein statisches Bild. Niedrigere Simulationsauflösung, bei schwacher GPU abschalten.",
  "reduzierte_bewegung": "Abschalten und durch ein statisches Bild ersetzen. Höchstens bei aktiver Eingabe ohne Nachlauf zeigen.",
  "barrierefreiheit": "Canvas mit aria-hidden. Die Spur darf den Kontrast von Text nicht verschlechtern, deshalb nicht hinter Fließtext legen. Keine Information nur über den Effekt vermitteln."
 },
 "messwerte": {
  "easing": "Dissipation 0,96 (Lando); pressure/viscosity .999 (Unseen)",
  "dauer_ms": "",
  "stagger_ms": "",
  "distanz": "cursor_size 18 (Lando); mouseRadius .008 (Unseen)",
  "sonstiges": "Poisson-Iterationen 4 (Lando) bzw. 2 (Unseen); Simulationsauflösung 0,1 × Viewport bzw. 256²",
  "herkunft": "beobachtet",
  "quelle": "https://unseen.co/ ; https://landonorris.com/"
 },
 "kurve": null,
 "gesehen_bei": [
  {
   "seite": "Codrops – Beyond the Circle: Building a Custom-Shaped Cursor Trail with Three.js and TSL",
   "url": "https://tympanus.net/codrops/2026/09/24/custom-shaped-cursor-trail/",
   "auszeichnung": "",
   "beobachtung": "Tutorial vom 24.09.2026 (URL in Codrops-Liste gesehen, Artikel selbst nicht abrufbar) – belegt, dass Cursor-Trails 2026 in der Kreativ-Szene weiterentwickelt werden.",
   "art": "artikel"
  },
  {
   "seite": "CRZ.STUDIO",
   "url": "https://www.crz.studio/",
   "auszeichnung": "CSSDA WOTD 27.10.2026 (Nominierung/WOTD-Liste)",
   "beobachtung": "Laut CSSDA-Tags ‚animated, liquid, WebGL‘; ob die Liquid-Effekte cursorgesteuert sind, ist nicht verifiziert.",
   "art": "website-ungeprueft"
  },
  {
   "seite": "Codrops – Run Rob Run: Music-Reactive Goo with Three.js and WebGPU",
   "url": "https://tympanus.net/codrops/2026/08/20/run-rob-run-building-a-music-reactive-goo-with-three-js-and-webgpu/",
   "auszeichnung": "",
   "beobachtung": "Laut Feed: audioreaktive Szene mit Geometrie-Deformation, Musikanalyse, scrollgetriebenem Morphing.",
   "art": "artikel"
  },
  {
   "seite": "Unseen Studio",
   "url": "https://unseen.co/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (theme.js): eigene Fluid-Simulation (velocitySim → divergenceSim → pressureSim-Iterationen → subtractPressure), uMouse/uForce aus Cursor-Delta; Optionen fluid {resolution:256, force:50, iterations:2, mouseRadius:.008, pressure:.999, viscosity:.999}.",
   "art": "website"
  },
  {
   "seite": "Lando Norris (OFF+BRAND)",
   "url": "https://landonorris.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (lando-by-OFF+BRAND.05.js): Stable-Fluids-Klasse mit FBOs vel/viscous/div/pressure, Optionen {iterations_poisson:4, iterations_viscous:4, dissipation:0.96, mouse_force:50, resolution:0.1, cursor_size:18, viscous:30, dt:0.014, BFECC:true}.",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "Codrops – Custom-Shaped Cursor Trail with Three.js and TSL",
   "url": "https://tympanus.net/codrops/2026/09/24/custom-shaped-cursor-trail/"
  },
  {
   "titel": "Run Rob Run: Building a Music-Reactive Goo with Three.js and WebGPU",
   "url": "https://tympanus.net/codrops/2026/08/20/run-rob-run-building-a-music-reactive-goo-with-three-js-and-webgpu/"
  },
  {
   "titel": "Paper Shaders – Water",
   "url": "https://shaders.paper.design/"
  }
 ],
 "kombinierbar_mit": [
  "kinetic-3d-shader-type",
  "cursor-masken-reveal",
  "webgl-bildverzerrung",
  "webgpu-tsl-compute",
  "audio-reaktiv-3d"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/cursor/webgl-fluid-cursor/",
  "meta": "https://cecodesign.de/lab/fundus/cursor/webgl-fluid-cursor/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/cursor/webgl-fluid-cursor/demo"
 },
 "herkunft": {
  "quelldateien": [
   "schriftanimation.json",
   "material3d.json",
   "r3-belege-b.json"
  ],
  "pruefnotizen": [
   "r3-belege-b.json (Runde 3, 31.10.2026): Zwei unabhängige Produktionsimplementierungen mit konkreten Parametern."
  ],
  "zusammengelegt_aus": [
   "cursor-webgl-trail",
   "fluid-simulation-cursor"
  ],
  "trendstatus_begruendung": "Konflikt aufsteigend (Cursor) vs. etabliert (3D & WebGL). Aufgelöst zu 'etabliert': GPU-Fluid-Simulationen am Zeiger sind seit Jahren verbreitet; aufsteigend sind nur WebGPU/TSL-Umsetzungen, die als Variante geführt sind.",
  "querverweis_kategorien": [
   "3D & WebGL"
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Der Zeiger als Zuluft: Eine Stable-Fluids-Simulation strömt durch die Produktansicht einer Lüftungs-Software, wahlweise als Rauch, als Vektorpfeile oder als verzerrter Grundriss.",
  "demo": true,
  "abhaengigkeiten": [
   "three@0.186.0"
  ],
  "werte": {
   "solver": "Stable Fluids auf der GPU: Advektion (BFECC) → Kraft → Divergenz → Druck (Jacobi) → Projektion; ohne Viskositätsschritt",
   "dissipation": "0,96 je 60-Hz-Bild (bildratenunabhängig: 0,96^f)",
   "poisson_iterationen": 4,
   "dt": "0,014 je 60-Hz-Bild (höchstens 3 × bei langsamen Bildern)",
   "mouse_force": "50 × Zeigerweg seit dem letzten Bild (uv, Seitenverhältnis korrigiert), Kraftstoß höchstens 4",
   "cursor_size": "18 Simulationszellen (Kapsel vom letzten zum aktuellen Zeigerpunkt, Abfall (1 − d/r)²)",
   "aufloesung": "0,1 × Sicht, mindestens 64 Zellen an der kurzen Seite (z. B. 143 × 64)",
   "texturen": "HalfFloat RGBA, linear gefiltert, Ränder als Wand (Geschwindigkeit 0)",
   "rauch": "Dye-Feld 0,25 × Sicht, Abklingen 0,985 je Bild (Halbwertszeit ≈ 0,77 s), Stempel 0,5 × cursor_size, Menge min(1, 0,12 + v/1400 px/s) × 0,35",
   "vektoren": "Pfeil je 22-px-Rasterzelle, Länge min(1,4 · |v|, 1) × 0,44 Zelle, ab |v| 0,015 sichtbar",
   "verzerrung": "Grundriss-Versatz = v × 0,045 (uv), Farbkanäle R/G/B mit 1,18 / 1 / 0,82 versetzt",
   "dpr_max": 1.5,
   "ruhe_ms": 4000,
   "darstellung_wechsel_ms": 200,
   "ui": "cubic-bezier(0.25, 0.46, 0.45, 0.94) 160 ms (Farben), 180 ms (Segment-Indikator)",
   "einblendung": "Deckkraft + 6 px, 500 ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), Versatz 60 ms",
   "vorfuehrung": "gedachter Zeiger auf einer Acht, 1,25 rad/s, 5200 ms je Darstellung; Intro beim Laden 2600 ms",
   "touch_leerlauf_ms": 2500,
   "sonde": "1000 px/s ≙ 1 m/s, Staudruck q = 0,6 · v²",
   "farben": "Grund #08090a, Panel #111214 / #161718, Linie #242728, Text #f7f8f8 / #d0d6e0 / #8a8f98, Marke #5fb4ff",
   "schriften": "Geist (h1 560, −0,022em, Zeilenhöhe 1), Geist Mono (Labels versal, 0,14em)",
   "pause": "Knopf .halt: angehalten = true → bild() kehrt sofort zurück, letztes Bild bleibt stehen; Abspielen weckt die Schleife"
  },
  "ausloeser": "hover",
  "touch": "Finger ziehen in der Produktansicht zeichnet die Strömung (passive Listener, Scrollen bleibt möglich). Nach 2,5 s ohne Berührung bläst die Zuluft von selbst auf einer langsamen Kreisbahn. Simulation mit mindestens 64 Zellen an der kurzen Seite. Variante Nebelprobe: Die Strömung läuft ganz ohne Finger; Ziehen wirkt zusätzlich.",
  "reduziert": "Kein WebGL und keine Bewegung: Statt der Simulation erscheint ein statisches Ergebnisbild (Stromlinien von Zuluft zu Abluft bzw. Pfeilfeld), der Umschalter wechselt zwischen den drei statischen Bildern. Dasselbe Bild dient als Fallback ohne WebGL2. Nebelprobe: Standbild mit Stromlinien und Nebelwolken.",
  "korrekturen": {
   "beschreibung": "Ein Canvas liegt mit pointer-events: none über oder hinter dem Inhalt. Die Zeigerbewegung wird als Kraft in eine Simulation geschrieben: eine Fluid-Simulation, eine Ping-Pong-Textur mit Abklingen oder Partikel. Ein Shader macht daraus die sichtbare Spur, etwa flüssige Farbe, eine Verzerrung des Hintergrunds, Lichtbrechung oder eine Spur in eigener Form statt eines Kreises. Ohne neue Eingabe klingt die Spur ab.",
   "warum_es_wirkt": "Jede Bewegung hinterlässt eine einmalige Spur, die sich physikalisch glaubwürdig verhält. Das Feedback ist unmittelbar und wirkt handwerklich und materiell. Mit WebGPU und TSL wird der Effekt günstiger und bleibt 2026 in Kreativ-Portfolios präsent.",
   "wann_einsetzen": "Portfolios von Kreativ-Entwicklern, Tech- und 3D-Studios, Kunst und Kultur, Beauty und Getränke, Lab-Seiten, Hero-Hintergründe. Auf Produktseiten nur, wenn die Strömung selbst zum Produkt gehört, etwa bei Simulation oder Datenvisualisierung.",
   "wann_nicht": "Auf Inhaltsseiten und hinter Fließtext. Auf schwachen Geräten. Wenn niemand im Team Shader warten kann. Nicht als Dauer-Effekt auf Business-Seiten.",
   "varianten": [
    "Rauch (Dye): Stable Fluids auf der GPU, der Zeiger stößt die Strömung an",
    "Vektoren: die Spur in eigener Form, ein Pfeil je Rasterzelle",
    "Verzerrung: ein unsichtbares Geschwindigkeitsfeld verschiebt Bild, Plan oder Typo",
    "Autonom (Nebel): Quellen am Rand blasen nach Zeitplan, ohne Zeiger; für Touch und ruhige Hero-Flächen",
    "Pixel- oder Dithering-Spur",
    "WebGPU mit Compute-Shadern: Partikelfluid oder musikreaktives Goo"
   ],
   "umsetzung": "Grundform: zwei Render-Targets im Ping-Pong. Pro Bild wird die vorige Textur mit 0,96 multipliziert (Abklingen), dazu kommen neue Stempel entlang der Strecke vom letzten zum aktuellen Zeigerpunkt. Die Strecke interpolieren oder als Kapsel stempeln, sonst entstehen bei schneller Bewegung Lücken. Das Ergebnis dient im finalen Shader als Farbe, Maske oder Displacement.\n\nEchte Fluid-Simulation (Stable Fluids): Advektion, Kraft, Divergenz, Druck über Jacobi-Iterationen, Projektion. Beobachtete Werte bei Lando Norris: dissipation 0,96, 4 Poisson-Iterationen, dt 0,014, mouse_force 50, cursor_size 18, Auflösung 0,1 × Viewport, BFECC. Bei Unseen Studio: Auflösung 256, force 50, 2 Iterationen, mouseRadius 0,008. Die Geschwindigkeit in niedriger Auflösung rechnen (128 bis 256), Farbe (Dye) feiner. Half-Float-Texturen verwenden und auf iOS prüfen.\n\nFallstricke: Pixeldichte begrenzen. Die Simulation bei Inaktivität, im Hintergrund-Tab und außerhalb des Viewports pausieren. WebGPU nur mit WebGL-Fallback, ohne WebGL ein statisches Bild oder einen Verlauf zeigen.",
   "mobil": "Touch-Ziehen zeichnet die Spur, Scrollen muss möglich bleiben. Ohne Eingabe eine ruhige Leerlauf-Bewegung oder ein statisches Bild. Niedrigere Simulationsauflösung, bei schwacher GPU abschalten.",
   "reduzierte_bewegung": "Abschalten und durch ein statisches Bild ersetzen. Höchstens bei aktiver Eingabe ohne Nachlauf zeigen.",
   "barrierefreiheit": "Canvas mit aria-hidden. Die Spur darf den Kontrast von Text nicht verschlechtern, deshalb nicht hinter Fließtext legen. Keine Information nur über den Effekt vermitteln."
  },
  "geprueft": "02.11.2026",
  "notiz": "Welt: Rezept saas-produkt-praezise, erfundene Lüftungs-Software Nerostrom aus Wiesbaden (Projekt Kita Biebrich). Das Rezept passt, weil die Strömung hier Produktfunktion ist: Der Zeiger ist die Zuluft im echten HTML-Produkt-UI, keine Agentur-Geste (daher kein Widerspruch zu cursor-follower in nicht_verwenden). Die Simulation füllt bewusst nur die Produktansicht statt des ganzen Viewports: kein Effekt hinter Fließtext, ein Drittel der Pixel. Stable-Fluids-Werte von landonorris.com (OFF+BRAND), dazu ein eigenes Rauchfeld. Drei Varianten per Segment-Umschalter: Rauch (Dye), Vektoren (eigene Form der Spur: Pfeile je Rasterzelle), Verzerrung (Grundriss weicht der Strömung aus, leicht farbige Lichtbrechung). Sonde zeigt Zeigergeschwindigkeit und Staudruck. Pausiert ohne Eingabe nach 4 s, außerhalb des Bildschirms und im Hintergrund-Tab. Markenton #5fb4ff statt #7170ff (laut Rezept austauschbar). Echter Einsatz als Vollbild-Hintergrund: Canvas fixed hinter dem Inhalt, Koordinaten auf den Viewport beziehen. AD-Review 01.11.2026: Note 4 Zugang 02.11.2026: Knopf „Bewegung anhalten/Abspielen“ in der Produktansicht (unten rechts, unter 1100 px oben rechts; aria-pressed): pause() und die Bildschleife bleibt stehen; FUNDUS_DEMO.pause nutzt dieselbe Funktion, in Vorschau und bei reduzierter Bewegung ausgeblendet; Werte-Zeile #5d626a → --leise (6:1); Pfad-Trenner „/“ per CSS ::before (dekorativ); Kontrastmodus-Rahmen für Knöpfe. Korrektur 02.11.2026: Variante autonom (Knopf „Nebelprobe“) nach dem Prinzip Fluid Dynamics Mist/Shooting, eigener Code: Zuluftstrahl Z1 mit Stößen und Fensterböen nach Zeitplan, Nebel bleibt im Raum, keine Ruhepause, Pause-Knopf bleibt, Standbild bei reduzierter Bewegung. Die drei Darstellungen sind jetzt Varianten nach Regel 13 (?v=rauch|vektoren|verzerrung|autonom, replaceState); ohne ?v= wechselt die Vorführung wie bisher Rauch, Vektoren, Verzerrung, mit ?v= bleibt sie in der Variante.",
  "varianten": [
   {
    "id": "rauch",
    "name": "Rauch: der Zeiger ist die Zuluft",
    "knopf": "Rauch",
    "wann": "Produkt-Hero einer technischen Software (Lüftung, Simulation, Daten), in dem der Besucher die Strömung selbst anstößt.",
    "werte": {
     "rauch": "Dye-Feld 0,25 × Sicht, × 0,985 je Bild, Stempel 0,5 × cursor_size",
     "antrieb": "Zeiger oder Finger, Ruhe nach 4 s ohne Eingabe"
    }
   },
   {
    "id": "vektoren",
    "name": "Vektoren: Pfeil je Rasterzelle",
    "knopf": "Vektoren",
    "wann": "Wenn das Produkt Messwerte oder Felder zeigt (Wind, Verkehr, Energie) und die Spur sachlich statt atmosphärisch wirken soll.",
    "werte": {
     "vektoren": "Pfeil je 22-px-Rasterzelle, Länge min(1,4 · |v|, 1) × 0,44 Zelle, ab |v| 0,015 sichtbar"
    }
   },
   {
    "id": "verzerrung",
    "name": "Verzerrung: Grundriss weicht der Strömung aus",
    "knopf": "Verzerrung",
    "wann": "Bild, Plan oder Typo soll unter dem Zeiger flüssig nachgeben, ohne sichtbaren Rauch (Studio, Architektur, Ausstellung).",
    "werte": {
     "verzerrung": "Versatz = v × 0,045 (uv), Farbkanäle R/G/B mit 1,18 / 1 / 0,82 versetzt"
    }
   },
   {
    "id": "autonom",
    "name": "Nebelprobe: Strömung ohne Zeiger",
    "knopf": "Nebel autonom",
    "wann": "Touch-Geräte und Hero-Flächen, auf denen kein Zeiger die Simulation antreibt: Quellen am Rand blasen nach Zeitplan, mit Pause-Knopf und Standbild.",
    "werte": {
     "quellen": "Zuluft Z1 als Strahl (0,55 je Bild, schwenkt ± 35° um die Raummitte, Stoß alle 4,8 s: 0,45 + 0,55 · e^(−7·Phase)); Fenster F1–F3 reihum alle 3,2 s eine weiche Böe nach unten (0,28 je Bild, 1,4 s, Radius 2,2 × cursor_size)",
     "nebel": "Dye × 0,988 je 60-Hz-Bild (Halbwertszeit ≈ 1 s), Menge 0,07 je Bild am Auslass, 0,05 an der Böe; Farbe #ccdbed, Deckung (1 − e^(−1,7·n)) × 0,7, außerhalb des Raums × 0,12",
     "ruhe": "keine Ruhepause nach 4 s; läuft, solange sichtbar, im Vordergrund-Tab und nicht angehalten",
     "zeiger": "Zeiger und Finger wirken zusätzlich wie in der Grundvariante",
     "standbild": "reduzierte Bewegung und ohne WebGL: Stromlinien von Z1 plus weiche Nebelwolken als Canvas-Bild"
    }
   }
  ]
 }
}