That's a wrap! My Panda exploration / 3D platformer game is signed, sealed, and delivered to @levelsio's #vibejam 💫 The last 2 weeks have felt like a whirlwind -- I learned so much, multiplied my normal productivity, made friends in this awesome community, and am excited to keep building... cool things for the web after this 🦾 🧵 below with some demo videos, journey from start to finish, and key learnings after 2 weeks of vibe-coding with Claude, Grok, and Three.js Oh, and the whole project is open source (my humble offering to the #vibejam community and our LLM gods) 🤖show more

The beginnings: "Claude: build a threejs game where a red panda character explores a pastel landscape and has to search for a bamboo pole". After a few hours of prompting, I had an MVP

Claude: add evil oil slick monsters and levels that get progressively harder (more monsters / faster monsters)

I wanted to make a 3D red panda, so I used gemini image gen to create a 2D character, and then @tripoai to turn it into a 3D model. "Claude, use this 3D character in the game".

Use different color palettes for the hills and sky at each new level

Let's add a portal in the game that re-directs the player to @martyamark's Metaverse game. The vibeverse idea starts to grow :)

Now add a "changing room" that lets the player switch 3D models (Bernie Sanders, Pixar Lamp, Judge Judy, etc...)

Adding @levelsio into the game and giving him a jetpack!

Animating the panda hero! Using mixamo for auto-rigging and to download free animations for running / jumping / dancing...

More animations to make the fighting gameplay more interesting

Here's what worked for me while vibe-coding: - Claude Sonnet 3.7 was my main model and worked great generally - Give specific prompts and try to build one small feature at a time - Version control! Use git early and use git often - When getting stuck or when Claude would break things: "this doesn't work. Think deeply for 10 paragraphs and try a new solution" - If that still didn't work, ask Grok! - Grok tends to be smarter and better at architecture. Claude tends to be better and actual coding / execution. I would let Grok come up with a plan and then ask Claude to implement it - When possible, split your project into multiple small files (<500 lines of code) - When building a new feature, only give the LLM access to the specific files that are relevant to the task (rather than the whole project). Helps the LLM to stay focused and not break the whole game - I've got ~20 js files. One file per feature (jetpack.js, trampoline.js, high-score-system.js, etc...)

If you're still reading -- thank you so much and come play my game!

Here's my open source github repo:

I want to thank some new friends for testing my game, giving feedback, and collaborating to build an amazing vibeverse. You're all awesome ❤️‍🔥 I loved these last 2 weeks and am looking forward to seeing what you all build next. In no particular order: @TheStudioBigly @alightinastorm @zaneclark_ @martyamark @PrabhjotSL @StefanBuilds @DmitryMakelove @craigrrob @levelsio

Finally thank you to @mrdoob for building @threejs. What a powerful / beautiful / intuitive library. I’m going to go fully down the rabbit hole and keep building fun 3D experiences 🧊

OP3N delivers the ultimate gaming experience with no limits. Wishlist now and be one of the first to dive into the excitement of the new game!