I made Rhumb Line Coffee Roasters, a concept landing page for a fictional coffee roaster. Instead of scrolling through sections, you sit at a chart table in a ship’s cabin out at sea and explore the desk.
Live: Rhumb Line Coffee Roasters · Six origins, one voyage
Every object on the desk is a section
9 objects are clickable. The camera flies straight from one to the next, and a hint suggests where to look next.
The compass opens “Steer by taste”, a flavour wheel you turn until one flavour family points north.
The crew list is a four-question quiz that finds you a plan, an origin and a grind.
The coffee cup shows today’s brew and four ways to make it at home.
A voyage for six coffees
Pick a port on the chart and the ship sails there, with a timelapse through dusk, night and dawn. On arrival you get the ship’s log for that leg and one bag of beans for the sample chest. There are six to find.
Weather, loading and phones
Click the porthole and a storm rolls in, with rain on the glass and a darker cabin.
The loader follows real loading progress. At 100% its paper chart shrinks into the 3D chart on the desk.
On phones it is the same scene, with the objects in a bottom bar.
Tech
- three.js r186. No 3D model files and no texture images: geometry and materials are generated in code. The only images are the coffee photos inside the panels.
MeshPhysicalMaterialwith clearcoat and transmission for porcelain, lacquer, enamel and glass, plus PMREM environment lighting and PCF shadows.- Post-processing: GTAO → depth of field → bloom → ACES tone mapping → colour grade (vignette, grain) → SMAA.
- The scene never stops moving: hull roll, a swinging lamp, the sea, steam from the cup. If the frame rate stays low, it lowers render quality instead of freezing the motion.
- Without WebGL or JavaScript you get a regular scrolling page.
I’d love feedback, especially on how it runs on your machine and whether the navigation feels clear.
