{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "cursor-follower-lerp",
 "name": "Nachzieh-Cursor (Lerp-Follower)",
 "name_en": "Lerp cursor follower (dot + ring)",
 "kurz": "Studio-Startseite aus Wien-Neubau: Ein Punkt sitzt am Zeiger, ein 30-px-Ring zieht per Lerp 1/12 nach, wächst über Links und füllt sich über den Arbeiten in Signalorange.",
 "kategorie": "Cursor",
 "kategorie_slug": "cursor",
 "kategorie_nr": 8,
 "bau_chat": "C4",
 "prioritaet": "C",
 "trendstatus": "abklingend",
 "belegstatus": "belegt",
 "website_belege": 2,
 "stimmung": [
  "verspielt",
  "experimentell"
 ],
 "stimmung_roh": [
  "verspielt",
  "2020er-Award-Look"
 ],
 "technik": [
  "vanilla-js",
  "gsap"
 ],
 "technik_gruppen": [
  "js",
  "gsap"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Ein kleiner Punkt sitzt exakt am Zeiger. Ein größerer Ring folgt mit Verzögerung: Pro Bild rückt er um einen festen Anteil des Abstands nach, typisch 0,075 bis 0,15. Über Links wächst der Ring oder füllt sich. Optional dehnt er sich nach Geschwindigkeit in Bewegungsrichtung (Squash and Stretch).",
  "warum_es_wirkt": "Der Nachlauf gibt der Bewegung Gewicht. Zwischen 2019 und 2023 war er ein Erkennungszeichen von Award-Seiten.",
  "wann_einsetzen": "Nur noch als Basis für Kontext-Cursor und Labels oder wenn die Marke ein Cursor-Konzept trägt, etwa Pinsel, Fadenkreuz oder ein Zeichen aus Punkten.",
  "wann_nicht": "Als Standard-Deko auf der ganzen Seite. Das wirkt 2026 generisch und verzögert die Bedienung. Nie den System-Cursor durch einen verzögerten ersetzen. In Shops und auf Seiten öffentlicher Häuser ohne Nutzen.",
  "varianten": [
   "Punkt und Ring",
   "Dehnung nach Geschwindigkeit (Velocity-Stretch)",
   "Mehrere Kreise mit gestaffelter Verzögerung",
   "CSS-Cursor per cursor: url() ohne Verzögerung, sehr leicht"
  ],
  "umsetzung": "rAF-Schleife: x += (mx − x) × k, dann transform: translate3d(x, y, 0) translate(-50%, -50%). Den Faktor auf die Bildrate umrechnen, sonst läuft der Ring auf 120-Hz-Bildschirmen doppelt so schnell. Mausposition in einer Variablen halten, nicht im State eines Frameworks. pointer-events: none. Nur bei (hover: hover) and (pointer: fine) starten. Alternative ohne Lerp: bei jedem mousemove einen Tween mit expo.out und rund 550 ms neu starten. System-Cursor sichtbar lassen; beim Verlassen des Fensters und bei Tab-Wechsel ausblenden.",
  "mobil": "Entfällt komplett.",
  "reduzierte_bewegung": "Abschalten, nur der System-Cursor bleibt.",
  "barrierefreiheit": "System-Cursor nicht ausblenden, viele Nutzer arbeiten mit vergrößertem Zeiger. Cursor-Elemente aria-hidden. Hover-Zustände der Links müssen auch ohne eigenen Cursor erkennbar sein."
 },
 "messwerte": {
  "easing": "Lerp 1/12 (Dennis); expo.out 550 ms (Cuberto)",
  "dauer_ms": "550 (Cuberto)",
  "stagger_ms": "",
  "distanz": "Kreis 30 px Standard",
  "sonstiges": "",
  "herkunft": "beobachtet",
  "quelle": "https://dennissnellenberg.com/assets/js/index-new.js"
 },
 "kurve": {
  "bezier": [
   0.16,
   1,
   0.3,
   1
  ],
  "css": "cubic-bezier(0.16, 1, 0.3, 1)",
  "name": "expo.out",
  "dauer_ms": 550
 },
 "gesehen_bei": [
  {
   "seite": "Olivier Larose – Blend Mode Cursor",
   "url": "https://blog.olivierlarose.com/tutorials/blend-mode-cursor",
   "auszeichnung": "",
   "beobachtung": "Lerp-Faktor 0,075 pro rAF; Mehrkreis-Variante mit gestaffelter Transition (4 − i) * delay.",
   "art": "artikel"
  },
  {
   "seite": "Figma – Web Design Trends 2026",
   "url": "https://www.figma.com/resource-library/web-design-trends/",
   "auszeichnung": "",
   "beobachtung": "Custom Cursors erscheinen nur als Preset-Interaktion von Figma Sites, nicht als Trend – Indiz für ‚Commodity‘-Status.",
   "art": "artikel"
  },
  {
   "seite": "Wix – Web Design Trends 2026",
   "url": "https://www.wix.com/blog/web-design-trends",
   "auszeichnung": "",
   "beobachtung": "Eigene Cursor werden in der Trendliste 2026 nicht erwähnt.",
   "art": "artikel"
  },
  {
   "seite": "Dennis Snellenberg",
   "url": "https://dennissnellenberg.com/",
   "auszeichnung": "",
   "beobachtung": "Follower per Lerp pos += (maus − pos)/12 in einem 120-Hz-GSAP-Ticker (gsap.to({}, 0.0083, {repeat:-1})).",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Cuberto",
   "url": "https://cuberto.com/",
   "auszeichnung": "",
   "beobachtung": "Mouse-Follower: gsap.to(pos, {duration:.55, ease:'expo.out'}) bei jedem mousemove, plus Skew nach Geschwindigkeit.",
   "art": "website",
   "browser_gemessen": true
  }
 ],
 "tutorials": [
  {
   "titel": "Blend Mode Cursor (Olivier Larose)",
   "url": "https://blog.olivierlarose.com/tutorials/blend-mode-cursor"
  },
  {
   "titel": "Osmo – Basic Custom Cursor",
   "url": "https://www.osmo.supply/resource/basic-custom-cursor"
  }
 ],
 "kombinierbar_mit": [
  "kontextueller-cursor",
  "blend-difference-cursor"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/cursor/cursor-follower-lerp/",
  "meta": "https://cecodesign.de/lab/fundus/cursor/cursor-follower-lerp/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/cursor/cursor-follower-lerp/demo"
 },
 "herkunft": {
  "quelldateien": [
   "schriftanimation.json",
   "patch-belege-1.json"
  ],
  "pruefnotizen": [
   "patch-belege-1.json: 2 Produktionsbelege."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Studio-Startseite aus Wien-Neubau: Ein Punkt sitzt am Zeiger, ein 30-px-Ring zieht per Lerp 1/12 nach, wächst über Links und füllt sich über den Arbeiten in Signalorange.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "lerp": "pos += (maus − pos) × 1/12 pro Bild bei 60 Hz, auf die echte Bildrate umgerechnet: k = 1 − (1 − 1/12)^(dt / 16,667) (Dennis Snellenberg)",
   "tween": "Alternative: bei jedem mousemove neuer Tween von der aktuellen Position zur Maus, 550 ms expo.out, 1 − 2^(−10p) (Cuberto)",
   "punkt_px": 6,
   "ring_px": "30, Rand 1 px",
   "ring_ueber_links_px": 64,
   "ring_ueber_arbeiten_px": "96, gefüllt #ff5a1f, mix-blend-mode: multiply auf Hell",
   "formwechsel": "width/height/background 550 ms cubic-bezier(0.16, 1, 0.3, 1); Farbe 200 ms gleiche Kurve; Ein-/Ausblenden 300 ms",
   "ueber_cta": "Cursor blendet aus (opacity 0), der Button trägt seinen eigenen Hover",
   "dehnung": "Abstand Maus–Ring × 0,0045, höchstens 0,42; scale(1 + s, 1 − 0,6 s), gedreht nach atan2 der Laufrichtung; Glättung 0,2 pro Bild",
   "sieben_kreise": "7 Ringe 30, 24, 19, 15, 12, 9, 7 px; der erste sitzt auf dem Lerp-Ring, jeder weitere rückt um 0,38 pro Bild an den vorigen heran; erster Ring in #ff5a1f",
   "farbe": "auf Dunkel weiß mit mix-blend-mode: difference am Cursor-Container; auf Hell #0b0b0b ohne Mischmodus (Sektion über data-ton)",
   "transform": "translate3d(x, y, 0) am Container, Form per translate: -50% -50%; pointer-events: none; System-Cursor bleibt",
   "aktiv_nur": "(hover: hover) and (pointer: fine); Ausblenden bei mouseleave, blur und Tab-Wechsel",
   "vorfuehren": "gedachter Zeiger über Claim, erste Arbeiten und Navigation, 7000 ms je Runde, Variante wechselt je Runde (Punkt + Ring, Geschwindigkeit, Sieben Kreise); reduziert Zeilen nacheinander alle 1400 ms",
   "farben": "#0b0b0b Grund, #f2f2f2 helle Sektion, #ffffff Text, #8a8a8a Meta, #ff5a1f Signal (CTA, Füllung)",
   "schriften": "TikTok Sans wdth 75, 800, clamp(3.5rem, 10.4vw, 11rem), Zeilenhöhe .98 (Abschluss .9), -0.03em, versal; Projektnamen TikTok Sans 600 clamp(1.75rem, 4.6vw, 4.5rem); DM Mono 500 0.75rem versal +0.04em für Labels"
  },
  "ausloeser": "hover",
  "touch": "Kein eigener Cursor. Die Arbeiten zeigen stattdessen einen orangen Pfeil-Knopf rechts in der Zeile.",
  "reduziert": "Eigener Cursor ganz aus, nur der System-Cursor. Arbeiten unterstreichen sich bei Hover ohne Bewegung. Die Vorführung hebt die Zeilen nacheinander hervor.",
  "korrekturen": {
   "beschreibung": "Ein kleiner Punkt sitzt exakt am Zeiger. Ein größerer Ring folgt mit Verzögerung: Pro Bild rückt er um einen festen Anteil des Abstands nach, typisch 0,075 bis 0,15. Über Links wächst der Ring oder füllt sich. Optional dehnt er sich nach Geschwindigkeit in Bewegungsrichtung (Squash and Stretch).",
   "warum_es_wirkt": "Der Nachlauf gibt der Bewegung Gewicht. Zwischen 2019 und 2023 war er ein Erkennungszeichen von Award-Seiten.",
   "wann_einsetzen": "Nur noch als Basis für Kontext-Cursor und Labels oder wenn die Marke ein Cursor-Konzept trägt, etwa Pinsel, Fadenkreuz oder ein Zeichen aus Punkten.",
   "wann_nicht": "Als Standard-Deko auf der ganzen Seite. Das wirkt 2026 generisch und verzögert die Bedienung. Nie den System-Cursor durch einen verzögerten ersetzen. In Shops und auf Seiten öffentlicher Häuser ohne Nutzen.",
   "varianten": [
    "Punkt und Ring",
    "Dehnung nach Geschwindigkeit (Velocity-Stretch)",
    "Mehrere Kreise mit gestaffelter Verzögerung",
    "CSS-Cursor per cursor: url() ohne Verzögerung, sehr leicht"
   ],
   "umsetzung": "rAF-Schleife: x += (mx − x) × k, dann transform: translate3d(x, y, 0) translate(-50%, -50%). Den Faktor auf die Bildrate umrechnen, sonst läuft der Ring auf 120-Hz-Bildschirmen doppelt so schnell. Mausposition in einer Variablen halten, nicht im State eines Frameworks. pointer-events: none. Nur bei (hover: hover) and (pointer: fine) starten. Alternative ohne Lerp: bei jedem mousemove einen Tween mit expo.out und rund 550 ms neu starten. System-Cursor sichtbar lassen; beim Verlassen des Fensters und bei Tab-Wechsel ausblenden.",
   "mobil": "Entfällt komplett.",
   "reduzierte_bewegung": "Abschalten, nur der System-Cursor bleibt.",
   "barrierefreiheit": "System-Cursor nicht ausblenden, viele Nutzer arbeiten mit vergrößertem Zeiger. Cursor-Elemente aria-hidden. Hover-Zustände der Links müssen auch ohne eigenen Cursor erkennbar sein."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Rezept kreativstudio-buehne, erfundenes Studio Siebenstern aus Wien-Neubau (Schwarz-Weiß, TikTok Sans schmal, eine Signalfarbe). Das Rezept führt den Lerp-Follower unter nicht_verwenden; die Demo nutzt ihn deshalb so, wie der Steckbrief es noch gelten lässt: als Basis für Kontext (wachsen über Links, füllen über Arbeiten, ausblenden über dem CTA), System-Cursor bleibt, und die Marke trägt das Konzept (sieben Punkte im Zeichen, Variante Sieben Kreise). Umschalter für drei Varianten und zwei gemessene Antriebe (Lerp 1/12, expo.out 550 ms). Referenzen: bonhommeparis.com, upperquad.com, mvsm.com, ultranoir.com. AD-Review 01.11.2026: Note 4"
 }
}