Case study09 / 10Landing pageProjekt autorski2026

Mikołaj „Kra” Domański.

Kinowa strona marki osobistej zawodnika MMA: przewijanie prowadzi tunelem do klatki, potem rekord walk, oferta dla sponsorów i licznik do gali.

Projekt na ekranieZobacz, jak działa
Mikołaj „Kra” Domański, wersja desktopowa
Wersja desktopowa
Mikołaj „Kra” Domański, wersja mobilna
Wersja mobilna

Od wyzwania do efektu.

Każdy etap pokazuję na zrzutach z działającej wersji. Kliknij ujęcie, żeby je powiększyć.

Klient
Projekt autorski (demo)
Technologie
  • Next.js
  • React
  • TypeScript
  • Tailwind CSS
  • GSAP
  • Lenis
  • Blender
Zakres projektu
  • Scenariusz i projekt UI
  • Animacje przewijania
  • Sekwencja wideo na canvasie
  • Zdjęcia i wideo AI
  • Render 3D (Blender)
  • Formularz współpracy

Wyzwanie

Zawodnicy sportów walki budują markę głównie w social mediach, gdzie sponsor widzi pojedyncze posty, a nie całą historię i ofertę. Brakuje miejsca, które w kilka minut pokazuje, kim jest zawodnik, jakie ma wyniki, co może dać partnerowi i kiedy walczy następnym razem.

Zanim padnie słowo „sponsoring”, strona opowiada, skąd jest zawodnik i skąd wziął się pseudonim.

Rozwiązanie

Zaprojektowałem stronę jak krótki film w siedmiu scenach, ze scenariuszem rozpisanym przed pierwszą linią kodu. Zamiast typowej czerni z czerwienią świat marki to zimny, mglisty Bałtyk i jeden kolor z życia zawodnika: pomarańcz ratunkowy. Hero to pętla wideo i motto w dwóch głosach (spokojna kursywa i ciężki krój). Kulminacją jest wejście do klatki: przewijanie przesuwa 121 klatek wideo tunelu pod trybunami, obraz wybiela się światłem areny, a z boku zatrzaskują się drzwi klatki wyrenderowane w Blenderze. Dalej rekord jak karta gali, oferta dla sponsorów, licznik do walki o pas i formularz do menedżera. Wszystkie zdjęcia i wideo powstały na potrzeby projektu (fal.ai) z jednym portretem referencyjnym, więc na każdym kadrze jest ta sama twarz, i przeszły przez jedną gradację kolorów. Przy ograniczonym ruchu strona składa się w spokojny, statyczny montaż.

Przewijanie prowadzi kamerę tunelem do klatki: 121 klatek wideo na canvasie i plansze jak w filmie.
Na końcu tunelu drzwi klatki zatrzaskują się z drgnięciem kadru: siatka to proceduralny render z Blendera.
Na telefonie scena ma własny, pionowy kadr i krótszą drogę przewijania.
Rekord podany jak karta gali: tabela walk, sposoby zwycięstw i parametry zawodnika w jednym miejscu.

Efekt

Sponsor w kilka minut poznaje historię, wyniki i zasięgi zawodnika, a kontakt w sprawie współpracy czeka na końcu tej samej opowieści. Wzorzec dla każdej marki osobistej: sportowca, trenera, artysty.

Licznik do walki o pas i formularz do menedżera domykają historię konkretnym terminem i kontaktem.

Strzałki w lewo i w prawo zmieniają ujęcie. Escape zamyka podgląd.

Chcesz podobny projekt?

Opowiedz mi o swojej firmie. Przygotuję bezpłatną wycenę i propozycję rozwiązania.

Wyceń projekt