{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "variable-font-axes",
 "name": "Animierte Variable-Font-Achsen",
 "name_en": "Variable font axis animation (weight/width/slant on hover, proximity, scroll)",
 "kurz": "Die Buchstaben selbst reagieren: Unter dem Zeiger werden sie fett und breit, als Welle läuft das Gewicht durch die Headline, ein Wort schwillt beim Überfahren an.",
 "kategorie": "Schrift-Animationen",
 "kategorie_slug": "schrift-animationen",
 "kategorie_nr": 6,
 "bau_chat": "C1",
 "prioritaet": "B",
 "trendstatus": "aufsteigend",
 "belegstatus": "teilbelegt",
 "website_belege": 1,
 "stimmung": [
  "editorial",
  "verspielt",
  "experimentell"
 ],
 "stimmung_roh": [
  "typografisch",
  "verspielt",
  "experimentell",
  "kulturell"
 ],
 "technik": [
  "css",
  "vanilla-js",
  "scroll-driven-css",
  "gsap",
  "splittext"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "gsap"
 ],
 "leistungskosten": "mittel",
 "steckbrief": {
  "beschreibung": "1) Eine variable Schrift mit mehreren Achsen wird geladen, etwa wght, wdth, slnt, opsz oder GRAD. 2) Die Achsenwerte werden live gesteuert. Beim Hover wird ein ganzes Wort fetter oder breiter. Pro Buchstabe nach Abstand zum Zeiger: nahe Buchstaben schwellen an, entfernte bleiben dünn. An den Scrollfortschritt gekoppelt: die Headline wird beim Scrollen breiter oder schmaler. An die Scroll-Geschwindigkeit gekoppelt: schnelles Scrollen kippt die Schrift in die Schräglage. 3) Die Glyphen verformen sich stufenlos, statt sich nur zu bewegen. Dadurch wirkt die Schrift lebendig.",
  "warum_es_wirkt": "Die Schrift selbst wird zum Interaktionsmaterial. Es liegt kein Effekt über dem Text, die Form der Buchstaben ändert sich. Das ist sehr markant und bleibt typografisch ehrlich. Figma nennt Variable Fonts, die auf Interaktion reagieren, als Hero-Trend 2026.",
  "wann_einsetzen": "Typo-getriebene Marken, Portfolios, Foundry- und Kulturseiten, große Hero-Wörter, Navigation mit wenigen großen Einträgen. Auch für Wirkungszahlen, die einmal beim Eintritt kräftiger werden.",
  "wann_nicht": "Wenn keine variable Schrift mit ausreichender Achsenspanne verfügbar ist. Nicht im Fließtext, denn wdth und wght verändern die Laufweite und damit den Umbruch. Nicht in vielen Zeilen gleichzeitig.",
  "varianten": [
   "Hover: wght 300 → 800 auf dem ganzen Wort",
   "Zeiger-Nähe pro Buchstabe: Gewicht fällt mit dem Abstand zum Cursor ab",
   "Scroll-gekoppelt: wdth und wght über animation-timeline: view()",
   "Geschwindigkeit: slnt bzw. ital proportional zur Scroll-Geschwindigkeit",
   "Welle: die Achse läuft zeitversetzt durch die Buchstaben, in Stufen hin und zurück (Displaay: 500 ms pro Instanz)",
   "GRAD-Achse für Hover ohne Layoutsprung: ändert die Strichstärke, nicht die Laufweite"
  ],
  "umsetzung": "Hover: transition: font-variation-settings 500ms; im :hover font-variation-settings: 'wght' 800, 'wdth' 125. Nähe: Buchstaben in Spans teilen, pro Frame den Abstand d zum Zeiger messen, wght = map(d, 0 … Radius, 900 … 300), weich mit Lerp nachführen und direkt in style.fontVariationSettings schreiben. Welle: Gewicht in Stufen (z. B. 300 · 450 · 600 · 750 · 900) hin und zurück, je Buchstabe zeitversetzt. Fallstricke: font-variation-settings setzt nicht genannte Achsen auf ihren Standard zurück, also immer alle Achsen gemeinsam setzen. CSS-Variablen lassen sich ohne @property nicht animieren, darum die Eigenschaft selbst animieren. wght und wdth ändern die Laufweite und lösen Reflow aus; für einen ruhigen Hover GRAD nutzen oder Buchstaben in feste Boxen setzen. Breitesten Zustand vorab messen, damit die Zeile nie überläuft. Außerhalb des Viewports pausieren (IntersectionObserver), nur bei Änderung neu schreiben.",
  "mobil": "Hover und Nähe fallen weg. Ersatz: eine selbstlaufende Welle, Kopplung an Scroll oder Gyrosensor, oder eine einmalige Achsen-Animation beim Eintritt. In Listen kann die Zeile in der Bildschirmmitte den vollen Schnitt bekommen.",
  "reduzierte_bewegung": "Statischer, gut gewählter Schnitt. Höchstens ein Gewichtswechsel beim Hover, ohne Verlauf.",
  "barrierefreiheit": "Sehr dünne Schnitte (wght unter 300) bei kleinen Größen vermeiden. Der Text bleibt echter Text: Buchstaben-Spans mit aria-hidden versehen und dem Element ein aria-label mit dem ganzen Satz geben."
 },
 "messwerte": {
  "easing": "",
  "dauer_ms": "500 pro Achsen-Instanz; Standard 2000 gesamt",
  "stagger_ms": "",
  "distanz": "Achsenwerte der registrierten Instanzen (wght/wdth u. a.)",
  "sonstiges": "Animation läuft über fontVariationSettings-Strings, nicht über font-weight",
  "herkunft": "beobachtet",
  "quelle": "https://www.displaay.net/assets/WoffBoxPublic-C0VyJVCI.js"
 },
 "kurve": {
  "bezier": [
   0.645,
   0.045,
   0.355,
   1.0
  ],
  "css": "cubic-bezier(0.645, 0.045, 0.355, 1)",
  "name": "eigene Kurve",
  "dauer_ms": 500
 },
 "gesehen_bei": [
  {
   "seite": "Osmo – Variable Font Weight on Hover",
   "url": "https://www.osmo.supply/resource/variable-font-weight-hover",
   "auszeichnung": "",
   "beobachtung": "Als Ressource gelistet (Seite selbst nicht abrufbar).",
   "art": "demo"
  },
  {
   "seite": "Figma – Web Design Trends 2026",
   "url": "https://www.figma.com/resource-library/web-design-trends/",
   "auszeichnung": "",
   "beobachtung": "Trendliste 2026 nennt Hero-Sektionen mit ‚kinetic lettering‘ und Variable Fonts, die auf Interaktion oder Kontext reagieren.",
   "art": "artikel"
  },
  {
   "seite": "Displaay Type Foundry",
   "url": "https://www.displaay.net/",
   "auszeichnung": "",
   "beobachtung": "WoffBoxPublic-Bundle animiert style.fontVariationSettings stufenweise durch die Achsen-Instanzen einer Schrift (Hin- und Rückweg), Standarddauer 2000 ms bzw. 500 ms pro Instanz.",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "web.dev – Introduction to variable fonts",
   "url": "https://web.dev/articles/variable-fonts"
  },
  {
   "titel": "Osmo – Variable Font Weight on Hover",
   "url": "https://www.osmo.supply/resource/variable-font-weight-hover"
  }
 ],
 "kombinierbar_mit": [
  "cursor-text-proximity",
  "schrift-hero-viewportbreit",
  "split-mask-reveal"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/schrift-animationen/variable-font-axes/",
  "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/variable-font-axes/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/schrift-animationen/variable-font-axes/demo"
 },
 "herkunft": {
  "quelldateien": [
   "schriftanimation.json",
   "patch-belege-1.json"
  ],
  "pruefnotizen": [
   "patch-belege-1.json: Nur 1 Produktionsbeleg (Schriftgießerei). Auf Landonorris, Instrument, Figma, Osmo nur statische font-variation-settings gefunden – Animation der Achsen ist v. a. auf Foundry-Seiten verbreitet."
  ],
  "prioritaet_hinweis": "31.10.2026: A → B laut patch-belege-1.json (Nur 1 Produktionsbeleg (Schriftgießerei). Auf Landonorris, Instrument, Figma, Osmo nur statische font-variation-settings gefunden – Animation der Achsen ist v. a. auf Foundry-Seiten verbreitet.)"
 },
 "bau": {
  "status": "fertig",
  "kurz": "Die Buchstaben selbst reagieren: Unter dem Zeiger werden sie fett und breit, als Welle läuft das Gewicht durch die Headline, ein Wort schwillt beim Überfahren an.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "schrift": "Archivo (variabel, wght 100–900, wdth 62–125)",
   "achsen": "wght 300 → 900, wdth 62 → 76 gekoppelt (wdth = 62 + (wght − 300) / 600 · 14)",
   "easing": "InOut cubic-bezier(0.645, 0.045, 0.355, 1) für Welle, Wort, Listen-Hover und Zahlen; Nähe mit smoothstep",
   "naehe": "Radius 2,2 em der Headline-Größe, smoothstep-Abfall, Lerp 0,14 pro Frame",
   "welle": "wght-Stufen 300 · 450 · 600 · 750 · 900 hin und zurück, 500 ms pro Stufe (2000 ms je Richtung), Versatz 70 ms pro Buchstabe",
   "wort": "ganzes Wort wght 300 → 900, 500 ms",
   "liste_hover": "wdth 62 / wght 300 → wdth 125 / wght 800, transition font-variation-settings 500 ms InOut; Pfeil 150 ms",
   "zahlen_eintritt": "wdth 62, wght 300 → 800, 1000 ms InOut, Versatz 120 ms, einmal bei 35 % Sichtbarkeit",
   "headline": "Versal, Zeilenhöhe 0,9, clamp(56px, min(12.8vw, 19svh), 200px); Telefon clamp(48px, 16.5vw, 104px)",
   "schreibschwelle": "neuer String nur bei Änderung > 0,4 wght",
   "ui_ms": 150
  },
  "ausloeser": "hover, dauer, scroll",
  "touch": "Startet in der Variante Welle (Dauerschleife). Nähe folgt dem Finger beim waagerechten Wischen, Wort reagiert auf Antippen. In der Liste wird die Zeile in der Bildschirmmitte breit und fett (IntersectionObserver, rootMargin −42 %).",
  "reduziert": "Headline statisch in wght 800 / wdth 62, Umschalter ausgeblendet. Listen-Hover wechselt den Schnitt ohne Verlauf, Zahlen stehen sofort in wght 800.",
  "korrekturen": {
   "beschreibung": "1) Eine variable Schrift mit mehreren Achsen wird geladen, etwa wght, wdth, slnt, opsz oder GRAD. 2) Die Achsenwerte werden live gesteuert. Beim Hover wird ein ganzes Wort fetter oder breiter. Pro Buchstabe nach Abstand zum Zeiger: nahe Buchstaben schwellen an, entfernte bleiben dünn. An den Scrollfortschritt gekoppelt: die Headline wird beim Scrollen breiter oder schmaler. An die Scroll-Geschwindigkeit gekoppelt: schnelles Scrollen kippt die Schrift in die Schräglage. 3) Die Glyphen verformen sich stufenlos, statt sich nur zu bewegen. Dadurch wirkt die Schrift lebendig.",
   "warum_es_wirkt": "Die Schrift selbst wird zum Interaktionsmaterial. Es liegt kein Effekt über dem Text, die Form der Buchstaben ändert sich. Das ist sehr markant und bleibt typografisch ehrlich. Figma nennt Variable Fonts, die auf Interaktion reagieren, als Hero-Trend 2026.",
   "wann_einsetzen": "Typo-getriebene Marken, Portfolios, Foundry- und Kulturseiten, große Hero-Wörter, Navigation mit wenigen großen Einträgen. Auch für Wirkungszahlen, die einmal beim Eintritt kräftiger werden.",
   "wann_nicht": "Wenn keine variable Schrift mit ausreichender Achsenspanne verfügbar ist. Nicht im Fließtext, denn wdth und wght verändern die Laufweite und damit den Umbruch. Nicht in vielen Zeilen gleichzeitig.",
   "varianten": [
    "Hover: wght 300 → 800 auf dem ganzen Wort",
    "Zeiger-Nähe pro Buchstabe: Gewicht fällt mit dem Abstand zum Cursor ab",
    "Scroll-gekoppelt: wdth und wght über animation-timeline: view()",
    "Geschwindigkeit: slnt bzw. ital proportional zur Scroll-Geschwindigkeit",
    "Welle: die Achse läuft zeitversetzt durch die Buchstaben, in Stufen hin und zurück (Displaay: 500 ms pro Instanz)",
    "GRAD-Achse für Hover ohne Layoutsprung: ändert die Strichstärke, nicht die Laufweite"
   ],
   "umsetzung": "Hover: transition: font-variation-settings 500ms; im :hover font-variation-settings: 'wght' 800, 'wdth' 125. Nähe: Buchstaben in Spans teilen, pro Frame den Abstand d zum Zeiger messen, wght = map(d, 0 … Radius, 900 … 300), weich mit Lerp nachführen und direkt in style.fontVariationSettings schreiben. Welle: Gewicht in Stufen (z. B. 300 · 450 · 600 · 750 · 900) hin und zurück, je Buchstabe zeitversetzt. Fallstricke: font-variation-settings setzt nicht genannte Achsen auf ihren Standard zurück, also immer alle Achsen gemeinsam setzen. CSS-Variablen lassen sich ohne @property nicht animieren, darum die Eigenschaft selbst animieren. wght und wdth ändern die Laufweite und lösen Reflow aus; für einen ruhigen Hover GRAD nutzen oder Buchstaben in feste Boxen setzen. Breitesten Zustand vorab messen, damit die Zeile nie überläuft. Außerhalb des Viewports pausieren (IntersectionObserver), nur bei Änderung neu schreiben.",
   "mobil": "Hover und Nähe fallen weg. Ersatz: eine selbstlaufende Welle, Kopplung an Scroll oder Gyrosensor, oder eine einmalige Achsen-Animation beim Eintritt. In Listen kann die Zeile in der Bildschirmmitte den vollen Schnitt bekommen.",
   "reduzierte_bewegung": "Statischer, gut gewählter Schnitt. Höchstens ein Gewichtswechsel beim Hover, ohne Verlauf.",
   "barrierefreiheit": "Sehr dünne Schnitte (wght unter 300) bei kleinen Größen vermeiden. Der Text bleibt echter Text: Buchstaben-Spans mit aria-hidden versehen und dem Element ein aria-label mit dem ganzen Satz geben."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Rezept verein-nonprofit-wirkung, erfundener Verein Uferwerk Neiße e.V. aus Görlitz (Uferputz, Wassermessung, deutsch-polnisch), Neiße und Altstadtbrücke als eigene SVG. Headline in Archivo statt Big Shoulders, weil Big Shoulders nur eine wght-Achse hat; Archivo ist die Textschrift des Rezepts und bringt wght und wdth mit. Hero mit Umschalter Nähe / Welle / Wort, darunter Mitmach-Liste mit wdth/wght-Hover und Wirkungszahlen, die einmal beim Eintritt kräftiger werden. Welle nach dem gemessenen Displaay-Takt (500 ms pro Instanz, 2000 ms je Richtung). Kurve aus dem Rezept (InOut). Vorführung: gedachter Zeiger 6 s Nähe, 6,2 s Welle, dann Wort für Wort, in Schleife. Telefon-Größe so gemessen, dass der breiteste Zustand (wght 900, wdth 76) auf 390 px passt. AD-Review 01.11.2026: Note 4."
 }
}