Aetheria: Chronicles of the Party

What I Built
Aetheria is a visual, AI-driven tabletop roleplaying game (RPG) designed to simulate the experience of playing Dungeons & Dragons with a virtually infinite, dynamic Dungeon Master. By combining deep generative narrative with on-the-fly cinematic image synthesis, the application creates a continuous, immersive, and highly responsive adventure.

Key Features
Dynamic Campaign Generation: The game begins by randomly selecting from over 50 unique scenarios (ranging from steampunk fantasy to Eldritch horror escapes) and architectural visual styles (e.g., Studio Ghibli cel-shaded, gritty realistic dark fantasy). No two adventures start exactly the same way.

Intelligent AI Dungeon Master: Powered by an advanced language model, the "DM" evaluates the environmental context, party composition, character stats, the chosen action, and the outcome of a 20-sided dice roll to yield contextual story events, character dialogues, and branching decision paths.

Flexible Party Modes: * Local Multiplayer: Build a custom party of heroes and pass the device with friends.

Solo vs. The World: Play as a single human protagonist alongside three fully autonomous AI-driven companions who take their own unprompted turns.

Freedom of Action: Players aren’t restricted to predefined buttons. You can select one of the DM's contextual "Suggested Paths" or type completely custom actions—from attempting to barter with an ancient sphinx to charging recklessly at an undead giant.

Cinematic Visual Continuity: With every story beat, the application generates a stunning 16:9 cinematic image representing the exact moment and location in the game. It uses previous scene descriptions as context to maintain environmental consistency turn-to-turn.

Immersive Physics-Based Dice: Taking action summons a highly polished, animated 3D-simulated 20-sided die using dynamic lighting, tumbling physics, and magic circle particle effects.

Journey Map & Persistence: The application actively auto-saves every campaign state locally. Players can abandon, revisit, resume, or delete any ongoing adventure from their "Journey Map" hub.

Image Demo

Enjoy this video walk-through demonstrating party creation, a dynamic combat encounter with an unpredictable D20 roll, and the real-time generation of our cinematic environment!

Code
https://github.com/Sai-Emani25/Atheria

How I Built It
The application is built as a completely serverless, client-side React SPA leveraging modern browser APIs and Google's Gemini SDK for its backend logic.

1. Frontend Core & UI/UX Framework: React 19 + TypeScript. Chosen for strict type safety over complex entity management (GameState, Player records, classes).

Build Tool: Vite, configured for high-performance module bundling and seamless local development.

Styling: Tailwind CSS. The app features a custom design system (relying heavily on negative space, absolute positioning, glow filters, and z-index layering) without writing raw CSS. It leverages precise typographic selections including the Cinzel (serif/fantasy context), Spectral, and Inter fonts.

Animation System: motion/react (Framer Motion). This drives the physics, scaling, rotations, and staggered entrance timings. The DiceRoller component specifically utilizes complex keyframe manipulation (rotate: [0, -720, -710, -720]) and AnimatePresence to render a realistic, weighty physical die tumbling across the screen.

1. Generative AI Engine (The "Backend") Aetheria essentially uses Google's foundational models as its game engine, integrated via the @google/genai TypeScript SDK:

[User Action + D20 Roll]
│
▼
┌────────────────────────────────────────┐
│ Gemini 3.1 Pro (Narrative Engine) │ ──► Generates Story & Visual Prompt
└────────────────────────────────────────┘
│
▼
┌────────────────────────────────────────┐
│ Gemini 2.5 Flash Image (Visual Engine)│ ──► Generates 16:9 Cinematic Image
└────────────────────────────────────────┘

Narrative Engine (Gemini 3.1 Pro Preview): * Structured Output (JSON Mode): The system relies on strict JSON schema enforcing. When a player rolls, the DM passes the complete contextual state (party health, previous locations, the dice roll, user intent) into Gemini 3.1 Pro. The model is constrained to return a heavily typed JSON object containing the narrative update, stat modifiers (damage/healing), and exactly 3-4 string suggestions for the next turn.

Prompt Engineering: The DM is strictly instructed to keep dialogue punchy and respond to the specific weight of the D20 roll (where 1 is catastrophic and 20 is miraculous).

Visual Engine (Gemini 2.5 Flash Image): * The narrative engine generates a purely descriptive "Visual Prompt" representing the outcome. This text is piped into the Gemini Flash image model.

Continuity Injection: The prompt is dynamically wrapped with the campaign's randomly selected art style, the list of current heroes in the room, and the previous image prompt to ensure the model doesn't spontaneously shift the setting or lighting from one frame to the next.

The model returns a raw base64 image data payload, which React renders natively without round-tripping to cloud storage bins to keep latency incredibly low.

1. State Management & Persistence React Context & Hooks: Standard useState orchestrates the monolithic GameState object, ensuring single-source-of-truth rendering.

Local Storage Sync: Given the complexity of the object traversing (narrative history, gold, stat updates, massive base64 images), the component intercepts changes using useEffect and serializes the active states into localStorage. The loadJourneys logic scans the native browser storage for keys matching aetheria_journey_* to reconstruct the complete Journey Map grid.

Prize Category
Best Google AI Usage: Aetheria showcases the depth of the @google/genai SDK by orchestrating a dual-model pipeline entirely on the client side. By leveraging Gemini 3.1 Pro's strict JSON mode for deterministic state mechanics alongside Gemini 2.5 Flash Image's contextually aware visual synthesis, the application transforms a large language model into a fully capable, real-time procedural game engine.

Best Ode to Alan Turing: Aetheria explores the boundary of machine intelligence and human-like creativity. By tasking the AI with acting as a dynamic Dungeon Master—a role traditionally requiring immense empathy, improvisational storytelling, and rule enforcement—the game stands as a modern testament to the Turing test, creating a deeply convincing, autonomous companion for human players.