FableFork
A choose-your-own-adventure platform with 3D environments, branching narratives, and 12 stories across science, mythology, history, and fantasy.
The Idea
My kids grew up on choose-your-own-adventure books. The format is irresistible to them -- the branching paths, the feeling that the story belongs to you because you made the decisions. They've read the same books so many times the spines are cracked.
I wanted to build a digital version that felt more immersive than a page turn. I wanted something that felt more like stepping into a world than reading on a screen. Each story has its own 3D environment -- star fields for space, rising bubbles for the ocean, fireflies for the forest. The narrative branches are visualized as a constellation map, so you can see all the paths you've explored and the ones you haven't.
The story library, reading a story with a 3D scene, and the star map of branching paths.
What's Inside
12 Stories
Fantasy, science, mythology, history, ocean, nature, art history, philosophy, music, and more. Each with full branching paths and multiple endings.
3D Environments
Every story has a themed 3D scene rendered behind it -- nebulae, forests, canyons, oceans. Built with React Three Fiber and Three.js.
The Chronolith
A growing 3D crystal sculpture that evolves as you make choices. Different decision types add different geometric elements -- gold shards for heroic choices, glass octahedrons for scientific ones, stone swirls for mystic decisions.
The Great Tapestry
An interactive star map showing the full story graph. A golden thread traces your path; ghost filaments show branches you haven't explored yet.
Personalization
Enter player names and pronouns during setup. Stories use variable substitution so every character reference matches who's reading.
Achievements
Eight achievement types tracked across all stories. An endings gallery catalogs every outcome you've discovered, categorized by type.
The Build
FableFork started as a vanilla JavaScript prototype -- 2,800 lines across 8 files with 16 stories, sound effects, and a working reader. That version worked but looked flat. The rebuild in Next.js with React Three Fiber and Three.js was about making every screen feel like a place rather than a page.
The 3D layer runs on a persistent WebGL canvas behind the entire app. As you navigate between screens, the scene morphs smoothly rather than tearing down and rebuilding. Story environments, the Chronolith crystals, and particle systems all render at 60fps on iPad. The static export deploys to Vercel with no server logic.
Built With
Next.js 16, React 19, TypeScript, Tailwind CSS v4, Framer Motion, Zustand, React Three Fiber, Three.js, Lucide React, Web Audio API. Static export to Vercel.