Affirmation Jumper

An endless runner that turns negative self-talk into empowering leaps: bounce on AI-generated affirmations and capture shareable highlight clips to boost daily positivity.

Comment

What it does

Affirmation Jumper is an endless-runner game that turns negative self-talk into empowering leaps. You enter what’s on your mind or select your current mood, then AI (OpenAI GPT-3.5) generates five personalized affirmations that become the platforms you jump on. Each successful bounce plays a bite-sized video “pep talk” from your custom avatar (via Tavus), or a fallback ElevenLabs voice line. Daily seeded levels give you a fresh challenge, and a “Talk to someone?” modal at game-over lets you chat further for extra support.

How we built it

  • Frontend: React 18 with TypeScript, Vite for fast dev, Tailwind CSS for utility styling, and Framer Motion for fluid page and micro-animations.
  • Game Engine: HTML5 Canvas + a custom JavaScript physics module (gravity, collision, procedural level generator) running at 60 FPS inside React hooks.
  • Affirmations & Audio/Video:
    • GPT-3.5 Turbo for on-the-fly affirmation generation.
    • ElevenLabs TTS for short audio pep talks, lip-synced to Lottie avatars.
    • Tavus video API (persona pa02ab0d7d2e) for full-screen avatar follow-ups.
  • Backend: Supabase (PostgreSQL + RLS + Auth) powers user profiles, daily challenge seeds, and high-score persistence.
  • Sharing & Caching: GIF.js to capture 3-second gameplay highlights (disabled on share screen per UX update), IndexedDB + localStorage for offline state and cached videos.
  • Deployment: Netlify for seamless CI/CD, environment-protected API keys, and global CDN delivery.

Challenges we ran into

  • Canvas + React performance: Balancing a high-frame-rate game loop inside React’s render cycle required careful batching of state updates and use of requestAnimationFrame.
  • Syncing audio/video: Ensuring ElevenLabs voice lines and Tavus videos remained in sync with avatar animations without jank.
  • Offline & fallback flows: Building in-browser caching (IndexedDB) and a Web Speech API backup when ElevenLabs or Tavus calls are slow or unavailable.
  • Accessibility in a game context: Providing ARIA labels on canvas controls, 44×44 px tap targets, and keyboard navigation for a traditionally pointer-driven experience.
  • User emotional safety: Crafting prompts that are both empathetic and concise, then filtering AI outputs to avoid triggering language.

Accomplishments that we’re proud of

  • Seamless AI-powered gameplay: Real-time GPT-3.5 affirmations turned into interactive platforms mid-run.
  • Avatar “pep-talk” integration: First-of-its-kind blend of Tavus video and ElevenLabs audio, lip-synced through Lottie for sub-second feedback.
  • Daily Challenge engine: Procedural, deterministic levels based on date + last high score, giving players a fresh, share-worthy experience each day.
  • High-performance 60 FPS Canvas loop embedded in a React/Vite app, optimized for desktop and mobile browsers.
  • Inclusive design: A pastel-glassmorphic UI with thoughtful accessibility features, making mental health support both playful and safe.

What we learned

  • AI prompt engineering: Fine-tuning system and user prompts to deliver concise, uplifting affirmations and empathetic follow-ups.
  • React + Canvas integration: Strategies for minimizing React re-renders and offloading heavy rendering to the Canvas context.
  • Serverless best practices: Using Supabase real-time subscriptions and RLS to secure user data without a traditional backend server.
  • Advanced caching patterns: Leveraging IndexedDB for video/audio caching and localStorage for persistent state across sessions.
  • Design for emotion: How micro-animations, sound cues, and color transitions can positively influence user mood and engagement.

What’s next for Affirmation Jumper

  • Tavus: Connect the “Tavus” button to peer-support or counseling channels.
  • Multilingual support: Auto-translate affirmations and avatar prompts into Spanish, Arabic, and more.
  • Expanded game modes: Timed sprint challenges, cooperative “team jump” events, and themed seasonal levels.
  • Analytics dashboard: Give users insight into their mood trends, most-played affirmations, and weekly progress reports.
  • Mobile PWA & native app: Offline-first installable experience with push-notification reminders for daily play.

Built With

  • api
  • auth
  • bolt
  • elevenlabs
  • eslint
  • gif.js
  • gpt-3.5
  • lottie
  • netlify
  • openai
  • postcss
  • real-time)
  • rls
  • speech
  • supabase
  • tts
  • turbo
  • web
Share this project:

Updates