Feed the Kraken

Overview

Feed The Kraken Narrator replaces a human game master for the pirate-themed social deduction board game Feed The Kraken. Three factions — Pirates, Sailors, and Cultists — compete across a branching voyage map filled with hidden events, cult rituals, mutiny votes, and navigation decisions. The app keeps tension alive by automating the entire game flow: delivering professionally voiced narration, managing phase timing, and triggering location-based events with atmosphere and precision.

Features

• Dual narrator voices — choose between a human narrator (Jack) or AI voiceover, each with 30+ unique narration tracks covering every game event
• Timed Game Mode with fully automated phase transitions, configurable discussion timers, and navigation countdowns
• Free Play Mode to manually trigger any narration organized by game phase — great for learning or custom sessions
• Quick & Long Journey maps with different locations, events, and paths to victory based on player count
• Dynamic event system — Cabin Searches, Feed the Kraken moments, Cult Uprisings, Mutiny checks, and more trigger automatically as the voyage progresses
• Seamless audio management with background music fading on game start and clean teardown across all screen transitions

Technical Details

Built with React Native (Expo SDK 54) and React Native Web for cross-platform support. Navigation is handled by React Navigation with a stack navigator managing 8+ screens and route parameter-based game state. The audio engine uses Expo AV with real-time status callbacks — audio duration dynamically controls how long each game phase lasts, driving four distinct step types: audio-driven, delay-based, background audio, and manual. Deployed to the web via expo export --platform web on Vercel; mobile builds via EAS Build.

Engineering Challenge

Cross-platform audio and timing synchronization was the central challenge — narration steps had to advance only after audio finished while simultaneously animating a progress bar in sync, combining Expo AV status callbacks, Animated.timing(), and interval-based timers all running in parallel. React Native Web added another layer: ImageBackground sizing, text truncation, and audio loading all behave differently in the browser, each requiring platform-specific workarounds. Navigation teardown was also tricky — a running countdown could fire mid-navigation and crash an unmounting component, solved by clearing the interval synchronously as the very first teardown operation.