Feature/weather animations

[GongRzhe]

🌦️ Weather Animations - Dynamic UI Atmosphere

What This Demo Shows

This demo showcases dynamic weather animations that respond to chat content and conversation context:

1. Contextual Weather Changes: The agent automatically detects weather mentions and mood in conversations
2. Real-time Visual Effects: Smooth animated transitions between different weather states
3. Mood-based Atmosphere: UI atmosphere changes based on emotional context
4. Interactive Weather Control: Direct weather manipulation through chat commands
5. Immersive Experience: Full-screen weather effects with backdrop-filtered UI elements

🎮 How to Interact

Direct Weather Commands

Try asking the agent:

• "Make it rain!" - Triggers rain animation
• "I want to see snow" - Activates snowfall effect
• "Create a storm" - Brings dramatic storm with lightning
• "Show me a beautiful sunset" - Displays sunset atmosphere
• "Make it a clear sunny day" - Switches to clear sky
• "I love windy weather" - Activates wind particle effects
• "It's getting cloudy" - Shows moving cloud formations
• "Make it nighttime" - Switches to night mode with stars

Mood-based Atmospheric Changes

The agent can also detect emotional context:

• "I'm feeling sad today" → Gentle rain
• "I'm so excited!" → Energetic wind effects
• "I need to relax" → Peaceful clouds
• "This is dramatic!" → Storm effects
• "I'm happy!" → Clear sunny weather
• "Feeling mysterious" → Night atmosphere
• "So peaceful and calm" → Sunset glow

Intensity Control

Specify intensity levels:

• "Light rain please" → Gentle rain effect
• "Heavy snowfall" → Intense snow animation
• "Dramatic storm" → Full-intensity storm with lightning

⚡ Available Weather Effects

Weather Type	Visual Effect	Intensity Levels
Clear ☀️	Bright gradient sky	Light, Medium, Heavy
Rain 🌧️	Animated raindrops	Light → Heavy downpour
Snow ❄️	Floating snowflakes	Light flurries → Heavy snowfall
Wind 💨	Moving particles	Gentle breeze → Strong gusts
Clouds ☁️	Drifting cloud formations	Light cover → Overcast
Storm ⛈️	Lightning + Rain	Light → Dramatic thunderstorm
Sunset 🌅	Warm color gradients	Soft glow → Vibrant colors
Night 🌙	Stars + Moon	Calm → Twinkling sky

🛠️ Technical Implementation

Agent Integration

// Weather control action
useCopilotAction({
  name: "change_weather",
  description: "Change weather based on conversation context",
  parameters: [
    { name: "weatherType", type: "string" },
    { name: "intensity", type: "string" },
    { name: "reason", type: "string" }
  ],
  handler: ({ weatherType, intensity, reason }) => {
    // Smooth transition to new weather state
    setWeatherState({ type: weatherType, intensity });
  }
});

Mood Detection

// Automatic mood-based atmosphere changes
useCopilotAction({
  name: "detect_mood_weather", 
  description: "Auto-detect mood and change atmosphere",
  parameters: [{ name: "mood", type: "string" }],
  handler: ({ mood }) => {
    // Map moods to weather states
    const weather = moodWeatherMap[mood];
    setWeatherState(weather);
  }
});

Animation System

• CSS Keyframe Animations: Smooth, performant weather effects
• Dynamic Particle Systems: Configurable rain, snow, and wind particles
• Layered Rendering: Background gradients + particle effects + UI content
• Responsive Design: Adapts to different screen sizes
• Performance Optimized: Uses will-change and reduced motion support

🎨 Weather Animation Details

Rain Effect

• Animated droplets falling from top to bottom
• Variable opacity and speed based on intensity
• Realistic raindrop shapes and gradients

Snow Effect

• Rotating snowflake emojis with random trajectories
• Different sizes and fall speeds
• Gentle floating motion with wind drift

Wind Effect

• Fast-moving particles across the screen
• Horizontal movement with slight vertical variation
• Speed increases with intensity

Storm Effect

• Combined rain + lightning effects
• Periodic lightning flashes illuminating the screen
• Thunder bolt emojis with glow effects

Cloud Effect

• Large emoji clouds drifting across the sky
• Different heights and speeds
• Opacity variation for depth

Sunset/Night Effects

• Gradient background transitions
• Glowing sun/moon with pulse animation
• Twinkling stars with random timing

🌟 Advanced Features

Smooth Transitions

• Fade Effects: Smooth opacity transitions between weather states
• Blur Transitions: Brief blur effect during weather changes
• Background Morphing: Gradient backgrounds smoothly shift colors

Contextual Intelligence

• Keyword Detection: Agent recognizes weather and mood keywords
• Emotional Analysis: Maps emotions to appropriate atmospheric effects
• Conversation Context: Considers full conversation context for weather changes

Visual Hierarchy

• Layered Design: Weather effects don't interfere with chat functionality
• Backdrop Filters: UI elements use glass-morphism effects
• Adaptive Contrast: Text remains readable in all weather conditions

💡 Extension Ideas

This weather system can be extended with:

• Seasonal Themes: Spring, summer, autumn, winter variations
• Location-based Weather: Real weather data integration
• Sound Effects: Audio accompaniment for weather effects
• Time-based Changes: Automatic day/night cycles
• Custom Weather: User-created weather combinations
• Weather Persistence: Remember user's preferred weather
• Interactive Elements: Click-to-change weather hotspots

🎯 Use Cases

• Mood Enhancement: Create atmosphere matching conversation tone
• Storytelling: Visual accompaniment for narrative content
• Meditation Apps: Calming weather effects for relaxation
• Gaming Interfaces: Dynamic environmental effects
• Presentation Tools: Engaging visual backgrounds
• Educational Content: Weather system demonstrations

The weather animations create an immersive, responsive environment that makes conversations more engaging and emotionally resonant!