AI Ouija Board : Digital Sprit Communicator

• 

  The Ouija Board Project

Inspiration :

1. Halloween has always been about atmosphere — candlelit rooms, spooky whispers, and a sense of suspense.

2. We wanted to capture that classic mystique in a digital format.

3. Combining the eerie feel of a Ouija board with the intelligence of the ChatGPT API felt like the perfect Kiroween fusion.

4. Our goal was to create a modern, safe, playful, and immersive supernatural experience.

What it does :

1. The user types a question into the input field.

2. A glowing planchette appears on the digital Ouija board.

3. The app sends the question to the ChatGPT API to generate a short, cryptic reply.

4. The planchette animates letter-by-letter across the board to reveal the answer.

5. A Demo Mode allows users to try the experience without needing an API key.

6. Safety filters ensure all responses remain appropriate and non-harmful.

7. The entire experience is mobile-friendly and atmospheric with smooth animations.

How we built it :

We built the project using a modern, lightweight, and fast toolset:

1. Frontend: React + Vite + TypeScript

2. UI Styling: CSS and custom animations

3. Backend: Node.js + Express.js

4. AI: ChatGPT API (with a pluggable mock mode)

5. Deployment: Serverless functions on Vercel

6. Key technical elements:

The planchette animation uses requestAnimationFrame + CSS transforms to move smoothly from one letter to another.

A custom letter-mapping utility translates each symbol (A–Z, 0–9, YES/NO) to responsive board coordinates.

Our Express backend handles ChatGPT requests, moderation, and mock responses.

The entire project is designed to work on desktop, tablet, and mobile.

We used Kiro to generate component scaffolding, API specs, structured task plans, and React/Node boilerplate to speed up development.

Challenges we ran into :

1. Responsive letter mapping: Ensuring the planchette lined up perfectly with letters across screen sizes was surprisingly tricky.

2. Smooth animations: We needed to tune speed, easing, and transitions so the planchette felt “alive” rather than mechanical.

3. Safety: Keeping AI answers spooky but safe required prompt tuning and a lightweight moderation layer.

4. Serverless integration: Running an Express backend cleanly inside Vercel functions required restructuring our routes.

5. Hackathon time pressure: Balancing manual coding with Kiro-assisted generation forced us to carefully plan our iterations.

Accomplishments that we're proud of :

1. Built a fully functional Ouija board with smooth, captivating animations.

2. Integrated ChatGPT API to generate mysterious, atmospheric responses.

3. Added Demo Mode so anyone — including judges — can try it instantly.

4. Created a clean, transparent /.kiro folder showing exactly how Kiro accelerated development.

5. Polished UI, mobile responsiveness, and safeguards for a responsible experience.

6. Shipped a complete full-stack project in hackathon time.

What we learned :

1. How to merge AI text generation with physical-feeling UI motion.

2. How to use Kiro effectively for scaffolding, component generation, and spec-driven development.

3. How to structure an Express server for serverless Vercel environments.

4. How prompt engineering influences tone, mood, and safety of AI responses.

5. How much small timing details matter for making spooky animations “feel right.”

What's next for AI Ouija Board :

1. Built a fully functional Ouija board with smooth, captivating animations.

2. Integrated ChatGPT API to generate mysterious, atmospheric responses.

3. Added Demo Mode so anyone — including judges — can try it instantly.

4. Created a clean, transparent /.kiro folder showing exactly how Kiro accelerated development.

5. Polished UI, mobile responsiveness, and safeguards for a responsible experience.

6. Shipped a complete full-stack project in hackathon time.

Built With

• css
• express.js
• node.js
• react
• vercel
• vite