{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "token-filmisch-shader",
 "name": "Animationsstil „Shader linear“ (Zeit linear, Form im Material)",
 "name_en": "Linear progress, shaped in shader",
 "kurz": "Showreel-Standbilder einer Ludwigsburger Kamerafrau: uProgress läuft linear, jeder Pixel blendet mit eigenem smoothstep-Fenster über, versetzt nach Helligkeit, Rauschen oder Abstand zum Klick; scrubbar und umkehrbar.",
 "kategorie": "Animationsstile",
 "kategorie_slug": "animationsstile",
 "kategorie_nr": 14,
 "bau_chat": "C6",
 "prioritaet": "C",
 "trendstatus": "aufsteigend",
 "belegstatus": "teilbelegt",
 "website_belege": 1,
 "stimmung": [
  "filmisch",
  "warm",
  "experimentell"
 ],
 "stimmung_roh": [
  "experimentell",
  "organisch",
  "filmisch"
 ],
 "technik": [
  "webgl-shader",
  "gsap",
  "three",
  "ogl"
 ],
 "technik_gruppen": [
  "gsap",
  "webgl"
 ],
 "leistungskosten": "hoch",
 "steckbrief": {
  "beschreibung": "Ein Animationsstil für WebGL-Übergänge: Die globale Zeit (Uniform uProgress) läuft linear und eher lang, 1,2 bis 2,6 s. Die Kurve entsteht erst im Shader, pro Pixel per smoothstep mit räumlichem Versatz aus Helligkeit, Rauschen oder Abstand zum Klickpunkt. So bewegt sich das Bild wie Material und nicht wie ein Rechteck. DOM-Elemente drumherum folgen mit einer weichen Kurve wie sine.inOut.",
  "warum_es_wirkt": "Jede Bildregion hat ihren eigenen Ablauf, deshalb wirkt der Übergang organisch und kostbar. Weil die Grundzeit linear ist, lässt er sich steuern: scrubben, anhalten, umkehren.",
  "wann_einsetzen": "WebGL-Slider, Seitenübergänge mit Bildern und Hero-Wechsel in Award-orientierten Projekten.",
  "wann_nicht": "Ohne WebGL-Kompetenz im Team oder bei knappem Performance-Budget.",
  "varianten": [
   "Helligkeitsbänder: helle Bildteile zuerst, BANDS 12 (Codrops Demo 20)",
   "Rauschmaske",
   "Radial ab Klickpunkt",
   "Scroll-gescrubbt: uProgress = Scrollfortschritt"
  ],
  "umsetzung": "GLSL: float local = clamp((uProgress − offset · SPREAD) / FLIGHT, 0., 1.); local = smoothstep(0., 1., local); gl_FragColor = mix(alt, neu, local). Mit SPREAD + FLIGHT = 1 ist bei uProgress = 1 jeder Pixel fertig. Offset aus Helligkeit, Noise oder Distanz. GSAP: gsap.to(uniforms.uProgress, { value: 1, duration: 2.6, ease: 'none' }). Gerendert wird nur während des Übergangs. Texte wechseln bei 50 %.",
  "mobil": "Kürzere Dauer und niedrigere Render-Auflösung.",
  "reduzierte_bewegung": "Einfache Überblendung ohne Versatz, keine automatische Diashow.",
  "barrierefreiheit": "Canvas mit aria-hidden, echte Bilder mit alt im DOM. Diashow mit Pause-Knopf, Pfeiltasten am Bild, Bildwechsel per aria-live angesagt. Ohne WebGL eine einfache Überblendung mit Hinweis."
 },
 "messwerte": {
  "easing": "global none; lokal smoothstep (≈ sine.inOut)",
  "dauer_ms": "Skala: 1200 / 1800 / 2600",
  "stagger_ms": "räumlich über SPREAD (Anteil der Gesamtzeit, z. B. 0,6)",
  "distanz": "",
  "sonstiges": "SPREAD 0,6; FLIGHT 0,4; BANDS 12",
  "herkunft": "beobachtet",
  "quelle": "https://raw.githubusercontent.com/codrops/SlideshowAnimations/main/js/demo20/slideshow.js"
 },
 "kurve": {
  "bezier": [
   0.37,
   0,
   0.63,
   1
  ],
  "css": "cubic-bezier(0.37, 0, 0.63, 1)",
  "name": "sine.inOut",
  "dauer_ms": 1200
 },
 "gesehen_bei": [
  {
   "seite": "Codrops Demo – Slideshow Animations (Demo 20, WebGL)",
   "url": "http://tympanus.net/Development/SlideshowAnimations/",
   "auszeichnung": "",
   "beobachtung": "progress 0 → 1 in 2,6 s mit ease none; Timing im Shader über SPREAD 0,6 / FLIGHT 0,4 / BANDS 12.",
   "art": "demo"
  },
  {
   "seite": "Immersive Garden",
   "url": "https://immersive-g.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): Seitenwechsel-Shader mischt Ansichtstexturen (tPrevViewBg/Ui, tView1/2) über Rauschmaske mit smoothstep (noiseMaskShape, cornerDist); DOM-Ebenen danach per GSAP sine.inOut (.5s).",
   "art": "website",
   "browser_gemessen": true
  }
 ],
 "tutorials": [
  {
   "titel": "GitHub: codrops/SlideshowAnimations",
   "url": "https://github.com/codrops/SlideshowAnimations"
  }
 ],
 "kombinierbar_mit": [
  "shader-uebergang-dissolve",
  "token-kinetisch-inout"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/animationsstile/token-filmisch-shader/",
  "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-filmisch-shader/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/animationsstile/token-filmisch-shader/demo"
 },
 "herkunft": {
  "quelldateien": [
   "galerien_stile.json",
   "patch-belege-2.json"
  ],
  "pruefnotizen": [
   "patch-belege-2.json: 1 Produktionsbeleg (+ Thibault Guignand im Muster shader-uebergang-dissolve); exakte Shader-Dauer nicht im Bundle ablesbar."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Showreel-Standbilder einer Ludwigsburger Kamerafrau: uProgress läuft linear, jeder Pixel blendet mit eigenem smoothstep-Fenster über, versetzt nach Helligkeit, Rauschen oder Abstand zum Klick; scrubbar und umkehrbar.",
  "demo": true,
  "abhaengigkeiten": [
   "gsap@3.15.0",
   "three@0.186.0"
  ],
  "werte": {
   "progress": "gsap.to(uProgress, { value: 1, ease: 'none' }), global linear",
   "dauer_ms": "Skala 1200 / 1800 / 2600; Standard 2600, Touch 1800",
   "lokal": "local = smoothstep(0, 1, clamp((uProgress − offset · SPREAD) / FLIGHT, 0, 1)); Farbe = mix(alt, neu, local), keine Verschiebung",
   "spread": 0.6,
   "flight": 0.4,
   "versatz_helligkeit": "offset = 1 − floor(clamp(Luma · 1.25) · BANDS) / (BANDS − 1), BANDS 12, helle Bildteile zuerst; Luma aus 5 Abtastungen im Abstand 3 px gemittelt",
   "versatz_rauschen": "offset = smoothstep(0.15, 0.85, fbm(uv · 2.2 + Seed)), 4 Oktaven, neuer Seed je Wechsel",
   "versatz_radial": "offset = Abstand zum Klickpunkt / Abstand zur fernsten Ecke ± 0.06 fbm",
   "dom": "Titel und Unterschrift 500 ms Opazität mit sine.inOut cubic-bezier(0.37, 0, 0.63, 1), Wechsel bei p = 0.5; Buttons 200 ms dieselbe Kurve",
   "scrub": "Schieberegler setzt p direkt; beim Loslassen ab 0.5 weiter zu 1, sonst zurück zu 0, Restdauer anteilig",
   "diashow": "Halten 3200 ms (Vorführung 600 ms), Pause-Knopf",
   "pixelratio": "Desktop max. 2, Touch max(1, min(dpr, 2) · 0.6); Render nur während des Übergangs",
   "klickring": "44 px, Deckkraft 0.9 → 0, scale 0.4 → 1.6, 700 ms sine.inOut",
   "reduziert": "Überblendung 500 ms (SPREAD 0, FLIGHT 1), keine automatische Diashow",
   "farben": "#0e0e0e Grund, #f2f2f2 Text, #8a8a8a Unterschrift und Zähler, #1a1a1a Platzhalter",
   "schrift": "Instrument Serif für Name und Filmtitel clamp(1.5rem, 3vw, 2.75rem)/1.1, Instrument Sans 15 px für UI, Fragment Mono 12 px Tabellenziffern für Unterschrift, Zähler und Werte",
   "format": "Rahmen 2.39 : 1, Telefon 1 : 1; Standbilder 1600 × 900 auf Canvas gemalt, object-fit cover im Shader"
  },
  "ausloeser": "klick",
  "touch": "Tippen aufs Bild wechselt weiter (radial ab Tippunkt), waagerechtes Wischen vor oder zurück, senkrecht scrollt die Seite. Dauer 1800 ms, Render-Auflösung reduziert, Schieberegler und Knöpfe mit großen Tippzielen.",
  "reduziert": "Kein Versatz pro Pixel: einfache Überblendung in 500 ms, Texte wechseln ohne Blende, die Diashow startet nicht von selbst.",
  "korrekturen": {
   "beschreibung": "Ein Animationsstil für WebGL-Übergänge: Die globale Zeit (Uniform uProgress) läuft linear und eher lang, 1,2 bis 2,6 s. Die Kurve entsteht erst im Shader, pro Pixel per smoothstep mit räumlichem Versatz aus Helligkeit, Rauschen oder Abstand zum Klickpunkt. So bewegt sich das Bild wie Material und nicht wie ein Rechteck. DOM-Elemente drumherum folgen mit einer weichen Kurve wie sine.inOut.",
   "warum_es_wirkt": "Jede Bildregion hat ihren eigenen Ablauf, deshalb wirkt der Übergang organisch und kostbar. Weil die Grundzeit linear ist, lässt er sich steuern: scrubben, anhalten, umkehren.",
   "wann_einsetzen": "WebGL-Slider, Seitenübergänge mit Bildern und Hero-Wechsel in Award-orientierten Projekten.",
   "wann_nicht": "Ohne WebGL-Kompetenz im Team oder bei knappem Performance-Budget.",
   "varianten": [
    "Helligkeitsbänder: helle Bildteile zuerst, BANDS 12 (Codrops Demo 20)",
    "Rauschmaske",
    "Radial ab Klickpunkt",
    "Scroll-gescrubbt: uProgress = Scrollfortschritt"
   ],
   "umsetzung": "GLSL: float local = clamp((uProgress − offset · SPREAD) / FLIGHT, 0., 1.); local = smoothstep(0., 1., local); gl_FragColor = mix(alt, neu, local). Mit SPREAD + FLIGHT = 1 ist bei uProgress = 1 jeder Pixel fertig. Offset aus Helligkeit, Noise oder Distanz. GSAP: gsap.to(uniforms.uProgress, { value: 1, duration: 2.6, ease: 'none' }). Gerendert wird nur während des Übergangs. Texte wechseln bei 50 %.",
   "mobil": "Kürzere Dauer und niedrigere Render-Auflösung.",
   "reduzierte_bewegung": "Einfache Überblendung ohne Versatz, keine automatische Diashow.",
   "barrierefreiheit": "Canvas mit aria-hidden, echte Bilder mit alt im DOM. Diashow mit Pause-Knopf, Pfeiltasten am Bild, Bildwechsel per aria-live angesagt. Ohne WebGL eine einfache Überblendung mit Hinweis."
  },
  "geprueft": "01.11.2026",
  "notiz": "Rezept fotograf-film-bild-zuerst (Film-Variante, dunkel): erfundene Kamerafrau Nadja Wilke, Ludwigsburg, fünf eigene, auf Canvas gemalte Standbilder (Neckarfähre, Weinberg, Allee, Tankstelle, Küche). Das Rezept verbietet Bildverzerrung; dieser Shader verschiebt und tönt nichts, er bestimmt nur, wann jeder Pixel überblendet. Das bleibt ein Crossfade und passt deshalb. Zeitleiste zeigt uProgress linear mit Schieberegler (scrubbar, umkehrbar) und einen Kurvenschreiber mit drei lokalen smoothstep-Kurven. Umschalter für Versatz und Dauer. Vorführung wechselt je Runde die Versatz-Art, Radial mit gedachtem Klick. Referenzen (nur Prinzipien): tympanus.net (SlideshowAnimations Demo 20), a24films.com, mubi.com, nadavkander.com. AD-Review 01.11.2026: Note 4. Zugang 02.11.2026: Legende „dunkel“ Text #6e6e6e → #828282 (5,0:1), Strich bleibt #6e6e6e (--f); Umschalter-Gruppen mit flex-wrap (320 px ohne Querscrollen); Knopf-Rahmen im Kontrastmodus."
 }
}