{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "buchstaben-zerstreuen",
 "name": "Buchstaben zerstreuen sich beim Hover",
 "name_en": "Text disperse / letter scatter hover / Text disperse / scatter on hover",
 "kurz": "Die große Kontaktadresse zerfällt beim Hover in einzelne Buchstaben, die Fläche wird schwarz, beim Verlassen setzt sich das Wort wieder zusammen.",
 "kategorie": "Schrift-Animationen",
 "kategorie_slug": "schrift-animationen",
 "kategorie_nr": 6,
 "bau_chat": "C1",
 "prioritaet": "C",
 "trendstatus": "etabliert",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "editorial",
  "verspielt",
  "laut"
 ],
 "stimmung_roh": [
  "verspielt",
  "laut",
  "typografisch",
  "überraschend"
 ],
 "technik": [
  "splittext",
  "motion",
  "gsap",
  "css",
  "framer-motion"
 ],
 "technik_gruppen": [
  "css",
  "gsap",
  "andere"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "1) Ein Wort wird in Zeichen geteilt. 2) Beim Hover fliegt jedes Zeichen zu einem eigenen, vorab festgelegten Versatz (x und y in em) mit Rotation, das Wort explodiert locker. 3) Beim Verlassen setzen sich die Zeichen wieder zusammen. 4) Oft dunkelt gleichzeitig der Hintergrund ab oder ein Bild erscheint.",
  "warum_es_wirkt": "Eine kleine Überraschung an einer Stelle, die sonst trocken ist. Eine E-Mail-Adresse oder ein Name wird zum Erlebnis. Lesbar bleibt das Wort trotzdem, denn die Ruhelage kehrt sofort zurück.",
  "wann_einsetzen": "Große Kontaktadresse im Footer, Name im Hero, Social-Links in verspielten Portfolios.",
  "wann_nicht": "Bei Navigation und Buttons mit klarer Funktion, denn das Ziel wird unlesbar. Bei Klickzielen, die präzise getroffen werden müssen. Bei langen Wörtern und kleinen Schriftgraden.",
  "varianten": [
   "Feste Versatztabelle je Zeichen (Olivier Larose, 0,75 s)",
   "Zufall mit Seed: deterministisch, sieht bei jedem Hover gleich aus",
   "Vom Zeiger weg: Richtung und Stärke aus der Zeigerposition (siehe cursor-text-proximity)",
   "Physik: Zeichen fallen und prallen (Matter.js)",
   "3D-Buchstaben kippen beim Menü-Hover (Codrops 3DLettersMenuHover)",
   "Gooey-Verschmelzen per SVG-Filter (Codrops GooeyTextHoverEffect)",
   "Wackeln einzelner Zeichen (Motion „Bobble hover“)"
  ],
  "umsetzung": "Zeichen als Spans mit --x, --y und --r aus einer Tabelle oder aus Seed-Zufall, damit es bei jedem Hover gleich aussieht. CSS: .zeichen { display: inline-block; transition: translate .75s cubic-bezier(.33, 1, .68, 1), rotate .75s cubic-bezier(.33, 1, .68, 1) } [data-aktiv] .zeichen { translate: calc(var(--x) * 1em) calc(var(--y) * 1em); rotate: calc(var(--r) * 1deg) }. Die Hover-Fläche ist der ruhende Container (Link), die Zeichen bekommen pointer-events: none, sonst flackert es. Etwas Innenabstand oben und unten vergrößert die Fläche. Fallstrick: Die Tabelle muss so lang sein wie das Wort (das Larose-Beispiel bricht über 13 Zeichen). Randzeichen nach innen versetzen, sonst fliegen sie aus dem Viewport.",
  "mobil": "Beim Tippen oder beim Erscheinen einmal kurz abspielen, oder weglassen. Tippen muss direkt zum Ziel führen.",
  "reduzierte_bewegung": "Kein Zerstreuen, nur ein Farbwechsel.",
  "barrierefreiheit": "Der Link trägt das ganze Wort im aria-label, die Zeichen sind aria-hidden. Tastaturfokus löst denselben Zustand aus, die Fokusmarke bleibt sichtbar."
 },
 "messwerte": {
  "easing": "cubic-bezier(0.33, 1, 0.68, 1)",
  "dauer_ms": "750",
  "stagger_ms": "",
  "distanz": "x ±0.8em, y ±0.65em, Rotation −29° bis 20°",
  "sonstiges": "",
  "herkunft": "beobachtet",
  "quelle": "https://blog.olivierlarose.com/tutorials/text-disperse-effect",
  "aus_eintrag": [
   "buchstaben-zerstreuen"
  ]
 },
 "kurve": {
  "bezier": [
   0.33,
   1.0,
   0.68,
   1.0
  ],
  "css": "cubic-bezier(0.33, 1, 0.68, 1)",
  "name": "power2.out",
  "dauer_ms": 750
 },
 "gesehen_bei": [
  {
   "seite": "Olivier Larose: Text Disperse Effect",
   "url": "https://blog.olivierlarose.com/tutorials/text-disperse-effect",
   "auszeichnung": "",
   "beobachtung": "13 handgesetzte Versätze (x −0.8…0.8em, y −0.65…0.6em, Rotation −29…20°), 0.75 s, cubic-bezier(0.33,1,0.68,1); Hintergrund dunkelt ab.",
   "art": "artikel",
   "weitere_beobachtung": "Framer Motion, feste transforms-Tabelle je Buchstabe (ca. ±0,8em, −29° bis 20°), 0,75 s mit eigener Kurve, zIndex 1 während der Bewegung, Seitenhintergrund dunkelt ab."
  },
  {
   "seite": "Codrops 3DLettersMenuHover (Repo)",
   "url": "https://github.com/codrops/3DLettersMenuHover",
   "auszeichnung": "",
   "beobachtung": "Menü-Hover mit 3D-Buchstaben und Bildeffekt.",
   "art": "demo"
  },
  {
   "seite": "Motion Examples: Bobble hover",
   "url": "https://motion.dev/examples/react-bobble-hover",
   "auszeichnung": "",
   "beobachtung": "Offizielles Beispiel.",
   "art": "demo"
  }
 ],
 "tutorials": [
  {
   "titel": "Olivier Larose: Text Disperse Effect",
   "url": "https://blog.olivierlarose.com/tutorials/text-disperse-effect"
  }
 ],
 "kombinierbar_mit": [
  "kontextueller-cursor",
  "text-roll-hover",
  "letter-physics",
  "magnetische-elemente"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/schrift-animationen/buchstaben-zerstreuen/",
  "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/buchstaben-zerstreuen/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/schrift-animationen/buchstaben-zerstreuen/demo"
 },
 "herkunft": {
  "quelldateien": [
   "hover.json",
   "schriftanimation.json"
  ],
  "zusammengelegt_aus": [
   "buchstaben-zerstreuen",
   "text-disperse-hover"
  ],
  "querverweis_kategorien": [
   "Hover"
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Die große Kontaktadresse zerfällt beim Hover in einzelne Buchstaben, die Fläche wird schwarz, beim Verlassen setzt sich das Wort wieder zusammen.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "cubic-bezier(0.33, 1, 0.68, 1)",
   "dauer_ms": 750,
   "eigenschaften": "translate, rotate, color je Zeichen; background-color und color der Section; Opazität der Umgebung 1 → 0.22",
   "versatz_x_em": "−0.8 bis 0.8",
   "versatz_y_em": "−0.65 bis 0.6",
   "rotation_grad": "−29 bis 20",
   "tabelle": "21 handgesetzte Zeilen [x, y, Grad], eine je Zeichen von hallo@gerberei.studio",
   "seed": "mulberry32, Seed 63065 (+101 je Wort), gleiche Grenzen",
   "zeiger": "Richtung Zeiger → ruhende Zeichenmitte, Stärke max(0.25, 1 − Abstand / (0.6 × Breite)), fester Querversatz −0.5/0/0.5 × 0.8, Rotation ±(20|29)° × Stärke, Update per requestAnimationFrame",
   "schrift": "TikTok Sans wdth 75, wght 800, clamp(3rem, 10.6vw, 12.5rem), Zeilenhöhe 0.9, Laufweite −0.03em; Telefon 14.2vw in zwei Stücken",
   "farben": "Ruhe #f2f2f2 / #0b0b0b, aktiv #0b0b0b / #ffffff, @ in Signal #ff5a1f",
   "ui_ms": 150,
   "touch_ms": "400 ms nach Sichtbarkeit (70 %) einmal 1100 ms zerstreut",
   "reduziert_ms": 200,
   "vorfuehrung": "Runde 4300 ms: aktiv ab 300 ms, Ruhe ab 2900 ms; Vorschau wechselt je Runde Handgesetzt → Seed → Zeiger"
  },
  "ausloeser": "hover",
  "touch": "Kein Hover-Zustand. Die Adresse zerfällt einmal kurz, sobald sie zu 70 % im Bild ist, und setzt sich wieder zusammen. Tippen öffnet direkt das Mailprogramm. Die Adresse bricht in zwei Stücke um (hallo@ über gerberei.studio).",
  "reduziert": "Kein Zerstreuen. Hover und Fokus wechseln nur die Farben (Fläche schwarz, @ in Signalfarbe) in 200 ms.",
  "korrekturen": {
   "beschreibung": "1) Ein Wort wird in Zeichen geteilt. 2) Beim Hover fliegt jedes Zeichen zu einem eigenen, vorab festgelegten Versatz (x und y in em) mit Rotation, das Wort explodiert locker. 3) Beim Verlassen setzen sich die Zeichen wieder zusammen. 4) Oft dunkelt gleichzeitig der Hintergrund ab oder ein Bild erscheint.",
   "warum_es_wirkt": "Eine kleine Überraschung an einer Stelle, die sonst trocken ist. Eine E-Mail-Adresse oder ein Name wird zum Erlebnis. Lesbar bleibt das Wort trotzdem, denn die Ruhelage kehrt sofort zurück.",
   "wann_einsetzen": "Große Kontaktadresse im Footer, Name im Hero, Social-Links in verspielten Portfolios.",
   "wann_nicht": "Bei Navigation und Buttons mit klarer Funktion, denn das Ziel wird unlesbar. Bei Klickzielen, die präzise getroffen werden müssen. Bei langen Wörtern und kleinen Schriftgraden.",
   "varianten": [
    "Feste Versatztabelle je Zeichen (Olivier Larose, 0,75 s)",
    "Zufall mit Seed: deterministisch, sieht bei jedem Hover gleich aus",
    "Vom Zeiger weg: Richtung und Stärke aus der Zeigerposition (siehe cursor-text-proximity)",
    "Physik: Zeichen fallen und prallen (Matter.js)",
    "3D-Buchstaben kippen beim Menü-Hover (Codrops 3DLettersMenuHover)",
    "Gooey-Verschmelzen per SVG-Filter (Codrops GooeyTextHoverEffect)",
    "Wackeln einzelner Zeichen (Motion „Bobble hover“)"
   ],
   "umsetzung": "Zeichen als Spans mit --x, --y und --r aus einer Tabelle oder aus Seed-Zufall, damit es bei jedem Hover gleich aussieht. CSS: .zeichen { display: inline-block; transition: translate .75s cubic-bezier(.33, 1, .68, 1), rotate .75s cubic-bezier(.33, 1, .68, 1) } [data-aktiv] .zeichen { translate: calc(var(--x) * 1em) calc(var(--y) * 1em); rotate: calc(var(--r) * 1deg) }. Die Hover-Fläche ist der ruhende Container (Link), die Zeichen bekommen pointer-events: none, sonst flackert es. Etwas Innenabstand oben und unten vergrößert die Fläche. Fallstrick: Die Tabelle muss so lang sein wie das Wort (das Larose-Beispiel bricht über 13 Zeichen). Randzeichen nach innen versetzen, sonst fliegen sie aus dem Viewport.",
   "mobil": "Beim Tippen oder beim Erscheinen einmal kurz abspielen, oder weglassen. Tippen muss direkt zum Ziel führen.",
   "reduzierte_bewegung": "Kein Zerstreuen, nur ein Farbwechsel.",
   "barrierefreiheit": "Der Link trägt das ganze Wort im aria-label, die Zeichen sind aria-hidden. Tastaturfokus löst denselben Zustand aus, die Fokusmarke bleibt sichtbar."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Rezept kreativstudio-buehne, erfundenes Studio Gerberei aus Offenbach am Main (TikTok Sans in zwei Breiten, DM Mono, Schwarz/Hellgrau, Signal #ff5a1f nur für das @). Outro einer Studioseite mit Frage, Riesen-Mailadresse, Social-Links und Riesen-Wortmarke (Rezept-Signatur footer-cta-riesen-wortmarke, per JS auf Breite eingepasst). Beim Hover wird die Section schwarz, Frage und Begleittext treten auf 22 % zurück. Kurve und Dauer aus der Messung des Musters statt der Rezeptkurve. Vanilla JS, keine Bibliothek; die Social-Links nutzen denselben Effekt klein. Referenzen als Prinzip: bonhommeparis.com, akaru.fr, e-types.com, blog.olivierlarose.com. AD-Review 01.11.2026: Note 5. Werte-Zeile auf dem Telefon kleiner (13 px), damit sie nicht wie Inhalt wirkt. Zugang 02.11.2026: --meta #8A8A8A auf #6B6B6B im hellen Zustand (im dunklen bleibt #8A8A8A), Umschalter-Knöpfe Deckkraft .55 auf .64, Riesen-Wortmarke pointer-events none (verdeckte mit ihrer Glyphenbox die Fußlinks für Zeiger und Fokus), Knopfrahmen im Kontrastmodus. Offen: Wortmarke (aria-hidden, Fit-to-Width) wird bei Textabständen 1.4.12 seitlich beschnitten."
 }
}