Was du siehst
Ein Baukasten aus Bewegungen, die man auf jeder Website brauchen kann. Überschriften erscheinen Wort für Wort, ein Ideen-Stapel lässt sich zur Seite wischen, eine Galerie fächert sich auf, wenn die Maus darüber fährt. Im Posteingang rücken die Nachrichten weich nach, wenn eine erledigt ist, und Reiter gleiten zur gewählten Stelle.
So ist es gebaut
Alles ist normales HTML, bewegt mit CSS und der Web Animations API. Für den Posteingang nutzen wir die FLIP-Technik: Position vorher merken, Liste ändern, Unterschied als Bewegung abspielen. So bewegt sich jedes Element von selbst an seinen neuen Platz.
Woher die Idee kommt
useLayouts und Arc UI zeigen, wie viel Wertigkeit kleine, gut abgestimmte Bewegungen bringen. Wir haben die schönsten Muster ohne Framework nachgebaut.
Darauf achten wir
- Jede Bewegung zeigt, was gerade passiert
- Alles auch ohne Maus bedienbar
- Ruhige Fassung für „Bewegung reduzieren“