What is Mirae?
Mirae is an interactive children's storybook platform that generates personalized, professionally-authored stories for kids aged 6-12. Every child becomes the protagonist of their own unique adventure, complete with custom illustrations, interactive vocabulary features, and educational content. The platform combines advanced story generation technology with beautiful glass-morphism design and React Native mobile optimization.
Unlike traditional children's books, Mirae creates stories tailored to each child's interests, reading level, and personality. Parents can upload photos that get seamlessly integrated into the illustrations, choose from multiple writing styles inspired by beloved authors like Dr. Seuss and Eric Carle, and select art styles, settings, friends, and heroes that match their child's preferences. Each generated story includes interactive vocabulary support, turning every word into a learning opportunity.
Example Books
https://notgpt.net/mirae/3
https://notgpt.net/mirae/4
https://notgpt.net/mirae/6
https://notgpt.net/mirae/7
The Story Behind the Story
There's something magical about watching a child's eyes light up when they discover they're the hero of their own story. As a developer who's been building apps for years, I thought I'd seen it all. Dark themes, minimal interfaces, productivity tools that blend into the background. But when I started thinking about my own kids and the books they read, I realized something was missing from the digital world we've created.
Traditional children's books are beautiful, but they're static. Every child reads the same story about the same characters having the same adventures. Where's the personalization? Where's the interactivity that makes modern technology so powerful? These questions kept nagging at me until I decided to do something about it.
That's how Mirae was born. Not from a business plan or market research, but from watching my daughter flip through the same picture book for the hundredth time and wondering what it would be like if she could actually be part of the story.
The Dark Theme Dilemma
Anyone who's been coding for a while knows the comfort of a good dark theme. It's easier on the eyes, looks professional, and frankly, it's what most of us are used to. When I started thinking about Mirae, my first instinct was to reach for one of my existing boilerplates. Clean, dark, minimal. The kind of interface that works well for productivity apps and developer tools.
But children's books aren't productivity apps. They're windows into magical worlds filled with color, wonder, and imagination. A dark theme might work for a code editor, but it would kill the magic of a children's story. I needed something completely different. Something bright, playful, and visually engaging without being overwhelming.
The problem was, starting from scratch felt overwhelming. I'd been working with dark themes for so long that designing something colorful and child-friendly seemed like stepping into foreign territory. I had the technical skills to build the story generation engine, but the user interface design felt like a mountain I wasn't sure I could climb.
Discovery of Kiro
The turning point came when I discovered the Kiro hackathon. I'd heard about automated planning tools before, but most of them felt gimmicky or too generic to be useful. Kiro was different. Instead of just generating random to-do lists, it could create detailed, actionable implementation plans for specific technologies and design patterns.
What caught my attention was the focus on modern UI design, particularly glass morphism. This design trend uses translucent backgrounds, subtle shadows, and layered visual effects to create interfaces that feel both modern and inviting. It was exactly what Mirae needed, but implementing it properly requires careful attention to detail, performance considerations, and accessibility standards.
The hackathon gave me the motivation to dive in and see what Kiro could really do. Instead of spending weeks planning and second-guessing design decisions, I could generate comprehensive implementation plans and focus on the actual building.
The Planning Revolution
Using Kiro to plan Mirae was like having an experienced team lead who never gets tired and always thinks three steps ahead. The tool generated two massive implementation documents that became the backbone of the entire project.
The first document, tasksglass.md, outlined everything needed to create a modern glass morphism design system. This wasn't just "make things look glassy." It was a comprehensive plan covering TypeScript interfaces, component architecture, animation systems, accessibility considerations, and performance optimizations. The plan included specific implementation details for core components like GlassCard, GlassButton, and GlassInput, complete with proper React Native integration and cross-platform compatibility.
The second document, tasksmiraeconversion.md, tackled the massive job of converting web-based story components to React Native. This document broke down the conversion of over 20 major components, from the library interface to the story reader, from character creation to art style selection. Each section included specific technical requirements, performance considerations, and mobile optimization strategies.
What impressed me most was how these plans anticipated problems I would have encountered later. For example, the plans included specific guidance on memory management for large story files, accessibility features for children with different needs, and offline capabilities for reading without internet access. These weren't obvious requirements when starting the project, but they became critical as development progressed.
Building the Glass Foundation
With solid plans in hand, the first major task was creating the visual foundation of Mirae. Remember the Platform is meant to engage children, therefore I really had to make this almost game like, my kids love it, its energetic and exciting, if I seen this while I was a kid I would have been all over it.
The GlassCard component became the building block for everything else. It uses React Native's blur effects combined with carefully tuned opacity, border radius, and shadow properties to create the signature glass look. But the real challenge was making it perform well on mobile devices while maintaining visual quality across different screen sizes and resolutions.
The component system grew from there. GlassButton needed to provide clear visual feedback when pressed, with smooth animations that felt responsive but not jarring. Children interact with touch interfaces differently than adults, often pressing harder or for longer periods, so the feedback needed to be immediate and obvious.
GlassInput was particularly tricky because it needed to handle different input types while maintaining the glass aesthetic. Search inputs, password fields, and text areas all needed to feel cohesive while serving different purposes. The focus states had to be clearly visible for accessibility while still looking beautiful.
The Story Generation Engine
While the glass UI provided the visual foundation, the heart of Mirae is the story generation system. The process of story generation is a thing of beauty, its a symphony of Artists and Writers building a magical story. The API to handle this I named HighSpeedGeneration, the amount of validation and collaboration between agents is truly a sight to behold. Each story needs to be a complete, coherent narrative with proper character development, plot structure, and age-appropriate themes.
The system supports multiple writing styles inspired by beloved children's authors. A story in the Eric Carle style focuses on simple, repetitive patterns with nature themes and educational content about colors, counting, or science. A Dr. Seuss inspired story uses rhythmic, rhyming language with whimsical scenarios and moral lessons. Each style requires different narrative techniques and vocabulary choices.
For younger children (ages 6-8), stories are typically 30-40 pages with 500-1,200 words. The vocabulary is carefully controlled, sentence structures are simple, and each page includes visual elements that support reading comprehension. Every word can be tapped for age-appropriate definitions, turning reading into an interactive learning experience.
The advanced reader experience for ages 9-12 is significantly more complex. These stories can reach 80+ pages with over 15,000 words. They include multiple plot threads, character development arcs, and sophisticated literary techniques like foreshadowing and symbolism. Some stories use interactive formats like "Choose Your Path" adventures where reader decisions affect the outcome.
Mobile-First Design Challenges
Converting Mirae from web concepts to mobile reality required rethinking almost every aspect of the user experience. Touch interactions are fundamentally different from mouse clicks. Screen real estate is limited. Device capabilities vary widely. Network connections can be unreliable.
The story library needed to work smoothly with pull-to-refresh gestures for checking new content. Book covers had to load quickly while maintaining visual quality. The reading interface needed to support both portrait and landscape orientations, with different layouts optimized for each.
One of the trickiest aspects was handling large story files on mobile devices. A fully illustrated 40-page story with high-quality images can be several megabytes. Loading this content needs to be fast enough to keep children engaged, but not so aggressive that it drains battery or uses excessive bandwidth.
The solution involved implementing progressive loading strategies. Cover images and the first few pages load immediately, while subsequent content loads in the background. Images are cached efficiently to enable offline reading. The system monitors device capabilities and adjusts image quality accordingly.
Accessibility from the Ground Up
Building for children means building for users with a wide range of abilities and needs. Some children are just learning to read. Others might have dyslexia, visual impairments, or motor skill differences. The interface needs to work for everyone.
All interactive elements were designed with appropriate touch targets, following platform guidelines for minimum sizes. Color choices ensure sufficient contrast ratios for readability. Text can be scaled up or down based on device accessibility settings. Screen readers can navigate through story content logically.
The vocabulary support system includes both visual and audio explanations for new words. Children can tap any word to see a definition, but they can also hear pronunciations and example sentences. This multimodal approach helps different types of learners access the content.
For children with motor skill differences, the interface supports both tap and longer press gestures. Swipe gestures for page navigation work with short or long swipes. The glass UI provides clear visual feedback for all interactions.
Performance at Scale
Mirae needs to work smoothly on everything from older smartphones to the latest tablets. This means being thoughtful about memory usage, processing requirements, and battery consumption.
The glass effects that make Mirae beautiful are also computationally expensive. Blur effects, transparency, and layered shadows all require GPU processing. The challenge was maintaining the visual quality while ensuring smooth performance across different devices.
The solution involved creating multiple rendering paths. High-end devices get the full glass effects with real-time blur and complex animations. Mid-range devices use slightly simplified effects that maintain the aesthetic while reducing processing requirements. Older devices fall back to static designs that preserve usability while sacrificing some visual polish.
Memory management was particularly important for the story reading experience. Loading high-resolution images for an entire story could easily consume hundreds of megabytes of RAM. The system instead loads images on demand, keeps a small cache of recently viewed pages, and aggressively releases memory for content that's no longer visible.
The Art of Personalization
Making each child the main character of their story requires more than just swapping in their name. The personalization system considers the child's age, interests, uploaded photos, and reading level to create stories that feel genuinely tailored to them.
Photo integration uses computer vision to analyze uploaded images and incorporate the child's appearance into story illustrations. This isn't just face-swapping. The system maintains artistic consistency while ensuring the child is recognizably represented throughout the story.
Character relationships adapt based on the child's preferences. A shy child might get stories about finding confidence and making friends. An adventurous child might face challenges that require teamwork and problem-solving. The system learns from reading patterns and feedback to improve recommendations over time.
The art style selection process considers both aesthetic preferences and pedagogical goals. Watercolor styles work well for gentle, emotional stories. Bold digital art suits action adventures. The choice affects not just how the story looks, but how it feels to read.
Testing with Real Users
Building for children means testing with children, which brings unique challenges. Kids are honest about what they like and don't like, but they may not be able to articulate why. They interact with interfaces differently than adults, often exploring every corner and trying interactions that weren't intended.
Early testing revealed several important insights. Children expected immediate feedback from all interactions. Waiting more than a few seconds for content to load led to frustration and abandonment. The loading animations needed to be entertaining enough to hold attention while content prepared.
The vocabulary support system initially used popup windows for word definitions. Children found these disruptive and hard to dismiss. The solution was inline definitions that appear smoothly below the selected word without covering other content.
Color choices that looked beautiful on desktop monitors were sometimes hard to read on mobile screens in bright sunlight. The glass effects needed to be subtle enough to maintain readability while still providing the desired aesthetic.
Community and Growth
Mirae launched as a complete product, but it's designed to grow with its community. The story generation system can incorporate new writing styles, art techniques, and educational frameworks. The component library is modular enough to support new features without breaking existing functionality.
Parent feedback has been particularly valuable for understanding how families use the app together. Many parents read the generated stories aloud to younger children, which led to improvements in the text layout and pacing. Others use the vocabulary features to extend learning beyond the app itself.
Technical Lessons Learned
Building Mirae taught several important lessons about modern app development. Automated planning tools like Kiro can dramatically accelerate development when used thoughtfully. They're not magic solutions, but they can provide structure and anticipate problems that might not be obvious at the start of a project.
React Native continues to evolve as a platform for building high-quality mobile experiences. The key is understanding its strengths and limitations. Native animations and effects can be achieved, but they require careful optimization. Cross-platform development is possible, but platform-specific details still matter.
Glass morphism as a design trend works well for certain types of applications, but it requires attention to accessibility and performance. The aesthetic can enhance user engagement when implemented properly, but it shouldn't come at the expense of usability.
The Future of Interactive Reading
Mirae represents just one approach to combining technology with children's literature. The field is rich with possibilities for innovation. Augmented reality could bring story characters into the real world. Machine learning could create even more sophisticated personalization. Voice interfaces could enable entirely new forms of interaction.
The goal isn't to replace traditional books, but to expand what's possible. Digital stories can be updated, personalized, and interactive in ways that print books cannot. They can include multimedia elements, adapt to different learning styles, and provide immediate feedback and support.
As technology continues to advance, the opportunities for creative storytelling will only grow. The challenge is maintaining the magic and wonder that makes children's literature special while leveraging technology to enhance rather than distract from the reading experience.
Looking Forward
Mirae is complete as launched, but it's also just the beginning. The foundation is solid, the community is growing, and the possibilities are endless. Future development will focus on expanding the story catalog, improving personalization algorithms, and exploring new forms of interactive storytelling.
The technical architecture is designed to support these extensions. New writing styles can be added without changing the core generation engine. Additional art styles can be incorporated by expanding the rendering pipeline. The component library can grow to support new features while maintaining consistency.
Most importantly, Mirae demonstrates that building for children requires thinking differently about technology. It's not enough to shrink down adult interfaces or simplify existing patterns. Children deserve thoughtful, purposeful design that respects their intelligence while acknowledging their unique needs and capabilities.
The journey from concept to launch taught me that the best tools are often the ones that help you think more clearly about the problem you're trying to solve. Kiro didn't write the code for Mirae, but it provided the structure and foresight that made the complex development process manageable and successful.
For any developer considering a similar project, my advice is simple: start with clear planning, choose your tools thoughtfully, and never underestimate the importance of testing with real users. Children will teach you things about your app that no amount of theoretical knowledge can provide.
Mirae exists to put children at the center of their own stories. In building it, I learned that the most rewarding development projects are the ones that create genuine joy and wonder for their users.
I hope you enjoy Mirae. Thank you.
Top comments (1)
Post Updated with App Store Link, went live today as soon as the reviewer generated a story :)