The Last Reef

Inspiration

Coral reefs support around a quarter of all marine life, yet we're losing them faster than most people realize. When this hackathon's theme turned out to be "build the most creative 3D website imaginable," I didn't want to make a tech demo that just looked impressive — I wanted the 3D itself to carry a message. The Last Reef is an attempt to make coral bleaching feel real for a few minutes, and to let the visitor's own action be the thing that brings the reef back to life.

What it does

The Last Reef is a scroll-driven narrative site built around a living 3D coral reef. It opens on a bleached, lifeless reef in murky water. As you scroll through short story beats and real facts about coral bleaching, the scene shifts — until you reach an interactive "Restore" trigger embedded directly in the 3D scene. Clicking it sets off a full transformation: the reef blooms into vibrant, bioluminescent life, with particle systems, glow, and marine life fading in. The site ends with a real path to learn more about coral restoration.

How we built it

• Framework: TanStack Start v1 (React 19, SSR) + TanStack Router, running on Vite 7 and Bun
• 3D: Three.js via @react-three/fiber, with @react-three/drei for helpers/instancing and @react-three/postprocessing for bloom and vignette. Corals, fish, anemones, urchins, kelp, and jellies are all rendered with InstancedMesh for performance, and the particle glow / light-shaft effects are custom GLSL shaders.
• Animation: Motion (motion/react) for springs, scroll reveals, and the 3D card tilt effects; Tailwind CSS v4 with OKLCH tokens for styling; shadcn/ui for UI primitives.
• Audio: fully procedural sound design via the Web Audio API — brown-noise beds, biquad filters, LFOs, and oscillator sweeps, with zero audio asset files. Mute state persists via localStorage.
• Performance: a render-free mutable state bridge keeps scroll interactions from re-rendering React at all, and device capability detection scales particle counts, DPR, and bloom intensity down on mobile. Camera motion uses critically damped spring interpolation so it never feels robotic.

Everything runs entirely client-side — no backend, no database.

Challenges we ran into

Getting the "dead → alive" transformation to feel powerful rather than abrupt took real tuning — early versions either changed everything at once (jarring) or faded too slowly (lost the emotional payoff). We settled on a radiating transition that ripples outward from the click point rather than applying uniformly. Keeping performance smooth with instanced organisms, custom shaders, and post-processing bloom running simultaneously on mobile also took a dedicated capability-detection pass to scale particle density and DPR down gracefully.

What we learned

That a 3D website can be more than a showcase of technique — the same tools used for a portfolio piece can carry a real narrative arc if the interaction itself is tied to meaning, not just aesthetics.

What's next

Real-time reef health data integration, additional biome states, and a version where the transformation is tied to an actual restoration action a visitor can take.

Built With

• audio
• bun
• glsl
• motion
• react
• react-three-drei
• react-three-fiber
• react-three-postprocessing
• shadcn/ui
• tailwind-css
• tanstack-query
• tanstack-router
• tanstack-start
• three.js
• typescript
• vite
• web