Scroll to the bottom of the sea

The best scroll mechanic ever shipped is also the simplest: down means down.

Deep Sea, from Neal Agarwal's toy factory of a website, maps your scroll wheel to ocean depth. Sea level at the top of the page; the Mariana Trench nearly eleven thousand meters later. Creatures appear at their real depths as you sink. Sunlight gives out around 200 meters. The last whale drops away. Somewhere past 8,000 meters it is just you, a snailfish, and the growing suspicion that your mouse wheel was not built for this descent's length.

The research is the placement

Each animal sits at roughly the deepest point its species is known to reach, which is how the December 2019 release opens with a polar bear paddling at 25 meters and works down through a wolf eel at 220 and a firefly squid at 375. Keep sinking and an elephant seal turns up past 2,300 meters. That number reads like a typo. The 703-point Hacker News thread kept stopping to double-check it, and it holds: elephant seals commute to depths no air-breathing mammal has any business visiting.

The page has since been viewed more than ten million times and now plays in actual aquariums, which may make it the most exhibited scrollbar in history.

The build is restraint

Agarwal is a computer science graduate who has run neal.fun as a full-time workshop of browser toys since 2017. He has never published a technical writeup of this piece; I went looking. The page itself also refuses to answer anything that is not a real browser, so I checked the front door instead: the neal.fun homepage source ships Nuxt bundles, the application framework built on Vue. Ordinary web plumbing, in other words. No engine, no tricks a working web developer does not already own.

The receipt is what he left out. No WebGL, no physics engine, no sound design pounding the drama. Illustrations, depth markers, and distance. The awe is generated entirely by honest scale: the page is long because the ocean is deep, and your thumb gets tired because the trench is far. The medium is the message and the message is that you are very, very small.

In the Glitch interview above, Agarwal describes his method as getting a minimal version working early to see whether an idea deserves to exist, then treating the rest as experimentation and alchemy. This one deserved to exist.

That is the craft lesson for every scrolljacking landing page that fights your input to force a moment: this page hijacks nothing. It just tells the truth at one meter per meter, and the truth happens to take four minutes to fall through.

Where this path starts

If scroll-as-story is the technique you want to steal, The Pudding keeps a working guide to implementing scrollytelling that compares six libraries with running code. It is the clearest trailhead I know for pages shaped like this one. And WOAH's shelf holds one more piece that turns a dataset into physical space you move through: the whole planet drawn as columns of people.

Go sink. Say hi to the anglerfish around 1,600 for me.