DEV Weekend Challenge: Passion Edition Submission
This is a submission for Weekend Challenge: Passion Edition
What I Built
THE STAND is a short Three.js rhythm game about collective passion. You play the capo of a fictional supporters’ section during a night derby. The job is simple to explain and increasingly hard to perform: move into the called lane, strike the chant on the pulse, keep the crowd’s energy alive, and resist the rival stand long enough to reach one final anthem.
The full run has five escalating levels, four objective rounds per level, and a larger finale. Each level teaches a different task—foundation calls, memory-based response phrases, rival-surge counters, moving-shutter routes, then a combined anthem relay. A missed round opens a slower recovery phrase instead of simply ending the run. The normal 20-round route takes about 6.37 minutes including transitions; one recovery phrase per level extends it to roughly 7.56 minutes.
Demo
Controls:
Desktop: A / D or arrows to change lanes, Space to chant, P to pause, M to mute.
Mobile: left/right controls or swipe, plus the large Chant button.
Code
A five-level, multi-round Three.js rhythm game
You are the capo of a stadium supporters’ section. Shift into the called lane, strike each pulse, protect the crowd’s energy, survive rival noise surges, and carry one chant into a larger final anthem.
Play
Fastest option
Open The-Stand-Standalone.html in a modern desktop or mobile browser. It is a self-contained build with the game code, styles, Three.js bundle, and artwork embedded.
Development
npm install
npm run dev
Enter fullscreen mode
Exit fullscreen mode
Open http://127.0.0.1:5188.
Production verification:
npm run build
npm test
npm run inspect:canvas
Enter fullscreen mode
Exit fullscreen mode
Controls
Keyboard: A / D or left/right arrows to change lanes; Space to chant; P or Esc to pause; M to mute; R to restart after failure.
Touch: left/right lane buttons or horizontal swipe; hold/tap the central Chant button.
Add ?seed=12345 to replay a deterministic rivalry.
The run
Every level contains four named objective rounds. Win three…
Inspiration
Watching the World Cup happening right now perfectly captures what drew me to this idea: that moment when a stadium crowd stops sounding like thousands of separate people and starts feeling like one living thing. A chant begins in one corner, spreads across the stands, and somehow grows louder when the pressure is highest.
That became the heart of THE STAND. I didn’t want passion to be just a visual theme wrapped around a rhythm game; I wanted the player to actually create it. Every well-timed chant brings more of the crowd to life, builds momentum, and pushes back against the rival end. When you struggle, you can feel the other side beginning to take over.The Rally Save comes from my favorite part of that idea: even when the chant is almost gone, a few people keep singing. Sometimes that is enough for the entire stand to find its voice again.
How it works
The game runs entirely in the browser with TypeScript and Three.js.
Twenty named rounds create concrete goals: land a target number of calls, mirror a preview phrase, neutralize marked rival surges, or trace the safe shutter route.
A deterministic cue clock owns judgement, but inputs are evaluated through human reaction stages: telegraph, Ready, Chant Now, and late grace. A correct-lane early tap is buffered; wrong-lane or very-early taps are harmless; only an expired authored call becomes a Miss.
Three independently animated shutters shape lane choice and reveal or hide the rival end.
Seeded procedural patterns keep runs replayable without requiring generated runtime content.
Crowd members are instanced and animate as waves driven by energy and streak.
Normal pass targets are forgiving, and a missed objective opens a slower 4-of-7 recovery phrase.
Energy, streaks, score multipliers, round wins, level seals, Rally Save, failure/restart, and the final held note are explicit game states.
Web Audio synthesizes beat accents, crowd texture, success, misses, hazards, and the final rise without paid runtime services.
Google AI
I used Google Gemini image generation for one meaningful static asset: the fictional home-end tifo mural. The prompt asked for raised hands transforming into a heartbeat and stadium floodlight, using the game’s black, bone, crimson, and amber visual language.
The image was generated offline, reviewed, compressed to WebP, and embedded as a source data URI in the 3D stadium and title/results presentation. It gives the fictional supporters a recognizable symbol while the rest of the world stays lightweight and procedural. There are no Gemini calls, credentials, or costs during gameplay.
Technical execution and verification
Production TypeScript/Vite build passes.
Playwright desktop and mobile interaction suites pass.
Keyboard and touch lane movement, real chant scoring, round completion, recovery input, all five level transitions, level seals, fail/restart, and finale rendering were exercised.
Canvas inspection reports no console or page errors.
Desktop active-play: 81 draw calls, 20,538 triangles, 77 geometries, 4 textures; within the skill’s budget.
Mobile finale: the same render budget remains within all mobile limits.
The complete game is also packaged as a self-contained HTML file and independently canvas-verified.
What I learned
The most important technical choice was separating the simulation clock from audio playback. Browser audio scheduling and automated WebGL rendering do not always advance at the same cadence, so the game judges the input event against deterministic simulation time and uses Web Audio only for synchronized feedback. That made both human play and repeatable testing more reliable.
The other lesson was that spectacle does not require expensive runtime generation. Instancing, authored procedural motion, a compact state machine, one carefully chosen AI-generated texture, and strong camera/UI changes created a much larger-feeling finale without adding a content pipeline the weekend scope could not support.
Leave a Reply