HyperPixation

Unblur the mystery! HyperPixation is a 10-level guessing game where pixelated images slowly reveal themselves as you race to identify them and score big.

Comment

About the Project

Inspiration

The idea for HyperPixation is the combination of hyperfixation and pixels. Quite simple, but it honestly made me laugh, and the idea went from there! For many people with ADHD, hyperfixation can be a powerful way to escape and focus intensely on one thing. This game channels that same energy by asking players to fixate on heavily pixelated images — staring, focusing, and wondering: what could it be?

Every wrong guess makes the image clearer, but also fuels determination to crack the puzzle. Unlike trivia games that rely on pop culture or niche references, HyperPixation uses everyday objects and views. This makes the challenge universal - deceptively simple, but surprisingly satisfying when you finally get it right.

How it was built

  • Frontend: React + TailwindCSS for a sleek, minimalist design.
  • Image Pixelation: HTML5 Canvas used to progressively reveal detail after each wrong guess.
  • Levels: A set of 10 randomized images stored locally/hosted online.
  • Scoring: Players start with 5 points and lose one for each failed attempt, with a 30-second timer on the final guess.
  • Deployment: Netlify for quick, reliable hosting.

🤝 How Kiro Helped

Kiro was a true development partner throughout this project:

  • Spec-to-Code: We wrote specs describing game flow (levels, guesses, scoring), which Kiro translated into functional React components.
  • Architecture Decisions: Kiro suggested a simple state management approach to track guesses, score, and timers without overcomplicating the codebase.
  • Inline Coding Support: Kiro generated boilerplate React + Tailwind layouts quickly, so we could focus on refining the pixelation logic.
  • Iteration & Debugging: When features broke or needed polish, we used conversational prompts with Kiro to identify bugs, simplify components, and optimize rendering performance.

By offloading the heavy lifting to Kiro, we were able to go from concept to deployed game in a short timeframe, focusing on gameplay design and user experience rather than boilerplate code.

What I Learned

  • How to apply pixelation effects on web images using Canvas and scaling.
  • How to design scoring and timing mechanics that balance fairness with challenge.
  • How AI-assisted development sped up prototyping while still letting me stay creative.
  • The value of keeping UI simple but engaging in a casual browser game.

Challenges I Faced

  • Pixelation Logic: Getting the images to degrade and sharpen smoothly without breaking performance.
  • Time Pressure: Building and polishing a fully working game within the hackathon’s short timeline.
  • Workflow: Learning how to collaborate effectively with Kiro to both generate and refine code.
  • Data annotation: Finding a reliable and safe source for free images with correct labels has been an ongoing challenge

Outcome

The result is HyperPixation, a 10-level browser game that blends simplicity, challenge, and fun. It’s accessible to anyone, rewarding to play, and showcases how AI-assisted development with Kiro can take an idea from concept to production quickly and effectively.

Built With

Share this project:

Updates