A descent story — the page darkens meter by meter to the abyss.

Build a scroll story "FATHOM" (an ocean-conservancy appeal) with React + Tailwind. Five full-screen chapters; a fixed background interpolates from #9adbe8 (surface) through #14547a and #0a2540 to #020a14 (abyss) with scroll progress; a fixed depth readout top-right ticks "0m → 3,800m" proportional to scroll. Chapters (alternating alignment, serif "Newsreader" headings, "Inter" body, white text after chapter 2): "The sunlit yard" (plankton facts), "Where color dies" (red light gone at 15m), "The midnight economy" (bioluminescence), "Pressure is a landlord" (1,000 atmospheres), "What we send down" (a plastic bag arrives before we do — the appeal + CTA "Fund a trench survey"). Each chapter's text fades up via IntersectionObserver. Tiny CSS bubbles rise faster the deeper you scroll.
scrollocean