CASE FILE // 3D WEB / SHOWCASE
THE SAFEHOUSE.
ROLE — FRONTEND & 3D WEB DEVELOPERTIMELINE — 2025 — PRESENTSTATUS — WORK IN PROGRESS
Showcase and pitch site for The Safehouse community, delivered as a guided 3D scroll journey — campfire gathering, forest path, signposts, and a gate — rendered in real-time WebGL with scroll-driven choreography.
HIGHLIGHTS
- ▸ Interactive 3D journey scene in React Three Fiber with procedural terrain and ember particles
- ▸ GSAP timelines + ScrollTrigger wired to Lenis smooth scroll via a shared Tempus clock
- ▸ 13 scroll-driven narrative sections tied to waypoints and scroll stages
- ▸ Rive vector animations + SplitHeading / Reveal / Parallax motion primitives
- ▸ Accessibility-first: MotionModeContext honors prefers-reduced-motion; JourneyCanvas is lazy-loaded
ARCHITECTURE
- ▸ CampfireCanvas anchors the hero; JourneyCanvas takes over with CurvedGround + pathCurve math
- ▸ JourneyCamera rig follows the path driven by scroll progress, not time
- ▸ Scene entities (Tent, Tree, Birds, Gate, Embers) and deterministic RNG modules keep scenes reproducible
STACK
APP
- React 19
- Vite 8
- Tailwind CSS 4
- React Router 7
MOTION
- GSAP 3.15
- Framer Motion 12
- Lenis
- Tempus
3D
- Three.js
- @react-three/fiber 9
- drei
- postprocessing
UPLINKS