The Spectral Haven

A spectral realm of productivity, enchantment, and spooky AI sorcery ✨

Comment

Inspiration

The Spectral Haven was inspired by the idea of turning everyday productivity tools into a cozy haunted world. I wanted something atmospheric instead of scary — a place where tasks float away like ghosts, whispers dissolve into mist, candles melt during focus sessions, and moods grow inside a mystical grove. Halloween themes usually go loud and jumpy; I wanted something gentle, magical, and playful, powered by modern AI.

What it does

The Spectral Haven is a multi-feature spooky productivity realm featuring:

  • Haunted To-Do List with ghost-tasks
  • Focus Chamber with a melting candle timer
  • Whisper Well for symbolic text release
  • Mood Grove mood tracker with ghost icons
  • Spooky Tic-Tac-Toe
  • Nightfall Candle Timer
  • Radiant Sphere for magical affirmations
  • AI-powered Spooky Title Generator using Gemini Vision
  • Animated Halloween world + ghost cursor trail
  • Day/Night themes, sound toggles, and accessibility options It’s a full productivity suite wrapped in a charming spectral theme.

How we built it

The entire app was built using the KIRO IDE, combining:

  • Vibe coding for UI, animations, and component scaffolding
  • Spec-driven development for routing, global states, and structure
  • Agent Hooks to automate component creation, routing, and CSS templates
  • Steering docs to keep all generated UI consistently spooky and atmospheric
  • MCP to scaffold and integrate the Gemini Vision API
  • Netlify for hosting + serverless functions
  • Vanilla JavaScript modules, HTML, and CSS
  • IndexedDB + localStorage for data persistence
  • The Spooky Title Generator analyzes an uploaded image, sends it through a serverless function, and returns AI-generated spooky titles.

Challenges we ran into

  • Extracting clean JSON from Gemini’s multimodal responses
  • Ensuring all 9 features shared a consistent spooky visual tone
  • Balancing animations with accessibility (reduced motion support)
  • Making the Whisper Well text truly privacy-preserving
  • Handling image analysis (brightness, contrast, colour bias) for fallback titles
  • Debugging routing and state sync across many components
  • Keeping performance smooth with many animations on screen

Accomplishments that we're proud of

  • Built 9 full features inside one unified spooky realm
  • Integrated Gemini Vision into a real user feature
  • Designed a polished, atmospheric Halloween UI
  • Structured a large, modular JS app without any frameworks
  • Implemented accessibility features like reduced motion, mute, keyboard navigation
  • Delivered a complete polished experience in under the hackathon timeframe

What we learned

  • How to combine vibe coding + specs + hooks + steering effectively
  • How to fully use KIRO as a co-developer instead of just a code generator
  • How to integrate a vision-based AI API cleanly
  • How to build atmospheric UI without impacting performance
  • How to architect a large multi-page app using ES modules
  • How storytelling + productivity + design can create engaging experiences

What's next for The Spectral Haven

Adding some other features like:

  • An emotion scanner, where it uses the camera to identify the user's emotion and tell jokes accordingly if sad or depressed
  • Adding spooky frames to the given image
  • A stich lab where the user can combine two elements to give rise to a monster
  • Introduce weekly “haunted challenges” to boost productivity
  • Making spooky sounds using AI An enhanced version of radiant sphere, spooky title generator and whisper well using AI

Built With

Share this project:

Updates