Design decision / Marine technology
Five depth zones on a marine website.
Beringia’s homepage changes its surrounding visual environment as visitors scroll through section-linked ocean-depth zones.
Beringia Marine · Design & development by Jack Malzone
The decision
Beringia Marine
Business context
Beringia’s website presents marine technology and the work around it. Its homepage contains several distinct sections; the depth treatment makes the page’s changing visual environment part of the experience.
What was designed
Jack Malzone designed a scroll-linked progression through epipelagic, mesopelagic, bathypelagic, abyssal and hadal zones. The sections carry their depth designation, and the surrounding interface responds as those sections enter view.
Why this direction
The intention was an experience of going deeper into the ocean: exploration enabled by advanced technology and guided by experts. Visual enjoyment was part of the decision too. As Jack puts it, “I also just thought it was cool.”
See it in context.
- 01 / Section-linked depth
- Each zone follows the content currently in view, rather than an arbitrary animation timer.
- 02 / A changing environment
- Surrounding colors and interface treatments respond while the page keeps its regular scrolling.
Behind the experience
Mechanics and tradeoffs.
The implementation observes the visible sections and selects a corresponding zone. A margin between switching points reduces repeated changes at a section boundary. Scrolling stays with the browser rather than being taken over by a custom scroll sequence.
A page-wide treatment needs legible text, clear navigation and stable transitions throughout. A static view also needs to make sense: the visual journey supports the content rather than replacing headings or the next action.