-
Solve the cube. Unlock the cosmos.
Inspiration
It started with a simple question: What if I could capture the satisfaction of solving a Rubik's Cube, but make it evolve?
I've always been fascinated by the Rubik's Cube, not just as a toy, but as a meditation on spatial reasoning. That moment when your fingers know the algorithm before your brain catches up. That satisfying click when everything aligns. I wanted to bottle that feeling and transform it into something that could surprise veteran puzzle solvers.
But traditional Rubik's Cube games have a problem: once you learn the patterns, the magic fades. I needed escalation. I needed transformation. I needed the cube itself to become something more.
That's when The Tesseract was born.
What it does
The Tesseract is a three-phase puzzle game that progressively transforms from a familiar concept into something entirely unexpected.
Phase 1: Awakening starts as a straightforward color-matching puzzle. Each face needs to become a single solid color. With 4 colors and 6 faces, the state space is massive. The mathematical complexity scales as: CF×QC^{F \times Q}CF×Q Where CC C = colors (4), FF F = faces (6), QQ Q = quadrants per face (4). That's 4244^{24} 424 possible configurations, 281 trillion states.
Phase 2: Resonance ditches the Rubik's cube metaphor entirely and introduces symbol matching. Players create adjacency relationships, with complementary symbols glowing golden when aligned. This adds a graph-theory dimension: ∑(matches)≥M\sum(\text{matches}) \geq M∑(matches)≥M Where MM M = total matches needed to win (30+)
Phase 3: Convergence breaks all the rules. Floating constellation fragments orbit in 3D space. Players select and rotate individual pieces. It's less Rubik's Cube, more cosmic Tetris meets Monument Valley.
Between each phase, players solve AI-generated riddles that act as progression gates, adding a narrative layer to the mathematical challenges.
How we built it
The Stack:
Three.js for 3D rendering and spatial manipulation React for UI state management and overlay systems Vite for blazing-fast development Tone.js for reactive audio feedback Tailwind CSS for cosmic aesthetics OpenAI GPT-4 for dynamic riddle generation Netlify Functions for serverless LLM integration
The architecture balances imperative 3D rendering (Three.js) with declarative UI state (React). Each phase required custom raycasting logic, win detection algorithms, and visual feedback systems. The riddle system uses GPT-4 to generate thematically appropriate puzzles with multiple valid answers to prevent frustration.
Challenges we ran into
Camera Control Hell The first version had a maddening bug: every time you clicked a cell, the camera would snap back to the starting position. Players couldn't rotate the cube to see other faces. Root cause: React's callback recreation was triggering the Three.js engine to dispose and recreate the entire scene on every state change. The fix: Callback refs that preserve the 3D scene while allowing React state updates: javascript const callbacksRef = useRef({ onCellInteract, onPhase3Rotate, ... });
useEffect(() => { callbacksRef.current = { /* update callbacks / }; }, [onCellInteract, onPhase3Rotate]); **Win Detection Timing* Phase 1 would detect wins correctly, but nothing would happen. The victory screen never triggered. Root cause: React's setState is asynchronous. The win check happened inside the state updater, but the victory handler ran before the state update completed. The fix: Moving the check to the next event loop tick: javascript setTimeout(() => { if (didComplete) handleVictory(); }, 0); Riddle System: The AI Wildcard AI-generated riddles were often too abstract or had obscure answers like "Entropy" or "Transcendence." Players would rage-quit. The solution: Constrain the prompt and add alternate answers: json { "answer": "light", "alternateAnswers": ["color", "white", "spectrum"], "hint": "Without me, color cannot exist" }
Validation normalizes input and checks all alternates, making the system forgiving while maintaining challenge.
Accomplishments that we're proud of
The game's soul emerged when I realized: the player doesn't rotate the cube, they orbit around it. That perspective shift (from manipulating an object to being a satellite around something fixed) transformed the entire experience. It's not a puzzle you solve; it's a consciousness you awaken. Successfully integrating Three.js with React without performance degradation was a major technical win. The callback ref pattern we developed could be useful for anyone building 3D experiences in React. The three-phase evolution system proves that progressive transformation beats linear difficulty. Players don't just face harder puzzles, they face entirely different rule systems.
What we learned
Technical Growth
Three.js performance optimization: Raycasting, mesh disposal, minimizing scene rebuilds React + imperative libraries: Managing external systems (Three.js, Tone.js) in a declarative framework LLM integration patterns: Prompt engineering, fallback strategies, caching Event loop mastery: Understanding asynchronous state updates when mixing imperative and declarative code
Design Philosophy
Progressive transformation > linear difficulty: Don't just make puzzles harder, change the rules entirely Visual feedback is king: Golden glows, lightning arcs, particle systems. Players need to feel progress. Mystery drives engagement: The cosmic narrative isn't just flavor, it reframes the cube as an artifact, not a toy AI needs guardrails: Powerful generation requires careful constraints to remain playable
What's next for The Tesseract
Phase 4: Temporal Mechanics - I've prototyped a fourth phase involving moves that affect past states. The math gets wild:
S(t)=f(S(t−1),S(t−2),…,S(0))S(t) = f(S(t-1), S(t-2), \ldots, S(0))S(t)=f(S(t−1),S(t−2),…,S(0))
Where states depend on previous configurations. It's 4D chess meets Braid. Multiplayer Mode - Imagine two players orbiting the same Tesseract, competing to align faces faster. Cooperative modes where players must communicate to solve different faces simultaneously. Procedural Generation - Seed the cube's initial state with cosmic events. Player birthdays, lunar phases, real-time astronomical data. Make each puzzle truly unique. Accessibility Features - Color-blind modes, audio cues for matches, haptic feedback for mobile. Every consciousness deserves to awaken the cube.
Built with curiosity, debugged with coffee, shipped with cosmic purpose.
Log in or sign up for Devpost to join the conversation.