Amazônia — The Living Archive

An immersive, design-first field catalogue of the Amazon rainforest's keystone species. Built as a single-page scrollytelling experience: a bioluminescent 3D hero, a scroll-assembled "Lumen Tree", a horizontally-panning specimen gallery, a searchable species atlas, a Red List spotlight, and an interactive 3D canopy.

Tech stack

• React 19 + TypeScript + Vite 8
• Tailwind CSS 4 for styling (design tokens in src/index.css)
• Three.js via @react-three/fiber + @react-three/drei for the 3D scenes
• GSAP ScrollTrigger for scroll-driven animation
• Lenis for inertial smooth scrolling
• Framer Motion for UI transitions
• lucide-react for icons

Getting started

npm install
npm run dev      # start the dev server (http://localhost:5173)
npm run build    # type-check + production build to dist/
npm run preview  # preview the production build locally

Structure

src/
  App.tsx                 # page composition (sections in scroll order)
  hooks/useSmoothScroll.ts# Lenis + GSAP ticker integration
  lib/scrollLock.ts       # shared modal/menu scroll-lock (controls Lenis)
  data/species.ts         # all species + index + IUCN metadata
  components/              # one file per section / UI piece
public/images/            # species photography

Accessibility is respected throughout: prefers-reduced-motion disables smooth scroll, the firefly/tree animations, and the grain; custom cursor falls back to native on touch and reduced-motion.

Deploy

Deployed on Vercel — framework preset Vite, build command npm run build, output directory dist. No environment variables required.