Cinematic Interfaces in Next.js: Wenn Animation arbeitet, statt sich nur zu bewegen
Gute Animation sieht man nicht, man spürt sie. Ein praktischer Bericht über bewegungsgetriebene UI mit Next.js, Motion und Anime.js — und vor allem darüber, wo man sich bremsen sollte.
Mehran Hatami4 Min. LesezeitNext.jsAnime.jsMotion DesignDie erste Animation, die ich für ein echtes Admin-Panel geschrieben habe, war spektakulär — und genau das war das Problem. Karten drehten sich, Zahlen sprangen, alles schimmerte. Drei Wochen später sagte derselbe Kunde, das Panel fühle sich schwer an. Nichts war langsamer geworden. Jeder Klick startete nur eine kleine Vorstellung, um die niemand gebeten hatte.
Bewegung ist eine Antwort, keine Dekoration
Eine Animation ist dann richtig, wenn Nutzer sich ohne sie verlieren — nicht schon dann, wenn die Seite ohne sie ruhiger wirkt.
Bewegung in einer Oberfläche hat genau eine Aufgabe: zu zeigen, was gerade passiert ist und wohin das Gesuchte gewandert ist. Ein Modal, das aus seinem Button herauswächst, zeigt Ursache und Wirkung. Dasselbe Modal, das in der Bildschirmmitte einblendet, ist nur eine Verzögerung von 300 ms. Der Unterschied liegt nicht in der Schönheit, sondern in der Bedeutung.
Mein Test ist schlicht: Animation löschen. Sind Nutzer danach verwirrt, hat sie echte Arbeit geleistet. Ist die Seite nur ruhiger, war sie Kosten und keine Investition.
Warum Motion und Anime.js
Die beiden sind keine Konkurrenten. Es sind zwei Arten von Bewegung, die problemlos nebeneinander im selben Projekt leben.
- Motion (Framer Motion) für Bewegung, die an Interaktion hängt: Öffnen und Schließen, Zustandswechsel, Layout- und Shared-Element-Übergänge. Weil sie physikbasiert ist, lässt sie sich mittendrin unterbrechen und bleibt trotzdem natürlich.
- Anime.js für Bewegung mit Timeline: eine Liste, die gestaffelt erscheint, ein hochzählender Wert, eine Abfolge mit präzisen Abständen. Die stagger-Funktion erledigt in zwei Zeilen, wofür man mit useEffect und setTimeout dreißig braucht.
- Meine Faustregel: Was Nutzer direkt anfassen, gehört zu Motion. Was sich selbst erzählt, gehört zu Anime.js.
Die Kurve zählt mehr als die Dauer
Die meisten schlechten Animationen sind nicht falsch getaktet, sondern falsch gekrümmt. Ein lineares Easing wirkt mechanisch. Eine springende Feder schreibt einer Fläche Schwung zu, den sie nie hatte. Ich setze standardmäßig auf eine kritisch gedämpfte Feder und gebe Überschwingen nur dort aus, wo Nutzer wirklich etwas geworfen haben.
// Standard: sie kommt an, sie wird nicht geworfen
const CALM = { type: "spring", bounce: 0, duration: 0.5 } as const;
// Ausnahme: eine Bestätigung, die wie ein Stempel landen soll
const STAMP = { type: "spring", bounce: 0.35, duration: 0.4 } as const;
<motion.div layout transition={CALM} />Drei Regeln, die ich nicht mehr breche
- Nur transform und opacity animieren. Alles andere zwingt den Browser zurück ins Layout — auf einem günstigen Handy führt das direkt zu sichtbarem Ruckeln.
- Keine Animation darf den Weg der Nutzer blockieren. Wer mitten in der Animation klickt, soll gewinnen und nicht auf das Ende der Vorstellung warten.
- Wiederholende Bewegung bleibt unter der Aufmerksamkeitsschwelle. Ein langsamer Sieben-Sekunden-Schimmer ist Hintergrund; derselbe Schimmer in einer Sekunde ist eine Störung.
Und die Einstellung, die ich nie überspringe
Manchen Menschen wird von starker Animation schwindelig, und sie haben das in ihren Systemeinstellungen bereits erklärt. Das zu respektieren ist eine Zeile Code — und für diese Nutzer der Unterschied zwischen einem Produkt, das funktioniert, und einem, das sie schließen.
const reduced = useReducedMotion();
<motion.div
initial={reduced ? undefined : { opacity: 0, y: 22 }}
animate={{ opacity: 1, y: 0 }}
transition={reduced ? { duration: 0 } : CALM}
/>Ein cinematisches Interface hat Rhythmus, es ist nicht betriebsam. Wenn es gelingt, sprechen Nutzer gar nicht über die Animation — sie sagen, das Panel fühle sich leicht an. Dieser Satz ist die beste Kritik, die Motion Design bekommen kann.