This is a submission for the June Solstice Game Jam
What I Built
For this game jam, I built Solstice Runner, a 3D endless adventure where you literally chase the sun on the longest day of the year.
The idea started with a simple question:
What if the solstice was a race against time, guided by logic?
In Solstice Runner, players navigate a vibrant 3D world, dodging obstacles and interacting with a dynamically generated environment. Instead of just making a standard runner, I wanted the environment and the interactions to feel alive. The game celebrates the June Solstice by having the player constantly move forward toward a sun that never seems to set, while solving on-the-fly logical puzzles inspired by Alan Turing.
The goal was simple:
Build a fast-paced 3D web experience that seamlessly blends action with intelligent logic.
Video Demo
Here is a quick video demo of the gameplay in action:
You can also try:
- Running through the 3D obstacle course
- Experiencing real-time dynamic AI dialogues
- Chasing the horizon of the longest day
- Testing your reflexes against Turing-inspired logic nodes
... directly through the deployed game (hosted on GitHub Pages):
Code
Built with:
- React — Frontend UI and application state
- React Three Fiber / Three.js — The entire 3D rendering pipeline and game world
- Vite — Lightning-fast development and build tooling
- Google AI API (Gemini) — Generating dynamic interactions and logic on the fly
- Tailwind CSS — Styling the overlay HUDs
How I Built It
I started by focusing on the core rendering loop:
Render Scene → Handle Movement → Generate AI Logic → Avoid Obstacles
Once the 3D movement felt right in the browser, I started layering in everything else.
Building the 3D World in the Browser
One of the biggest challenges was getting 3D performance running smoothly in the browser. Using pure Three.js can require a lot of boilerplate, so I opted for React Three Fiber. It allowed me to treat 3D meshes, lights, and cameras as standard React components, which sped up development tremendously. The environment uses warm, bright lighting to reflect the summer solstice vibe.
Integrating the Google AI API
Instead of hardcoding the obstacles or dialog sequences, I used the Google AI API as the "Game Master". Every time a player reaches a specific checkpoint, the game pings the API with the current game state to generate unique logic challenges and narrative text.
It took some tweaking to ensure the API calls didn't block the game's render loop, but the result is a game that responds dynamically.
A Nod to Alan Turing
Since June is also Alan Turing's birth month, I wanted to include a tribute to him. The logic checkpoints you encounter while running are framed as "Turing Gates". They require quick thinking—such as pattern recognition or simple binary decisions—before you can continue your run.
| Feature | Concept | The Mechanics |
|---|---|---|
| Turing Gates | Logic Nodes | Answer AI-generated logic puzzles to pass safely |
| Endless Day | June Solstice | The lighting stays perpetually at golden hour |
Prize Category
I am submitting this project for the Best Google AI Usage and Best Ode to Alan Turing categories.
The Google AI API handles the core dynamic dialog and logic generation, making every run feel unique. Meanwhile, the core mechanics of navigating "Turing Gates" serve as a direct homage to Turing's legacy in computing and intelligence.
Let's Discuss! 👇
I'd love to hear your thoughts on mixing 3D web games with generative AI!
- Have you tried using React Three Fiber or the Gemini API in your own projects?
- What kind of AI-driven mechanics would you add to an endless runner?
- How far did you manage to run in the game? 🏃♂️
Drop a comment below, and let's chat about web game development, AI, or just share your high score!
Thanks for playing!
Top comments (19)
Very neat
Thanks Ben 🙂
Very cool concept. I like that you didn't stop at making another endless runner and actually tied the mechanics to the solstice theme and Alan Turing.
React Three Fiber is such a good choice for projects like this too. it makes experimenting with 3D much more approachable compared to working directly with Three.js.
I've seen something like Flexbox Adventure, before, but these AI powered games alike are something totally different, love them in every aspect. Great job!
Thanks a lot, Hossein! That was exactly what I was aiming for. React Three Fiber made it much easier to bring the idea to life, and I'm glad you enjoyed the AI and Turing-inspired mechanics.
the "API calls not blocking the render loop" problem is the one that actually separates AI toys from playable games. requestAnimationFrame is ruthless — even a 200ms API call tanks the experience.
curious what you landed on: did you prefetch the next checkpoint's challenge during gameplay, or just fire and hope the Gemini call completes before the player reaches the gate? i'd lean on prefetch but that adds state complexity.
what happens if the API call fails mid run? fallback to static challenges, or does the game halt?
Thanks for the question! I sidestepped this problem entirely by design.
I don't use the API to generate challenges mid run. The core gameplay loop runs completely locally using math functions to spawn obstacles, guaranteeing zero network latency and a perfectly smooth render loop.
Instead, the Gemini API is used strictly in a pre run menu called the AI Forge to generate custom characters, maps, or skills.
It uses an async fetch request, so the main thread never blocks and the 3D background keeps rendering smoothly while waiting.
If the call fails, I just catch the error and show a message on the menu. Since active gameplay doesn't rely on the API, no mid run fallback logic is needed.
Keeping AI generation out of the active loop was my exact solution!
the pre run separation is the clean version. we usually end up bolting on the async wrapper after discovering the blocking problem in prod — you designed it out before it could happen.
the "AI Forge as a menu" pattern is reusable. any feature where the AI result doesn't need to be realtime is a candidate for that preload slot.
does the Forge content persist between sessions, or does each run start fresh?
The Forge content handles persistence differently based on what is generated. Custom characters, maps, and skills persist between sessions because they are permanently saved in the browser's local storage. However, if the Forge is used to modify game controls or physics, those changes only apply to the current session and will start fresh upon a reload, as they are kept in the game's in memory state.
Awesome project @tahosin
Thanks 🙂
Great project 👍🏼 congratulations.
Thanks Nube :)
Nice AI integration :D
Thanks :D
I tested it in my mobile and it feels a little bit laggy when i change controlls from ai forge. I think you will fix it asap
I have already fixed it. Thanks for your suggessions.
I played your version 1 game few days ago. But Version 2 smooth and far better than version 1. You also changed a lot in design and ai integration. Best wishes for next Version.
Thanks. I tried hard for better game experience, And you liked it🙂
Some comments may only be visible to logged-in visitors. Sign in to view all comments.