Spookify AI - The Void

Spookify AI is an immersive, high-tech costume generator that transforms your photos into cinematic Halloween characters using advanced neural styling .

Comment

Spookify AI - The Void

Inspiration

We wanted to create something that goes beyond a simple AI image generator. Halloween costume apps are everywhere, but they're usually boring and predictable. We asked ourselves: "What if the AI transformation process itself was an experience?" That's when we came up with The Void - a corrupted digital realm where users must fight through glitchy minigames to earn their transformation. We were inspired by cyberpunk aesthetics, horror games, and the idea that AI systems could have a "dark side" that needs to be conquered.

What it does

Spookify AI transforms your photos into cinematic horror characters using Google's Gemini AI. But here's the twist: the first time you try to generate an image, the system gets "corrupted" by a mysterious entity called The Void Echo. To restore the system and unlock transformations, you must complete three intense minigames:

  1. Glyph Phase - A pattern recognition challenge where you memorize and replicate sequences of corrupted symbols
  2. Waveform Phase - A signal calibration puzzle where you match target waveforms by adjusting frequency, amplitude, and phase
  3. Purge Phase - A timing-based challenge where you charge a neural purge while avoiding instability spikes

Once you defeat The Void, you can transform yourself into 18+ different characters across 4 categories:

  • Original Nightmares - Classic horror creatures (vampires, zombies, demons)
  • Supernatural - Characters from the iconic TV series
  • Video Game Legends - Iconic gaming villains and heroes
  • Movie Maniacs - Legendary film characters (Joker, Darth Vader, Terminator, etc.)

The app features a stunning cyberpunk/glitch aesthetic with custom animations, a comparison slider to see before/after, fullscreen zoom capabilities, and even a talking AI mentor who guides you through the corruption event.

How we built it

  • Frontend: React + TypeScript with Vite for blazing-fast development
  • AI Engine: Google Gemini API for high-quality image transformations
  • Design System: Custom Tailwind CSS with cyberpunk/horror theming
  • Game Logic: Modular minigame architecture with difficulty scaling across 3 levels
  • UX Features:
    • Real-time waveform visualization using Canvas API
    • Speech synthesis for the AI mentor character
    • Custom SVG icons for all 18+ character styles
    • Responsive design that works on mobile and desktop
    • Smooth animations and transitions for immersive experience

Challenges we ran into

  1. Balancing Game Difficulty - Making the minigames challenging but not frustrating was tough. We iterated multiple times on timing windows and difficulty curves.

  2. Waveform Visualization - Creating a real-time oscilloscope that accurately displays sine waves with adjustable parameters required deep Canvas API knowledge and math.

  3. AI Prompt Engineering - Getting Gemini to consistently produce high-quality, character-accurate transformations took extensive prompt refinement. We had to balance creativity with consistency.

  4. Performance Optimization - With all the animations, particle effects, and real-time game logic, we had to carefully optimize to maintain 60fps.

  5. State Management - Coordinating between multiple game phases, corruption events, and the main app flow required careful state architecture.

Accomplishments that we're proud of

  • The Corruption Event - The surprise hijacking of the generation process is genuinely unexpected and creates a memorable "WTF" moment
  • Polished UI/UX - Every detail from the glitch effects to the corner brackets to the animated scan lines contributes to the cyberpunk horror aesthetic
  • Modular Game Architecture - Each minigame is self-contained and can be easily extended or replaced
  • AI Mentor with Voice - The talking mentor adds personality and makes the corruption event feel more alive
  • 18+ Character Styles - We curated a diverse collection spanning horror, supernatural, gaming, and film
  • Comparison Slider - The before/after slider with fullscreen zoom lets users really appreciate the AI transformations

What we learned

  • How to integrate Google Gemini API for image generation and prompt engineering
  • Advanced Canvas API techniques for real-time graphics
  • Creating immersive game experiences within a web app
  • Balancing aesthetics with performance in React applications
  • The importance of sound design and micro-interactions in user experience
  • How to structure complex state machines for multi-phase user flows
  • TypeScript best practices for type-safe game logic

What's next for Spookify AI

  • More Character Categories - Add anime characters, historical figures, and user-submitted custom styles
  • Multiplayer Challenges - Compete with friends to see who can complete the minigames fastest
  • Advanced Customization - Let users fine-tune transformations with sliders for intensity, style, and effects
  • Social Sharing - Direct integration with social media platforms
  • AR Try-On - Use device camera for real-time costume preview before generating
  • Seasonal Themes - Expand beyond Halloween to Christmas, Easter, and other holidays
  • Achievement System - Unlock special character styles by completing challenges
  • Mobile App - Native iOS/Android versions with enhanced performance
  • Community Gallery - Share and vote on the best transformations

Built with ❤️ and ☠️ for the Kiro AI Hackathon

Built With

Share this project:

Updates