Fairy Tale

Fairy Tale is an AI-powered interactive web application that lets children create, read, and interact with AI-generated fairy tales in a unique 3D experience. It was built using Google Antigravity and Gemini 3 to combine immersive storytelling, real-time character interaction, and creative freedom for children.

Inspiration

Many parents today struggle to find quality time to read with their children. Yet stories are more than entertainment — they are tools for learning, imagination, and emotional connection.

We wanted to create a platform where:

Children can explore imagination and express creativity
Story characters become interactive companions
Parents can stay emotionally connected, even when life is busy

Fairy Tale was inspired by the desire to bring families closer through technology, without replacing the role of parents.

What it does

Fairy Tale transforms storytelling into a fully interactive experience:

AI Story Generation
- Children input a theme, idea, or image
- AI generates a complete story (10–15 pages) with characters, dialogue, narration, and illustrations
- Uses: gemini-3-flash-preview (story), gemini-3-pro-image-preview (images), gemini-2.5-flash-preview-tts (voices)
- Impact: Boosts creativity, narrative skills, and imagination
3D Book Viewer 📖
- Smooth page-turning, flexible camera, and interactive 3D environment
- Impact: Makes reading immersive and engaging
Character Chat 💬
- Children can ask story characters and storyteller questions via text or voice
- AI generates context-aware replies in character voices
- Impact: Encourages curiosity, social and communication skills
Text-to-Speech 🔊
- Multi-speaker, emotionally expressive audio
- Segmented by character and stored efficiently
- Impact: Makes stories come alive, increasing emotional engagement
Automatic Image Generation 🎭
- AI-generated illustrations and consistent art style
- Impact: Stimulates visual creativity and comprehension

How we built it

Frontend: React 19, TanStack Start, React Three Fiber, Tailwind CSS 4, Shadcn UI
Backend: TanStack Start Server Functions, Cloudflare Workers/Pages, PostgreSQL (Neon) with Drizzle ORM, Cloudflare R2
AI & Services: Google Gemini AI, Gemini TTS, Imagen 3
Dev Tools: Vite, TypeScript, Vitest, Biome, Lefthook, Drizzle Kit, Wrangler

We combined structured AI output, multimodal content, and cloud-native infrastructure to ensure stories, images, and voices stay perfectly synchronized in real time.

Challenges we ran into

Story coherence: Maintaining logical plots across multiple pages
Voice and character alignment: Matching TTS output with unique personalities
Real-time interaction: Supporting text and voice input in a 3D environment
Scalability: Delivering audio and images efficiently for many users

Each challenge helped us refine AI orchestration, context tracking, and cloud-based delivery.

Accomplishments that we're proud of

Built a fully interactive 3D storytelling platform accessible on any browser within a short period of time
Enabled children to create, talk to, and reshape stories in seconds
Developed emotionally expressive AI voices and consistent illustration generation
Designed a platform that supports both creativity and emotional connection for children and parents

What we learned

AI can augment human connection, not replace it
Multimodal storytelling enhances emotional and cognitive development
Real-time interaction requires careful context and latency management
Thoughtful technology can have meaningful social impact

What's next for FairyTale

Expand library of AI-generated stories with cultural and global diversity
Add customizable parental voices for deeper emotional connection
Introduce interactive educational content linked to storytelling
Optimize for low-bandwidth regions to make the app accessible globally

FairyTale aims to bridge imagination and presence, helping children grow creatively while keeping families emotionally connected, even in a busy world.