// dive-in.jsx — depth-scrolling immersive feature. // Adaptation: dataset has no water-layer field, so layers are bucketed by habitat // (Saltwater on top → Brackish in middle → Freshwater at depth). The metaphor is // "different waters, descending in salinity" rather than literal depth. function DiveBg({ depth }) { const top = `oklch(${0.42 - depth * 0.30} 0.10 ${220 - depth * 10})`; const mid = `oklch(${0.22 - depth * 0.18} 0.07 ${225 - depth * 8})`; const bot = `oklch(${0.08 - depth * 0.06} 0.03 230)`; return (
{Array.from({ length: 28 }).map((_, i) => (
))}
); } function DiveSchools({ density = 1 }) { const all = [ { y: 8, dur: 26, delay: 0, flip: false, scale: 0.45, opacity: 0.18 }, { y: 22, dur: 32, delay: -10, flip: true, scale: 0.7, opacity: 0.22 }, { y: 36, dur: 28, delay: -4, flip: false, scale: 0.55, opacity: 0.30 }, { y: 48, dur: 42, delay: -22, flip: true, scale: 1.0, opacity: 0.16 }, { y: 60, dur: 30, delay: -8, flip: false, scale: 0.5, opacity: 0.25 }, { y: 72, dur: 36, delay: -16, flip: true, scale: 0.8, opacity: 0.18 }, { y: 84, dur: 24, delay: -2, flip: false, scale: 0.4, opacity: 0.22 }, { y: 92, dur: 44, delay: -28, flip: true, scale: 0.9, opacity: 0.14 }, ]; const swimmers = all.slice(0, Math.max(2, Math.round(all.length * density))); return (
{swimmers.map((s, i) => (
))}
); } function DiveLightShafts({ depth }) { if (depth > 0.65) return null; const op = Math.max(0, 0.3 - depth * 0.45); return (
{[20, 42, 66, 84].map((x, i) => (
))}
); } function DiveTransition({ intensity = 'strong', onDone }) { const [phase, setPhase] = React.useState(0); React.useEffect(() => { if (intensity === 'off') { onDone?.(); return; } const dur = intensity === 'strong' ? [60, 480, 800] : [40, 280, 480]; const t1 = setTimeout(() => setPhase(1), dur[0]); const t2 = setTimeout(() => setPhase(2), dur[0] + dur[1]); const t3 = setTimeout(() => { setPhase(3); onDone?.(); }, dur[0] + dur[1] + dur[2]); return () => { clearTimeout(t1); clearTimeout(t2); clearTimeout(t3); }; }, [intensity]); if (intensity === 'off' || phase === 3) return null; const big = intensity === 'strong'; return (
{phase >= 1 && ( <> {[0, 1, 2].map(i => (
))} )} {phase >= 1 && (
= 2 ? 'translateY(0)' : 'translateY(-100%)', transition: `transform ${big ? 0.7 : 0.4}s cubic-bezier(.55,0,.25,1)`, }}> {phase >= 2 && Array.from({ length: big ? 18 : 8 }).map((_, i) => (
))}
)} {phase === 1 && (
)}
); } function DiveDepthGauge({ depth, layer }) { const meters = Math.round(depth * 200); return (
0m
{[0.05, 0.30, 0.85].map((t, i) => (
))}
{meters}m
200m
{layer}
); } function DiveSoundIndicator({ depth }) { const labels = [ [0.25, 'Wave wash · gulls'], [0.55, 'Muffled current'], [0.85, 'Deep rumble'], [1.01, 'Silent · pressure'], ]; const cur = labels.find(([t]) => depth < t)?.[1] || 'Silent'; return (
{cur}
); } function DiveLayerBand({ layer, fish, idx, onOpen, accent }) { return (
0{idx + 1} / {layer.depth}

The {layer.name}

{layer.blurb}

{fish.map((f, i) => ( onOpen(f)} /> ))} {fish.length === 0 && (
No specimens drift through this layer · adjust filters
)}
); } function DiveFishCard({ fish, accent, delay, onClick }) { return ( ); } function DiveSurfacePull({ pulling, progress }) { if (!pulling) return null; const ready = progress >= 1; return (
↑
{ready ? 'Release to surface' : 'Pull to surface'}
); } // Main Dive In screen function DiveIn({ species, onClose, onOpen, intensity = 'strong' }) { const scrollRef = React.useRef(null); const [depth, setDepth] = React.useState(0); const [transitioning, setTransitioning] = React.useState(intensity !== 'off'); const [waterFilter, setWaterFilter] = React.useState('All'); const [pulling, setPulling] = React.useState(false); const [pullProgress, setPullProgress] = React.useState(0); const pullStart = React.useRef(null); // Layers: bucket by habitat (since dataset has no water-layer field). // Saltwater = surface/upper, Brackish = mid (estuaries), Freshwater = depth (rivers/lakes inland). // The fourth "Abyss" layer collects rare/uncommon species (is_common === false). const layers = React.useMemo(() => [ { name: 'Saltwater', depth: 'Open ocean', blurb: 'Where light dapples open water and predators chase bait through current seams.', accent: '#7BD3C8', filter: f => f.water === 'Saltwater', }, { name: 'Brackish', depth: 'Estuaries', blurb: 'Where rivers meet the sea — tidal mouths, oyster bars, mangrove roots.', accent: '#6BB8D8', filter: f => f.water === 'Brackish', }, { name: 'Freshwater', depth: 'Rivers · Lakes', blurb: 'Inland waters. Cold streams, slow rivers, still ponds — each its own world.', accent: '#4A8EC8', filter: f => f.water === 'Freshwater', }, { name: 'Rare', depth: 'Records · Wrecks', blurb: 'Uncommon catches — species rarely landed, catalogued from records and reports.', accent: '#7B6BC8', filter: f => f.is_common === false, }, ], []); const filteredFish = React.useCallback((layer) => { let arr = (species || []).filter(layer.filter); if (waterFilter !== 'All') arr = arr.filter(f => f.water === waterFilter); // Prefer species with cover photos and shuffle slightly per layer arr = arr.filter(f => f.coverImg).slice(0, 6); if (arr.length < 4) { // backfill without strict photo requirement arr = (species || []).filter(layer.filter) .filter(f => waterFilter === 'All' || f.water === waterFilter) .slice(0, 6); } return arr; }, [waterFilter, species]); const currentLayer = depth < 0.25 ? 'Saltwater' : depth < 0.55 ? 'Brackish' : depth < 0.85 ? 'Freshwater' : 'Rare'; const onScroll = (e) => { const t = e.target; const max = t.scrollHeight - t.clientHeight; const d = Math.min(1, Math.max(0, t.scrollTop / Math.max(1, max))); setDepth(d); if (t.scrollTop > 0 && pulling) { setPulling(false); setPullProgress(0); } }; const onTouchStart = (e) => { const t = scrollRef.current; if (t && t.scrollTop <= 0) { pullStart.current = e.touches[0].clientY; } }; const onTouchMove = (e) => { if (pullStart.current == null) return; const dy = e.touches[0].clientY - pullStart.current; if (dy > 0) { setPulling(true); setPullProgress(Math.min(1.4, dy / 90)); } }; const onTouchEnd = () => { if (pullProgress >= 1) onClose?.(); setPulling(false); setPullProgress(0); pullStart.current = null; }; return (
Dive In

Descend
into the
column.

Scroll to descend through the waters of the field guide. Each layer holds species adapted to its salinity and habitat.

{['All', 'Saltwater', 'Freshwater', 'Brackish'].map(w => { const on = waterFilter === w; return ( ); })}
↓ Scroll to descend
{layers.map((l, i) => ( ))}
The seabed.
Time to surface.
{transitioning && ( setTransitioning(false)}/> )}
); } Object.assign(window, { DiveIn });