Fathom

Run this with Claude Code to build your own Fathom variant — free. Want the exact, tested code shown in the demo? That’s the $79 download.

# FATHOM — Free Claude Code Prompt

*From SmartDuke Studio (studio.smartduke.com). The real prompt behind
our deep-ocean template. The exact tested build (with the fish, the
staging, every fix) is the paid download: https://studio.smartduke.com*

## Before you start

- Node.js ≥ 20.9. Everything is procedural except one model:
  **BarramundiFish.glb** from Khronos glTF-Sample-Assets (CC0).
  Compress: `npx @gltf-transform/cli resize --width 1024 --height 1024`
  + `webp` (12MB → ~400KB).

## The prompt

> Build a scroll-driven deep-sea descent website for a fictional
> submersible expedition company — Awwwards emotional-journey style.
> Scrolling = sinking from the sunlit surface to the ocean floor at
> 3,800 m.
>
> **Stack:** Next.js + TS + Tailwind v4 + vanilla Three.js + pmndrs
> `postprocessing` (SMAA, mipmap Bloom ~threshold 0.32, Vignette, film
> noise, ACESFilmic) + GSAP + Lenis.
>
> **Architecture — everything is staged by depth.** One fixed canvas;
> camera sinks on a gentle helix as scroll progress rises (lerped),
> landing on the floor at ~86% and holding. Write gradient-stop helpers
> (numG/colorG over progress) and drive EVERYTHING through them: water
> color + fog near/far, sun/hemi intensity, exposure, per-system
> opacity windows.
>
> **The systems, top to bottom:**
> - Caustic SURFACE seen from below: additive plane, fbm-interference
>   shader (two fbm fields, pow(1-abs(a-b), 7) makes the web), fades
>   out by 35% depth. NEVER aim the camera up at it — additive surface
>   + bloom = whiteout. Imply it with god rays instead.
> - GOD RAYS: 5 large additive shader planes, vertical falloff +
>   noise bands, slow group rotation, gone by 40%.
> - FISH SCHOOL: ~150 instanced copies of the Barramundi glb —
>   bake mesh matrixWorld into geometry, auto-orient the long axis to
>   +z, normalize scale, add an InstancedBufferAttribute phase, inject
>   a swim cycle into the PBR material via onBeforeCompile (replace
>   `#include <begin_vertex>`: tail-weighted spine bend,
>   transformed.x += sin(t*5.5 + phase + z*2.2) * 0.24 * smoothstep(0.3,-1.0,z)).
>   PBR underwater needs IBL: PMREM RoomEnvironment, low intensity.
>   Fish orbit rings around the descent axis — keep fauna OFF the
>   camera path or they read as debris. Verify they swim head-first
>   (velocity·forward > 0 from the instance matrix).
> - JELLYFISH: ~10 procedural bells (half-sphere + additive fresnel
>   shader, squash-stretch pulse) with 6 THREE.Line tentacles each,
>   swayed per-frame; spawn on a ring 16–46 units off-axis in the
>   twilight band.
> - MARINE SNOW: ~2000 points riding with the camera.
> - BIOLUMINESCENT FIELD: ~1600 points with a custom shader — per-point
>   phase pulse × proximity-to-camera-depth brightening, waking after
>   50% depth. Plus a 900-particle vortex RING the camera falls
>   straight through.
> - THE FLOOR: flat-shaded noise terrain, basalt boulders, and a
>   hydrothermal VENT: orange point light breathing, rising ember
>   particles (they become warm bokeh near the lens), a SpotLight
>   "headlamp" on the camera that wakes in the dark zones.
>
> **DOM:** dive-instrument HUD on the right edge — depth in meters,
> zone name (Sunlight/Twilight/Midnight/The floor), pressure in atm —
> reading a window-exposed depth value each rAF. Stage the displayed
> depth to MATCH the story sections scrolling past (non-linear stops),
> not raw progress. Zone sections alternate sides (right-aligned ones
> need padding to clear the HUD); serif-italic display type; final
> booking CTA.
>
> Respect prefers-reduced-motion. 60fps target: cap DPR at 1.75, skip
> off-screen systems.

## Gotchas

- The whiteout rule above is real — we shipped it and reverted.
- Seeking/animating while a tab is hidden freezes rAF — don't debug
  "broken" animation in a background tab.
- Keep the physical sun/glow sources 40°+ off the camera axis.

---

*Paid version: the exact staged build + compressed fish + HUD +
README/license — studio.smartduke.com*

Fathom — questions

Related templates

Part of