VibeTales: a Hero’s Journey.

Inspiration

It started with a universal parenting struggle: The "How was your day?" dead-end.

Ask a tween how school was, and you usually get a one-word answer: "Fine." We realized that traditional journaling apps are too boring for the TikTok generation, and talking to parents can sometimes feel like an interrogation. We wanted to bridge this gap. We asked ourselves: What if recounting your day didn't feel like homework, but like building an origin story?

We wanted to turn the passive act of reflection into an active, creative power trip.

What it does

VibeTales is an AI-powered creative companion for Tweens (8–13) that turns voice notes into high-fidelity comic strips where the user is the protagonist.

1. The Spark: Instead of a blank page, the app offers "Story Sparks"—fun, low-pressure questions (e.g., "What was the 'cringe moment' of the day?") to get the ball rolling.
2. The Director's Chair: The user records their story via Voice Input and sets the mood using a "Vibe Slider" (changing the atmosphere from "Sunny/Pixar" to "Dark/Cyberpunk").
3. The Magic: Our engine listens, visualizes the scene, and generates a multi-panel comic strip.
4. The Hero: The user’s custom avatar is injected into every panel, ensuring they are always the star of their own story.

How we built it

We focused on a "Liquid UX" philosophy—smooth, organic, and high-tech.

• Frontend: We built the interface using React and Three.js. To achieve the requested "Liquid/Pixar" aesthetic, we used Framer Motion for fluid, blob-like transitions and 3D carousels for the story gallery.
• The AI Engine:
  • Voice: We implemented OpenAI Whisper for high-fidelity speech-to-text. It handles slang, fast talking, and mumbling better than native APIs.
  • Orchestration: A Node.js backend uses GPT-4 to act as the "Screenwriter," breaking the transcript into scenes and generating detailed image prompts.
  • Visualization: We use DALL-E 3 for the actual image generation, utilizing a dynamic "Mega-Prompt" structure that enforces style consistency.

Challenges we ran into

• The Identity Crisis: Keeping the main character looking consistent across 4 different comic panels is notoriously difficult in GenAI. We had to build a system of "Persistent Attributes" (e.g., blue hoodie, glasses, messy hair) that are rigorously injected into every single prompt to prevent the hero from morphing.
• Latency vs. Experience: High-quality image generation takes time. To keep kids engaged, we replaced the spinning wheel with a "Tech-Loader"—a transparent view that shows the AI "reading," "sketching," and "coloring," turning the wait time into part of the entertainment.

Accomplishments that we're proud of

• The Director Mode: We successfully implemented a power-user feature that allows tech-savvy kids to open a "console" and give direct text instructions to the AI (e.g., "Make the lighting neon green"), giving them total creative control.
• The Vibe Slider: We managed to map abstract UI interactions (sliding a blob from left to right) into complex backend prompt modifiers that radically change the visual output style.
• The Look: Achieving the "Liquid Graphic" UI style that feels tactile and modern, moving away from childish "crayon" aesthetics.

What we learned

• Prompt Engineering is Logic: We learned that getting consistent characters isn't magic; it's a strict logic problem involving seed management and attribute locking.
• Voice is King: For this age group, typing is a barrier. Voice input made the stories 3x longer and much more emotional than text input.

What's next for VibeTales: a Hero’s Journey.

• Social Squads: A feature allowing friends to "cross-over" into each other's stories, where multiple avatars appear in the same comic.
• Physical Artifacts: A "Print" button to order a physical monthly comic book of your life delivered to your door.
• AR Mirror: Using the tablet camera to project the user's "VibeTales" avatar onto their reflection in real-time.

Built With

• antigravity
• claude
• gemini