{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "atmosphaere-partikel",
 "name": "Atmosphärische Partikel",
 "name_en": "Ambient particles (dust in light, embers, bokeh)",
 "kurz": "Boutique-Hotel am Ratzeburger Domsee: Staub leuchtet nur im Sonnenfleck auf, Glut steigt aus dem Kamin und verlischt, unscharfe Lichterketten atmen über dem See.",
 "kategorie": "3D & WebGL",
 "kategorie_slug": "3d-webgl",
 "kategorie_nr": 11,
 "bau_chat": "C5",
 "prioritaet": "C",
 "trendstatus": "etabliert",
 "belegstatus": "teilbelegt",
 "website_belege": 1,
 "stimmung": [
  "ruhig",
  "filmisch",
  "warm"
 ],
 "stimmung_roh": [
  "atmosphärisch",
  "ruhig",
  "warm"
 ],
 "technik": [
  "canvas",
  "vanilla-js",
  "intersection-observer"
 ],
 "technik_gruppen": [
  "js",
  "canvas"
 ],
 "leistungskosten": "mittel",
 "steckbrief": {
  "beschreibung": "Wenige, ruhige Partikel liegen als Luft über einem Bild: Staub, der nur im Lichtfleck aufleuchtet, Glut, die über einer Feuerstelle aufsteigt und verlischt, oder unscharfe Lichtpunkte (Bokeh) im Vordergrund. Die Partikel gehören zum Motiv. Sie machen ein Standbild lebendig, ohne es zu verändern. Keine Netzwerk-Linien zwischen den Punkten.",
  "warum_es_wirkt": "Das Auge liest feine, langsame Bewegung als Raum und Luft. Ein Foto wirkt dadurch wie ein Blick in einen echten Raum. Weil die Partikel physikalisch plausibel sind (Staub nur im Licht, Glut steigt und kühlt ab, Bokeh ist unscharf und nah), wirken sie wie Teil der Aufnahme und nicht wie Deko.",
  "wann_einsetzen": "Hero oder Stimmungsbild eines Hotels, einer Manufaktur oder eines Restaurants, wenn das Bild selbst Licht, Feuer oder Abendlicht zeigt. Als Experiment oder Eigenprojekt. Nur ein Partikelfeld je Seite.",
  "wann_nicht": "Netzwerk-Linien zwischen Punkten (particles.js-Look der 2010er). Konfetti oder Schnee als Dauerdeko. Partikel über Fließtext oder Formularen. Branchen, die Ruhe und Sachlichkeit verlangen (Gesundheit, Kanzlei, Verein). Bilder ohne Lichtquelle: Staub ohne Lichtstrahl und Glut ohne Feuer wirken aufgesetzt. Glut nur mit echtem Feuer im Bild (Kamin, Holzofen, Grill).",
  "varianten": [
   "staub: helle Staubkörner treiben langsam im Curl-Noise-Feld und leuchten nur dort auf, wo das Bild hell ist (Lichtmaske aus dem Bild selbst)",
   "glut: Funken steigen mit Auftrieb und Flackern auf, kühlen von Gelbweiß über Orange zu Rot ab und verlöschen",
   "bokeh: wenige große, unscharfe Lichtscheiben in drei Tiefenebenen, sehr langsam, leichte Parallaxe zum Zeiger",
   "schnee: nur saisonal und zeitlich begrenzt, nie als Dauerdeko"
  ],
  "umsetzung": "Ein Canvas 2D über dem Bild, pointer-events: none, aria-hidden. Jede Partikelart wird einmal als kleines Sprite (radialer Verlauf) in ein Offscreen-Canvas gezeichnet und dann nur noch per drawImage gestempelt, mit globalCompositeOperation 'lighter' für Licht. Bewegung über ein Curl-Noise-Feld (Rotation eines Rauschfelds, daher wirbelfrei und ohne Klumpen), Tiefe über Größe, Deckkraft und Tempo. Staub: Helligkeit des Bildes an der Partikelstelle aus einer 64er-Kopie des Bildes lesen und als Lichtmaske nutzen. Glut: Auftrieb nach oben, seitliches Flackern, Farbe über die Lebenszeit. Bokeh: wenige große Scheiben mit weichem Rand, drei Ebenen. Auflösung höchstens 1,5 × devicePixelRatio, Anzahl nach Fläche skaliert und auf Telefonen gedeckelt. requestAnimationFrame nur, solange die Bühne sichtbar ist (IntersectionObserver) und der Tab sichtbar ist (visibilitychange). Ab etwa 1000 Partikeln WebGL-Points statt Canvas 2D.",
  "mobil": "Hohe Bildausschnitte, 60 % der Partikel, Pixelverhältnis höchstens 1,5, keine Zeigerreaktion. Pause-Knopf bleibt sichtbar. Bei Glut liegt der Text auf dem Telefon über dem Feuer: dort einen Ausschnitt wählen, in dem das Feuer oben sitzt.",
  "reduzierte_bewegung": "Partikel stehen als Standbild: einmal gezeichnet, keine Schleife. Der Pause-Knopf entfällt dann.",
  "barrierefreiheit": "Rein dekorativ: Canvas mit aria-hidden. Läuft länger als 5 s, also sichtbarer Pause-Knopf (WCAG 2.2.2) als echter button mit aria-pressed. Text liegt nie über dem Partikelfeld ohne Kontrastschicht (WCAG 1.4.3). Keine schnellen Blitze (WCAG 2.3.1): Glut flackert weich, nicht hell-dunkel im Takt."
 },
 "messwerte": {
  "easing": "keins (Physik je Bild); Ein- und Ausblenden der Ebene cubic-bezier(0.37, 0, 0.63, 1) aus token-luxus-weich",
  "dauer_ms": "Lebensdauer Glut 2400–4800, Staub endlos mit Wiederauftauchen am Rand, Ebene ein 1200",
  "stagger_ms": "",
  "distanz": "Staub 4–14 px/s, Glut 40–90 px/s aufwärts (Abnahme ×0.93 pro s), Bokeh 3–8 px/s",
  "sonstiges": "Staub 180 / Glut 130 / Bokeh 28 Partikel auf 1440 × 900, nach Fläche skaliert, auf Telefonen 60 %",
  "herkunft": "eigene Festlegung",
  "quelle": ""
 },
 "kurve": {
  "bezier": [
   0.37,
   0.0,
   0.63,
   1.0
  ],
  "css": "cubic-bezier(0.37, 0, 0.63, 1)",
  "name": "sine.inOut",
  "dauer_ms": 2400
 },
 "gesehen_bei": [
  {
   "seite": "Slider Revolution: Particles Add-on",
   "url": "https://www.sliderrevolution.com/addons/particles/",
   "auszeichnung": "",
   "beobachtung": "Presets u. a. Bokeh (Gold, Aurora, Neon, Frost), Embers, Ember Fountain, Velvet Dust, Fireflies, Soft Snow; dazu eine eigene Gruppe mit der Option „Connect Particles with Lines“ (Ink Network, Filament Mesh). Hover- und Klick-Modus. Nur das Prinzip, kein Code übernommen. Abgerufen 02.11.2026.",
   "art": "website"
  },
  {
   "seite": "Sparticles (simeydotme, GitHub)",
   "url": "https://github.com/simeydotme/sparticles",
   "auszeichnung": "",
   "beobachtung": "Kleine Canvas-Bibliothek für Funkeln, Schnee, Sterne. Optionen count (Standard 50, Warnung über 500), direction, drift, glow. Autor rät, auf Telefonen bei etwa 100 Partikeln oder weniger zu bleiben. Lizenz MPL-2.0. Abgerufen 02.11.2026.",
   "art": "demo"
  }
 ],
 "tutorials": [
  {
   "titel": "web.dev: Improving HTML5 Canvas performance",
   "url": "https://web.dev/articles/canvas-performance"
  },
  {
   "titel": "Bridson, Hourihan, Nordenstam: Curl-noise for procedural fluid flow (SIGGRAPH 2007)",
   "url": "https://history.siggraph.org/?p=115355"
  }
 ],
 "kombinierbar_mit": [
  "cinematic-video-hero",
  "bewegung-pausieren-schalter",
  "grain-noise-overlay",
  "token-luxus-weich",
  "buchungsleiste-datumsbereich"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/3d-webgl/atmosphaere-partikel/",
  "meta": "https://cecodesign.de/lab/fundus/3d-webgl/atmosphaere-partikel/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/3d-webgl/atmosphaere-partikel/demo"
 },
 "herkunft": {
  "quelldateien": [
   "Buttons/SR-Recherche 02.11.2026"
  ],
  "pruefnotizen": [
   "Belege sind ein Produkt-Add-on und eine Bibliothek. Eine Produktionsseite mit ruhigen Atmosphäre-Partikeln (Hotel, Manufaktur) fehlt noch.",
   "Abgrenzung: partikel-punktwolke formt Punkte zu Figuren (Form-Morph), konfetti-erfolg ist ein einmaliges Feedback. Dieses Muster ist dauerhafte, leise Atmosphäre."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Boutique-Hotel am Ratzeburger Domsee: Staub leuchtet nur im Sonnenfleck auf, Glut steigt aus dem Kamin und verlischt, unscharfe Lichterketten atmen über dem See.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "aufbau": "Ein Canvas 2D über dem Hero-Bild (position absolute, pointer-events none, aria-hidden), darüber eine Kontrastschicht aus zwei Verläufen (oben 150 px rgba(24,19,15,.55) → 0, links unten 72° .78 → .5 → 0 bei 62 %), dann Text und Knöpfe.",
   "aufloesung": "devicePixelRatio höchstens 1.5",
   "sprites": "jede Partikelart einmal als radialer Verlauf in ein Offscreen-Canvas gezeichnet (Staub 64 px, Glut 48 px in 10 Farbstufen, Bokeh 128 px Scheibe mit hellerem Rand bei 86 %), danach nur drawImage; Mischung lighter (Staub, Glut) bzw. screen (Bokeh)",
   "anzahl": "nach Fläche: Grundwert × (B × H) / (1440 × 900), höchstens 1.4 × Grundwert, mindestens 12; Telefon und Touch × 0.6",
   "curl_noise": "psi = sin(.0042x + .11t)·cos(.0051y − .07t) + .55·sin(.0093(.8x + .6y) + .17t) + .3·cos(.017(−.5x + .9y) − .13t); Geschwindigkeit = Rotation von psi (finite Differenzen, e 1.5 px)",
   "staub": "Grundwert 180; Tempo 4–14 px/s nach Tiefe z, Drift +0.8 px/s rechts, +1.1 px/s abwärts; Kern r = 1 + 3z, Sprite-Radius 3r; 28 % (z > .72) unscharf mit Radius 6.5r und Deckkraft × .6; Helligkeit (.1 + .9 · Licht) · (.4 + .6 · Funkeln) · (.55 + .45z), Funkeln sin mit 0.4–1.1 rad/s",
   "lichtmaske": "Bild per object-fit-cover-Rechnung in 72 px Breite gezeichnet, Luminanz l → min(1, ((l − .28) / .45)^1.2); ohne Bildzugriff (file://) gleichmäßig .55; Bild in dieser Variante filter brightness(.9)",
   "zeiger": "Staub: Verdrängung im Radius 120 px, Kraft (1 − d/120)² · 60 px/s, Abklingen ×0.04 pro s; Bokeh: Parallaxe ±4 / 8 / 14 px je Ebene, Lerp 2.5/s",
   "glut": "Grundwert 130; Start im Flammenbereich (Bild-UV x .36–.68, y .66); Auftrieb 40–90 px/s, Abnahme ×0.93 pro s; Seitenflackern Curl × 30 plus sin(7t) · 18 px/s²; Leben 2.4–4.8 s; Farbe in 10 Stufen von #fff6d6 über #ff8c30 zu #46100a; Deckkraft Einblenden 8 %, Ausblenden 1 − t^2.2, Flackern ±20 % mit 11 rad/s (weich, kein Blitzen); Radius r 1.2–3 px, Sprite 4.6r → 2.8r",
   "knistern": "alle 3–6 s 6–12 Funken an einer Stelle, Auftrieb × 1.5, seitlich ±30 px/s, Leben × 0.7",
   "bokeh": "28 Scheiben in 3 Ebenen: zwei Lichterketten als Bogen oben (9 Scheiben Ebene 2, 7 Scheiben Ebene 1) und ferne Lichter am Horizont (Ebene 0, y 48–66 %); Radius 8–14 / 18–30 / 40–70 px (Telefon × .75), Deckkraft .42 / .28 / .2 × 0.75–1.15; Pendeln sin(.35t) · (2 + 3·Ebene) px, Atmen 6–10 s ±22 %; Farben 255,190,112 · 255,222,168 · 255,170,120 · 246,206,150",
   "wechsel": "Texte aus 600 ms cubic-bezier(0.37, 0, 0.63, 1), Bild-Überblendung 900 ms, Partikelebene ein 1200 ms, beide mit derselben Kurve (token-luxus-weich)",
   "ui": "Pause-Knopf und Buchungsleiste 150 ms linear; Antwort der Buchungsleiste 300 ms cubic-bezier(0.16, 1, 0.3, 1)",
   "leistung": "requestAnimationFrame nur, wenn der Hero im Viewport ist (IntersectionObserver), der Tab sichtbar ist (visibilitychange) und nicht pausiert; dt höchstens 50 ms"
  },
  "ausloeser": "dauer",
  "touch": "Keine Zeigerreaktion, 60 % der Partikel, Pixelverhältnis ≤ 1.5, hohe Bildausschnitte (800 × 1000) per picture/source; Pause-Knopf links unter dem Text mit 44 px Höhe; Buchungsleiste zweispaltig.",
  "reduziert": "Keine Schleife: die Partikel werden einmal nach 40 simulierten Schritten als Standbild gezeichnet; Pause-Knopf entfällt; Text- und Bildwechsel ohne Überblendung.",
  "korrekturen": {
   "mobil": "Hohe Bildausschnitte, 60 % der Partikel, Pixelverhältnis höchstens 1,5, keine Zeigerreaktion. Pause-Knopf bleibt sichtbar. Bei Glut liegt der Text auf dem Telefon über dem Feuer: dort einen Ausschnitt wählen, in dem das Feuer oben sitzt.",
   "reduzierte_bewegung": "Partikel stehen als Standbild: einmal gezeichnet, keine Schleife. Der Pause-Knopf entfällt dann."
  },
  "geprueft": "02.11.2026",
  "notiz": "Rezept boutique-hotel-gastgeber (Newsreader + Mona Sans breit, Sand/Creme/Holz, token-luxus-weich für Ebenen). Erfundenes Haus Ahrend in Ratzeburg mit Buchungsleiste halb über dem Hero (Rezeptregel) und glaubwürdiger Antwort. Bilder: fenster-licht aus dem Medienfundus, Kaminzimmer und Seeblick selbst mit numpy/scipy erzeugt (medien/atmosphaere-partikel-*). Physik plausibel statt Deko: Staub nur im Licht (Lichtmaske aus dem Bild), Glut nur über dem Feuer, Bokeh als unscharfe Lichterkette vor scharfem Handlauf. Bewusst keine Netzwerk-Linien. Zugangsprüfung: ein Fokus-Hinweis bleibt an den Teilfeldern von input type=date (Feld zeigt per :focus-within eine Kante). Prinzip nach sliderrevolution.com (Particles), kein Code übernommen. AD-Review 02.11.2026: Note 4. Glut und Bokeh sehr stimmungsvoll, Staub dezent; Dopplung des Hero-Bilds mit glas-button dort aufgelöst.",
  "varianten": [
   {
    "id": "staub",
    "name": "Staub im Licht",
    "wann": "Hotel, Manufaktur, Atelier: ein Innenraum mit Sonnenfleck oder Streiflicht; der Staub leuchtet nur dort, wo das Bild hell ist.",
    "werte": {
     "anzahl": 180,
     "tempo": "4–14 px/s",
     "lichtmaske": "((l − .28) / .45)^1.2",
     "zeiger": "Verdrängung 120 px"
    }
   },
   {
    "id": "glut",
    "name": "Glut über dem Feuer",
    "wann": "Kaminzimmer, Holzofen-Restaurant, Grill: nur mit echtem Feuer im eigenen Bild; Funken steigen aus dem Flammenbereich und verlöschen.",
    "werte": {
     "anzahl": 130,
     "auftrieb": "40–90 px/s, ×0.93 pro s",
     "leben": "2.4–4.8 s",
     "knistern": "alle 3–6 s, 6–12 Funken"
    }
   },
   {
    "id": "bokeh",
    "name": "Bokeh-Lichterkette",
    "wann": "Terrasse, Bar, Abendveranstaltung: unscharfe Lichter im Vordergrund vor einem Abendbild; wenige große Scheiben, kaum Bewegung.",
    "werte": {
     "anzahl": 28,
     "radius": "8–14 / 18–30 / 40–70 px",
     "atmen": "6–10 s",
     "parallaxe": "±4 / 8 / 14 px"
    }
   }
  ]
 }
}