Inspired by the classic game Marble Madness, we created a gamified experience where users control a ball through playful, interactive levels. The goal was to blend marketing content with the look and feel of a game to engage users.
The app is built with Three.js [1], using our custom render pipeline and shaders, and uses Rapier for physics simulation [2]. The 2D content is overlaid on the WebGL view using CSS 3D transforms for a seamless integration with the 3D view.
We’d love for you to try it out and share your thoughts!
EDIT: More info on this project here: https://www.littleworkshop.fr/projects/5milliondevs/
More info on the project here: https://www.littleworkshop.fr/projects/5milliondevs/
During the project, we discussed adding a speed-run mode but ultimately had to drop this feature due to time constraints. However, we intentionally included some shortcuts in the level design with that intent in mind.
Still, very cool. Too cool to waste on marketing in fact :)
Right now learning about the company feels like a penalty which I doubt was the intent.
Also for anyone who hits a dot and is confused how to get out of the information screen - you just press the arrows. I tried escape and clicking for longer than I would care to admit before I realized this.
Super cool idea though.
I often get YouTube advertisements thrust upon me when I'm engaged in content and think "what are these brands thinking... bursting into my living room mid-content and trying to push tampons onto me?" I'll never buy your tampons again.
However, I digress, and apologies, because I love the game and also the studio that created it - but honest feedback - I still have no idea what the company does that sponsored this game. I don't feel an emotional connection, and the game didn't peak my interest enough to find out what they do.
In the past when I've encountered great "art" - it's inspired me to go deeper into what was behind the art; to learn more about the author, and perhaps if it's truly amazing, another step beyond this. Brands like Panic have made me do such a thing.
I remember that great commercial for (I think) it was Geiko insurance on YouTube that said "You can't skip this ad because it's already finished", it was wonderful IMHO because it empathised with the viewer. Perhaps calling the game "Avoid the dots" would do the same?
Just my opinion, insignificant such as it is.
[edit] After a moment on the balcony it occurred to me, what if the game began with a big white Super-hot title that said "Avoid the dots (Speedrun challenge)" and at the end of each level displays a high-score table? Perhaps that would even give it a chance of virality in the speed running community? (credit to the commenter that said he "speed ran" avoiding the dots for the idea)
The 45 degree rotation does require more dual input than I care for which makes me wonder if that is a design choice.
The dual input is indeed a consequence of our isometric-view design choice, which I agree may not be the easiest way to control the ball. But the 45 degree angle just looks cooler in our opinion.
Well they say "A Marble Madness-inspired WebGL game" so there is not much choice about the rotation [1]
Of all the programming I find the 3D gaming to be the most complex and unattainable at my current knowledge or intelligence level.
Time to start speed running!
4 minutes and 21 seconds after few more attempts.
3 minutes and 59 seconds. Sub 4 is good enough for me :)
3 minutes 33 seconds after ~10 attempts
routing is definitely fun, I enjoyed figuring out which bounce pads to take
---
3:20 after some more tries, I think sub 3 is possible
3:14 even with the game glitching me into the abyss on the last level :(
Anyway great fun, and much easier than what I remember of the Amiga version, very forgiving controls, thanks and well done.
It seems such a shame that this isn't a full game. Removing the advertising and adding more complex levels with puzzles would make for a perfect little distraction.
I was surprised how well the WASD controls worked. Perfectly intuitive.
Not OP but, what exactly you feel like is missing tutorials? It's a nice little polished experience, but I don't think there is anything particularly innovative or difficult to build with the resources that exists today. Or is there something in particular that looks/seems difficult from what they shared?
In practice building something like this with resources that exist today can still mean a stream of issues specific to a given platform, browser, library, programming language, IDE, issues related to a combination of any earlier two and a yak that needs shaving[1].
Meanwhile this project is described as[2]:
> fully optimized for both desktop and mobile browsers, with user controls and UI components tailored for each device, ensuring intuitive navigation and interaction across all platforms.
If this process was easy and well documented, Netlify wouldn't hire an external agency.
Companies like Figma have shown that there is a huge appetite for solutions built on top of Canvas or WebGL, but if you don't have the privilege of working for one of these companies that built up lots of proprietary building blocks from scratch, it's much more difficult to get started.
- you say it's built with three.js but you also use rapier. How does that work / integrate? I see one is JS frontend thing, the other rust engine
- how did you design levels, with what?
The levels were built inside the Unity Editor, then exported to FBX, then went through a pipeline based on Blender python scripting that optimized their geometry, assigned materials and exported them to GLTF (the final format that we load in the browser).
[1] https://rapier.rs/docs/user_guides/javascript/getting_starte...
#1. I could not find pricing anywhere.
#2. The "ROI calculator" steered me to enter in my name, e-mail, and phone number. I don't want to sign up to get spam from a salesman just to find out the basics about some tool or platform.
#3. Wikipedia's page for Netlify has a content warning that the content appears to be an ad brochure, but at least it said this:
"Netlify is a remote-first cloud computing company that offers a development platform that includes build, deploy, and serverless backend services for web applications and dynamic websites.
The company enables building, deploying, and scaling websites whose source files are stored in the version control system Git and then generated into static web content files served via a content delivery network."
Still have no idea what Netlify does (beyond what I can already do with git with a few clicks), or if it's right for our team, or if we can even afford it.
The Marble game was quite fun, however...
#4. The main thing that stuck in my mind from the little "milestones" about Netlify was that they changed their logo. This may seem significant to the Netlify team, but is completely irrelevant to the rest of us.
#5. The second thing was that they "bought Squirrel, an open source"... it is rather dystopian to hear that someone "bought" an open source platform.
Since we have a few Netlify people posting here, please feel free to correct my ignorance or point me in the right direction.
That’s the meat of it. It’s Heroku for statically generated websites or websites that can run as lambdas. Pretty limited but very fast for those purposes cause everything is handled by edge servers rather than primary data center servers.
Great job optimizing too. Runs totally smooth on my 2012 macbook and its decrepit HD 4000 iGPU, which is no small feat for web-games these days.
If anyone's wondering, the getLayoutMap method from the Keyboard API is what we're using to handle international keyboard layouts.
https://developer.mozilla.org/en-US/docs/Web/API/Keyboard/ge...
https://en.m.wikipedia.org/wiki/Marble_Madness
https://en.m.wikipedia.org/wiki/Mark_Cerny
Who is better known for designing the PS4 and PS5.
Edit: can someone explain what netlify does? I visited the site, and while I appreciate it can be difficult to explain these things in marketing blurb, I really came away none the wiser (I work as a programmer so maybe I'm not quite the target market)
M1 macbook pro, Arc browser
Those jarring little things seem to just never disappear from modern browser games.
Beyond that it‘s amazingly fluid.
[1] https://discourse.threejs.org/t/iphone-how-to-remove-text-se...
I am very sure scrolling is related to popups when you roll over popup points.
I can understand you might have commercial obligation, so hoping Netlify can make this public :)
Rapier was brand new when I was making things in R3F 2 years ago. Glad to see how mature it’s gotten!
https://www.youtube.com/watch?v=vskQsSJ_IJg&ab_channel=hirud...
Watching a playthrough I was surprised to see I'd never seen anyone get past level two.
I spotted Little Workshop when I saw https://equinox.space/ on Hacker News and noticed it was running on Netlify. Loved the fluidness, speed and art direction of a game running directly in the browser and working smoothly on my phone.
Immediately thought of them when we started thinking about a 5 million developer celebration and reached out. Love the result :)
While on the google search result, the music from the game is still playing. If I open a new tab, the title of this tab changes from the google title to the netlify one, and vice versa if I change back.
We’d love to create a longer game someday, but making a living as a small indie studio in the gaming world is definitely challenging. Never say never, though!
I have always missed a worthy sucessor to Marble Madness. I have tried several partial implementations or demos inspired on it, like this, but never an actual full game with the same philosophy (maybe there's some I'm missing, in which case I would like to know, of course).
What's your company called?
Our studio is called Little Workshop. You can find more info about us here: https://www.littleworkshop.fr
I’d want to watch the CEO host a speed run stream.
Btw, how did you started making a creative tech studio? That’s something I want to do but I’m kinda lost on the selling part. How do you sell to a business that earned media is worth it?
> The 2D content is overlaid on the WebGL view using CSS 3D transforms for a seamless integration with the 3D view.
Maybe a simple example of this with code?
More info here: https://threejs.org/docs/index.html?q=css3D#examples/en/rend...
And some code samples from the Three.js website: https://threejs.org/examples/?q=CSS3D#css3d_periodictable https://threejs.org/examples/?q=CSS3D#css3d_molecules
In fact, apparently they now have 6.6M (just signed up for an account and saw what the number said)
I think this is intentional, since higher gravity/smaller ball would significantly raise difficulty.
I was absolutely terrified at first that falling off would have me start again from the beginning, so I was very careful. Once I did fall and come back where I was I grew bolder which made it more fun. Maybe that should be advertised somewhere.
(I'm still unsure what Netlify exactly is or what it does but this will make me want to find out!)
Needs a good enemy marble to come crack you and hammers too.
15 mins 31 secs, including reading all the promo material.
On chapter 3 I fell through the checkerboard immediately the first time; this seems like a bug.
On chapter 4 there are enough paths that it's possible to get slightly lost and not know which way you're supposed to follow the line.
On chapter 5 it's possible to fall onto an isolated island (the pink cube, under the lip) and get trapped forever. I would suggest making "only blue saves your position" a consistent rule rather than the current randomness. At this point I gave up and didn't want to try again from scratch.
The one game that I used to love, but never got translated into the modern world, is Oxyd[0], which was later re-released (in a fashion) as Enigma[1].
Still have no idea what netlify is or does.
If you move fast enough, you can glitch the ball against the slides and get stuck.
I have no idea who netifly is... and thought lets have a fun time playing.
While the game is visually well made, i gave it 3 attemps and all 3 times my ball dissapeared at some point into the floor and got permastuck. :/
