I’ve created this web based 3d game inside the browser using Spline, Webflow and Figma without writing a single line of code. Step into the paws of a kitsune, a fox-like supernatural creature from Japanese folklore on an important quest to deliver a message to Inari above Mount Fuji.
Gameplay features of the first level include the ability to move, run, jump, physics puzzles, portals and a power up that allows the player to use one of the special abilities.
Most of the time went into the design and creation of the real-time 3D scene in Spline and optimizing it to make sure it’s lightweight and runs as smooth as possible in the browser on various devices. The first level has 5 scenes with around 30k polygons in total and is only using 10 texture images with an estimated export size of 2.36mb and loading time score of 66 / 100.
The website was built in Webflow without writing a single line of code, except for the seamless audio functionality which was added using howler.js and some javascript help from ChatGPT. I’ve used the Spline integration feature and also implemented the first ever seamless performance / quality mode toggle on a 3d website to my knowledge or at least on one using Spline and Webflow allowing even more complex scenes on older devices.
I optimized all the assets to be as lightweight as possible and tried to keep the number of requests to a minimum and ended up with a final compressed size of 3.7mb that includes audio, images, fonts, responsive tweaks and a fully interactive real-time 3d game.
Got an interesting idea or project?
Let’s make it awesome together!
