Showcase 16 · Drei-Körper-Problem
Anziehung
Eine Seite wie aus unserem Baukasten: Überschrift, Text, Farbflächen, sauber im Raster. Drei wandernde Anziehungspunkte ziehen daran. Was stärker gezogen wird, als es gehalten ist, löst sich – erst zittern Buchstaben, dann reißen Flächen auf und alles strömt um die drei Körper. Ein Knopfdruck holt jedes Stück an seinen Platz zurück.
Die Live-Demo benötigt JavaScript. Die Erklärung unten ist auch ohne sie lesbar.
- Layout
- –
- Gelöst
- –
- Teile
- –
- Bilder/s
- –
So funktioniert es
Die drei Anziehungspunkte sind drei gleich schwere Körper, die sich gegenseitig nach Newton anziehen. Sie starten auf der Achterschleife, einer der wenigen stabilen Lösungen des Drei-Körper-Problems, aber leicht gestört – deshalb wird ihre Bahn bald chaotisch. Sie lassen sich greifen und werfen. Jeder Buchstabe und jede Kachel der Farbflächen ist ein eigenes Teilchen mit einem festen Platz im Layout und einer Haltekraft: schwere Teile halten mehr, und jede Haltekraft ermüdet langsam, solange gezogen wird. Übersteigt der Zug die Haltekraft, löst sich das Teil.
Gelöste Teile folgen der Schwerkraft der drei Körper plus einem kleinen seitlichen Anteil; daraus werden Ströme statt eines bloßen Fallens. „Zurück ins Raster“ schaltet den Zug ab und schickt jedes Teil über eine kritisch gedämpfte Feder an seinen Platz, in Lesereihenfolge. Das Raster selbst bewegt sich nie, und Navigation und Bedienelemente liegen außerhalb des Effekts. Gezeichnet wird mit Canvas 2D, ohne WebGL; Schriften und Farben stammen aus den Design-Tokens.