{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "cursor-text-proximity",
 "name": "Typo reagiert auf Cursor-Nähe",
 "name_en": "Cursor proximity text effects (scramble, weight, repel)",
 "kurz": "Die Headline spürt den Zeiger: Buchstaben in seiner Nähe werden fetter, kräftiger geschnitten oder weichen aus, der System-Cursor bleibt.",
 "kategorie": "Cursor",
 "kategorie_slug": "cursor",
 "kategorie_nr": 8,
 "bau_chat": "C4",
 "prioritaet": "B",
 "trendstatus": "aufsteigend",
 "belegstatus": "teilbelegt",
 "website_belege": 1,
 "stimmung": [
  "editorial",
  "präzise",
  "verspielt"
 ],
 "stimmung_roh": [
  "technisch",
  "verspielt",
  "typografisch"
 ],
 "technik": [
  "vanilla-js",
  "gsap",
  "splittext",
  "css"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "gsap"
 ],
 "leistungskosten": "mittel",
 "steckbrief": {
  "beschreibung": "Statt eines eigenen Cursor-Elements reagiert die Schrift selbst auf den Zeiger. Für jedes Zeichen wird der Abstand zum Zeiger berechnet. Innerhalb eines Radius ändert sich das Zeichen je nach Nähe: Es wird fetter oder breiter (Variable Font), weicht aus, wird gescrambelt oder hebt sich farbig ab. Außerhalb des Radius kehrt es weich in den Ruhezustand zurück.",
  "warum_es_wirkt": "Der Zeiger wird spürbar, ohne dass ein Follower ihn ersetzt. Der System-Cursor bleibt, die Seite antwortet trotzdem. Weil sich nur wenige Zeichen gleichzeitig ändern, bleibt die Zeile lesbar und wirkt lebendig.",
  "wann_einsetzen": "Hero-Headlines, Footer-Wortmarken, Marken mit typografischem Profil, Hintergrundflächen aus Zeichen (ASCII-Felder).",
  "wann_nicht": "Lesetext und Formulare. Nicht auf mehreren Flächen derselben Seite, sonst nutzt sich der Effekt ab und kostet Leistung.",
  "varianten": [
   "Gewicht nach Nähe (Variable Font, wght)",
   "Breite, optische Größe und Laufweite nach Nähe (wdth, opsz, letter-spacing)",
   "Ausweichen: Zeichen weichen radial aus und gleiten zurück",
   "Scramble im Radius: Zeichen werden kurz durch Zufallszeichen ersetzt",
   "Zeichenfeld (ASCII), das unter dem Zeiger aufleuchtet"
  ],
  "umsetzung": "Text in Zeichen splitten, Wörter als nowrap-Gruppe halten. Zeichenmitten einmal messen und in Seitenkoordinaten cachen, neu bei Resize und nach dem Laden der Schrift. Auf pointermove nur die Zeigerposition speichern, gerechnet wird in einer requestAnimationFrame-Schleife: d = hypot(cx − mx, cy − my), t = 1 − d / R (begrenzt auf 0 bis 1), weich gemacht mit einer Sinus-Kurve. Den Wert pro Zeichen glätten (Lerp mit fester Zeitkonstante), dann je nach Variante font-variation-settings, letter-spacing oder transform setzen. Die Schleife schläft, sobald alle Zeichen ruhen. Fallstrick: getBoundingClientRect nicht in jedem Frame aufrufen.",
  "mobil": "Ohne Hover läuft der Effekt einmal automatisch als Welle durch die Zeilen. Danach reagiert die Fläche auf Tippen und waagerechtes Wischen; senkrechtes Scrollen bleibt frei (touch-action: pan-y).",
  "reduzierte_bewegung": "Abschalten. Die Schrift bleibt im Ruhezustand.",
  "barrierefreiheit": "Den vollen Text einmal für Screenreader ausgeben (visuell versteckt oder aria-label), die gesplitteten Zeichen mit aria-hidden ausblenden. Im Ruhezustand ist der Text unverändert lesbar."
 },
 "messwerte": {
  "easing": "",
  "dauer_ms": "transitionMs (konfigurierbar)",
  "stagger_ms": "",
  "distanz": "Radius 120 (Beispiel)",
  "sonstiges": "Achsen wght/wdth + Laufweite",
  "herkunft": "beobachtet",
  "quelle": "https://magnettype.com/"
 },
 "kurve": null,
 "gesehen_bei": [
  {
   "seite": "GSAP Text – Community-Demo ‚Scramble cursor effect‘ (Tom Miller)",
   "url": "https://codepen.io/creativeocean/pen/NPWLwJM",
   "auszeichnung": "",
   "beobachtung": "Auf gsap.com/text als Community-Demo gelistet (CodePen nicht abrufbar).",
   "art": "demo"
  },
  {
   "seite": "Osmo – Scramble Text Cursor",
   "url": "https://www.osmo.supply/resource/scramble-text-cursor",
   "auszeichnung": "",
   "beobachtung": "Ressource gelistet (nur Titel gesehen).",
   "art": "demo"
  },
  {
   "seite": "Magnet Type",
   "url": "https://magnettype.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (Next-Bundle): Komponente mit Props mode (word/char), radius (Beispiel 120), falloff, axes {wght:[min,max]}, wdthBoost, wghtBoost, trackBoost, transitionMs – Wörter/Zeichen nahe dem Cursor ziehen variable Achsen zum Spitzenwert; läuft live auf der Startseite.",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "GSAP – Text-Seite mit Community-Demos",
   "url": "https://gsap.com/text/"
  },
  {
   "titel": "Osmo – Scramble Text Cursor",
   "url": "https://www.osmo.supply/resource/scramble-text-cursor"
  }
 ],
 "kombinierbar_mit": [
  "scramble-decode",
  "variable-font-axes",
  "schrift-hero-viewportbreit"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/cursor/cursor-text-proximity/",
  "meta": "https://cecodesign.de/lab/fundus/cursor/cursor-text-proximity/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/cursor/cursor-text-proximity/demo"
 },
 "herkunft": {
  "quelldateien": [
   "schriftanimation.json",
   "r3-belege-b.json"
  ],
  "pruefnotizen": [
   "r3-belege-b.json (Runde 3, 31.10.2026): Einziger Fund ist die Website der Bibliothek selbst (Eigenwerbung, npm-Paket) – kein unabhängiger Kundeneinsatz gefunden; Scramble-Varianten auf Attio/Vercel/Locomotive reagieren auf Hover/Enter, nicht auf Cursor-Distanz. Beleg schwach, Priorität B nur knapp haltbar."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Die Headline spürt den Zeiger: Buchstaben in seiner Nähe werden fetter, kräftiger geschnitten oder weichen aus, der System-Cursor bleibt.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "radius": "1.6em der Headline (≈ 150 px bei 94 px Schriftgröße; Magnet Type nennt 120 px als Beispiel)",
   "abfall": "Sinus: t = 0.5 − 0.5·cos(π·(1 − d/R)), 0 außerhalb von R",
   "glaettung": "pro Bild v += (Ziel − v)·(1 − e^(−dt/80 ms)); 95 % nach ≈ 240 ms, kein Überschwingen",
   "gewicht": "wght 300 → 700, opsz 72",
   "optische_groesse": "opsz 72 → 8, wght 300 → 460, Laufweite −0.015em → +0.045em",
   "ausweichen": "Versatz 0.2em radial vom Zeiger weg, waagerecht ×0.6; wght 300 → 380",
   "ruhezustand": "Newsreader wght 300, opsz 72, Laufweite −0.015em, Zeilenhöhe 1.02",
   "schrift": "Newsreader (Variable: wght 200–800, opsz 6–72), Labels Mona Sans wdth 118–125",
   "groesse": "clamp(2.6rem, 1rem + 5.4vw, 6.1rem)",
   "messung": "Zeichenmitten einmal per getBoundingClientRect in Seitenkoordinaten, neu bei Resize und nach document.fonts.ready",
   "touch_welle_ms": 3600,
   "vorfuehrung_runde_ms": 7000,
   "ui": "Buchungsleiste 200 ms cubic-bezier(0.4, 0, 0.2, 1)"
  },
  "ausloeser": "hover",
  "touch": "Kein Hover: beim Laden läuft eine gedachte Welle einmal durch die drei Zeilen (3,6 s). Danach reagiert die Headline auf Tippen und waagerechtes Wischen (touch-action: pan-y, senkrechtes Scrollen bleibt frei).",
  "reduziert": "Effekt aus: keine Reaktion auf den Zeiger, keine Welle, keine Vorführung. Die Headline steht im Ruhezustand (wght 300), die Werte-Anzeige meldet „Effekt aus“.",
  "korrekturen": {
   "beschreibung": "Statt eines eigenen Cursor-Elements reagiert die Schrift selbst auf den Zeiger. Für jedes Zeichen wird der Abstand zum Zeiger berechnet. Innerhalb eines Radius ändert sich das Zeichen je nach Nähe: Es wird fetter oder breiter (Variable Font), weicht aus, wird gescrambelt oder hebt sich farbig ab. Außerhalb des Radius kehrt es weich in den Ruhezustand zurück.",
   "warum_es_wirkt": "Der Zeiger wird spürbar, ohne dass ein Follower ihn ersetzt. Der System-Cursor bleibt, die Seite antwortet trotzdem. Weil sich nur wenige Zeichen gleichzeitig ändern, bleibt die Zeile lesbar und wirkt lebendig.",
   "wann_einsetzen": "Hero-Headlines, Footer-Wortmarken, Marken mit typografischem Profil, Hintergrundflächen aus Zeichen (ASCII-Felder).",
   "wann_nicht": "Lesetext und Formulare. Nicht auf mehreren Flächen derselben Seite, sonst nutzt sich der Effekt ab und kostet Leistung.",
   "varianten": [
    "Gewicht nach Nähe (Variable Font, wght)",
    "Breite, optische Größe und Laufweite nach Nähe (wdth, opsz, letter-spacing)",
    "Ausweichen: Zeichen weichen radial aus und gleiten zurück",
    "Scramble im Radius: Zeichen werden kurz durch Zufallszeichen ersetzt",
    "Zeichenfeld (ASCII), das unter dem Zeiger aufleuchtet"
   ],
   "umsetzung": "Text in Zeichen splitten, Wörter als nowrap-Gruppe halten. Zeichenmitten einmal messen und in Seitenkoordinaten cachen, neu bei Resize und nach dem Laden der Schrift. Auf pointermove nur die Zeigerposition speichern, gerechnet wird in einer requestAnimationFrame-Schleife: d = hypot(cx − mx, cy − my), t = 1 − d / R (begrenzt auf 0 bis 1), weich gemacht mit einer Sinus-Kurve. Den Wert pro Zeichen glätten (Lerp mit fester Zeitkonstante), dann je nach Variante font-variation-settings, letter-spacing oder transform setzen. Die Schleife schläft, sobald alle Zeichen ruhen. Fallstrick: getBoundingClientRect nicht in jedem Frame aufrufen.",
   "mobil": "Ohne Hover läuft der Effekt einmal automatisch als Welle durch die Zeilen. Danach reagiert die Fläche auf Tippen und waagerechtes Wischen; senkrechtes Scrollen bleibt frei (touch-action: pan-y).",
   "reduzierte_bewegung": "Abschalten. Die Schrift bleibt im Ruhezustand.",
   "barrierefreiheit": "Den vollen Text einmal für Screenreader ausgeben (visuell versteckt oder aria-label), die gesplitteten Zeichen mit aria-hidden ausblenden. Im Ruhezustand ist der Text unverändert lesbar."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Rezept boutique-hotel-gastgeber, erfundenes Gästehaus „Weidenkahn“ in Klein-Venedig, Bamberg. Hero mit Newsreader-Headline „Schlafen, wo die Regnitz leiser wird.“, eigene SVG-Zeichnung (Fischerhäuser, Domtürme, Kahn) im Bogenrahmen, Buchungsleiste darunter. Der Effekt sitzt nur auf der Headline. Umschalter für drei Varianten (Gewicht, Optische Größe, Ausweichen), die Werte stehen in der Leiste darunter. Die Vorführung führt einen gezeichneten Zeiger im Zickzack durch die Zeilen und wechselt jede Runde die Variante. Wegen der Rezeptregel „keine Federn, kein Überschwingen“ kehrt Ausweichen per Lerp zurück statt mit Feder; Scramble passt nicht zum Gastgeber-Ton und ist deshalb nur im Steckbrief genannt. In der Vorschau ist die Headline auf 72 px vergrößert, damit der Effekt in der kleinen Karte lesbar ist. AD-Review 01.11.2026: Note 5 Zugang 02.11.2026: --leise #82847F → #666863 (≥ 4,75:1 auf Sand, Creme und Hover-Fläche); Buchungsfelder mit sichtbarem Fokusrahmen (2px Tinte, innen) statt nur leichter Flächenfarbe; Kontrastmodus-Rahmen für Knöpfe."
 }
}