{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "shader-embed-no-code",
 "name": "No-Code-Shader-Hintergründe als Embed (Unicorn Studio, Paper Shaders)",
 "name_en": "No-code shader backgrounds as embed",
 "kurz": "Ein Shader-Hintergrund aus dem No-Code-Editor: Lichtstrahlen fallen wie durchs Nordfenster einer Görlitzer Uhrenmanufaktur, umschaltbar auf Körnung und Raster, mit Poster-Fallback.",
 "kategorie": "3D & WebGL",
 "kategorie_slug": "3d-webgl",
 "kategorie_nr": 11,
 "bau_chat": "C5",
 "prioritaet": "B",
 "trendstatus": "aufsteigend",
 "belegstatus": "belegt",
 "website_belege": 3,
 "stimmung": [
  "präzise",
  "filmisch"
 ],
 "stimmung_roh": [
  "immersiv",
  "modern",
  "filmisch",
  "technisch"
 ],
 "technik": [
  "webgl-shader",
  "canvas",
  "vanilla-js"
 ],
 "technik_gruppen": [
  "js",
  "webgl",
  "canvas"
 ],
 "leistungskosten": "mittel",
 "steckbrief": {
  "beschreibung": "Ein animierter WebGL-Hintergrund wird nicht programmiert, sondern in einem visuellen Editor gebaut. Typisch sind Verlauf, Lichtstrahlen, Noise, Dither, Flüssigkeit oder Glas. Unicorn Studio arbeitet mit Ebenen und Effekten und exportiert ein Embed oder eine JSON-Datei. Paper Shaders gibt es als npm-Paket (@paper-design/shaders bzw. -react) mit Parametern. Eingebunden wird ein Container mit Projekt-ID (data-us-project) oder eine React-Komponente mit Farb-, Geschwindigkeits- und Dichteparametern. Die Laufzeit pausiert außerhalb des Viewports und bei verdecktem Tab. Lazy-Load sowie DPI- und FPS-Grenzen steuern die Last. Typische Orte: Hero, Footer-Bühne, CTA-Band, Karten-Hintergründe.",
  "warum_es_wirkt": "Shader-Ästhetik wie auf Award-Seiten, ohne dass ein WebGL-Entwickler nötig ist. Designer stellen Bewegung, Farbe und Interaktion selbst ein. Gegenüber einem Video bleibt der Hintergrund gestochen scharf, reagiert auf die Maus und ist oft kleiner.",
  "wann_einsetzen": "Für Atmosphäre in Hero und Footer, bei Produkt-Launches und auf Seiten ohne starkes Fotomaterial. In Template-Baukästen lassen sich Szenen austauschen, die Parameter werden zu Theme-Variablen.",
  "wann_nicht": "Wenn der Shader nur generischer Glow oder Aurora ist, das wirkt nach Template oder KI. Nicht ohne Fallback bei einer Zielgruppe mit schwacher Hardware. Nicht mehrere Szenen gleichzeitig im Viewport. Nicht, wenn Inhalte im Canvas stecken müssten, denn dort sind sie nicht durchsuchbar.",
  "varianten": [
   "Unicorn-Studio-Embed per data-us-project (Szene vom CDN) oder data-us-project-src (selbst gehostetes JSON)",
   "Paper Shaders als React-Komponente (MeshGradient, GrainGradient, GodRays, Dithering, Warp, PulsingBorder u. a.)",
   "Ambient-Szene im Footer mit reduzierter Deckkraft (every.to: opacity .6)",
   "Maus-reaktive Szene (Spotlight, Verzerrung), siehe cursor-masken-reveal",
   "Statischer Export als Bild oder Video als Fallback",
   "Plugin-Variante für Framer oder Webflow",
   "Selbst gebaut statt eingebettet: derselbe Effekt als eigener Shader ohne Paket und ohne Verbindung zu Dritten, dafür mehr Aufwand und eigene Wartung (Variante eigen der Demo)"
  ],
  "umsetzung": "Unicorn Studio: unicornStudio.umd.js in gepinnter Version laden (z. B. v2.4.3). Container mit data-us-project=ID, data-us-lazyload=true, data-us-dpi 1–1.5, data-us-scale 0.5–1, data-us-fps 30–60 sowie data-us-alttext und data-us-arialabel. UnicornStudio.init() nach dem Rendern aufrufen, in SPAs beim Unmount scene.destroy(). Mit scene.setVariable() an Theme oder Markenfarbe koppeln. Paper Shaders: npm i @paper-design/shaders-react, Version pinnen (0.0.x hat Breaking Changes). Zum Beispiel <MeshGradient colors={[…]} distortion swirl speed={0.2} />, Container absolut hinter dem Inhalt. Immer ein Poster oder einen CSS-Verlauf als Fallback in den Container legen, Canvas mit aria-hidden. Die Last im Performance-Panel auf einem Mittelklasse-Handy prüfen. Die unter den Quellen genannte llms.txt von Unicorn Studio ist Herstellerdoku zur Laufzeit-API, keine Empfehlung für die Kundenseite; eine eigene llms.txt ist optional und ohne belegte Wirkung bei Google (für AI Overviews und AI Mode laut Google keine neuen Dateien nötig).",
  "mobil": "DPI auf 1 und Scale auf 0.5–0.75 senken, 30 fps, Maus-Interaktion abschalten (interactivity.mouse.disableMobile). Bei schwacher GPU ein Standbild zeigen.",
  "reduzierte_bewegung": "Szene anhalten (speed 0 oder fester Frame) oder durch ein Standbild ersetzen. Die Farbwirkung bleibt.",
  "barrierefreiheit": "Canvas ist rein dekorativ (aria-hidden) oder bekommt einen sinnvollen Alt-Text. Den Textkontrast an der hellsten und an der dunkelsten Stelle des bewegten Hintergrunds prüfen, bei Bedarf ein Overlay legen. Keine schnellen Helligkeitswechsel."
 },
 "messwerte": {
  "easing": "linear (Zeit läuft im Shader)",
  "dauer_ms": "Endlosschleife; Geschwindigkeit als Parameter (Daylight speed .75)",
  "stagger_ms": "",
  "distanz": "",
  "sonstiges": "every.to: Lazy-Load an, Szene mit opacity .6 als Footer-Ambient. Daylight (God Rays): density .3, spotty .3, midIntensity .4, midSize .2, intensity .8, bloom .4, speed .75. Unicorn-Runtime laut Drittquelle ca. 29 KB gzip, pausiert außerhalb des Viewports; Free-Plan blendet Logo ein, keine kommerzielle Nutzung.",
  "herkunft": "beobachtet",
  "quelle": "https://every.to/ (HTML); https://www.daylightcomputer.com/_next/static/chunks/7440-9ba07b025129972c.js; Unicorn-Laufzeitdoku https://www.unicorn.studio/unicornstudio-llms.txt"
 },
 "kurve": {
  "bezier": [
   0,
   0,
   1,
   1
  ],
  "css": "cubic-bezier(0, 0, 1, 1)",
  "name": "linear",
  "dauer_ms": 75
 },
 "gesehen_bei": [
  {
   "seite": "Every",
   "url": "https://every.to/",
   "auszeichnung": "",
   "beobachtung": "Footer-Hintergrund als Unicorn-Studio-Szene: div data-ambient-us-project=… data-us-lazyload=true class=footer-ambient-blob … opacity-60 pointer-events-none; eigenes Loader-Modul ruft window.UnicornStudio.init() und zerstört verwaiste Szenen bei Routenwechsel (destroyStaleUnicornScenes) (HTML + Chunk _next/static/chunks/25dq5t42vky99.js).",
   "art": "website"
  },
  {
   "seite": "Daylight Computer",
   "url": "https://www.daylightcomputer.com/",
   "auszeichnung": "",
   "beobachtung": "Paper-Shaders-Laufzeit im Bundle (paperShaderMount, data-paper-shader, Pause bei visibilitychange); God-Rays-Shader mit Parametern colors [#a600ff6e, #6200fff0, #ffffff, #33fff5], density .3, spotty .3, midIntensity .4, midSize .2, intensity .8, bloom .4, speed .75 (Chunk 7440-9ba07b025129972c.js; können Bibliotheks-Presets sein).",
   "art": "website"
  },
  {
   "seite": "Attio",
   "url": "https://www.attio.com/",
   "auszeichnung": "",
   "beobachtung": "Paper-Shaders-Laufzeit (ShaderMount mit data-paper-shader, visibilitychange-Pause) im Haupt-Bundle; in der Nähe Zustands-Presets für eine animierte Eingabe-Visualisierung (a_enter, c_typing, d_complete mit noise.amount .025/.01, speed 2.5/2) (Chunk 1qliie6mbb07i.js).",
   "art": "website"
  },
  {
   "seite": "Osmo – Spotlight Cursor (Unicorn Studio)",
   "url": "https://www.osmo.supply/resource/spotlight-cursor-unicorn-studio",
   "auszeichnung": "",
   "beobachtung": "Fertige Ressource: Szene als selbst gehostetes JSON (data-us-project-src) mit data-us-scale 1, data-us-dpi 1, data-us-lazyload; Script unicornStudio.umd.js v2.2.7 via jsDelivr.",
   "art": "demo"
  },
  {
   "seite": "Codrops – WebGL for Designers (03/2026)",
   "url": "https://tympanus.net/codrops/2026/03/04/webgl-for-designers-creating-interactive-shader-driven-graphics-directly-in-the-browser/",
   "auszeichnung": "",
   "beobachtung": "Artikel über Shader-Grafik direkt im Browser-Editor (per Suche gefunden; Inhalt hinter Bot-Schutz, nicht gelesen).",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "Unicorn Studio – Embed-Dokumentation",
   "url": "https://www.unicorn.studio/docs/embed/"
  },
  {
   "titel": "Unicorn Studio Runtime Control Guide (llms.txt)",
   "url": "https://www.unicorn.studio/unicornstudio-llms.txt"
  },
  {
   "titel": "Paper Shaders – Übersicht aller Shader",
   "url": "https://shaders.paper.design/"
  },
  {
   "titel": "paper-design/shaders (GitHub)",
   "url": "https://github.com/paper-design/shaders"
  }
 ],
 "kombinierbar_mit": [
  "mesh-gradient-shader",
  "grain-noise-overlay",
  "footer-3d-buehne",
  "cursor-masken-reveal",
  "spline-embed",
  "token-filmisch-shader"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/3d-webgl/shader-embed-no-code/",
  "meta": "https://cecodesign.de/lab/fundus/3d-webgl/shader-embed-no-code/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/3d-webgl/shader-embed-no-code/demo"
 },
 "herkunft": {
  "quelldateien": [
   "patch-luecken-b.json"
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Ein Shader-Hintergrund aus dem No-Code-Editor: Lichtstrahlen fallen wie durchs Nordfenster einer Görlitzer Uhrenmanufaktur, umschaltbar auf Körnung und Raster, mit Poster-Fallback.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "linear (Zeit im Shader: zeit += dt × speed)",
   "godrays": "density .3, spotty .3, midIntensity .4, midSize .2, intensity .8, bloom .4, speed .75 (gemessen bei Daylight, Paper Shaders)",
   "graingradient": "softness .7, intensity .5, noise .35, speed .5 (eigenes Preset)",
   "dithering": "type 4x4 (Bayer), pxSize 3 CSS-px, intensity .85, speed .4 (eigenes Preset)",
   "farben": "Grund #23282f, Strahlen #f1ede4, Bloom #e8e2d6, Körnung #3b414a + #d9dadb, Raster #5c626b; aus CSS-Variablen gelesen (wie scene.setVariable / colors=[…])",
   "laufzeit_desktop": "dpi 1.5, scale 1, fps 60",
   "laufzeit_touch": "dpi 1, scale .5, fps 30, Maus-Interaktion aus",
   "vorschau_scale": ".6",
   "szenenwechsel_ms": 450,
   "footer_ambient": "dieselbe Szene, Anthrazit-Overlay .4 = Szene mit Deckkraft .6 (every.to)",
   "zeiger": "Lichtquelle folgt dem Zeiger, Lerp .05 pro Frame, Einfluss x ±.12 (GodRays)",
   "ui_kurve": "cubic-bezier(0.1, 0.6, 0.4, 1), 150 ms (Knöpfe), 250 ms (Termin-Knopf)",
   "pause": "IntersectionObserver auf Bühne und Fuß, visibilitychange",
   "vorfuehrung": "GodRays 8 s, GrainGradient 5 s, Dithering 5 s, gedachter Zeiger kreist"
  },
  "ausloeser": "dauer",
  "touch": "Szene rendert mit halber Auflösung (dpi 1, scale .5) und 30 fps; die Lichtquelle folgt keinem Zeiger. Szenen per Tippen umschaltbar, Uhr steht über dem Text.",
  "reduziert": "Szene steht als Standbild (Zeit eingefroren), Szenenwechsel ohne Überblendung, kein Zeigereinfluss, Sekundenzeiger steht. Die Farbwirkung bleibt.",
  "korrekturen": {
   "beschreibung": "Ein animierter WebGL-Hintergrund wird nicht programmiert, sondern in einem visuellen Editor gebaut. Typisch sind Verlauf, Lichtstrahlen, Noise, Dither, Flüssigkeit oder Glas. Unicorn Studio arbeitet mit Ebenen und Effekten und exportiert ein Embed oder eine JSON-Datei. Paper Shaders gibt es als npm-Paket (@paper-design/shaders bzw. -react) mit Parametern. Eingebunden wird ein Container mit Projekt-ID (data-us-project) oder eine React-Komponente mit Farb-, Geschwindigkeits- und Dichteparametern. Die Laufzeit pausiert außerhalb des Viewports und bei verdecktem Tab. Lazy-Load sowie DPI- und FPS-Grenzen steuern die Last. Typische Orte: Hero, Footer-Bühne, CTA-Band, Karten-Hintergründe.",
   "warum_es_wirkt": "Shader-Ästhetik wie auf Award-Seiten, ohne dass ein WebGL-Entwickler nötig ist. Designer stellen Bewegung, Farbe und Interaktion selbst ein. Gegenüber einem Video bleibt der Hintergrund gestochen scharf, reagiert auf die Maus und ist oft kleiner.",
   "wann_einsetzen": "Für Atmosphäre in Hero und Footer, bei Produkt-Launches und auf Seiten ohne starkes Fotomaterial. In Template-Baukästen lassen sich Szenen austauschen, die Parameter werden zu Theme-Variablen.",
   "wann_nicht": "Wenn der Shader nur generischer Glow oder Aurora ist, das wirkt nach Template oder KI. Nicht ohne Fallback bei einer Zielgruppe mit schwacher Hardware. Nicht mehrere Szenen gleichzeitig im Viewport. Nicht, wenn Inhalte im Canvas stecken müssten, denn dort sind sie nicht durchsuchbar.",
   "varianten": [
    "Unicorn-Studio-Embed per data-us-project (Szene vom CDN) oder data-us-project-src (selbst gehostetes JSON)",
    "Paper Shaders als React-Komponente (MeshGradient, GrainGradient, GodRays, Dithering, Warp, PulsingBorder u. a.)",
    "Ambient-Szene im Footer mit reduzierter Deckkraft (every.to: opacity .6)",
    "Maus-reaktive Szene (Spotlight, Verzerrung), siehe cursor-masken-reveal",
    "Statischer Export als Bild oder Video als Fallback",
    "Plugin-Variante für Framer oder Webflow",
    "Selbst gebaut statt eingebettet: derselbe Effekt als eigener Shader ohne Paket und ohne Verbindung zu Dritten, dafür mehr Aufwand und eigene Wartung (Variante eigen der Demo)"
   ],
   "umsetzung": "Unicorn Studio: unicornStudio.umd.js in gepinnter Version laden (z. B. v2.4.3). Container mit data-us-project=ID, data-us-lazyload=true, data-us-dpi 1–1.5, data-us-scale 0.5–1, data-us-fps 30–60 sowie data-us-alttext und data-us-arialabel. UnicornStudio.init() nach dem Rendern aufrufen, in SPAs beim Unmount scene.destroy(). Mit scene.setVariable() an Theme oder Markenfarbe koppeln. Paper Shaders: npm i @paper-design/shaders-react, Version pinnen (0.0.x hat Breaking Changes). Zum Beispiel <MeshGradient colors={[…]} distortion swirl speed={0.2} />, Container absolut hinter dem Inhalt. Immer ein Poster oder einen CSS-Verlauf als Fallback in den Container legen, Canvas mit aria-hidden. Die Last im Performance-Panel auf einem Mittelklasse-Handy prüfen. Die unter den Quellen genannte llms.txt von Unicorn Studio ist Herstellerdoku zur Laufzeit-API, keine Empfehlung für die Kundenseite; eine eigene llms.txt ist optional und ohne belegte Wirkung bei Google (für AI Overviews und AI Mode laut Google keine neuen Dateien nötig).",
   "mobil": "DPI auf 1 und Scale auf 0.5–0.75 senken, 30 fps, Maus-Interaktion abschalten (interactivity.mouse.disableMobile). Bei schwacher GPU ein Standbild zeigen.",
   "reduzierte_bewegung": "Szene anhalten (speed 0 oder fester Frame) oder durch ein Standbild ersetzen. Die Farbwirkung bleibt.",
   "barrierefreiheit": "Canvas ist rein dekorativ (aria-hidden) oder bekommt einen sinnvollen Alt-Text. Den Textkontrast an der hellsten und an der dunkelsten Stelle des bewegten Hintergrunds prüfen, bei Bedarf ein Overlay legen. Keine schnellen Helligkeitswechsel."
  },
  "geprueft": "02.11.2026",
  "notiz": "Welt: Rezept luxus-manufaktur-stille, erfundene Uhrenmanufaktur Hagedorn aus Görlitz (Bodoni Moda + Instrument Sans, Anthrazit/Weiß, Messing nur als Linie, eigene SVG-Uhr). Der Shader ist ein selbst geschriebener WebGL-Fragment-Shader ohne Bibliothek, aufgebaut wie ein No-Code-Embed: Szenen als Parameter-Presets, Farben aus CSS-Variablen, Laufzeit mit dpi/scale/fps, Pause außerhalb des Viewports, Poster-Fallback ohne WebGL. GodRays nutzt die bei Daylight gemessenen Paper-Werte, Körnung und Raster sind eigene Presets. Eine fixierte Leinwand liegt hinter Hero und Footer, die weiße Sektion deckt sie ab; im Footer wirkt sie per Overlay mit Deckkraft .6 (every.to). Im echten Projekt ersetzt der Embed-Container (data-us-project) bzw. die Paper-Komponente den eigenen Shader. Vorschau rendert mit scale .6 und zeigt die Uhr auf 10:10. AD-Review 01.11.2026: Note 5 Zugang 02.11.2026: Grau für Labels auf Weiß --meta #8b9097 → #71757a (4,6:1). Pause-Knopf (button, aria-pressed, nur Zeichen sichtbar, Name „Bewegung anhalten“) in der Szenenleiste: hält Shader-Schleife und Sekundenzeiger an, gleiche Funktion wie FUNDUS_DEMO.pause; bei reduzierter Bewegung und in der Vorschau aus. Korrektur 02.11.2026: Satz in umsetzung, dass die Unicorn-llms.txt nur Herstellerdoku ist und eine eigene llms.txt „optional, ohne belegte Wirkung bei Google“. Korrektur 02.11.2026: Variante eigen „Selbst gebaut“ (SunBeam-Prinzip aus BUTTONS-SLIDERREV-RECHERCHE Q39, eigener Code, nichts übernommen): Lichtschacht durch ein Sprossenfenster mit drei Feldern, 40 Proben je Pixel sammeln Staub, halbe Auflösung; Vergleich mit Trenner (links Embed-Preset, rechts eigener Pass, Regler als Tastatur-Weg) und Tabelle Aufwand, Gewicht, Kontrolle, Datenschutz, Pflege. Varianten nach Regel 13 (?v=embed|eigen, replaceState); Grundvariante unverändert.",
  "varianten": [
   {
    "id": "embed",
    "name": "Embed-Szene mit Presets",
    "knopf": "Embed",
    "wann": "Kampagne, Produkt-Launch, Prototyp oder Team ohne Shader-Wissen: Szene im Editor (Unicorn Studio, Paper Shaders) bauen, als Embed einbinden, Szenen über Presets und Theme-Variablen tauschen.",
    "werte": {
     "szenen": "GodRays, GrainGradient, Dithering (Werte siehe werte)",
     "laufzeit": "dpi 1.5, scale 1, fps 60; Touch dpi 1, scale .5, fps 30",
     "szenenwechsel_ms": 450
    }
   },
   {
    "id": "eigen",
    "name": "Selbst gebauter Lichtschacht mit Vergleich",
    "knopf": "Selbst gebaut",
    "wann": "Signatur-Effekt der Marke mit Bezug zum Inhalt (hier das Nordfenster der Manufaktur), strenge Vorgaben zu Ladezeit oder Datenschutz, keine Verbindung zu Dritten gewünscht. Nicht, wenn das Team Szenen ohne Entwickler tauschen will.",
    "werte": {
     "technik": "ein Fragment-Shader im Fullscreen-Dreieck, kein Paket, ein Durchlauf (SunBeam-Prinzip, eigener Code)",
     "lichtquelle": "Punkt über dem Bild bei x .10 × Seitenverhältnis, y 1.12 (oben links), Zeiger verschiebt x um ±.08 (Lerp .05)",
     "fenster": "Winkelmaske um die Quelle: Mitte .60 rad ab Senkrechter (wandert ±.035 mit sin(t·.11)), Öffnung .34 rad, 3 Felder, Sprosse .1 Feldbreite, Halbschatten .03 + .10 × Abstand",
     "staub": "40 Proben je Pixel entlang der Linie zur Quelle, Gewicht ×.97 je Probe, Value-Noise mit Maßstab 2.2 × 3.4, Drift (.07, −.05) × t, smoothstep .30–.72, Anteil .5–1",
     "abfall": "exp(−r × .85), Wolken .85 + .15 × noise(t × .2)",
     "farbe": "Grund --anthrazit + --licht × Strahl × .40 + --schein × (Glühen exp(−2.6 r²) × .16 + Feldschein × .05)",
     "speed": 0.6,
     "laufzeit": "scale .5 (halbe Auflösung) auf allen Geräten, dpi 1.5 / Touch 1, fps 60 / Touch 30",
     "vergleich": "Knopf „Vergleich“ (aria-pressed): links GodRays-Preset, rechts eigener Pass; Grenze per Regler 10–90 % (Start 40 %) oder Ziehen am Trenner (44 px breit, touch-action none)",
     "tabelle": "Aufwand, Gewicht (Unicorn-Laufzeit laut Drittquelle rund 29 KB gzip gegenüber kein Paket), Kontrolle, Datenschutz (Anbieter-Server gegenüber eigener Server; vom Kunden prüfen lassen), Pflege, Passt für",
     "vorfuehrung": "5 s eigener Pass allein, dann 7 s Vergleich, Grenze wandert .18–.62 (.4 − .22 × cos), gedachter Zeiger kreist"
    }
   }
  ]
 }
}