Moonpatch Farm
Jesienna farma dyń, którą zwiedza się jak film – od bramy po sklep ze straszydłami.
2026 · koncept · projekt, assety, kod, wdrożenie
W skrócie
Problem
Strony małych, lokalnych miejsc – farm, kawiarni, sklepów – są do siebie podobne: galeria, cennik, mapka. Chciałem sprawdzić, czy da się oddać klimat miejsca tak, żeby odwiedzający poczuł się, jakby przez nie przechodził.
Rozwiązanie
Fikcyjna farma dyń opowiedziana jak film: brama, plac o zmierzchu i trzy wnętrza, do których wchodzi się ruchem kamery. Produkty leżą w scenie, a zakupy kończą się biletem na wizytę.
Moja rola
Wszystko: koncepcja, kierunek artystyczny, plansze i warstwy, silnik grafiki, frontend, wdrożenie.
Wyzwanie
Zrobić stronę, która wygląda jak fotografia i rusza się jak kamera, a nie jak animowany szablon: zamiana statycznego zdjęcia na scenę 3D niewidoczna dla oka, cięcia ukryte w rozmyciu ruchu, nic, co „pływa” po zdjęciu. I przy tym szybki start, 60 klatek na sekundę i wygoda na telefonie.
Najciekawsze rozwiązania
01Brama otwierana przewijaniem
Pierwszy kadr to zwykłe zdjęcie, które ładuje się od razu. Gdy przeglądarka jest gotowa, w jego miejsce wchodzi scena WebGL – co do piksela taka sama. Przewijanie otwiera skrzydła bramy na zawiasach, z cieniem na drodze, a kamera wjeżdża przez łuk na plac.
02Plac, który zapada w zmierzch
Złota godzina przechodzi w zmierzch, a żarówki girland zapalają się jedna po drugiej – każda w swoim miejscu na zdjęciu. Drogowskaz i tablica ogłoszeń stoją na ziemi razem ze zdjęciem i świecą tym samym światłem.
03Wejście do wnętrza jak w filmie
Kamera przyspiesza w stronę drzwi, a cięcie na wnętrze wypada w szczycie rozmycia ruchu, więc oko go nie widzi. Wnętrze wyhamowuje, skrzydła drzwi mijają kamerę. Między pokojami przechodzi się bez wracania na plac, a przycisk wstecz w przeglądarce wraca do tych samych drzwi.
04Zakupy na kartach i bilet na wizytę
Produkty otwierają się z miejsca, w którym leżą: w kawiarni jako karty przepisów, w stodole i sklepie jako metki na sznurku. Kawy i ciasta nie da się wysłać, więc rezerwuje się je na wybrany dzień wizyty, a koszyk kończy się biletem, który można zapisać.
Assety
Plansze fotograficzne i warstwy przygotowałem sam: kierunek artystyczny, kadry dopasowane do siebie co do piksela, maski żarówek wycięte z różnicy między złotą godziną a zmierzchem, skrzydła drzwi jako osobne warstwy, które składają się z powrotem w zdjęcie bez śladu.
Brama 
Plac 
Zmierzch 
Kawiarnia 
Stodoła 
Straszydła
Technologie
Next.js · TypeScript · WebGL2 · Web Worker · Tailwind · Lenis · Zustand · Zod · Vitest · Playwright · Vercel
Liczby
- 98Lighthouse wydajność (desktop)
- 60 fpsprzejść kamery na typowym laptopie
- 3wnętrza z przejściami kamery
- 19produktów w scenach
- 2języki
- własny silnik grafiki bez bibliotek 3D
Czego się nauczyłem
Że najwięcej pracy wymaga to, czego ma nie być widać: zamiana zdjęcia na scenę, cięcie między ujęciami, nogi tablicy, które nie mogą się ślizgać po ziemi. I że przy stronie, która ma wyglądać jak film, najważniejsze jest, żeby nadal była szybka i dała się obsłużyć klawiaturą.