Mayavi

Every puzzle game hands you a problem and asks you to find the solution. Mayavi flips the paradigm.

Comment

Mayavi: The Reverse-Solver Cosmic Anomaly Game

⚙️ Submission Details & Links

💡 Inspiration

The core inspiration came from standard puzzle/adventure games where you are handed a problem (e.g. door locked) and must search for the solution (e.g. key). We wanted to flip this on its head: what if you were given the solution first, and had to reconstruct the problem?

This "Reverse-Solver" concept fits perfectly on Reddit where community creativity and humor drive engagement. Instead of the developers creating puzzles, we let players do it themselves, leading to hilarious, collaborative story-building.

👁️ What it does

Mayavi (meaning "illusionist" or "sorcerer" in Sanskrit) is a daily, community-driven puzzle game built on Reddit's Developer Platform (Devvit).

  • Every day, the Bureau of Unsolved Problems receives a global Solution (e.g. a rubber duck, gravity, or absolute zero).
  • Players must sketch the visual anomaly on a canvas and assign up to 5 descriptor stamps (stamps like Soggy, Broken, Hot, Time-Loop) that represent the problem.
  • If their stamps match the requirements of the daily solution, the puzzle "snaps" into place and posts to the feed.
  • At midnight UTC, a daily reset cron job promotes the top-voted player submission to become tomorrow's official global Solution, creating an escalating chain of user-authored problems.
  • Features a Practice Cognitive Simulator to play historic challenges, Streaks/Unlocks, and the Hall of Chains timeline.

🛠️ How we built it

  • Frontend: React 19, Tailwind CSS 4, Vite, and custom CSS Keyframe animations.
  • Layout: Built to fit viewport bounds using absolute positioning (inset: 0) and responsive container observation (ResizeObserver) to auto-adjust fonts (clamp()) and canvas sizes. Fully responsive and mobile-friendly.
  • Backend: Node.js v22 Devvit SDK serverless environment using the Hono framework for clean routing.
  • Database: Redis (integrated into Devvit serverless API) to store the state of daily challenges, history logs, votes, and user streaks.

⚡ Challenges we ran into

  • Devvit Iframe Click Blocking: Getting layout layers (fixed/absolute) to play nice in Reddit's webview iframe. Background animations like twinkling stars and floating runes were initially blocking clicks to the primary CTA buttons. We resolved this by implementing explicit pointer event rules (pointer-events: none on overlays, pointer-events: auto on interactive cards).
  • Viewport Adaptability: Ensuring that the sketchpad and full-featured UI fits completely within mobile feeds, the official Reddit app, and desktop browsers without truncation or overflow.
  • Type-Safe Routing: Ensuring Hono API routes matched perfectly with front-end fetch() requests through client-shared TS declarations.

🏆 Accomplishments that we're proud of

  • Aesthetic & Human-Centric UI: We built a gorgeous theme complete with a glitchy color-flicker title, dynamic orbital rings, floating runic particles, CRT scanlines, and glassmorphic cards. It looks like a retro-futuristic detective terminal.
  • Deterministic Tag Matcher: Built a fair, puzzle-solving engine that checks tag compatibility deterministically without the high latency or unreliability of LLM/AI wrappers.
  • Automatic Healing System: The backend lazy-evaluates the daily transition when a user initializes, ensuring that even if a cron reset job fails, the next player's request automatically rolls the chain forward, tabulates the votes, and heals the state.

📖 What we learned

  • Working with the Reddit Devvit SDK and developing for interactive posts.
  • Designing viewport-first experiences that remain usable and visually stunning inside nested webview contexts on mobile.
  • Creating deterministic, high-fidelity retention loops without falling back to generic AI templates.

🚀 What's next for Mayavi

  • Reddit Comment Integration: Transitioning user entries to post as genuine Reddit comments underneath the daily post rather than storing them solely inside Redis.
  • Community Subreddit Customization: Allowing moderators to customize the stamp trays and solution pools specifically for their subreddit themes.
  • Interactive Tooling: Adding custom drawing tools, stamps, and filters to the sketchpad.

Built With

Share this project:

Updates