Tears of Lucia: The beginning of The Journey

Tears of Lucia: The beginning of The Journey. An interactive saga. Guide amnesiac Princess Lucia to reclaim her lost past & forge a future. The fate of a fallen kingdom, Lumeria, rests in your hands.

Comment

🌙 Tears of Lucia: An AI-Powered Interactive Fantasy

About the Project

Tears of Lucia is an immersive AI-powered interactive storybook experience built on bolt.new. It tells the tale of a mysterious silver-haired girl named Lucia who wakes up on a moonlit beach with no memories—only dreams of a lost kingdom, shimmering sigils on her arms, and a longing for identity.

This project was born from a desire to merge narrative storytelling, generative AI, and mobile-first interaction into a single seamless app, accessible to everyone—especially younger readers and fantasy fans.

🌟 What Inspired Me

The project was inspired by:

  • My love for poetic fantasy like Nausicaä of the Valley of the Wind and Made in Abyss
  • The potential of ChatGPT to bring characters to life with emotional depth
  • The dream of creating a solo-developed mobile experience powered by no-code tools like bolt.new

Lucia isn’t just a character—she’s an evolving AI-driven persona. I wanted users to not just read about her, but actually talk to her. This is linked to my story and the encounter with bolt.new.

One day, I came across a short video on X (formerly Twitter) created by someone using generative AI. That single moment sparked a thought — could I create a world like that too?

Driven by that inspiration, I began exploring generative AI. I started by generating images, then moved on to creating short videos, then stories — and eventually, I joined this hackathon to try building my very first app.

This project represents more than just an app. It’s the beginning of a journey — a quest to discover a part of myself I didn’t know existed. It's a story about curiosity, creativity, and the unknown. And I believe this kind of discovery is possible for anyone who chooses to begin exploring the world of generative AI and live-coded apps with platforms like bolt.new.

That is what made this project truly meaningful — not just what I built, but what I discovered along the way.

🛠️ How I Built It

The project was built using the following tools:

  • bolt.new as the foundation for UI and scene logic
  • OpenAI GPT-4 (via API) to power Lucia’s in-character conversations
  • Framer Motion + Tailwind CSS for smooth UI animations and design
  • Mobile-first responsive design with portrait + landscape support
  • Integrated rate-limiting, error fallback, and mock responses for resilience under API load

Key Features

  • 📖 Scrollable scene-based fantasy book interface
  • 🎤 “Talk with Lucia” button using ChatWithLucia.tsx component
  • 🧠 Lucia replies with context-aware, dreamlike text via OpenAI Chat API
  • 🌕 Glow effects and animations for an enchanted feel
const response = await fetch("https://api.openai.com/v1/chat/completions", {
  method: "POST",
  headers: {
    Authorization: `Bearer ${import.meta.env.VITE_OPENAI_API_KEY}`,
    ...
  },
  body: JSON.stringify({
    model: "gpt-4",
    messages: [...]
  })
})

💡 What I Learned

  • How to structure and manage React components inside bolt.new
  • How to securely use .env variables and handle rate limits with real-time countdown timers
  • How to design a beautiful, animated UI using TailwindCSS + Framer Motion
  • How to bring a fictional character to life using prompt engineering

🚧 Challenges Faced

  • Handling ChatGPT rate limits (429 errors) in a graceful way for users
  • bolt.new UI lacks built-in .env or secret manager tools → had to learn environment-safe API key handling
  • Ensuring smooth playback of video + audio across desktop and mobile
  • Simulating offline fallback/mock mode when no API key is present
  • Making sure the app feels “magical” even with minimal resources and time

📱 Mobile-First Demo Design

Lucia mobile view

We focused heavily on mobile-first storytelling. The screen orientation switches when rotated. UI and controls are optimized for one-hand use.

📌 Final Thought

Tears of Lucia isn’t just a prototype. It’s a proof-of-concept that one person with a vision and the right tools can create interactive magic, powered by AI. I hope this inspires others to use bolt.new not just to build apps—but to bring stories to life.

👉 Try the prototype: lucia-story.bolt.new

Built With

Share this project:

Updates