CHRONOS-HEIST: A Playable Multi-Era Temporal Mystery Game Powered by Sanity Content Lake

#devchallenge #sanitychallenge #sanity #ai

Sanity Challenge Path Two Submission

This is a submission for the Sanity Challenge, Path Two: Vibe-Code Something Strange

What I Built

CHRONOS-HEIST is a playable, multi-era temporal mystery game where changing the past rewrites the future in real time.

Instead of treating a game world as ephemeral React state or a rigid SQL table, every room, object, physical wall, grandfather clock, causal rule, and paradox is modeled as structured content inside Sanity Content Lake.

🕰️ The World: The Clockmaker's Vault

Three distinct iterations of the exact same physical vault room exist concurrently across a 106-year temporal axis:

1920 (The Origin): Mechanical clocks, ticking pendulums, gaslight amber warmth, a hand-carved mahogany workbench, a brass rotary safe combination lock, and archival gramophone cylinders.
1970 (The Echo): A Cold-War electronics retrofit featuring green cathode-ray oscilloscopes, reel-to-reel magnetic tapes, and armored industrial conduits.
2026 (The Consequence): An abandoned cyber-temporal research bunker protected by biometric laser tripwires, quantum terminals, tachyon fissures, and the floating gyroscopic Chronos Core.

⚡ The Core Mechanic: Real-Time Zero-Refresh Causality

When an operative in 1920 cracks the rotary safe combination (19 - 70 - 26), takes the Antique Brass Vault Key, and hides it inside the North Wall lime mortar cavity:

An atomic temporalAction document is committed to Sanity Content Lake.
The server-side Causality Engine evaluates cross-era relationships (causalityLink).
Sanity’s Live Query engine (next-sanity/live) immediately broadcasts the mutation.
With zero page refresh, the 1970 electrical conduit records an anomalous density spike, and the 2026 cyber vault dynamically materializes a hidden resonance compartment, exposing the legendary Chronos Core Cylinder.
The action triggers a structured 5-Stage Sanity Workflow, alerting the Game Master command center to authorize and seal the timeline.

Demo

🚀 Live Production Deployment: https://chronos-heist.vercel.app
🎮 3D Vault Direct Play: https://chronos-heist.vercel.app/game/CHRONOS-ALPHA
🛡️ Game Master Center: https://chronos-heist.vercel.app/gm/CHRONOS-ALPHA
⚡ Interactive D3 Causality Graph: https://chronos-heist.vercel.app/causality
🎛️ Sanity Studio Live: https://chronos-heist.vercel.app/studio

🎬 Video Walkthrough

Demo Video Link: https://youtu.be/X6kC3aGUWMA

Code

🐙 GitHub Repository: https://github.com/Shreyansh00987/chronos-heist
Tech Stack: Next.js 16 (App Router + Turbopack), Sanity Content Lake (v5 Studio + next-sanity/live), Three.js WebGL 3D Canvas, D3.js Force Simulation, Web Audio API, TypeScript, Tailwind CSS.

My Build Process

🤖 AI-Native IDE & Prompting Approach

This entire project was prompted into existence using Google Antigravity, DeepMind's advanced AI-native agentic coding IDE.

Rather than generating simple boilerplate, the prompt strategy was centered on treating Sanity as the single source of truth for physical causality across time:

1. Content Modeling Prompts That Worked

"Model physical space across time. Do not hardcode rooms. Create a Sanity schema where a 'room' document 
has a reference to an 'era' (1920, 1970, 2026), and a 'causalityLink' document that explicitly defines 
how an action on an object in the past modifies attributes of an object or room in a downstream era."

This resulted in 10 clean, relational Sanity schemas (era, room, gameObject, temporalAction, causalityLink, paradox, timelineState, gameSession, player, workflowTransition).

2. Reaching Past the Studio: The App SDK Bonus

Instead of a standard read-only portfolio or blog, we built a full App SDK real-time temporal console:

A floating Sanity App SDK Console dock with a real-time Lake RTT Latency Probe measuring live transaction round-trip times directly to Sanity Content Lake.
Bi-directional client mutations allowing players to trigger temporal actions and inspect raw GROQ payloads in real-time.

3. Reaching Past the Studio: Structured 5-Stage Workflows

We modeled human + agent collaboration directly next to the content. Whenever a past action is taken:

PAST_ACTION_COMMITTED 
        ↓
CAUSALITY_AGENT (Autonomous heuristic impact analysis)
        ↓
FUTURE_STATE_RECALCULATION (Downstream patches computed)
        ↓
GAME_MASTER_REVIEW (Human GM sign-off UI)
        ↓
TIMELINE_SEALED (Immutable canonical record)

In the Game Master Command Center (/gm/CHRONOS-ALPHA), a human operator inspects the AI agent’s confidence scores and authorizes timeline sealing.

4. Where the Model Got Stuck & How We Course-Corrected

Three.js Canvas Lighting & Contrast: Early iterations generated dark, moody 3D rooms with retro CRT overlays that obscured the mechanical models. We course-corrected by introducing high-contrast lighting: brass point lights, a glowing green banker's desk lamp, ceiling spotlights, and removing the darkening scanline veil from the CRT canvas.
Vercel Framework Detection: Deploying Next.js 16 with Turbopack initially caused Vercel CLI to expect a static dist folder. We added an explicit vercel.json with "framework": "nextjs", which immediately unlocked seamless Edge and Serverless route compilation.
Live 3D State Sync: We tied Next.js Server Actions directly to next-sanity/live. When client.patch().set().commit() completes on Sanity Content Lake, the 3D WebGL canvas re-renders hidden compartments without a single page refresh.

Sanity Project Details

Sanity Project ID: ed3z3z76
Dataset: production
Sanity Studio Access: https://chronos-heist.vercel.app/studio

📊 Structured Content Hierarchy

Eras: 1920 (Origin), 1970 (Echo), 2026 (Consequence).
Rooms: 3 physical rooms with relational linkages (linkedRooms[]), dynamic hidden compartments (hiddenCompartments[]), and spatial coordinates.
Game Objects: Physical interactable artifacts with affectsCausality flags.
Causality Matrix: Directed graph of causal dependencies (sourceObject, targetObject, deltaType, probability).
Custom Studio Tool: We mounted our bespoke D3 Force-Directed Causality Graph directly inside Sanity Studio as an operations tool alongside document editors.

Agent Session

The full multi-turn autonomous coding session was orchestrated via the Google Antigravity IDE.
Key milestones accomplished across the session:

Architecture Planning: Designing the relational temporal data model for Sanity Lake.
Schema & Studio Scaffolding: 10 schemas, custom structure hierarchy, and embedded D3 causality tool.
Immersive 3D WebGL Canvas: 360° orbital controls, raycasting, sector radar minimap, grandfather clock, and rotary safe dial.
Interactive Minigames: 1920 rotary safe combination lock (19-70-26) and 1970 cathode oscilloscope frequency tuner (432 Hz).
Procedural Web Audio Engine: Synthesizing 1920 gramophone transmissions, 1970 radio intercepts, and 2026 quantum AI audio with live equalizers.
Automated CI/CD: Pushing full repository to GitHub and deploying live production builds to Vercel with zero downtime.