REQUIEM REEF

• 

  website

Inspiration

Most 3D hackathon sites chase spectacle for its own sake — cool geometry, cool colors, nothing to say. I wanted to build something that used the "wow" moment for a reason. Deep-sea bioluminescence was the starting point: real animals that make their own light just to survive being seen at all. That felt like the right metaphor for the actual subject of the project — species that are running out of chances to be seen before they disappear.

So the site became REQUIEM REEF: a dying reef you explore with a single point of light, populated with ten real marine species, verified against IUCN Red List and NOAA data — seven Critically Endangered, three already extinct.

What it does

Your cursor is a bioluminescent lure drifting through a pitch-black reef. Nothing is lit until your light gets close — then a creature ignites, and a card surfaces with its name, status, and a real fact about it. Endangered species glow in their natural color, as if there's still something worth saving. Extinct species glow in warm candlelight gold instead — a memory being lit, not a living thing.

Scrolling carries you through four real chapters, each darker and emptier than the last:

• The Living Reef — still holding on
• The Fading Reef — numbers falling fast
• The Last Refuge — among the last of their kind
• The Forgotten Deep — gone; this is what remembering looks like

By the time you reach the bottom, everything you find is already extinct.

How I built it

Vanilla Three.js (r128, via CDN) — no build step, no bundler, a single HTML file you can just open. Every creature is built from primitive geometry (spheres, cylinders, cones) composed into recognizable silhouettes — including a recursively-branching coral generator for the elkhorn and staghorn coral. Bioluminescence is driven by emissiveIntensity on a near-black MeshStandardMaterial, animated per-frame based on distance to the cursor light, paired with an additive-blended glow sprite for the bloom effect. Fog density, background color, and a live "chapter" readout all shift smoothly as you descend.

Challenges I ran into

The biggest one: my first version calculated the cursor-light's position by raycasting onto a 3D plane using the camera's field of view — which meant its reach shrank on narrower windows while the creatures stayed at wide, fixed positions. On some screens the light simply couldn't reach half the reef, so creatures never lit up. The fix was to decouple the light's reach from screen aspect ratio entirely, using a fixed world-space offset instead, and pull every creature and light source into a range the cursor can always reach.

The second challenge was getting the facts right. This project only works if it's honest, so I verified every statistic — the vaquita's current population, the North Atlantic right whale's 2024 count, the exact year the Chinese paddlefish was declared extinct — against primary sources rather than relying on memory, since some of these numbers change year to year.

What I learned

That constraints make metaphors stronger, not weaker. "You can't see it until your light finds it" is a mechanic, but pointed at ten specific, real, sourced animals it becomes an argument. And a genuinely small bug — a raycasting plane tied to aspect ratio — can quietly break the entire emotional point of a project if you don't catch it.

Built With

• canvas-api
• css3
• html5
• javascript
• three.js
• webgl