“The deep sea is an inferior world. All we know of it is all there is to be known.” Pliny
Before scuba gear, humans weren’t able to dive deeper than the bottom of your browser. For millenia, people assumed that there was no life below 200 meters of the ocean, oblivious to a hidden world we could neither see nor touch.
Here in the mesophelagic zone, no photosynthesis happens; most of the sunlight has been filtered out already, starting with the longer wavelengths, the reds and oranges.
With no vegetation to graze upon, all the animals you are about to meet are either commuters, scavengers, or hunters.
“If we knew what was there we wouldn’t have to go.” Jacques Cousteau
Often deep-sea critters like these tropical flashlight fish migrate vertically to shallower waters at night to look for food.
Flashlight fish have a bioluminescent pocket under each eye that they use to communicate with each other, disorient predators, and hunt. Rediscover how to play and pause animations.
This little flashlight fish is having trouble keeping up with the others. Use your browser’s developer tools to unpause its swimming animation so it can catch up.
On the flashlight fish above, right-click “inspect element.”
In the developer tools, navigate to the Animation tab.
Press play
to start the fish’s swimming animation.
There were once six families of Nautilaceae. But only one made it out of the Triassic Period. Here, 600 meters deep, modern descendants of these prehistoric molluscs still prowl. Other cephalopods like octopi have eight arms, but a nautilus can have 90 or so.
Nautili get around using jet propulsion. This couples with their buoyant, air-filled shells to give them their characteristic bobbing motion as they move through the water.
Nautili are long-lived for cephalopods, taking 15 years to reach sexual maturity. Yet their shells are popular as curiosities and jewelry, where they are made into bluish ‘Osmeña Pearls.’ Harvesting is unregulated and most likely unsustainable. This animal that outlived the dinosaurs is more likely to be driven to extinction by the whims of human fashion. Rediscover the cubic-bezier editor.
This nautilus is moving a little too smoothly through the water. Use the cubic-bezier editor in your browser’s developer tools to adjust her movement to look more bouncy.
On the nautilus, right-click “inspect element.”
In the developer tools, click on the Rules tab.
Find the nautilus’s animation-timing-function.
Click the
next to linear to open the cubic-bezier editor.
Optional: Play with the handles.
Choose a curve with some bounce, like Backwards.
The chromatophores on a Humboldt squid’s body fade from white to red too rapidly for the human eye to perceive. Scientists think the squid flash as a form of camouflage or to disorient their prey.
These squid can form huge shoals of over 1000 individuals. They take only a year to grow to full size, and that fast growth means a big appetite. Their coloration and aggressive feeding behavior have earned them the nickname “red devils” among Mexican fishermen.
Recently, this species has started spreading northward as far as the coast of Oregon in the United States. If the thought of armies of aggro squid invading your coastline keeps you up at night, take heart: although Humboldts do migrate toward the surface at night to hunt, you’re unlikely to ever encounter one. The upward limit of their migration, 130 meters below the surface, is well below the depth of unassisted divers.
Rediscover how to scrub the animation timeline.
These Humboldt squid are on the hunt! When Humboldt squid feed, they rapidly flash light and dark.
But how are they changing colors so quickly? Scrub the Animation panel’s timeline to see what’s really going on.
On one of the squid, right-click “inspect element.”
In the developer tools, click on the Animations tab.
Click and drag anywhere inside the timeline to scrub through the animation.
“(A)dventuring under the sea is an unearthly experience, and in all except one sense we are actually entering a new world…” William Beebe, Half Mile Down
Darker than dark. Blacker than black. Even a moonless night sky has the stars, but at noon under a clear sky, not a single ray of sunlight can penetrate the darkness of the Bathypelagic Zone.
There is little oxygen. The temperature hovers near freezing. The weight of hundreds of pounds of water crushes down from above.
Yet life finds a way.
Half of all species of sharks live here, in the deep sea.
True story.
Orange roughy can be found in the blue-lit waters of the Twilight Zone, where red light is filtered out after traveling so far through the water. Only blue light is left. With no red light to reflect, red pigments look black, an effective camouflage against a backdrop of eternal darkness.
Many deep-sea fish have slow metabolisms, which make for a long life. Originally the orange roughy was thought to only live to about 20 years. The adults spawn in large groups over underwater mountain tops called seamounts. Catch quotas were set with the expectation that young fish would mature over 20 years to replace the caught fish. Fisheries trawled these breeding grounds repeatedly, hauling up hundreds of thousands of tons of spawning fish.
Rediscover the CSS filters editor.
Why is this orange roughy black? The fish is wearing a CSS filter that screens out all of its red hues, just like ocean water would. Edit the fish’s filters with your developer tools to see what it really looks like.
On the fish, right-click “inspect element.”
Navigate to the Rules tab.
Find the orange roughy’s filter property.
Click on the 
next to filter to explore other CSS filters.
Click the x next to the custom filter to remove it.
Optional: Try adding a greyscale filter. How do the two differ?
Then scientists discovered that the fish actually live to 150 years of age.
Orange roughy stocks around the world collapsed as catch rates exceeded the rate at which the fish could repopulate.
To this day the future of the orange roughy remains uncertain.
Light up the dark. Match the color of the dragonfish’s photophore below to the flashlight fish’s from earlier.
Many creatures of the deep create their own light, called bioluminesence, but it often requires special optics to pick up on film. To view this secret disco scene, use the eyedropper tool to “calibrate” your browser.
On the dragonfish’s photophore above, right-click “inspect element.”
In the Rules panel, find the color property and click the 
next to #436c6f to open the color picker.
Click the eyedropper 
in the color picker.
Click the flashlight fish’s photophore with the eyedropper to sample its color.
Sound is not the dominant communication method on this planet. More creatures use light to communicate than sound. The deep may be a quiet place acoustically, but it is lousy with light noise from everything from sparking plankton to glowing coral. Creatures here use their own light to communicate, hunt, mate, hide, and escape from one another.
They produce bioluminescence in three different ways:
Harboring symbiotic bacteria.
Manufacturing bioluminescent chemicals in their bodies.
Eating bioluminescent creatures and using their chemicals.
Rediscover using the eyedropper tool.
For every 200 meters, the pressure increases by 20 atmospheres. Right now, we’re at about 320 atmospheres.
If you were to throw a styrofoam cup out right now, it would be crushed to the size of a thimble.
Good thing you’re behind this protective browser.
The average depth of the world’s oceans, 3700 meters, is right around here.
Makes you think.
The Abyss covers over 50% of the planet’s surface.
Down here, there are no days, no nights, no seasons.
Even the most powerful storm above has no impact down here.
It is a huge land populated by Lilliputian creatures who will never know what the sun is. They could not fathom that the water that surrounds them as casually as the air surrounds us has a surface that can be broken.
These are the aliens on our planet.
And we know as little of them as they do of us.
The vomiting shrimp, Acanthephyra purpurea, uses a squirt of glowing goo to confuse and disarm would-be assailants. It might also attract other, larger predators to the scene. Clever.
Rediscover rewinding the animation timeline.
What was that? Some small, quick creature left behind a swirl of bioluminous fluid. Rewind the scene via the Animation panel to spot the culprit.
On the glowing fluid above, right-click “inspect element.”
Navigate to the Animations tab.
Click rewind
to go back to the beginning of the timeline.
Click play
to replay the transition.
The deep ocean isn’t barren.
But life does get exponentially harder to find.
It is wide, flat, and coated in a thick, grey ooze. This ooze comes from what is colorfully referred to as “marine snow”: the leftovers that constantly float down from sunnier waters.
The pressure here is intense. Most abyssal creatures have flabby, gelatinous bodies that explode when brought to the surface. Few fish live here, and those that do are often very small and very efficient.
Hagfish are known as “slime eels” for the prolific amounts of slime they sling at their enemies. Scientists find them fascinating, not only for their ability to turn water into jelly but also because they haven’t changed much in 300 million years. They are the only animals alive today that have skulls but no spine. They also lack jaws, and their eyes are little more than photosensitive spots on their heads.
This hagfish has tied itself in a knot, a technique these ancient creatures use to shed slime and wriggle away to safety. No wonder it has so few marine predators!
Rediscover how to detect obscured animations.
Where’s the hagfish hiding? It’s moving around, hiding in the ooze. Use the Animation panel to detect its location and bring it to light.
On the ocean floor, right-click “inspect element.”
In the developer tools, open the Animation tab to see what elements are animating.
Hover over the name of the element that is wriggling around to see where it is on the page.
Click to select the animated element.
With the hagfish selected, navigate to the Rules tab.
Under Rules, change the hagfish’s bottom property to 150px to lift it up out of the ooze.
Activate audio. This dive is outfitted with sonar equipment best appreciated with the music switched on above.
If you suffer from epilepsy or vestibular disorders, you can reduce animation by switching toggle above off to make your dive more comfortable.
This expedition showcases Firefox Developer Edition’s latest animation tools. It could be tricky down there without them. So get your free copy before you dive in!
You’ve traveled deeper than most browsers and seen things most people will never see. You’re a hardened mariner of solid repute. We can tell you like uncovering deep-sea mysteries and finding clever workarounds to complex problems.
The crew is impressed.
Next time, try taking Firefox Developer Edition for a spin, and see what leviathans you might encounter.
