CASE FILE // 3D WEB / SHOWCASE

THE SAFEHOUSE.

ROLE // FRONTEND & 3D WEB DEVELOPERTIMELINE // 2025 - PRESENTSTATUS // WORK IN PROGRESS
THE SAFEHOUSE cover

EXECUTIVE SUMMARY

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.

SYSTEM 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

CORE 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
SYS_UPLINK // DOWNLOAD