Skip to content
lesscodex.dev
← Back to Portfolio
creative-web·concept·2026

Reef & Reed

Twelve rooms on a mangrove estuary, with a tide table, a scroll-driven read, and a published ledger.

Stack

HTMLCSSVanilla JSIntersectionObserverUnsplash APIVercel

Status

concept
View Live →
reef-and-reed.vercel.app

Reef & Reed

Open site →

Overview

An eco retreat on an estuary where a river meets a reef, built as the experimental piece of the series. The site behaves like a field journal: a fixed tide rail tracks reading progress as a water level, the opening statement lights up word by word as you scroll, rooms sit on a drag-to-scroll horizontal rail, and the page publishes where a night's rate actually goes.

Role

Brand invention, art direction, copywriting, interaction design, front-end build, deployment

Challenge

Eco retreats attract the emptiest copy in hospitality — sustainability as an adjective with nothing behind it. The site needed to make the environmental claim falsifiable, and the scroll effects had to earn their place rather than being motion for its own sake.

Approach

Instead of a sustainability paragraph, the page publishes a ledger: the percentage split of a $310 night across wages, food, mangrove work, power, the village levy, tax and margin — including that margin is 9% and was negative in 2023, and that about a fifth of the replanted mangrove died. The tide table is generated from a simple semidiurnal model with a lunar-fortnight amplitude, so spring and neap tides alternate and the "flats walkable" highlight means something.

Outcome

Live and verified. The ledger sums to exactly 100%, and the tide model produces genuine variation across the week rather than flagging every day as good — an earlier revision marked all seven green, which made the colour coding meaningless. Booking maths confirmed by hand ($560 × 5 nights + $130 transfer + $60 levy = $2,990).

Start a similar project?

Let's talk about scope and timeline.

Hire Me