This is a submission for the June Solstice Game Jam
Play Online (Sound on 🔉, recommended to open on a browser) -> https://june-sol.vercel.app
What I Built
Solstice Run — a browser game set on the surface of a 3D planet. The player walks across a spherical world and must reach a flag before sunset swallows the sky. Each of the five levels is set at a real latitude on the June solstice: from Oslo's long dusk to Quito's overhead sun to Svalbard's midnight sun (where the sun never sets, but solar debris rains down instead). The theme is the longest day — the mechanic is racing the terminator line as it sweeps toward you.
Video Demo
Sound on 🔉, Here I take you through the whole idea of the game, my thinking process & the game walkthrough.
Code
For the source code, the whole project is on github.
Solstice Run
A browser game set on the surface of a 3D planet. Race to the flag before night catches you.
Live: https://june-sol.vercel.app Demo: https://youtu.be/jihcmcH05No
About
Solstice Run is a June-solstice themed runner where you walk on the outside of a spherical planet and must reach the flag before sunset. The terminator line sweeps toward you in real time — cross into darkness for more than 3 seconds and you lose.
Five levels, each set at a real latitude on the June solstice:
| Level | Location | Challenge |
|---|---|---|
| 1 | Oslo, Norway | Learn the controls |
| 2 | Madrid, Spain | Light debris, tightening clock |
| 3 | Quito, Ecuador | Sun directly overhead, dense debris |
| 4 | Patagonia | Low sun, short time, relentless debris |
| 5 | Svalbard | Midnight sun — no sunset, only debris |
Controls
| Input | Action |
|---|---|
| Arrow keys / D-pad | Move |
| RUN button / hold shift | Sprint |
Stack
- React + Vite
- Three.js via React Three Fiber
- @react-three/drei for helpers
- …
I have deployed the game on vercel which was pretty simple for a React based game app.
If you want to explore the game before diving into the code, here's the live url below:
Play Online (Sound on 🔉, recommended to open on browser) -> : https://june-sol.vercel.app
No installations or downloads needed.
How I built
At First I researched about the concept of the Solstice out of my curiosity, found out about the real world solstice culture & folklore, those Stonehenge and solar-aligned monuments, Scandinavian Midsommar, Slavic Kupala Night, Spanish San Juan fire-jumping, sun deities worldwide, bonfires & flower crowns. Watched a lot yt videos, read many wikis about those events to make myself familier with the culture and important of Solstice in people's life.
Since the June Solstice is about light and darknesss, about time running long or running out, about the earth's place in its orbit, That felt like a game waiting to happen, So I tried building it here.
I built it milestone by milestone — first getting a character to walk on a curved 3D world, then adding the sun, and then letting real astronomy take over, since the Earth's tilt means that where and when a level takes place decides how much daylight you get.
The solstice itself became the difficulty. More than a race against a clock, I wanted the game to quietly show why the longest day matters — something you gonna feel through playing the game rather than by reading in a description.
Tech Stack:
React + Three.js (via React Three Fiber). The planet is a UV sphere; the character walks on its surface using unit-vector / quaternion math to avoid pole singularities. A custom GLSL shader draws the day/night terminator. The sun moves on a latitude-accurate arc per level. Solar debris spawns on the sun side, falls to the surface, and triggers knockback on hit. Audio uses Howler.js for UI/music and THREE.PositionalAudio for spatial sounds (footsteps, incoming debris whistle). All game logic runs in R3F's 'useFrame' with pre-allocated scratch objects to avoid per-frame GC.
Top comments (0)