Solstice Runner: Chasing the Sun with React, Three.js, and Google AI

Video Demo

Here is a quick video demo of the gameplay so you can see it in action before trying it out:

Code

I have open-sourced the entire project. You can check out the code and see how everything was put together below:

How I Built It

Building this was a really cool learning experience. I started by scaffolding a React project with Vite because I wanted a fast development setup. For the 3D graphics, I used React Three Fiber. If you have ever tried setting up a pure Three.js scene with cameras and lighting manually, you know how much boilerplate it takes. React Three Fiber made it super easy to drop 3D objects into my React components.

One of the most interesting decisions I made was integrating the Google AI API. Instead of hardcoding all the game logic and dialogues, I used the API as a special feature to generate dynamic interactions on the fly. It took a little bit of tweaking to get the prompts right so it wouldn't slow down the game, but the end result was totally worth it. It gives the game a much more unpredictable and fun feel.

Prize Category

I am submitting this project for the Best Google AI Usage and Best Ode to Alan Turing categories.

For the Google AI usage, I integrated the Google AI API to drive some of the core dynamic interactions in the game, making the experience different every time you play.

For the Alan Turing category, the logic behind the AI interactions and the "runner" concept serves as a nod to Turing's incredible contributions to computing and artificial intelligence.

Thanks for checking out my game, and I hope you have fun playing it!