DRIFT -- A Paper World

An interactive 3D paper craft story about a crane named Milo who cannot fly. Eight cinematic acts, 110 procedural sounds, and mood-driven environments built with React Three Fiber and GSAP.

Comment

Inspiration

I wanted to create something that felt handcrafted in a world of polished 3D experiences. The idea of a paper crane named Milo — who can't fly but never stops jumping — came from wanting a protagonist that's relatable through imperfection. Every fold, every edge, every shadow is intentionally simple.

What it does

DRIFT is an interactive 3D storytelling experience with 8 cinematic acts, 110 procedural sounds, and a full narrative arc about a paper crane's journey across a folded world. Players:

  • Navigate a paper craft diorama with WASD/camera controls
  • Interact through click-to-jump, drag-to-wind, collect-leaves, and more
  • Discover hidden lore fragments, console easter eggs, and a secret terminal
  • Experience mood-driven environments (warm, storm, calm, sorrow, hope)
  • Track their full journey with 30+ stats and earn badges

How I built it

  • React Three Fiber + Three.js — All 3D rendering, paper craft geometry with black edge outlines and meshToonMaterial
  • GSAP — Cinematic camera animations, UI transitions, progressive reveals
  • Next.js 16 (App Router) — React 19, server-side rendering, Vercel deployment
  • Custom Web Audio API engine — 110 procedural sounds generated at runtime, zero external audio files
  • L-System procedural generation — Unique trees generated from rewrite rules
  • Conway's Game of Life — Cellular automata grid puzzle in Act 5
  • GLSL shaders — Custom FBM water fluid simulation for the sea
  • Persistent state — localStorage saves secret folds, visit count, and total play time

Challenges

  • Camera system — Building 9 interaction-specific camera paths with GSAP interpolation, clamping, and fail-safes that guide without breaking immersion
  • Audio at scale — Creating 110 sounds procedurally (wind, thunder, cranes, splashes, music chords) without a single audio file
  • Performance — Shared geometry caches, InstancedMesh batching, zero per-frame allocations to maintain 60fps with hundreds of objects
  • Narrative state machine — Managing 8 acts, 30+ beats, mood transitions, and interaction state across a single cohesive story

What I learned

How to combine storytelling with interactive 3D — the hardest part isn't the技术, it's making every interaction feel intentional. Every click, every camera move, every sound serves the narrative.

Try it out

Built With

  • 3d-graphics
  • dark
  • glsl
  • gsap
  • interactive-fiction
  • l-systems
  • next.js
  • procedural-generation
  • react
  • react-three-fiber
  • tailwind-css
  • three.js
  • typescript
  • vercel
  • web-audio-api
Share this project:

Updates

Submission history