Moonpatch Farm
An autumn pumpkin farm you explore like a film – from the gate to the haunted shop.
2026 · concept · design, assets, code, deployment
In short
Problem
Sites for small local places – farms, cafés, shops – all look alike: a gallery, a price list, a map. I wanted to see whether a site could carry the feel of a place so well that visitors feel they are walking through it.
Solution
A fictional pumpkin farm told like a film: a gate, a square at dusk and three interiors you enter with a camera move. Products sit in the scene, and shopping ends with a ticket for your visit.
My role
Everything: concept, art direction, plates and layers, graphics engine, frontend, deployment.
The challenge
Build a site that looks like a photograph and moves like a camera, not like an animated template: a swap from a still photo to a 3D scene the eye can't see, cuts hidden in motion blur, nothing that “floats” over the photo. And still a fast start, 60 frames per second and comfort on a phone.
Most interesting solutions
01A gate you open by scrolling
The first frame is a plain photo that loads instantly. When the browser is ready, a WebGL scene takes its place – identical to the pixel. Scrolling swings the gate open on its hinges, with shadows on the road, and the camera drives through the arch into the square.
02A square that falls into dusk
Golden hour turns to dusk and the string lights switch on one by one – each in its own place in the photo. The signpost and the notice board stand on the ground with the photo and catch the same light.
03Entering a room like in a film
The camera speeds toward the door and the cut to the interior lands at the peak of motion blur, so the eye never sees it. The interior settles and the door leaves pass the camera. You move between rooms without going back to the square, and the browser's back button returns you to the same door.
04Shopping on cards and a visit ticket
Products open from where they sit: recipe cards in the café, tags on twine in the barn and the shop. Coffee and pie can't be shipped, so you reserve them for a chosen visit day, and the basket ends with a ticket you can save.
Assets
I made the photographic plates and layers myself: art direction, frames aligned to the pixel, light-bulb masks cut from the difference between golden hour and dusk, door leaves as separate layers that recombine into the photo without a trace.
Gate 
Square 
Dusk 
Café 
Barn 
Haunt Shop
Technologies
Next.js · TypeScript · WebGL2 · Web Worker · Tailwind · Lenis · Zustand · Zod · Vitest · Playwright · Vercel
Numbers
- 98Lighthouse performance (desktop)
- 60 fpscamera transitions on a typical laptop
- 3interiors with camera transitions
- 19products in the scenes
- 2languages
- a custom graphics engine without 3D libraries
What I learned
That the most work goes into what must stay invisible: the swap from photo to scene, the cut between shots, the legs of a notice board that must not slide over the ground. And that a site meant to look like a film still has to be fast and usable with a keyboard.