Costa Rica · Design & development
Sixty-seven
acres, sold
on a screen.
A marketing site for a rainforest property, designed and built end to end. The one piece of work here that is purely about craft.
Why we built it
Six waterfalls, two rivers, primary rainforest, under an hour from the airport. The buyer is a developer or a private-estate buyer, and they are deciding from another country whether this is worth flying down to see.
A list of specifications cannot do that. Photographs barely do it. The site has to make you feel the place before it tells you anything.
What we decided to do
Video as the ground of the page, not a decoration on it.
Which is easy to say, and the reason most sites like this are slow, broken on a phone, or both. The work was making a video-led page behave — on a laptop in an office and on a phone on cell service, with the video starting by itself on both.
A live client site. Opens here in a frame; the real one is at selvaticocr.com.
What's inside
Four pages. Each one has a job.
01
Home — the feeling
Live
What it does
Full-screen video from the first frame — the water, the canopy, the scale — with three numbers over it: 67 acres, 6 waterfalls, 312 feet. Then it slows down: four highlights, a long read on what the land is, the specifications, and a section written for the person who is buying it as an investment rather than a home.
Every block below the fold arrives as you reach it, from its own direction. The page is built so the video is the thing you remember.
Look for: let the video load, then scroll slowly. Nothing is on screen until you get to it.
02
Location — the case
Live
What it does
Where the land sits, and why that matters to a buyer: 800 metres from one of the country's most visited waterfall parks, 25 minutes from the Poás volcano, under an hour from the international airport, with over two thousand feet of frontage on the highway that connects them.
A map with the property boundaries and the attractions around it, the drive times to each, the climate and the elevation. The page that turns "beautiful" into "reachable".
Look for: the map, then the drive-time list under it. That list is the argument.
03
Gallery — the proof
Live
What it does
The six waterfalls, each named, each with its height, in a carousel you can move through by hand. Then four films — an overview, the tourism case, an intimate walk, and the aerial view that shows the scale nothing on the ground can.
- San Fernando312 ft
- Lluvia del Cielo182 ft
- Jaguarundi100 ft
- Margarita90 ft
- Cynthia32 ft
- El Corazón22 ft
Look for: Eagle Vision, the aerial film. It is the one that sells the size.
04
Contact — the ask
Live
What it does
One thing to do: schedule a private viewing. A short form, a plain promise of what happens next — an acknowledgement within a day, a call within two — and the three questions every serious buyer asks, answered before they have to ask them: can I walk it, what documents exist, what happens after we talk.
No phone number and no email address on the site by design. Every enquiry comes through one door, so none get lost.
Look for: the "What to expect" strip. Two numbers, 24h and 48h. That is the whole service promise.
Under the hood
How it was made
- Framework
- None. Vanilla JS
- Template
- None. Hand-built
- Pages
- 4, each one file
- Video
- Two encodes — desktop
and phone — picked live - Delivery
- CDN, streamed in ranges,
never preloaded - Autoplay
- Survives iPhone, with a
tap fallback and a retry - Loading screen
- Waits for the hero,
holds 0.3s, caps at 8s - Reveals
- Observer-driven,
not scroll handlers - In a frame
- Knows it, skips the splash,
opens at the top - Search
- Structured listing data,
sitemap, geo coordinates - Hosting
- Deploys from GitHub
on every push - Lines of code
- about 7,000
No page builder, no component library. A phone on cell service is never sent the desktop video file. When a browser refuses to autoplay, a play button appears and the video starts on the first touch instead.
- 67acres, six waterfalls
- 2video encodes, one per device
- 0frameworks, templates, builders
What to look for
Let the video load, then scroll slowly. Every block arrives on its own, from its own direction.
Then open it on your phone. Same page, a different video file, and it still starts by itself.
Then Gallery, and the aerial film.
A live client site. Opens here in a frame; the real one is at selvaticocr.com.
NextNuPlans