Resonance field

Inspiration

Resonance Field was born from a simple question: what if a Reddit post wasn't just a static page, but a living, breathing ecosystem that an entire community could shape together? We wanted to build something that leveraged Reddit's unique social dynamics — the hivemind, the daily ritual of checking in, the collective joy of optimizing toward a shared goal.

What it does

Inspired by fluid simulations, particle physics, and cooperative puzzle games, we set out to create an experience where every player's micro-action ripples across the entire community. No single player controls the outcome; instead, the community collaborates, competes, and coordinates in real-time to guide thousands of particles through procedurally generated geometric mazes.

How we built it

Resonance Field uses a decoupled client-server architecture optimized for Reddit Devvit Webviews:

• Client (Phaser 3): Runs inside an iframe and handles all rendering, particle physics, and UI. We use a custom Euler vector physics engine with WebGL blitter batch rendering to draw thousands of particles in a single GPU pass.
• Backend (Hono + Devvit): Acts as the authoritative event broker and state validator. It manages Redis for node persistence, user quota enforcement, and global score tracking.
• Realtime (Devvit Channels): Broadcasts NODE_ADDED and NODE_REMOVED events to all connected webviews, keeping the simulation synchronized across the entire community.
• Communication: tRPC v11 provides end-to-end type safety between client and server. Score increments are batched every 10 seconds to protect against rate limits.

The daily reset cycle is handled by a scheduled routine that archives the final score, clears the global node database, generates a new procedural maze, and resets the score — all at midnight UTC.

Challenges we ran into

1. Performance at scale: Rendering thousands of fluid particles on mobile webviews required abandoning standard physics engines in favor of raw analytical vector math mapped over flat coordinate arrays.
2. Rate limit protection: Devvit's API limits meant we couldn't stream individual point actions. We solved this with a 10-second batched throughput system that aggregates local score increments before pushing to the server.
3. State synchronization: Ensuring late-joining users get an accurate snapshot without disrupting active players required careful snapshot design and atomic Redis operations.
4. The Trilogy Rule: Implementing FIFO queue management with client-side and server-side validation, plus 60-second temporal decay, created a natural balance between player agency and field cleanliness. ## Accomplishments that we're proud of

What we learned

Building Resonance Field taught us how to push the limits of real-time web gaming inside a sandboxed iframe. We learned to:

• Optimize particle physics for mobile: By replacing standard physics collision meshes with custom inline analytical vector math, we achieved 60 FPS on modern mobile devices while rendering thousands of particles.
• Design for constrained environments: Devvit's serverless architecture, 30-second request limits, and 4MB payload caps forced us to be creative with batching, compaction, and state synchronization.
• Build community-first mechanics: The Trilogy Rule (three active nodes per player) emerged as a design constraint that naturally fostered coordination and strategy rather than chaos.
• Implement robust realtime sync: Late-joining users must pull an accurate state snapshot instantly without causing synchronization stutters for existing players. ## What's next for Resonance field

Built With

• devvit
• devvit-realtime-channels-|-|-**persistence**-|-redis-(via-devvit)-|-|-**testing**-|-vitest
• eslint
• hono
• node.js-v22
• phaser-3
• playwright
• playwright-|-|-**tooling**-|-eslint
• prettier
• redis
• trpc
• trpc-v11-|-|-**platform**-|-reddit-devvit
• typescript
• typescript-|-|-**backend**-|-node.js-v22
• vite
• vitest
• |-category-|-technologies-|-|-|-|-|-**frontend**-|-phaser-3