HN Reader

Show HN: A Marble Madness-inspired WebGL game we built for Netlify

225

121

Hello HN! We’re a small creative studio specializing in real-time 3D experiences. Netlify approached us to design and build an interactive experience to celebrate reaching 5 million developers.

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!

[1] https://threejs.org

[2] https://rapier.rs

EDIT: More info on this project here: https://www.littleworkshop.fr/projects/5milliondevs/

There's a glitch in the velocity level. My marble keeps respawing and the game is stuck in a refresh loop

4 hours agoby muragekibicho

Nice! My favorite challenge was avoiding the glowing white dots along the path.

6 hours agoby iandanforth

I think this is the first time I've ever seen an online game correctly tell me to use WARS keys for movement. Big props for handling non-qwerty layouts.

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.

4 hours agoby bhaney

I'm one of the developers who worked on this project. Happy to answer any questions.

More info on the project here: https://www.littleworkshop.fr/projects/5milliondevs/

10 hours agoby guigui

I’ve heard people claim they beat the original marble madness, but I don’t believe them.

4 hours agoby JohnMakin

That was enjoyable. I wasn't at all interested in any of the "Netlify facts" but it was fun to push the marble around and I'm impressed by how smooth the experience was. Well done!

7 hours agoby pissflaps

Is there a page somewhere that tells me what netlify is on a technical level? All I see it marketing speak and I can't make sense of it.

4 hours agoby deskr

Nice job! You just need to have it so if the marble exceeds a certain Y velocity threshold that it shatters and a dust pan appears to sweep it up.

4 hours agoby vunderba

Beautiful work, well done. It also made me remember a game I played a long time ago called Ballance[1]. Weird how memory works like that.

[1] https://en.wikipedia.org/wiki/Ballance_(video_game)

5 hours agoby cyberlimerence

Any chance this could get open-sourced? This seems like a great example of a lot of stuff for which there are few tutorials currently.

7 hours agoby solatic

I like it. I will share it with my friends.

4 hours agoby chenbin74851

The controls don't seem to work for me. AWSD, only up and down work, unless I try to go diagonally, then it just gets "stuck" moving forever. Arrow keys no directions work unless I hold multiple keys down at once, then it also gets stuck moving.

M1 macbook pro, Arc browser

6 hours agoby johtso

This was actually very fun, great work here! There was a PC game called hamsterball that I really enjoyed a long time ago; this brought back memories.

7 hours agoby adzm

I've been enjoying the quality and aesthetics of your studio's work. I would love for you to build a complete game or a longer experience, rather than only for marketing. I love where art and programming intersect. I would love to be able to create experiences like this myself one day.

5 hours agoby flanbiscuit

Interesting. This consistently crashes my chrome browser whenever I get to the first glowing white checkpoint. But it's not like any crash I've seen before, the page reverts to a google search result I was on this morning. And the whole page is flickering white. That tab was closed long ago, but it seems something in this gets back to that state in memory, maybe a buffer overflow somewhere or something?

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.

5 hours agoby maniacwhat

Cute game. A lot more forgiving than Marble Madness though.

Needs a good enemy marble to come crack you and hammers too.

5 hours agoby davidwparker

Alright, alright. Where are the speedrunning leaderboards for this ?

5 hours agoby Jean-Papoulos

Very nice way to show off some of the history of Netlify while making it fun. Congrats on 5m.

7 hours agoby Jeremy1026

I am very curious how the physics feel realy-wordly for the most part at the mathematical level. Are there existing algos that define the gravitational pull of the "Facts" spots or was there a lot of tweaking?

The 45 degree rotation does require more dual input than I care for which makes me wonder if that is a design choice.

7 hours agoby pizzafeelsright

Really smooth, clean work. Didn't get a chance to monitor memory and network, but seemed pretty light, kudos!

5 hours agoby NaolGBasaye

Thank you so much. This is a great game for my 6yo, it made his day! He loved it. We spent months looking for web games for 6yo without ads, dark patterns and distracting details, but this was the first one that really fit. I wish there would be more similar games.

5 hours agoby Helmut10001

Got stuck in a re-spawn loop : some collision detection failed in level 4 at the start of a standard 30° incline, the ball fell through, and was re-spawned at the same place resulting in falling again, locking me in loop.

6 hours agoby GistNoesis

5 hours agoby kodablah

The ASDF controls are absolutely backwards while the cursor controls work.

7 hours agoby burnt-resistor

Nice game, although I would expect to be able to use the gyroscope on mobile devices.

4 hours agoby pjmlp

I'm here just for the game.

If you move fast enough, you can glitch the ball against the slides and get stuck.

4 hours agoby yazzku

Its been a long time since someone built something like this for the web. Praystation was a long time ago. No one has really followed up since then.

7 hours agoby rc_mob

Super fun. Loved the rubbery sound design.

I’d want to watch the CEO host a speed run stream.

6 hours agoby pininja

Great fun and very polished! I'd love to try this with accelerometer based controls.

6 hours agoby kolleraa

Great work. Are there any plans to convert some of the code to OSS?

6 hours agoby noctane

Hello, really amazing work, well done! Just one curious question: have you made the background music yourself? if not, can I know the name?

6 hours agoby aliwoto

Nice, I did manage to get a respawn point where it immediately died causing a loop. On Elevation.

Still have no idea what netlify is or does.

5 hours agoby Lerc

Speedrun any% category coming soon?

5 hours agoby ivanjermakov

does anybody remember the name of the board game that you turned knobs on the outside of the box to tilt on the x/y axis to drive the marble around the board?

5 hours agoby dylan604

Great game! On mobile, feels like the joystick is a bit too sensitive. Ie: I move my finger a tiny amount and the ball goes flying.

What's your company called?

7 hours agoby nightowl_games

Could you explain more on:

> 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?

7 hours agoby tempworkac

i got a few questions:

- 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?

6 hours agoby Keyframe

It needs more gravity for the marble to roll down slopes better.

6 hours agoby 725686

This is fantastic!.

Time to start speed running!

7 hours agoby markatkinson

Pretty fun simple little game!

5 hours agoby eddyvinck

This is amazing!

5 hours agoby blendertom

I got stuck in the second chapter. Went into a tube leading to a spiraling green slide and my ball reset... to the interior of the block. Oh well, cool project.

5 hours agoby pbronez

On iOS, sometimes it scrolls the page and pressing and holding opens a weird right click magnifier and releasing it a share option on the top left?

Those jarring little things seem to just never disappear from modern browser games.

Beyond that it‘s amazingly fluid.

6 hours agoby Traubenfuchs

That was fun, thanks!

7 hours agoby fragmede

Netlify CEO here.

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 :)

4 hours agoby bobfunk

Well, I'd love to know what Netlify does, but...

#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.

6 hours agoby trollbridge