Cineastische Oberflächen mit Next.js und animejs bauen
Wie man die serverseitige Architektur von Next.js mit animejs kombiniert, um bewegungsreiche Oberflächen zu bauen, die schnell, zugänglich und SEO-freundlich bleiben.
Mehran Hatami4 Min. LesezeitDie meisten „animierten“ Websites gehen einen Kompromiss ein: Sie opfern Performance oder SEO für Bewegung. Der App Router von Next.js lässt diesen Kompromiss komplett vermeiden — Inhalte werden serverseitig für Suchmaschinen und den ersten Seitenaufbau gerendert, Interaktivität kommt danach über kleine, gezielte Client Components hinzu.
Bewegung nur dort, wo sie wirklich zu sehen ist
Prüfen Sie immer prefers-reduced-motion, bevor eine Eintritts- oder Hover-Animation läuft — behandeln Sie das als harte Anforderung, nicht als Nachgedanken.
animejs fügt sich natürlich in dieses Modell ein. Statt alles beim Mount zu animieren, binde ich Eintritts-Animationen über die Intersection Observer API an einzelne Abschnitte, sodass Bewegung nur abspielt, wenn ein Abschnitt tatsächlich in den sichtbaren Bereich scrollt. Das hält das anfängliche Seitengewicht niedrig und vermeidet, Inhalte zu animieren, zu denen der Besucher nie scrollt.
Auch hier zahlt sich ein gescopter Animations-Controller aus: Einen Scope pro Abschnitt zu mounten und zu reverten bedeutet, dass jede darin erzeugte Animation beim Unmount automatisch aufgeräumt wird — ohne manuelle Buchführung über Timelines.
Reduced Motion ist Pflicht, kein Nice-to-have
Der schwierigste Teil ist der Respekt vor Nutzereinstellungen. Jede Animation in einer cineastischen Oberfläche braucht einen „Reduced Motion“-Fallback — Inhalte, die einfach sofort sichtbar sind, ohne Bewegung. Ich behandle das als harte Anforderung, nicht als nachträglichen Gedanken, und prüfe prefers-reduced-motion, bevor irgendeine Eintritts- oder Hover-Animation läuft.
- Jeden Animationsaufruf hinter einem einzigen Reduced-Motion-Hook bündeln — nicht über Dutzende Komponenten verstreuen
- Bei aktivem Reduced Motion sofort den Endzustand rendern, statt das Element ganz wegzulassen
- Zeigerbasierte Effekte (Magnetic Buttons, Custom Cursor) hinter demselben Gate wie scroll-getriggerte
- Mit der Betriebssystem-Einstellung testen, nicht nur den Code lesen
Das Ergebnis ist eine Oberfläche, die lebendig wirkt, ohne schwer zu sein: gestaffelte Reveals, umlaufende Elemente und feines Hover-Feedback — auf einer Seite, die weiterhin schnell lädt und für Suchmaschinen perfekt lesbar bleibt.