Building Bunny Brew Café: A Delightful Interactive Pet Experience with Hot Design & AI

This is a submission for the AI Challenge for Cross-Platform Apps - Hot Design Showcase

What I Built

I created Bunny Brew Café - an interactive virtual pet experience where a charming barista bunny serves coffee in a cozy café setting. The app combines the joy of virtual pet interactions with a delightful coffee shop theme, featuring:

• 🐰 An animated barista bunny with 10 different GIF animations
• ☕ Interactive coffee menu cards with smooth hover effects
• 🎨 Real-time particle effects (floating coffee beans, carrot rain)
• 💬 Dynamic speech bubbles with personality-filled responses
• 📋 A chalkboard menu with daily specials and rotating quotes

What started as a simple pet playground evolved into a full café experience, and Hot Design Agent was instrumental in refining the UI interactions and animations in real-time.

Original Design Reference

The concept was inspired by:

• Virtual pet games like Tamagotchi and Neko Atsume
• Cozy café aesthetics with warm brown tones (#6F4E37, #D4A574)
• Interactive UI patterns from modern mobile apps

Demo

🎥 Live Demo

👉 Watch here: YouTube – Live Demo

📸 Screenshots

Main Café View:

Interactive Bubble Dialogue:

Carrot Rain Celebration:

🔗 Repository

GitHub Repository

Hot Design Agent in Action

Real-Time UI Refinement

The Hot Design Agent was a game-changer for bringing the café to life. Here's how it helped me tackle complex animation challenges:

Challenge 1: Dynamic GIF Switching on Interaction

• Problem: Wanted the bunny to change expressions when users click different coffee cards, but managing 10 different GIF states was complex
• AI Solution: Described the desired behavior - "bunny should react differently to each coffee type"
• Agent's Help: Suggested organizing GIFs by mood (happy, excited, eating) and creating a mapping system
• Implementation: Agent helped me set up event handlers for each card that trigger specific animations
• Result: Bunny now shows unique reactions - excited for espresso, content for latte, delighted for mocha!

Challenge 2: Speech Bubble Appearing on Card Hover

• Initial Attempt: Bubble appeared instantly, felt jarring
• AI Guidance: Agent recommended a pop-in animation with BackEase for a bouncy, playful feel
• Real-Time Tuning: While app was running, adjusted timing from 200ms → 150ms for snappier response
• Polish: Added scale transform (0.5 → 1.0) with amplitude of 0.5 for that perfect "pop"
• Impact: Bubble now feels alive and responsive, enhancing the café's personality

Challenge 3: Carrot Rain Celebration Effect

• Vision: When users buy coffee, celebrate with falling carrots (bunny's favorite treat!)
• Complexity: 30 animated carrots with rotation, drift, and fade effects
• AI Assistance: Agent helped optimize the staggered creation (100ms delays) and animation curves
• Fine-Tuning: Adjusted fall duration (1500-2500ms random), rotation speed (2-5 full spins)
• Result: Delightful reward animation that makes purchases feel special

Challenge 4: Performance Optimization - Too Many Animations

• Problem: App became laggy with floating beans + carrot rain + bubble animations all running simultaneously
• Symptoms: Frame drops, stuttering on lower-end devices
• AI Diagnosis: Agent identified the particle cleanup wasn't happening efficiently
• Solution: Implemented proper storyboard.Completed handlers to remove particles from Canvas
• Optimization: Reduced floating beans from 15 → 10, adjusted opacity to 0.25 for lighter rendering
• Result: Smooth 60fps animations even with multiple effects active

Design Process

1. Initial Setup with Hot Reload

Started with basic XAML structure:

<Border Background="#6F4E37" CornerRadius="12" Width="140" Height="180">
  <StackPanel Padding="16">
    <!-- Coffee card content -->
  </StackPanel>
</Border>

Hot Reload kept my Visual Studio and running app perfectly synchronized as I:

• Adjusted color schemes in real-time
• Modified spacing and margins
• Tested different font sizes

2. Animation Development

GIF State Management:

private void OnEspressoHover(object sender, PointerRoutedEventArgs e)
{
    ShowCoffeeDialogue("Espresso! ☕ Bold and intense, just like you!");
    AnimateCardHover(sender as Border, true);
}

private void OnImageTapped(object sender, TappedRoutedEventArgs e)
{
    _currentGifIndex = (_currentGifIndex % TotalGifs) + 1;
    var newSource = $"ms-appx:///Assets/Pet/rabbit{_currentGifIndex}.gif";
    PetImage.Source = new BitmapImage(new Uri(newSource));
}

Speech Bubble Pop Animation:

private void ShowCoffeeDialogue(string message)
{
    SpeechText.Text = message;
    var scaleXIn = new DoubleAnimation
    {
        From = 0.5,
        To = 1.0,
        Duration = TimeSpan.FromMilliseconds(150),
        EasingFunction = new BackEase {
            EasingMode = EasingMode.EaseOut,
            Amplitude = 0.5
        }
    };
    // Bubble pops in with personality!
}

Carrot Rain Celebration:

private void CreateCarrotRain()
{
    for (int i = 0; i < 30; i++)
    {
        var delay = i * 100; // Stagger creation
        var timer = new DispatcherTimer {
            Interval = TimeSpan.FromMilliseconds(delay)
        };
        timer.Tick += (s, e) => {
            CreateFallingCarrot();
            (s as DispatcherTimer)?.Stop();
        };
        timer.Start();
    }
}

Hot Design Agent helped me:

• Organize GIF switching logic for different interactions
• Perfect the bubble pop timing (200ms → 150ms)
• Optimize carrot animation performance with proper cleanup

3. Visual Polish with AI Assistance

Floating Coffee Beans:

• Used Canvas for particle system
• Hot Design Agent suggested opacity (0.25) and size ranges (30-50px)
• Implemented sine wave motion for natural floating effect
• Performance Fix: Reduced from 15 → 10 beans after Agent identified frame drops

Speech Bubbles:

• Positioned dynamically with CompositeTransform
• AI helped optimize the pop-in animation timing (150ms sweet spot)
• Added personality with randomized messages array
• Trigger: Appears on card hover, creating delightful feedback

Carrot Rain Particles:

• 30 carrots with rotation (2-5 full spins), drift, and fade
• Agent helped implement proper cleanup: storyboard.Completed += (s, e) => ParticleCanvas.Children.Remove(carrot);
• Random fall durations (1500-2500ms) for natural variation
• Challenge: Initial implementation caused lag; Agent suggested staggered creation with 100ms delays

Color Palette Refinement:

• Original: #6F4E37 (coffee brown)
• Hover: #96644B (warmer brown) - suggested by Agent
• Accent: #D4A574 (caramel) for buttons and highlights

4. Controls & Bindings Modified

Modified in Hot Design:

• Border.Background - Color animations
• StackPanel.Padding - Spacing optimization
• TextBlock.FontSize - Typography hierarchy
• Button.Padding - Touch target sizing
• Border.CornerRadius - Rounded corners
• ThemeShadow - Depth and elevation

Data Bindings:

• Dynamic quote rotation from string array
• Random message selection for speech bubbles
• Mood-based animation selection (10 rabbit GIFs)

Design Process

Key Takeaways

🚀 Speed & Efficiency

Hot Design Agent + Hot Reload reduced iteration time by ~70%. What used to take multiple compile cycles now happens in seconds with visual feedback.

🎨 AI as a Design Partner

The Agent doesn't just execute commands - it suggests improvements:

• "This scale might cause overflow, try 1.08 instead of 1.12"
• "Reduce padding to create more breathing room"
• "Consider elastic easing for a playful feel"

🔄 Real-Time Iteration

Being able to adjust UI while the app runs is transformative:

• Test hover states without restarting
• See animation timing changes immediately
• Validate color choices in context

📱 Cross-Platform Confidence

Built with Uno Platform, the same XAML runs on:

• Windows (WinUI 3)
• Web (WebAssembly)
• Mobile (iOS/Android)
• macOS and Linux

Hot Design ensures consistency across all platforms.

🤖 AI-Powered vs Traditional Development

Traditional Approach:

1. Write XAML
2. Compile
3. Run app
4. Notice issue
5. Stop app
6. Modify code
7. Repeat

Hot Design + AI Approach:

1. Run app once
2. Describe desired change to Agent
3. See it happen in real-time
4. Iterate visually
5. Keep refining without stopping

Result: From idea to polished UI in a fraction of the time.

💡 Lessons Learned

1. Start simple, iterate visually - Basic structure first, then refine with Hot Design
2. Performance matters with animations - Too many simultaneous effects = lag; Agent helped identify bottlenecks
3. Animation timing is everything - 50ms difference between 200ms and 150ms is noticeable; real-time testing is crucial
4. Proper cleanup prevents memory leaks - Always remove particles from Canvas in Completed handlers
5. Stagger complex animations - 100ms delays between carrot creations made the effect smooth instead of janky
6. GIF state management needs structure - Organizing 10 animations by mood/action makes code maintainable
7. Cross-platform from day one - Hot Design makes it easy to validate on multiple targets

Technical Stack

• Framework: Uno Platform 5.x
• Language: C# + XAML
• IDE: Visual Studio Code, Kiro
• Tools: Hot Design, Hot Reload, Hot Design Agent (Preview)
• Animations: Storyboards with custom easing functions

Conclusion

Building Bunny Brew Café with Hot Design Agent showed me the future of UI development. The combination of visual design tools and AI assistance creates a workflow that's both faster and more creative. Instead of fighting with code, I could focus on crafting delightful interactions and polishing every detail.

The barista bunny is ready to serve! ☕🐰

---

Thank you for checking out Bunny Brew Café! I hope it makes you smile as much as it made me smile building it. 😊