{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "velocity-skew-verzerrung",
 "name": "Verzerrung nach Scrollgeschwindigkeit (Skew/Stretch)",
 "name_en": "Scroll velocity skew / stretch",
 "kurz": "Zwölf Hausplakate eines Leipziger Studios kippen beim schnellen Scrollen bis zu 4 Grad und federn beim Stopp zurück, die Bildunterschriften bleiben scharf.",
 "kategorie": "Scroll & Section-Animationen",
 "kategorie_slug": "scroll",
 "kategorie_nr": 5,
 "bau_chat": "C2",
 "prioritaet": "C",
 "trendstatus": "abklingend",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "verspielt",
  "laut",
  "experimentell"
 ],
 "stimmung_roh": [
  "verspielt",
  "experimentell",
  "laut"
 ],
 "technik": [
  "gsap",
  "scrolltrigger",
  "webgl-shader",
  "vanilla-js"
 ],
 "technik_gruppen": [
  "js",
  "gsap",
  "webgl"
 ],
 "leistungskosten": "mittel",
 "steckbrief": {
  "beschreibung": "Die aktuelle Scrollgeschwindigkeit wird gemessen. Bilder oder Blöcke werden proportional dazu geneigt (skewY) oder gestreckt (scaleY), in WebGL auch gekrümmt. Beim Stopp federn sie in die Ruheform zurück. 2026 eher dezent mit höchstens 2 bis 4 Grad oder nur in WebGL-Galerien.",
  "warum_es_wirkt": "Der Scroll bekommt physische Trägheit. Der Inhalt reagiert sichtbar auf die Kraft der Geste.",
  "wann_einsetzen": "Experimentelle Portfolios, Bildergalerien, Studio-Seiten mit verspieltem Ton, eigene Arbeiten statt Kundenprojekte.",
  "wann_nicht": "Bei Text, auf Corporate-Seiten, auf Kundenarbeiten, die verkauft werden sollen, und als Dauereffekt auf allen Elementen. Das wirkt nach 2019.",
  "varianten": [
   "skewY auf Bildern (DOM)",
   "scaleY-Stretch",
   "WebGL-Krümmung der Bildflächen im Vertex-Shader",
   "RGB-Versatz im Fragment-Shader"
  ],
  "umsetzung": "Mit ScrollTrigger die Geschwindigkeit lesen: onUpdate: self => self.getVelocity(). Daraus clamp(−4, 4, v / −300) berechnen. Nur einen stärkeren Ausschlag übernehmen und ihn per gsap.to(proxy, { skew: 0, duration: 0.8, ease: 'power3', overwrite: true }) zurückfedern lassen, gesetzt über gsap.quickSetter(el, 'skewY', 'deg'). Alternativ gsap.quickTo. transform-origin center, will-change: transform. Mit Lenis: lenis.on('scroll', ({ velocity }) => …). Fallstrick: Text wird unscharf, deshalb nur Bildflächen verzerren und Bildunterschriften außerhalb lassen.",
  "mobil": "Abschalten, Touch-Momentum erzeugt starke Spitzen.",
  "reduzierte_bewegung": "Abschalten.",
  "barrierefreiheit": "Rein dekorativ. Keine Information darf an der Verzerrung hängen."
 },
 "messwerte": {
  "easing": "power3 (Rückfedern)",
  "dauer_ms": "600–900",
  "stagger_ms": "",
  "distanz": "max. ±2–4° Skew",
  "sonstiges": "Velocity-Divisor ~300 (empirisch)",
  "herkunft": "typisch",
  "quelle": ""
 },
 "kurve": {
  "bezier": [
   0.25,
   1,
   0.5,
   1
  ],
  "css": "cubic-bezier(0.25, 1, 0.5, 1)",
  "name": "power3.out",
  "dauer_ms": 600
 },
 "gesehen_bei": [
  {
   "seite": "GSAP ScrollSmoother getVelocity() / ScrollTrigger getVelocity()",
   "url": "https://gsap.com/docs/v3/Plugins/ScrollSmoother/",
   "auszeichnung": "",
   "beobachtung": "getVelocity liefert px/s der geglätteten Scrollbewegung – Grundlage für Skew-Effekte.",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "GSAP ScrollSmoother (getVelocity)",
   "url": "https://gsap.com/docs/v3/Plugins/ScrollSmoother/"
  }
 ],
 "kombinierbar_mit": [
  "marquee-laufband",
  "smooth-scroll-lenis"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/scroll/velocity-skew-verzerrung/",
  "meta": "https://cecodesign.de/lab/fundus/scroll/velocity-skew-verzerrung/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/scroll/velocity-skew-verzerrung/demo"
 },
 "herkunft": {
  "quelldateien": [
   "scroll.json",
   "patch-belege-3.json"
  ],
  "pruefnotizen": [
   "patch-belege-3.json: Kein Produktionsbeleg gefunden; bleibt C."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Zwölf Hausplakate eines Leipziger Studios kippen beim schnellen Scrollen bis zu 4 Grad und federn beim Stopp zurück, die Bildunterschriften bleiben scharf.",
  "demo": true,
  "abhaengigkeiten": [
   "gsap@3.15.0",
   "ScrollTrigger@3.15.0"
  ],
  "werte": {
   "geschwindigkeit": "ScrollTrigger.create({ onUpdate: self => self.getVelocity() }) in px/s",
   "skew": "skewY = clamp(−4°, 4°, Geschwindigkeit / −300)",
   "stretch": "scaleY = 1 + clamp(0, 0.08, |Geschwindigkeit| / 15000), transform-origin 50% 0%",
   "rueckfedern": "nur bei stärkerem Ausschlag neu setzen, dann gsap.to(proxy, { wert: 0, duration: 0.8, ease: 'power3.out', overwrite: true }) = cubic-bezier(0.25, 1, 0.5, 1)",
   "setter": "gsap.quickSetter(flächen, 'skewY', 'deg') bzw. 'scaleY'",
   "ziel": "nur die Plakatfläche (.plakat__flaeche, will-change: transform, transform-origin 50% 50%), nie Text",
   "knopf": "translateY −2 px, 300 ms cubic-bezier(0.25, 1, 0.5, 1)",
   "vorfuehrung": "sechs Scroll-Stöße auf 22, 42, 62, 80, 50 und 5 % der Seitenhöhe, je 450–900 ms power2.inOut, dazwischen 750 ms Ruhe, Schleife"
  },
  "ausloeser": "scroll",
  "touch": "Unter (hover: none) startet die Demo mit Variante Aus, weil Touch-Momentum starke Spitzen erzeugt. Über das Pult lässt sich der Effekt zum Vergleich einschalten.",
  "reduziert": "Keine Verzerrung, Variantenwahl gesperrt, Plakate stehen still.",
  "korrekturen": {
   "beschreibung": "Die aktuelle Scrollgeschwindigkeit wird gemessen. Bilder oder Blöcke werden proportional dazu geneigt (skewY) oder gestreckt (scaleY), in WebGL auch gekrümmt. Beim Stopp federn sie in die Ruheform zurück. 2026 eher dezent mit höchstens 2 bis 4 Grad oder nur in WebGL-Galerien.",
   "warum_es_wirkt": "Der Scroll bekommt physische Trägheit. Der Inhalt reagiert sichtbar auf die Kraft der Geste.",
   "wann_einsetzen": "Experimentelle Portfolios, Bildergalerien, Studio-Seiten mit verspieltem Ton, eigene Arbeiten statt Kundenprojekte.",
   "wann_nicht": "Bei Text, auf Corporate-Seiten, auf Kundenarbeiten, die verkauft werden sollen, und als Dauereffekt auf allen Elementen. Das wirkt nach 2019.",
   "varianten": [
    "skewY auf Bildern (DOM)",
    "scaleY-Stretch",
    "WebGL-Krümmung der Bildflächen im Vertex-Shader",
    "RGB-Versatz im Fragment-Shader"
   ],
   "umsetzung": "Mit ScrollTrigger die Geschwindigkeit lesen: onUpdate: self => self.getVelocity(). Daraus clamp(−4, 4, v / −300) berechnen. Nur einen stärkeren Ausschlag übernehmen und ihn per gsap.to(proxy, { skew: 0, duration: 0.8, ease: 'power3', overwrite: true }) zurückfedern lassen, gesetzt über gsap.quickSetter(el, 'skewY', 'deg'). Alternativ gsap.quickTo. transform-origin center, will-change: transform. Mit Lenis: lenis.on('scroll', ({ velocity }) => …). Fallstrick: Text wird unscharf, deshalb nur Bildflächen verzerren und Bildunterschriften außerhalb lassen.",
   "mobil": "Abschalten, Touch-Momentum erzeugt starke Spitzen.",
   "reduzierte_bewegung": "Abschalten.",
   "barrierefreiheit": "Rein dekorativ. Keine Information darf an der Verzerrung hängen."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Rezept kreativstudio-buehne, erfundenes Studio Kranbahn aus Leipzig-Plagwitz (TikTok Sans 75/800, DM Mono, Schwarz, Weiß, Signal #FF5A1F, Riesen-Wortmarke am Ende). Das Rezept verbietet den Effekt auf Case-Bildern, weil er Kundenarbeit verfälscht. Deshalb verzerren sich hier nur die eigenen Hausplakate des Studios (zwölf SVG-Plakate), nie Text oder Kundenprojekte. Umschalter: skewY, scaleY, Aus. Referenzen: cydstumpel.nl, paffi.it, oma.com, hkw.de. AD-Review 01.11.2026: Note 4. Pult startet eingeklappt (data-fundus-pult=\"zu\"), weil es beim Scrollen Plakat-Bildunterschriften und den Abschluss-Knopf verdeckt. Riesen-Wortmarke wird per JS exakt auf Breite eingepasst (vorher rechts abgeschnitten). Zugang 02.11.2026: Riesen-Wortmarke passt sich zusätzlich per ResizeObserver neu ein, wenn das Wort selbst breiter wird (eigene Textabstände 1.4.12); Knopf-Rahmen im Kontrastmodus."
 }
}