Kaer Morhen
Mit dem Rad durch den Kontinent des Hexers
Über das Projekt
Kaer Morhen ist ein abstraktes Konzept eines Gravel-Rennens in der Welt des Hexers. Die Seite präsentiert die Rennstrecke, grundlegende Veranstaltungsinformationen, ein Anmeldeformular und Details zur Belohnung für alle, die die Herausforderung meistern.
Das Herzstück der Seite ist eine scrollgesteuerte Einzelbild-Animation: In Google Flow generiertes Video wurde mithilfe von in Google AI Studio entwickelten Werkzeugen in Hunderte optimierter WebP-Frames aufgeteilt und als Sequenz ausgegeben, die vollständig von der Lenis-Scrollposition gesteuert wird. Das Ergebnis ist eine kinematische Animation, die je nach Scrollrichtung vor- und rückwärts läuft.
Diese Landingpage ist ein von der Realität losgelöstes Experiment, das verschiedene KI-Tools kombiniert, um unerwartete Erlebnisse für Besucher zu schaffen. Ja, ein Schwert auf dem Rücken statt einer Trinkflasche im Rucksack drückt vielleicht etwas — aber man gießt schließlich keinen Ertrunkenen am Flussufer mit Isogetränk ab...
Technologie
Gebaut mit Next.js und Tailwind CSS.
Lenis Smooth Scroll als Motor für die Einzelbild-Animation und das allgemeine Scroll-Verhalten.
Motion für scrollgetriggerte Animationen.
Nano Banana 2 zur Generierung von Grafiken.
Google AI Studio zum Erstellen von Werkzeugen, die Video in optimierte WebP-Frame-Sequenzen aufteilen.
Google Flow (Veo 3) zur Generierung von Video aus Grafiken, die mit Nano Banana 2 erstellt wurden.