FocusGacha

Inspiration

As students, we constantly battle ADHD paralysis, doomscrolling, and the temptation to check social media. Standard Pomodoro timers are simply too boring to keep us engaged. On the other hand, Gacha games and RPGs use psychology to make us addicted to collecting items. We asked ourselves: What if we could use the addictive mechanics of Gacha games to cure our procrastination? Thus, FocusGacha was born.

What it does

FocusGacha is a gamified productivity web application. The loop is simple but highly addictive:

1. You input your current distraction (e.g., "Endless TikTok scrolling").
2. Our AI (powered by Groq) instantly generates a unique "Distraction Monster" with its own lore, rarity level (Common to Legendary), and stats.
3. You start a 25-minute focus timer to "battle" this monster.
4. Anti-Cheat: We track page visibility. If you leave the tab to browse the internet, the monster wins, and you lose the session.
5. If you succeed, you "capture" the monster, adding a beautiful, shiny AI-generated holographic card to your permanent collection.

How we built it

We prioritized speed, smooth UX, and zero-latency AI generation:

• Frontend: Next.js 14 (App Router) combined with Tailwind CSS, shadcn/ui, and Framer Motion for the rewarding Gacha animations.
• AI Engine: We bypassed slow and expensive image generation. Instead, we used the Vercel AI SDK with the lightning-fast Groq API (Llama-3) to generate rich, structured JSON data (names, emojis, rarity, lore) in milliseconds. We then render this data via CSS as stunning trading cards.
• State & Storage: Zustand handles global state, and everything syncs instantly to localStorage, meaning the app works instantly without complex database setups.

Challenges we ran into

One major challenge was implementing a strict anti-cheat mechanism. Using the browser's Page Visibility API, we had to ensure that users couldn't just start the timer and immediately open another tab. Another hurdle was "Prompt Engineering" the Groq LLM to strictly return properly formatted JSON for the cards every single time, without any markdown artifacts or extra conversational text.

Accomplishments that we're proud of

We built a hyper-polished, gamified productivity tool in a single hackathon sprint. By substituting heavy image generation with clever prompt engineering and CSS UI design, we achieved a near-instantaneous Gacha "pull" experience that feels genuinely rewarding.

What we learned

We learned that gamification is arguably the most powerful tool for behavioral change. We also discovered that LLMs are incredible engines for procedural generation in games—they aren't just for chatbots; they can be used as a backend engine to dynamically generate game assets (like our Monster Lore) on the fly.

What's next for FocusGacha

• Cloud Sync & Leaderboards: Integrating Supabase to allow users to keep their collection across multiple devices and compete with friends.
• Card Trading: A marketplace where you can trade your "Legendary" captured distractions with other students.
• Mobile App Wrapper: Porting the Next.js app to React Native/Expo for a native mobile experience.

Authors

• Kamil Piejko: Lead Full-Stack Developer & AI Architect. Built the Next.js architecture, integrated the Groq API for zero-latency procedural generation, and implemented the page-visibility anti-cheat logic.
• Joanna Pich: Game Mechanics & Prompt Engineering. Designed the Gacha reward loop and crafted the strict system prompts to ensure the LLM consistently generated structured JSON for the monster stats and lore.
• Dominika Zięba: UI/UX Design & Product Strategy. Shaped the gamified "cozy cyberpunk" visual aesthetic, managed the Framer Motion CSS animations for the card reveals, and structured the project's pitch narrative.

Built With

• artificial-intelligence
• groq
• llama-3
• next.js
• react
• tailwind-css
• typescript
• vercel