Inspiration We wanted to create something that felt magical and unsettling at the same time - like those old fortune-telling machines at carnivals, but with a modern AI twist. The idea of an oracle that starts friendly but becomes possessed midway through came from classic horror tropes about entities that reveal too much. We were inspired by Talking Tom's interactive character style and wanted to prove that seemingly incompatible technologies (computer vision, serverless AI, voice synthesis, character animation) could be stitched together into one cohesive, haunting experience.
What it does The Possessed Oracle is an interactive fortune teller that reads blank pages through your camera. Here's the experience:
You show a blank page to your camera An animated oracle character appears and speaks a pleasant fortune in a calm voice Handwriting magically appears on your page as it speaks THE TWIST: The voice suddenly glitches, the character distorts, and it becomes possessed It reveals something dark and personal about YOU - breaking the fourth wall with present-tense awareness The handwriting overwrites itself with scratchy, erratic text Visual glitch effects and distorted audio create an unsettling atmosphere Users can adjust the "intensity" from Gentle to Unhinged, making it shareable for different audiences. Each reading is unique and personalized based on what you tell the oracle about yourself.
How we built it We stitched together 6 incompatible technologies into one Frankenstein creation:
Frontend (Next.js + React)
Interactive Talking Tom-style character with Framer Motion animations Camera integration using MediaDevices API for page detection Canvas-based handwriting simulation with smooth reveal and overwrite effects State-driven possession transitions with glitch effects Backend (Modal Serverless)
generate_reading: Anthropic Claude generates two-phase narratives (normal → possessed) synthesize_voice: ElevenLabs creates emotional text-to-speech with different voice settings generate_haunting_report: Automated reporting for analytics Kiro Integration (The Secret Sauce)
Specs: Defined structured JSON format for readings, eliminating API contract mismatches Steering Docs: Guided AI to create consistently creepy fortunes with principles like "present tense awareness" and "proximity threats" Agent Hooks: Automated demo script generation and post-session reporting Vibe Coding: Built the entire OracleCharacter.tsx component through conversational coding The "Frankenstein" factor: These technologies don't naturally work together. Computer vision runs in the browser, AI runs serverless, voice synthesis requires API orchestration, and character animation needs real-time state management. We made them work as one living, breathing (and possessed) experience.
Challenges we ran into Voice Synthesis Timing: Synchronizing the handwriting animation with voice playback was tricky. We solved it by calculating character-per-second rates and using requestAnimationFrame for smooth reveals.
Possession Transition: Making the shift from normal to possessed feel natural yet jarring required careful timing. We experimented with different glitch effects and settled on a combination of CSS filters, transform distortions, and audio manipulation.
API Orchestration: Coordinating calls between Next.js API routes, Modal functions, ElevenLabs, and Anthropic while handling errors gracefully took multiple iterations. Modal's serverless architecture helped, but we had to implement proper timeout handling and fallbacks.
Personalization vs. Privacy: Creating genuinely unsettling fortunes that feel personal without being invasive was a delicate balance. Our steering docs helped guide the AI to be creepy without crossing ethical lines.
Camera Detection: Getting reliable page detection across different devices and lighting conditions required fallback modes and clear user feedback.
Accomplishments that we're proud of The Overwrite Effect: The handwriting that erases itself and rewrites with scratchy possessed text is genuinely unsettling and technically satisfying. It required precise canvas manipulation and timing.
Seamless Integration: Despite using 6 different technologies, the experience feels cohesive. Users don't see the complexity - they just see magic turning dark.
Kiro-Powered Development: Building this in ~4 hours was only possible because of Kiro's specs, steering docs, and vibe coding. The spec-driven approach made frontend-backend integration painless.
Personalized Horror: Each reading is unique and tailored to the user. The AI doesn't just generate generic spooky text - it creates narratives that feel like they know something about you.
Accessibility: Despite the complex interactions, we maintained keyboard accessibility, provided visual and audio feedback, and included fallback modes for users without cameras.
What we learned Specs Are Game-Changers: Defining the reading format in .kiro/specs/oracle-reading-format.md before coding saved hours of debugging. It served as both documentation and implementation guide.
Steering Docs Create Consistency: Without dark-narrative-guide.md, the AI-generated fortunes were hit-or-miss. The steering doc's principles (present tense, location specificity, fourth wall breaking) made every reading consistently creepy.
Serverless Scales Differently: Modal's approach to serverless functions changed how we think about backend architecture. No infrastructure management, instant scaling, and built-in secret management made deployment trivial.
Animation State Management: Building character animations that respond to multiple states (idle, speaking, possessed, glitching) taught us a lot about React state machines and Framer Motion's capabilities.
Voice Modulation Matters: The difference between a calm voice and a distorted, unstable voice is what sells the possession effect. ElevenLabs' voice settings were crucial for this.
What's next for The Possessed Oracle AI Akinator Mode: Transform the oracle into an intelligent guessing game where it asks increasingly unsettling questions to figure out what you're thinking. Using conversation memory and Claude's reasoning capabilities, it builds a psychological profile through each interaction, remembering past sessions to make eerily accurate predictions about your thoughts, fears, and secrets.
Persistent Memory System: Implement long-term memory so the oracle remembers every interaction across sessions. It recalls your previous questions, the fortunes it gave you, and whether its predictions came true. Over time, it becomes more accurate and personal, creating the illusion of a genuine supernatural entity that knows your life story.
Advanced ElevenLabs Integration: Leverage ElevenLabs' full voice capabilities including emotional range control, voice design, and real-time voice modulation. The oracle's voice evolves based on conversation context - starting curious and playful during the guessing phase, then shifting to knowing and ominous as it gets closer to the truth.
Conversational Intelligence: Move beyond one-shot fortunes to multi-turn conversations where the oracle asks probing questions, responds to your answers, and adapts its personality. It uses Claude's extended context to maintain coherent dialogues that feel like talking to an actual entity rather than a scripted bot.
Social Sharing with Memory: Users can share their oracle sessions as videos, and when friends click the link, the oracle already knows about them through their connection. "Ah, so you're the friend Sarah mentioned. She told me something interesting about you..."
AR Possession Experience: Use WebXR to project the oracle into your physical space. As it learns more about you through the Akinator-style questioning, it becomes more present in your environment, creating an immersive possession experience.
Voice Cloning for Psychological Impact: Let the oracle speak in your own voice as it reveals what it's learned about you. Hearing your deepest thoughts spoken back in your own voice creates a uniquely unsettling experience.
Multi-User Séances: Groups can participate together, with the oracle playing them against each other, revealing secrets, and using information from one person to unsettle another. The entity grows stronger and more intelligent with each participant.
Built With
- elevanlabs
- javascript
- kiro
- modal
- python
- typescript
Log in or sign up for Devpost to join the conversation.