Kaer Morhen

O projekcie

Kaer Morhen to abstrakcyjny koncept wyścigu gravelowego rozgrywającego się w świecie Wiedźmina. Strona prezentuje trasę wyścigu, podstawowe informacje o imprezie, formularz zapisu oraz szczegóły nagrody czekającej na uczestników, którzy ukończą wyzwanie.

Głównym elementem strony jest animacja poklatkowa sterowana scrollem: wideo wygenerowane w Google Flow zostało podzielone na setki zoptymalizowanych klatek WebP przy użyciu narzędzi stworzonych w Google AI Studio, a następnie wyświetlone jako sekwencja kontrolowana pozycją scrolla w Lenis. Efektem jest kinematyczna animacja przewijana w przód i w tył, zgodnie z kierunkiem scrollowania.

Ten landing page jest oderwanym od rzeczywistości eksperymentem, który łączy różne narzędzia AI w celu stworzenia nieoczywistych wrażeń dla odwiedzających stronę. Tak, miecz na plecach zamiast bukłaka w plecaku może nieco ciążyć, ale nie będziesz przecież polewać izotonikiem spotkanego nad rzeką utopca...

Technologia

Strona zbudowana w oparciu o Next.js i Tailwind CSS.

Lenis smooth scroll jako silnik sterujący animacją poklatkową i ogólnym scrollem.

Motion do animacji odpalanych przy scrollowaniu.

Nano Banana 2 do generowania grafik.

Google AI Studio do budowania narzędzi dzielących wideo na zoptymalizowane sekwencje klatek WebP.

Google Flow (Veo 3) do generowania video na bazie grafik stworzonych przy pomocy Nano Banana 2.