{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "token-physik-traege",
 "name": "Animationsstil „Physik träge“ (Lerp, Trägheit, Geschwindigkeit)",
 "name_en": "Inertial / lerp-driven motion (velocity-reactive)",
 "kurz": "Ein Arbeitsstreifen mit Masse: Er folgt Zeiger, Rad und Finger per Lerp, Feder oder quickTo, neigt und spreizt sich mit dem Tempo und gleitet nach dem Wurf aus.",
 "kategorie": "Animationsstile",
 "kategorie_slug": "animationsstile",
 "kategorie_nr": 14,
 "bau_chat": "C6",
 "prioritaet": "A",
 "trendstatus": "aufsteigend",
 "belegstatus": "belegt",
 "website_belege": 3,
 "stimmung": [
  "ruhig",
  "präzise",
  "verspielt"
 ],
 "stimmung_roh": [
  "taktil",
  "flüssig",
  "lebendig",
  "technisch"
 ],
 "technik": [
  "vanilla-js",
  "gsap",
  "inertia",
  "observer",
  "lenis"
 ],
 "technik_gruppen": [
  "js",
  "gsap",
  "lenis"
 ],
 "leistungskosten": "mittel",
 "steckbrief": {
  "beschreibung": "Bewegung ohne feste Tweens. Ein Ist-Wert verfolgt in jedem Frame ein Ziel: per Lerp um einen festen Anteil oder gezogen von einer Feder. Die gemessene Geschwindigkeit steuert sekundäre Effekte wie Neigung, Spreizung, Verzerrung oder timeScale. Nach dem Loslassen gleitet alles mit Trägheit aus. Das ist die Grundsprache fast aller Award-Galerien 2026.",
  "warum_es_wirkt": "Die Seite reagiert auf die Energie der Eingabe. Schnelles Ziehen erzeugt mehr Schwung als langsames. Dadurch fühlt sich Bewegung verbunden und lebendig an, nicht abgespielt.",
  "wann_einsetzen": "Drag-Slider, unendliche Leinwände, 3D-Karussells, Smooth Scroll, Cursor-Follower und alle Effekte, die auf Tempo reagieren sollen.",
  "wann_nicht": "Für diskrete Zustandswechsel wie Menü auf und zu. Auf Seiten, die vor allem gelesen werden, stört Smooth Scroll eher.",
  "varianten": [
   "Lerp, zeitkorrigiert (Lenis-Standard 0,1; beobachtet 0,1 bis 0,165)",
   "gsap.quickTo mit power3.out und 0,6 s",
   "Feder mit stiffness 120 und damping 14 (schwingt leicht über)",
   "InertiaPlugin mit Einrasten",
   "Geschwindigkeit als timeScale mit Rückkehr in 1,2 s (Observer)"
  ],
  "umsetzung": "Zeitkorrigierter Lerp: current += (target − current) × (1 − Math.pow(1 − f, dt × 60)), f = 0,1 bis 0,165, dt höchstens 1/30 s. Geschwindigkeit = (current − last) / dt, geglättet. Sekundäre Effekte daraus ableiten, etwa skewX = clamp(−10, 10, v × 0,002) und Spreizung = min(180, |v| × 0,05). Ein einziger RAF-Loop (oder gsap.ticker) für alles. Ruhezustand erkennen und den Loop anhalten. Drag erst ab 4 px starten, damit Klicks funktionieren.",
  "mobil": "Native Touch-Trägheit respektieren. Beim Wischen folgt der Inhalt dem Finger direkt, träge ist erst das Ausgleiten. Smooth Scroll auf Touch meist aus (syncTouch nur gezielt).",
  "reduzierte_bewegung": "Lerp-Faktor 1, also sofort. Kein Wurf, keine sekundären Effekte, kein Smooth Scroll.",
  "barrierefreiheit": "Kein Scroll-Hijacking: Rad nur über dem Element abfangen, die Seite bleibt normal scrollbar. Tastatur (Pfeiltasten) und Fokus müssen sofort funktionieren. Bilder im Streifen brauchen Alternativtexte, die Region einen Namen."
 },
 "messwerte": {
  "easing": "Produktion: Lenis lerp 0.1 (Lando Norris, K72, Snellenberg), 0.105 (Trionn), 0.165 (Osmo); Demo: quickTo power3.out 0,6 s; Lenis-Ausklang 1,001 − 2^(−10t)",
  "dauer_ms": "quickTo 600; Inertia 350 bis automatisch; Velocity-Rückkehr 1200",
  "stagger_ms": "",
  "distanz": "Spreizung max. 180 px; Neigung max. 20°; Drag-Minimum 4 px",
  "sonstiges": "Trionn: dragResistance 0.12, throwResistance 2500, touchMultiplier 1.2; Osmo: wheelMultiplier 1.25; Feder 120/14",
  "herkunft": "beobachtet",
  "quelle": "https://trionn.com/_next/static/chunks/0eq63v9bib54k.js"
 },
 "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": "Codrops Demo – On-Scroll 3D Carousel",
   "url": "https://tympanus.net/Development/3DCarousel/",
   "auszeichnung": "",
   "beobachtung": "Drag quickTo 0,6 s power3; Inertia 0,35 s; Spin-Faktor 0,12; Federn 120/14; Zeitschritt max. 1/30 s; Observer lockAxis, dragMinimum 4.",
   "art": "demo"
  },
  {
   "seite": "Osmo – 3D Image Carousel",
   "url": "https://www.osmo.supply/resource/3d-image-carousel",
   "auszeichnung": "",
   "beobachtung": "Velocity × 0,005 geklemmt auf ±60 als timeScale, Rückkehr auf ±1 in 1,2 s.",
   "art": "demo"
  },
  {
   "seite": "Codrops – Infinite Parallax Grid",
   "url": "https://tympanus.net/codrops/2025/06/11/building-an-infinite-parallax-grid-with-gsap-and-seamless-tiling/",
   "auszeichnung": "",
   "beobachtung": "Lerp von current zu target pro Frame; Rad-Faktor 0,4; Kachel-Ease 0,5–1,0.",
   "art": "artikel"
  },
  {
   "seite": "Lenis (darkroom.engineering)",
   "url": "https://github.com/darkroomengineering/lenis",
   "auszeichnung": "",
   "beobachtung": "lerp 0,1 als Standard; wheelMultiplier/touchMultiplier 1.",
   "art": "demo"
  },
  {
   "seite": "Osmo Supply",
   "url": "https://www.osmo.supply/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): Lenis({ lerp: .165, wheelMultiplier: 1.25 }), GSAP Draggable + InertiaPlugin 3.15 eingebunden.",
   "art": "website"
  },
  {
   "seite": "Trionn",
   "url": "https://trionn.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): Lenis lerp .105, touchMultiplier 1.2, syncTouch true; Draggable inertia mit dragResistance .12 und throwResistance 2500.",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Lando Norris (OFF+BRAND)",
   "url": "https://landonorris.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): Lenis lerp 0.1 (4×), GSAP Draggable + InertiaPlugin 3.13 im Bundle.",
   "art": "website",
   "browser_gemessen": true
  }
 ],
 "tutorials": [
  {
   "titel": "GSAP InertiaPlugin",
   "url": "https://gsap.com/docs/v3/Plugins/InertiaPlugin/"
  },
  {
   "titel": "Lenis (GitHub)",
   "url": "https://github.com/darkroomengineering/lenis"
  }
 ],
 "kombinierbar_mit": [
  "drag-slider-traegheit-loop",
  "unendliche-leinwand-galerie",
  "3d-karussell-zylinder",
  "endlos-scroll-galerie"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/animationsstile/token-physik-traege/",
  "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-physik-traege/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/animationsstile/token-physik-traege/demo"
 },
 "herkunft": {
  "quelldateien": [
   "galerien_stile.json",
   "patch-belege-2.json"
  ],
  "pruefnotizen": [
   "patch-belege-2.json: 3 Produktionsseiten; Lerp-Bandbreite 0.1–0.165 beobachtet."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Ein Arbeitsstreifen mit Masse: Er folgt Zeiger, Rad und Finger per Lerp, Feder oder quickTo, neigt und spreizt sich mit dem Tempo und gleitet nach dem Wurf aus.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "lerp": "current += (target − current) × (1 − (1 − 0.1)^(dt × 60))",
   "lerp_faktor": 0.1,
   "feder": "stiffness 120, damping 14, Masse 1, Teilschritte 1/240 s",
   "quickto": "power3.out cubic-bezier(0.25, 1, 0.5, 1), 600 ms, bei jedem neuen Ziel vom Ist-Wert neu gestartet",
   "zeitschritt_max_s": 0.0333,
   "geschwindigkeit": "v = (ist − ist_vorher) / dt, geglättet mit Faktor 0.2 pro 60-fps-Frame",
   "neigung": "skewX = clamp(−10°, 10°, v × 0.002)",
   "spreizung": "min(180 px, |v| × 0.05); Karten ab 2,5 Slots von der Mitte um die volle Spreizung versetzt, Nachbarn um bis zu 72 px",
   "bildversatz": "translateX = clamp(−24 px, 24 px, −v × 0.006), Bild auf scale 1.16",
   "drag_minimum_px": 4,
   "wurf": "Ziel += clamp(±4000 px/s, Zeigertempo der letzten 100 ms) × 0.35 s, danach auf die nächste Karte eingerastet",
   "rad_faktor": 1,
   "tastatur": "Pfeil links/rechts = eine Karte, gleitet mit demselben Modell",
   "greifer_lerp": 0.165,
   "ruhe": "Loop stoppt bei |Ziel − Ist| < 0.05 px und |v| < 0.5 px/s",
   "ui_kurve": "power3.out 150 ms",
   "karten": "Querformat 3:2, Breite clamp(260px, min(34vw, (100svh − 380px) × 1,5), 540px), Lücke clamp(14px, 1,6vw, 24px); Telefon 80vw, Vorschau 470px"
  },
  "ausloeser": "ziehen",
  "touch": "Wischen folgt dem Finger direkt (touch-action: pan-y, senkrechtes Scrollen bleibt nativ). Erst nach dem Loslassen gleitet der Streifen mit dem gewählten Modell aus und rastet ein. Kein Greifer.",
  "reduziert": "Lerp-Faktor 1: Ziehen, Rad und Pfeiltasten setzen die Position sofort. Kein Wurf, keine Neigung, keine Spreizung, kein Bildversatz, kein Greifer.",
  "korrekturen": {
   "beschreibung": "Bewegung ohne feste Tweens. Ein Ist-Wert verfolgt in jedem Frame ein Ziel: per Lerp um einen festen Anteil oder gezogen von einer Feder. Die gemessene Geschwindigkeit steuert sekundäre Effekte wie Neigung, Spreizung, Verzerrung oder timeScale. Nach dem Loslassen gleitet alles mit Trägheit aus. Das ist die Grundsprache fast aller Award-Galerien 2026.",
   "warum_es_wirkt": "Die Seite reagiert auf die Energie der Eingabe. Schnelles Ziehen erzeugt mehr Schwung als langsames. Dadurch fühlt sich Bewegung verbunden und lebendig an, nicht abgespielt.",
   "wann_einsetzen": "Drag-Slider, unendliche Leinwände, 3D-Karussells, Smooth Scroll, Cursor-Follower und alle Effekte, die auf Tempo reagieren sollen.",
   "wann_nicht": "Für diskrete Zustandswechsel wie Menü auf und zu. Auf Seiten, die vor allem gelesen werden, stört Smooth Scroll eher.",
   "varianten": [
    "Lerp, zeitkorrigiert (Lenis-Standard 0,1; beobachtet 0,1 bis 0,165)",
    "gsap.quickTo mit power3.out und 0,6 s",
    "Feder mit stiffness 120 und damping 14 (schwingt leicht über)",
    "InertiaPlugin mit Einrasten",
    "Geschwindigkeit als timeScale mit Rückkehr in 1,2 s (Observer)"
   ],
   "umsetzung": "Zeitkorrigierter Lerp: current += (target − current) × (1 − Math.pow(1 − f, dt × 60)), f = 0,1 bis 0,165, dt höchstens 1/30 s. Geschwindigkeit = (current − last) / dt, geglättet. Sekundäre Effekte daraus ableiten, etwa skewX = clamp(−10, 10, v × 0,002) und Spreizung = min(180, |v| × 0,05). Ein einziger RAF-Loop (oder gsap.ticker) für alles. Ruhezustand erkennen und den Loop anhalten. Drag erst ab 4 px starten, damit Klicks funktionieren.",
   "mobil": "Native Touch-Trägheit respektieren. Beim Wischen folgt der Inhalt dem Finger direkt, träge ist erst das Ausgleiten. Smooth Scroll auf Touch meist aus (syncTouch nur gezielt).",
   "reduzierte_bewegung": "Lerp-Faktor 1, also sofort. Kein Wurf, keine sekundären Effekte, kein Smooth Scroll.",
   "barrierefreiheit": "Kein Scroll-Hijacking: Rad nur über dem Element abfangen, die Seite bleibt normal scrollbar. Tastatur (Pfeiltasten) und Fokus müssen sofort funktionieren. Bilder im Streifen brauchen Alternativtexte, die Region einen Namen."
  },
  "geprueft": "01.11.2026",
  "notiz": "Endloser Arbeitsstreifen eines erfundenen Hamburger Büros (dunkel, Akzent Lindgrün #c8f03c, Querformat-Karten, damit sich die Demo klar vom Drag-Slider unterscheidet). Umschalter für drei Modelle (Lerp 0,1, Feder 120/14, quickTo 0,6 s). Unten laufen Tempo, Neigung, Spreizung und Abstand live mit, dazu ein Verlauf Ziel gegen Ist, der den Charakter des Modells zeigt (Lerp kriecht an, Feder schwingt über, quickTo bremst fest in 600 ms). Ein Greifer folgt der Maus mit Lerp 0,165. Die Vorführung greift, wirft links und rechts, gibt einen Radstoß und wechselt jede Runde das Modell. Reines Vanilla-JS, ein RAF-Loop mit Ruheerkennung. Bilder 01.11.2026: eigene Bilder statt Portfolio. Zugang 02.11.2026: Unter 360 px Modus-Schalter mit Innenabstand 6 px und Laufweite .04em (320 px ohne Querscrollen, 390 px unverändert); Kontrastmodus-Rahmen für Knöpfe."
 }
}