2026Dokončené
OMORI Headspace
Interaktivní fanouškovská stránka oslavující úspěšné indie RPG OMORI. Projekt slouží jako ukázka moderních animačních technik a precizního front-endového řemesla.
- Next.js
- TypeScript
- Tailwind CSS
- GSAP
Náhled projektu
Kontext
Hra OMORI má naprosto jedinečnou vizuální identitu. Chtěl jsem vytvořit interaktivní web, který by tuto specifickou atmosféru věrně přenesl do prohlížeče pomocí plynulých scroll-driven animací.
Technický přístup
- Next.js s využitím App Routeru
- GSAP ScrollTrigger pro plynulé přechody mezi sekcemi
- Tailwind CSS v4 pro moderní styling a responzivní rozvržení
Výzvy
- Věrné zachycení melancholické atmosféry a barevné palety hry bez přímého použití originálních grafických podkladů
- Koordinace časových os v GSAP napříč jednotlivými scroll triggery a sekcemi webu
- Optimalizace výkonu a zachování plynulosti náročných animací i na méně výkonných zařízeních
Co jsem se naučil
- Animační časové osy (GSAP timelines) se udržují mnohem snáze, pokud má každá sekce vlastní izolovaný animační modul
- Zohlednění systémového nastavení pro omezení pohybu (reduced motion) a líné spouštění (lazy-loading) animací výrazně zlepšilo přístupnost i celkový výkon webu
Hlavní funkce
- Pokročilé animace řízené scrollováním (scroll-driven animations)
- Interaktivní části uživatelského rozhraní
- Vizuální styl věrně inspirovaný hrou OMORI
- Důraz na detail a precizní front-endové zpracování
Další projekt
BrickMatch
Zjistěte, které LEGO stavebnice můžete postavit z dílků ve své sbírce, díky vlastnímu matching enginu nad katalogem Rebrickable.