cascadecoop

Inspiration

We wanted to build something that captures what makes Reddit special strangers coming together to create something bigger than themselves. A Rube Goldberg machine is the perfect metaphor: one person adds a ramp, another adds a bumper, and by the end of the day the community has built something none of them could have built alone. The 24-hour cycle keeps it fresh. One piece per user keeps it fair.

What it does

CascadeCoop is a daily collaborative marble run game that lives inside a Reddit post. Every 24 hours a fresh board generates. Each Redditor gets one random piece (Ramp, Bumper, Gravity Well, Slide, or Block) to place on the board. Once placed, anyone can hit Simulate to drop 50 marbles and watch them tumble through the community-built machine. Marbles that land in colored goal zones score points your best run each day goes on the leaderboard.

How we built it

The frontend is a Phaser 4 game with Matter.js physics running inside a Devvit web view. All visual assets marbles, pieces, backgrounds, particles are generated procedurally using the Canvas 2D API with radial and linear gradients, removing the need for any image assets. The UI uses a glassmorphism CSS design system with the Outfit font and backdrop-filter blur.

The backend runs on Hono inside Devvit's serverless Node 22 environment with Redis for storage. We built the API layer from scratch with six REST endpoints handling board state, piece placement (with server-side validation, rate limiting, and Redis locks), user profiles, leaderboard scores, and daily piece assignment.

Audio uses the Web Audio API directly synth-generated chimes, arpeggios, and sweeps no audio files needed. Testing runs via Vitest with 18 tests covering validation logic, score bounds, and username sanitization. Challenges we ran into

The biggest challenge was the Devvit serverless environment you can't install arbitrary npm packages, you can't access the filesystem, and context properties must be extracted before the first await or the fiber is lost. We hit this hard with an async context leak that would silently crash handlers. Physics tuning was another beast. Gravity well force calculations, marble restitution, and collision categories all needed careful balancing to make the cascade satisfying without being chaotic. Coordinating daily state across users with only Redis primitives (no transactions across keys) required careful lock-based concurrency the piece placement endpoint uses a Redis WATCH/MULTI/EXEC retry loop with a per-user lock.

Accomplishments that we're proud of

• The procedural texture system generates all visuals from code every marble, piece, and particle is pure Canvas 2D math
• Synth audio with zero asset files placement chimes, score arpeggios, and simulation sweeps generated at runtime
• Full glassmorphism CSS system with micro-animations on every interactive element
• The gravity well visual (radial gradient + orbital rings) and physics feel legitimately good
• 18 passing tests, zero lint errors, zero type errors across client/server/shared

What we learned

• Devvit's async context model is subtle extract everything synchronously before any await
• Canvas createRadialGradient + generateTexture is a powerful combo for zero-asset game development
• Phaser 4's Matter.js integration is solid but delta clamping is essential to prevent physics spiral-of-death
• Redis sorted sets are perfect for daily leaderboards but username sanitization is non-negotiable
• A 2-second rate limit + 5-second lock + 200-piece cap is enough to prevent abuse in a 24-hour cycle

What's next for CascadeCoop

• Daily board archive: let users view previous days' machines
• Piece reactions: upvote or comment on specific placements
• Achievements: "First to place", "Highest scorer this week", "Builder streak"
• Sound toggles and accessibility options
• Mobile haptic feedback on placement and scoring
• Multiple board instances per subreddit
• End-of-day recap animation showing the final board

Built With

• canvas2d
• collaborative
• daily-challenge
• devvit
• eslint
• game
• glassmorphism
• hackathon
• hono
• leaderboard
• marble-run
• matterjs
• node.js
• phaser.js
• procedural-textures
• reddit
• redis
• rube-goldberg
• serverless
• typescript
• vite
• vitest
• web-audio-api
• web-game