✨ Taking on the JS13K Challenge
I always wanted to try the JS13k Games challenge... and now I am so happy to finally finish and submit it!
This time, I wanted to try something unique: tell a story via the game.
📖 Synopsis
We walk into the dream of a developer who lost his wife in a tragic accident by the cliff.
She was his love, but then she sacrificed herself to save him from a falling car on that cliff edge, and fell into the grassy valley below. This incident haunts him constantly, and it makes his world completely grey, cold, and lifeless.
In a dream, Maya, his wife, guides him back to the valley, letting him bring back the colors from the rainbow to his life and helping him see colors again.
🌿 The Lush Valley & Procedural Grass
For this game, I wanted a lush environment that speaks of the valley she fell into...
I always liked the idea of procedural content creation, and I was always stunned with rendering grass on the web for almost half a decade. I had learned a few things or so with Wonderland Engine as a framework when experimenting with rendering massive grass fields on the browser:
I was able to bring those exact strategies here too: instancing, resampling, and blending to terrain normals so thousands of swaying grass blades react dynamically to wind without burdening performance.
🦄 Artistic Vision, Primitive Shapes & Shaders
Since every byte mattered, I made the unicorn out of primitive mathematical shapes, and focused heavily on custom shaders for rocks, prisms, and crystal surfaces to meet the artistic vision I had in my mind.
To give a real sense of depth and atmospheric scale in the dreamscape, I added camera-facing fog cards that face the player as you traverse the terrain.
I intentionally kept the mechanics intuitive and simple so the player can immerse themselves and focus on the emotional storytelling.
🎨 The 7 Chromatic Tasks to Restore Color
The player awakens 7 emotional shards representing memories with Maya:
⚡ Fitting within 13KB & AI Acceleration
The main technical challenge was fitting everything—the 3D models, shaders, world terrain, audio synthesizer, and WebXR loop—within the strict 13KB budget.
I used Roadroller and Terser to pack the bundle down to the byte.
And of course, I used Gemini Flash models to speed me up in this process for automation, build scripts, and test writing. In these times, not using AI to better use your time would be a waste in my opinion!