Nobody has ever dived with ABYSSAL, because ABYSSAL does not exist. We made it up — a deep-sea outfit that takes eight civilians a year to 3,800 metres aboard a submersible called EREBUS — and then built the site that company would need. There is no vessel. There is no expedition, no seat, no deposit, and no person who has ever paid for one. Everything about the company is invented. Nothing about the site is. It is deployed and running, the code below is its code, and its address sits at the bottom of this page. What follows describes that one artifact. No result is claimed anywhere in it, because none exists to claim.
We chose the subject deliberately. It is the one thing a small business categorically cannot go and film.
The brief we set ourselves
Make the scroll be the dive. Not footage running itself in the background while the visitor reads past it — a descent where position on the page is depth in the water. One page. One continuous shot, dawn surface entry to hydrothermal vents on the floor, with no cut anywhere in it. Instruments that report what is happening to you as you sink. And all of it has to hold up on a phone, on a slow connection, and in front of somebody who has switched animation off.
That last condition is heavier than it sounds. A site whose whole argument lives inside motion has no argument left for a visitor who cannot receive motion.
How the footage was actually made
Nobody went anywhere. There is no camera anywhere in this project.
The descent was generated. A single hero still fixes the identity of the submersible, and every clip afterwards is produced against that reference, so the vessel stays recognisably the same vessel the whole way down. Then five clips were made in a chain. The final frame of clip one was extracted and handed back to the generator as the opening frame of clip two; clip two's last frame opened clip three; and so on through five. Each clip begins on the exact image the previous one ended on. The finished descent has no cuts in it because it was seeded not to have any.
The joins were checked rather than trusted. Every seam was SSIM-verified against the frame it was meant to continue from before anything was assembled, and the duplicated frame at each boundary was dropped at concat, so the motion does not hitch for a beat at each handover.
What comes out is 631 WebP frames at 1536×864, measuring 15.47 MiB, covering roughly forty-five seconds of unbroken descent from the surface to 3,800 metres. That sequence is the site. The rest of the build exists to serve it.
How it's built
The frames are painted onto one canvas whose index is bound to scroll position, with a little easing between where you have scrolled to and where the image has caught up. Scroll down and you sink. Scroll back and the water gets brighter. There is no play button, because nothing is playing.
Depth is not decoration here. A piecewise map turns scroll progress into metres — 0 at the surface, 3,800 on the floor — and a head-up display reads off it continuously: depth, pressure in atmospheres, external temperature, heading, oxygen, hull status. A ruler down the left edge runs its own scale past a fixed needle. Cross into the vent field and the temperature figure starts spiking, which is what a thermometer does beside water leaving the seabed at 400 °C. The narrative panels are pinned to windows of the same scroll range, so each one arrives at the depth it describes and drifts up out of frame as you sink past it.
All of that is 312 lines of JavaScript, 218 lines of CSS, and 164 lines of HTML. Zero dependencies. No build step. The files someone edits are the files a browser receives, so there is no package that can change underneath this site and take it down.
Two fallbacks sit beneath it. When a visitor's system asks for reduced motion, the scrub engine never starts: one still frame is drawn, every panel is placed visible, and the page becomes an ordinary set of scrolling sections. If JavaScript is off altogether, the noscript block still carries the offer. The pitch is not permitted to depend on the effect.
Making 15.63 MiB feel instant
The deployed site is 15.63 MiB across 641 files, and 15.47 MiB of that is the frames. There is almost nothing else in it. Which means the problem was never the total — it was that no visitor should watch a progress bar while six hundred images arrive one after another.
So the loader does not wait for all of them. It gates on every eighth frame, plus the opening seconds and the closing image, then hands over the dive and streams the remainder in behind you. You descend through a sequence that is one-eighth resolved when you start and fills in as you go. Reach a point in the descent whose exact image is still in flight and the canvas substitutes its closest arrived neighbour, so the water stays continuous and goes briefly imprecise instead of briefly blank. The loader counting this off is dressed as a pre-dive boot sequence — ballast, hatch seal, pressure test — which turns the one unavoidable wait into the opening scene instead of an apology.
Then there is the folder the thing was built in. The source tree is 302.43 MiB, and 286.86 MiB of that is generation scratch: the hero still, the five source clips, the extracted seam frames, the assembled descent.mp4. A browser never requests any of it. It is the workings, not the deliverable. No 302 MiB version of this site was ever deployed, and none ever could have been — the only real question was whether the scratch would be allowed to travel with the deliverable, and the answer was no.
The deployed site was measured on 7 August 2026 at abyssal.metyto.com itself, rather than a preview URL, across three back-to-back Lighthouse 13.4.1 runs on mobile. All three came back identical — 97 for performance, 100 for accessibility, 100 for best practices, 100 for SEO — so the median here is just the score every run produced.
What this means for your business
You are not selling submersible seats. Three things still transfer.
The footage you cannot afford is no longer the reason you cannot show something. Sending a crew and a research vessel to 3,800 metres is beyond every business we work with, and it is beyond us. This descent was generated instead, from one reference image and a chain of five clips, and the result is the thing the site is made of. If the picture in your head of what your business does has never been reachable on your budget, that constraint has moved.
It does not replace photographing your own premises, your staff, or your product. This has to be said plainly, because the first takeaway is worth nothing without it. Generated imagery can carry an idea, a mood, a place nobody can get to. It cannot show a customer your dining room, the person who will answer the door, or the thing they will actually receive in a box. Those must be photographs of the real object, and a generated substitute passed off as one is a lie your customer discovers in person. Use generation for what cannot be shot. Use a camera for everything a customer will later stand in front of.
Make the one big interaction carry the meaning. Scroll-jacking exists on thousands of sites as an effect with nothing underneath it. Here the gesture is the content: going down the page is going down the water column, and the instruments confirm it the whole way. Then test the idea by removing it — switch on reduced motion and see whether anything survives. If the page still says what it needs to say without moving, the motion was doing a job. If it collapses into nothing, the motion was the job, and there was never much being said.
See it, then talk to us
The descent runs at abyssal.metyto.com. Take it slowly on the way down, then drag it back up and watch the ocean re-lighten. Watch the depth and temperature readouts near the floor. Open it on a phone and see how long it holds you before the frames have finished arriving.
Then look at whatever you are currently unable to show a customer — the process, the scale, the place, the thing that is hard to photograph. Ask us what it would take to build, and tell us what you wish people could see about your business before they call you.