{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "interaktiver-physik-footer",
 "name": "Interaktiver Physik-Footer",
 "name_en": "Interactive physics footer (falling letters / tags)",
 "kurz": "Die Lernziele eines Jenaer Python-Kurses fallen als Pillen in den Footer, stapeln sich und lassen sich greifen, werfen und anschubsen. Eigene kleine Physik ohne Bibliothek.",
 "kategorie": "Footer",
 "kategorie_slug": "footer",
 "kategorie_nr": 13,
 "bau_chat": "C6",
 "prioritaet": "C",
 "trendstatus": "etabliert",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "präzise",
  "verspielt",
  "laut"
 ],
 "stimmung_roh": [
  "verspielt",
  "humorvoll",
  "laut",
  "technisch"
 ],
 "technik": [
  "matter-js",
  "canvas",
  "vanilla-js",
  "intersection-observer"
 ],
 "technik_gruppen": [
  "js",
  "canvas"
 ],
 "leistungskosten": "mittel",
 "steckbrief": {
  "beschreibung": "Sobald der Footer erscheint, fallen Buchstaben, Pillen mit Begriffen oder Logos von oben hinein und stapeln sich physikalisch. Man kann die Teile greifen, werfen und anstoßen, der Zeiger schiebt sie zur Seite. Manchmal bilden sie die Wortmarke oder einen Claim. Die eigentlichen Links stehen außerhalb der Physikfläche.",
  "warum_es_wirkt": "Ein spielerischer Abschluss, der zum Verweilen einlädt und im Gedächtnis bleibt. Er zeigt technisches Können mit Humor.",
  "wann_einsetzen": "Kreative Studios, Startups mit lockerer Marke, Kampagnen, Portfolios und Lernangebote mit vielen greifbaren Begriffen.",
  "wann_nicht": "In seriösen Branchen. Bei knappem Performance-Budget. Nie als Ersatz für die eigentlichen Footer-Informationen.",
  "varianten": [
   "Fallende Pillen mit Leistungen oder Lernzielen",
   "Fallende Buchstaben der Wortmarke",
   "Physik erst auf Klick oder Hover",
   "Animierter SVG-Footer"
  ],
  "umsetzung": "Matter.js oder eine kleine eigene Physik: unsichtbare Wände für Boden und Seiten, je Element ein Körper (Rechteck mit chamfer oder Kapsel für Pillen). DOM-Elemente per transform aus Position und Winkel setzen, das ergibt bessere Typografie als Canvas-Text. Zum Ziehen eine MouseConstraint. Mausrad-Events nicht abfangen (bei Matter mouse.element.removeEventListener('wheel', …)), sonst lässt sich nicht weiterscrollen. Simulation erst starten, wenn der Footer sichtbar ist (IntersectionObserver), und anhalten, wenn er verschwindet oder alles ruht. Bei Resize die Wände neu setzen. Fallstrick: Ziehen per Touch kollidiert mit Scrollen, daher auf Touch nur fallen lassen.",
  "mobil": "Weniger Elemente, kein Greifen wegen des Scroll-Konflikts. Antippen darf schubsen. Alternativ eine statische Endlage.",
  "reduzierte_bewegung": "Die Elemente liegen schon gestapelt da (vorab berechnete Endlage), keine Simulation.",
  "barrierefreiheit": "Physikfläche mit aria-hidden. Derselbe Inhalt steht als normale Liste im Text. Keine Links in der Physikfläche; Bedienknöpfe wie „Loslassen“ liegen außerhalb des aria-hidden-Bereichs."
 },
 "messwerte": {
  "easing": "physikalisch",
  "dauer_ms": "",
  "stagger_ms": "Elemente fallen mit 50–150 ms Abstand",
  "distanz": "",
  "sonstiges": "restitution 0.3–0.6, friction 0.1–0.3, Gravitation y 1 (Matter-Default)",
  "herkunft": "typisch",
  "quelle": ""
 },
 "kurve": null,
 "gesehen_bei": [
  {
   "seite": "Awwwards Inspiration: Interactive footer (Fourmula AI)",
   "url": "https://www.awwwards.com/inspiration/interactive-footer-fourmula-ai",
   "auszeichnung": "Awwwards Inspiration (Element-Sammlung)",
   "beobachtung": "Nur Titel gesehen.",
   "art": "website-ungeprueft"
  },
  {
   "seite": "Awwwards Inspiration: Interactive footer (Studio by Miyagami)",
   "url": "https://www.awwwards.com/inspiration/interactive-footer-studio-by-miyagami-1",
   "auszeichnung": "Awwwards Inspiration (Element-Sammlung)",
   "beobachtung": "Nur Titel gesehen.",
   "art": "website-ungeprueft"
  },
  {
   "seite": "Awwwards Inspiration: Interactive footer (Sui)",
   "url": "https://www.awwwards.com/inspiration/interactive-footer-sui",
   "auszeichnung": "Awwwards Inspiration (Element-Sammlung)",
   "beobachtung": "Nur Titel gesehen.",
   "art": "website-ungeprueft"
  },
  {
   "seite": "Awwwards Inspiration: Falling letters interaction (Flashform)",
   "url": "https://www.awwwards.com/inspiration/flashform-falling-letters-interaction-flashform",
   "auszeichnung": "Awwwards Inspiration (Element-Sammlung)",
   "beobachtung": "Nur Titel gesehen.",
   "art": "website-ungeprueft"
  },
  {
   "seite": "Awwwards Inspiration: Interactive header with physics using Matter.js (Thrive Digital)",
   "url": "https://www.awwwards.com/inspiration/interactive-header-with-physics-using-matter-js-thrive-digital",
   "auszeichnung": "Awwwards Inspiration (Element-Sammlung)",
   "beobachtung": "Nur Titel gesehen; gleiche Agentur auch mit ‚Animated SVG footer‘.",
   "art": "website-ungeprueft"
  }
 ],
 "tutorials": [
  {
   "titel": "Codrops: Wobbly 2D Physics with Matter.js and Paper.js",
   "url": "https://tympanus.net/codrops/2021/04/12/wobbly-2d-physics-with-matter-js-and-paper-js"
  },
  {
   "titel": "The Coding Train: Matter.js Introduction",
   "url": "https://TheCodingTrain.com/tracks/physics-libraries"
  }
 ],
 "kombinierbar_mit": [
  "footer-cta-riesen-wortmarke"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/footer/interaktiver-physik-footer/",
  "meta": "https://cecodesign.de/lab/fundus/footer/interaktiver-physik-footer/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/footer/interaktiver-physik-footer/demo"
 },
 "herkunft": {
  "quelldateien": [
   "navigation.json",
   "patch-belege-3.json"
  ],
  "pruefnotizen": [
   "patch-belege-3.json: Auf rund 80 geprüften Seiten kein Matter.js im Einsatz; nur Awwwards-Inspirationen (nicht abrufbar). Vorschlag C."
  ],
  "prioritaet_hinweis": "31.10.2026: B → C laut patch-belege-3.json (Auf rund 80 geprüften Seiten kein Matter.js im Einsatz; nur Awwwards-Inspirationen (nicht abrufbar). Vorschlag C.)"
 },
 "bau": {
  "status": "fertig",
  "kurz": "Die Lernziele eines Jenaer Python-Kurses fallen als Pillen in den Footer, stapeln sich und lassen sich greifen, werfen und anschubsen. Eigene kleine Physik ohne Bibliothek.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "schwerkraft": "1000 px/s² (entspricht Matter gravity.y 1, scale 0.001, 60 Bilder/s)",
   "restitution": "0.35 (Rückprall erst ab 60 px/s Aufprall)",
   "friction": "0.25 (Coulomb, je Kontakt)",
   "luftwiderstand": "0.01 je Schritt bei 60 Bildern/s (wie Matter frictionAir)",
   "versatz": "Teile fallen 50–150 ms nacheinander, Startwinkel ±0.3 rad",
   "loeser": "Kapseln (Strecke + Radius), bis zu 2 Kontaktpunkte, 10 Impuls-Durchgänge, 2 Unterschritte je Bild, Überlappung zu 40 % je Schritt abgebaut (0.4 px Toleranz)",
   "greifen": "Feder zum Zeiger am gegriffenen Punkt, Steifigkeit 0.2 (wie MouseConstraint)",
   "zeiger": "schiebt als Kugel mit 20 px Radius und eigener Geschwindigkeit",
   "waende": "Boden und Seiten 12 px innen; Fläche clamp(280px, 40svh, 380px), Variante Auf Klick clamp(340px, 48svh, 440px)",
   "schlafen": "Schleife stoppt nach 1,5 s Ruhe, IntersectionObserver threshold 0.15",
   "teile": "Pillen 54 px hoch (Telefon 40 px), Perlen 108 px (Telefon 64 px); Desktop 18 Lernziele, Telefon 10",
   "kurve_ui": "cubic-bezier(0.22, 1, 0.36, 1), Hover 150 ms, Hinweis 300 ms"
  },
  "ausloeser": "ziehen",
  "touch": "Kein Greifen, damit Scrollen frei bleibt (touch-action: pan-y). Teile fallen beim Erreichen des Footers, Antippen schubst die Teile in 120 px Umkreis nach oben. 10 statt 18 Pillen. Steuerung als Knopf eingeklappt.",
  "reduziert": "Keine Simulation sichtbar: Die Endlage wird vorab berechnet (immer gleich durch festen Startwert) und einmal gezeichnet. In der Variante Auf Klick bleibt der geordnete Lernweg stehen.",
  "korrekturen": {
   "beschreibung": "Sobald der Footer erscheint, fallen Buchstaben, Pillen mit Begriffen oder Logos von oben hinein und stapeln sich physikalisch. Man kann die Teile greifen, werfen und anstoßen, der Zeiger schiebt sie zur Seite. Manchmal bilden sie die Wortmarke oder einen Claim. Die eigentlichen Links stehen außerhalb der Physikfläche.",
   "warum_es_wirkt": "Ein spielerischer Abschluss, der zum Verweilen einlädt und im Gedächtnis bleibt. Er zeigt technisches Können mit Humor.",
   "wann_einsetzen": "Kreative Studios, Startups mit lockerer Marke, Kampagnen, Portfolios und Lernangebote mit vielen greifbaren Begriffen.",
   "wann_nicht": "In seriösen Branchen. Bei knappem Performance-Budget. Nie als Ersatz für die eigentlichen Footer-Informationen.",
   "varianten": [
    "Fallende Pillen mit Leistungen oder Lernzielen",
    "Fallende Buchstaben der Wortmarke",
    "Physik erst auf Klick oder Hover",
    "Animierter SVG-Footer"
   ],
   "umsetzung": "Matter.js oder eine kleine eigene Physik: unsichtbare Wände für Boden und Seiten, je Element ein Körper (Rechteck mit chamfer oder Kapsel für Pillen). DOM-Elemente per transform aus Position und Winkel setzen, das ergibt bessere Typografie als Canvas-Text. Zum Ziehen eine MouseConstraint. Mausrad-Events nicht abfangen (bei Matter mouse.element.removeEventListener('wheel', …)), sonst lässt sich nicht weiterscrollen. Simulation erst starten, wenn der Footer sichtbar ist (IntersectionObserver), und anhalten, wenn er verschwindet oder alles ruht. Bei Resize die Wände neu setzen. Fallstrick: Ziehen per Touch kollidiert mit Scrollen, daher auf Touch nur fallen lassen.",
   "mobil": "Weniger Elemente, kein Greifen wegen des Scroll-Konflikts. Antippen darf schubsen. Alternativ eine statische Endlage.",
   "reduzierte_bewegung": "Die Elemente liegen schon gestapelt da (vorab berechnete Endlage), keine Simulation.",
   "barrierefreiheit": "Physikfläche mit aria-hidden. Derselbe Inhalt steht als normale Liste im Text. Keine Links in der Physikfläche; Bedienknöpfe wie „Loslassen“ liegen außerhalb des aria-hidden-Bereichs."
  },
  "geprueft": "01.11.2026",
  "notiz": "Rezept kurs-coaching-lernweg: erfundener Live-Kurs Laborcode (Python für Forschende) von Dr. Ragna Kowalczyk aus Jena. Bricolage Grotesque für den Titel, Onest für Text, Shantell Sans nur für Randnotiz und Modulnummern, Markenblau #7491ff, Erfolgsgrün #10bf7a, Gelb #f7c325 als Marker. Matter.js liegt nicht in assets/vendor, darum eine eigene Kapsel-Physik (Impulse mit Reibung, zwei Kontaktpunkte für stabiles Stapeln, Greifen per Feder, Zeiger als schiebende Kugel). Drei Varianten: Lernziele, Wortmarke (Perlen fallen der Reihe nach und ergeben „laborcode“), Auf Klick (geordneter Lernweg, der beim Loslassen zusammenfällt). Referenzen nur als Prinzip: typejockeys.com, ncase.me, brilliant.org, zhdk.ch. AD-Review 01.11.2026: Note 4 (Vorschau: Randnotiz ausgeblendet, die Pillen lagen darauf). Zugang 02.11.2026: Knopf „Bewegung anhalten/Abspielen“ oben links in der Physikfläche (aria-pressed, ruft pause()/weiter() wie FUNDUS_DEMO), in Vorschau und bei reduzierter Bewegung aus; Modulnummer auf blauen Teilen volle Deckkraft (6,3:1); „code“ in der Wortmarke #6283ff (3,1:1, großer Text); Kontrastmodus-Rahmen für Knöpfe."
 }
}