{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "letter-physics",
 "name": "Buchstaben-Physik",
 "name_en": "Physics-based letters (gravity, drag, collision)",
 "kurz": "Zwölf Lernziele fallen als Pillen in einen Kasten, stapeln sich und lassen sich greifen und werfen; dazu Buchstaben mit Schwerkraft und federnde Buchstaben, die dem Zeiger ausweichen.",
 "kategorie": "Schrift-Animationen",
 "kategorie_slug": "schrift-animationen",
 "kategorie_nr": 6,
 "bau_chat": "C1",
 "prioritaet": "C",
 "trendstatus": "etabliert",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "verspielt",
  "laut"
 ],
 "stimmung_roh": [
  "verspielt",
  "laut",
  "überraschend"
 ],
 "technik": [
  "matter-js",
  "canvas",
  "vanilla-js",
  "gsap"
 ],
 "technik_gruppen": [
  "js",
  "gsap",
  "canvas"
 ],
 "leistungskosten": "mittel",
 "steckbrief": {
  "beschreibung": "1) Wörter oder Buchstaben werden zu Physik-Körpern, in einer 2D-Engine wie Matter.js oder in einer eigenen Simulation. 2) Beim Eintritt in den sichtbaren Bereich fallen sie mit Schwerkraft in einen Container, prallen ab und stapeln sich. 3) Nutzer greifen sie mit Maus oder Finger, werfen oder schubsen sie. 4) Leichtere Variante: Buchstaben weichen dem Zeiger federnd aus und schwingen zurück.",
  "warum_es_wirkt": "Spielerisch und überraschend. Text, der sich anfassen lässt, lädt zum Ausprobieren ein und bleibt im Gedächtnis. Gut für Easter Eggs im Footer oder für einen Moment der Belohnung.",
  "wann_einsetzen": "Footer, 404-Seiten, Kampagnen, verspielte Marken, Tag- und Skill-Wolken, Abschluss- und Erfolgsmomente.",
  "wann_nicht": "Für Inhalte, die gelesen werden müssen. In ernsten oder seriösen Zusammenhängen. Auf schwachen Geräten mit vielen Körpern.",
  "varianten": [
   "Fallende Wörter mit Schwerkraft (Osmo „Falling Text with Gravity“)",
   "Greifen und Werfen, in Matter.js mit MouseConstraint",
   "Federndes Ausweichen vor dem Zeiger",
   "Halten zum Sprengen: Buchstaben fliegen nach längerem Drücken auseinander",
   "Wackelnde Buchstaben wie Wackelpudding (Pete Barr „Jello“ in der GSAP-Text-Galerie)"
  ],
  "umsetzung": "Buchstaben und Wörter als DOM-Elemente behalten (Barrierefreiheit, Schärfe) und die Engine nur für Positionen nutzen. Mit Matter.js: pro Element Bodies.rectangle(x, y, w, h, { restitution: 0.4, friction: 0.1 }), im afterUpdate transform: translate(x, y) rotate(angle) setzen. Ohne Bibliothek reicht eine Verlet-Simulation mit Kapseln: zwei Punkte pro Körper, ein Stab fester Länge, Kollision über den kürzesten Abstand zweier Strecken. Fester Zeitschritt (zum Beispiel 1/120 s) und eine Obergrenze für die Auflösung tiefer Überlappungen verhindern, dass Körper herausgeschleudert werden. Körper gestaffelt übereinander starten lassen, nie ineinander. Die Engine erst bei Sichtbarkeit starten (IntersectionObserver) und außerhalb anhalten. Bei Resize die Wände neu setzen, beim Ziehen die Textauswahl abschalten. Pillen mit Text dürfen ihren Text ab etwa 110° umdrehen, weil die Form symmetrisch ist.",
  "mobil": "Ziehen mit dem Finger ist möglich. touch-action: none nur auf den Container legen, sonst blockiert er das Scrollen der Seite. Körper auf schmalen Bildschirmen kleiner setzen.",
  "reduzierte_bewegung": "Kein Fallen: die Endlage vorab berechnen und als ruhiges Layout zeigen, gestapelt oder ungeordnet.",
  "barrierefreiheit": "Eine lesbare Textfassung bereitstellen, etwa die Wörter als echte Liste in der Lesereihenfolge. Die Interaktion ist Dekoration, kein Inhalt darf nur per Ziehen erreichbar sein. Einzelne Buchstaben aria-hidden und den Satz als aria-label am Container."
 },
 "messwerte": {
  "easing": "Physik (restitution 0,3–0,6, gravity 1)",
  "dauer_ms": "",
  "stagger_ms": "Fallstart 30–80 je Wort",
  "distanz": "",
  "sonstiges": "",
  "herkunft": "typisch",
  "quelle": ""
 },
 "kurve": null,
 "gesehen_bei": [
  {
   "seite": "Osmo – Falling Text with Gravity",
   "url": "https://www.osmo.supply/resource/falling-text-with-gravity",
   "auszeichnung": "",
   "beobachtung": "Als Text-Ressource gelistet (nur Titel gesehen).",
   "art": "demo"
  },
  {
   "seite": "TRIONN",
   "url": "https://trionn.com/",
   "auszeichnung": "zeigt Awwwards/FWA/CSSDA-Logos (nicht verifiziert)",
   "beobachtung": "Interaktions-Aufforderungen ‚hold to blast‘ und ‚Dare to touch the lines‘ im Seitentext – Halten-Interaktion mit Partikel/Physik-Charakter (Umsetzung nicht verifiziert).",
   "art": "website-ungeprueft",
   "browser_gemessen": true
  },
  {
   "seite": "GSAP Text – Community-Demo ‚Jello‘ (Pete Barr)",
   "url": "https://codepen.io/petebarr/pen/LYzBoeg",
   "auszeichnung": "",
   "beobachtung": "In der GSAP-Text-Galerie gelistet (nicht geöffnet).",
   "art": "demo"
  }
 ],
 "tutorials": [
  {
   "titel": "Osmo – Falling Text with Gravity",
   "url": "https://www.osmo.supply/resource/falling-text-with-gravity"
  }
 ],
 "kombinierbar_mit": [
  "buchstaben-zerstreuen",
  "cursor-follower-lerp"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/schrift-animationen/letter-physics/",
  "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/letter-physics/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/schrift-animationen/letter-physics/demo"
 },
 "herkunft": {
  "quelldateien": [
   "schriftanimation.json",
   "patch-belege-1.json"
  ],
  "pruefnotizen": [
   "patch-belege-1.json: In ca. 230 geprüften Produktionsseiten kein Matter.js/Physik-Text gefunden."
  ],
  "prioritaet_hinweis": "31.10.2026: B → C laut patch-belege-1.json (In ca. 230 geprüften Produktionsseiten kein Matter.js/Physik-Text gefunden.)"
 },
 "bau": {
  "status": "fertig",
  "kurz": "Zwölf Lernziele fallen als Pillen in einen Kasten, stapeln sich und lassen sich greifen und werfen; dazu Buchstaben mit Schwerkraft und federnde Buchstaben, die dem Zeiger ausweichen.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "engine": "eigene Verlet-Simulation ohne Bibliothek: jeder Körper ist eine Kapsel aus zwei Punkten und einem Stab (Länge = lange Seite − kurze Seite, Radius = halbe kurze Seite, bei Buchstaben 0,56)",
   "schwerkraft": "1 wie Matter.js, entspricht 1000 px/s²",
   "rueckprall": 0.4,
   "reibung": "0,1 (Geschwindigkeit je Kontakt und am Boden um 10 % gebremst)",
   "daempfung": "0,998 je Schritt",
   "takt": "fester Schritt 1/120 s, höchstens 4 Schritte pro Bild, 6 Iterationen für Stab, Kollision und Wände",
   "max_tempo": "30 px je Schritt (3600 px/s); Überlappung wird höchstens 3 px je Iteration aufgelöst",
   "stagger_ms": 60,
   "start": "Körper starten gestaffelt übereinander, je (Höhe + 14 px) höher; Buchstaben in Lesereihenfolge von links nach rechts",
   "waende": "10 px Innenabstand wegen der runden Ecken (Radius 26 px); Decke bei −0,5 × Kastenhöhe",
   "griff": "Zeiger zieht den gegriffenen Punkt der Kapsel mit 35 % des Abstands je Iteration; Loslassen behält das Tempo (Wurf)",
   "lesbarkeit": "Pillen drehen ihren Text erst jenseits von ±110° um 180°, Buchstaben drehen frei",
   "federn": "Feder k 300, Dämpfung 18 (pro Sekunde), Stoß (1 − d/180)² · 20000 px/s² im Radius 180 px, Drehung 0,12° je px Versatz",
   "groessen": "Pillen 54 px hoch / 20 px Schrift (ab 700 px Kastenbreite), 46/17 (ab 520 px), 40/15 (darunter); Buchstaben Bricolage Grotesque 800 in min(Breite / 8, Höhe / 4,5, 110 px)",
   "ui": "Umschalter und Knöpfe 150 ms cubic-bezier(0.22, 1, 0.36, 1)",
   "farben": "Grund #F4F6FA, Karte #FFFFFF, Tinte #141414, Marke #7491FF, Erfolg #10BF7A (Häkchen, Fortschritt), Gelb #F7C325 (Start-Sticker)",
   "vorfuehrung": "Wörter 7,6 s (Fall, nach 2,6 s greift ein Zeiger „Das Wichtigste nach oben“ und wirft es), Buchstaben 6,4 s (das K wird geworfen), Federn 5,2 s (Zeiger fährt in einer Welle durch die Zeile)",
   "kasten": "Höhe clamp(380px, 64vh, 580px), Telefon 560 px, Radius 26 px (Telefon 20 px)"
  },
  "ausloeser": "ziehen",
  "touch": "Ziehen und Werfen mit dem Finger funktioniert, weil nur der Kasten touch-action: none hat; daneben scrollt die Seite normal. In der Variante Federn weichen die Buchstaben dem Finger aus, solange er im Kasten liegt. Pillen werden auf schmalen Kästen kleiner (40 px).",
  "reduziert": "Kein Fallen: Die Simulation rechnet 6 s vorab und zeigt nur die Endlage als ruhigen Haufen. Greifen, Werfen und Federn sind aus, die Vorführung entfällt.",
  "korrekturen": {
   "beschreibung": "1) Wörter oder Buchstaben werden zu Physik-Körpern, in einer 2D-Engine wie Matter.js oder in einer eigenen Simulation. 2) Beim Eintritt in den sichtbaren Bereich fallen sie mit Schwerkraft in einen Container, prallen ab und stapeln sich. 3) Nutzer greifen sie mit Maus oder Finger, werfen oder schubsen sie. 4) Leichtere Variante: Buchstaben weichen dem Zeiger federnd aus und schwingen zurück.",
   "warum_es_wirkt": "Spielerisch und überraschend. Text, der sich anfassen lässt, lädt zum Ausprobieren ein und bleibt im Gedächtnis. Gut für Easter Eggs im Footer oder für einen Moment der Belohnung.",
   "wann_einsetzen": "Footer, 404-Seiten, Kampagnen, verspielte Marken, Tag- und Skill-Wolken, Abschluss- und Erfolgsmomente.",
   "wann_nicht": "Für Inhalte, die gelesen werden müssen. In ernsten oder seriösen Zusammenhängen. Auf schwachen Geräten mit vielen Körpern.",
   "varianten": [
    "Fallende Wörter mit Schwerkraft (Osmo „Falling Text with Gravity“)",
    "Greifen und Werfen, in Matter.js mit MouseConstraint",
    "Federndes Ausweichen vor dem Zeiger",
    "Halten zum Sprengen: Buchstaben fliegen nach längerem Drücken auseinander",
    "Wackelnde Buchstaben wie Wackelpudding (Pete Barr „Jello“ in der GSAP-Text-Galerie)"
   ],
   "umsetzung": "Buchstaben und Wörter als DOM-Elemente behalten (Barrierefreiheit, Schärfe) und die Engine nur für Positionen nutzen. Mit Matter.js: pro Element Bodies.rectangle(x, y, w, h, { restitution: 0.4, friction: 0.1 }), im afterUpdate transform: translate(x, y) rotate(angle) setzen. Ohne Bibliothek reicht eine Verlet-Simulation mit Kapseln: zwei Punkte pro Körper, ein Stab fester Länge, Kollision über den kürzesten Abstand zweier Strecken. Fester Zeitschritt (zum Beispiel 1/120 s) und eine Obergrenze für die Auflösung tiefer Überlappungen verhindern, dass Körper herausgeschleudert werden. Körper gestaffelt übereinander starten lassen, nie ineinander. Die Engine erst bei Sichtbarkeit starten (IntersectionObserver) und außerhalb anhalten. Bei Resize die Wände neu setzen, beim Ziehen die Textauswahl abschalten. Pillen mit Text dürfen ihren Text ab etwa 110° umdrehen, weil die Form symmetrisch ist.",
   "mobil": "Ziehen mit dem Finger ist möglich. touch-action: none nur auf den Container legen, sonst blockiert er das Scrollen der Seite. Körper auf schmalen Bildschirmen kleiner setzen.",
   "reduzierte_bewegung": "Kein Fallen: die Endlage vorab berechnen und als ruhiges Layout zeigen, gestapelt oder ungeordnet.",
   "barrierefreiheit": "Eine lesbare Textfassung bereitstellen, etwa die Wörter als echte Liste in der Lesereihenfolge. Die Interaktion ist Dekoration, kein Inhalt darf nur per Ziehen erreichbar sein. Einzelne Buchstaben aria-hidden und den Satz als aria-label am Container."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Satzweise, erfundene Schreibkurse aus Göttingen von Merle Ostendorf (Rezept kurs-coaching-lernweg): Bricolage Grotesque, Onest, Shantell Sans nur für Randnotizen, Erfolgsgrün nur für Häkchen und Fortschritt. Die Physik ist der Erfolgsmoment am Kursende: zwölf Lernziele als Pillen. Umschalter Wörter fallen, Buchstaben („SCHREIB KLAR.“) und Federn. Matter.js liegt nicht in assets/vendor, deshalb eigene Verlet-Simulation mit Kapseln, Werte an Matter-Standards angelehnt. Referenzen nur als Prinzip: mymind.com (Pillen als Inhaltstypen), zhdk.ch (gedrehter runder Datums-Sticker). AD-Review 01.11.2026: Note 4"
 }
}