Feature/weather animations

dojo/scripts/generate-content-json.js

@@ -9,6 +9,7 @@ const config = {
   shared_state: ["agent.py", "page.tsx", "style.css", "README.mdx"],
   predictive_state_updates: ["agent.py", "page.tsx", "style.css", "README.mdx"],
   tool_based_generative_ui: ["agent.py", "page.tsx", "style.css", "README.mdx"],
+  weather_animations: ["agent.py", "page.tsx", "style.css", "README.mdx"],
 };
 
 // Define which files should come from the feature directory vs. the demo directory

dojo/src/app/api/copilotkit/route.ts

@@ -14,6 +14,7 @@ const humanInTheLoopAgent = new CustomAgent();
 const predictiveStateUpdatesAgent = new CustomAgent();
 const sharedStateAgent = new CustomAgent();
 const toolBasedGenerativeUIAgent = new CustomAgent();
+const weatherAnimationsAgent = new CustomAgent();
 
 const runtime = new CopilotRuntime({
   agents: {
@@ -23,6 +24,7 @@ const runtime = new CopilotRuntime({
     predictiveStateUpdatesAgent,
     sharedStateAgent,
     toolBasedGenerativeUIAgent,
+    weatherAnimationsAgent,
   },
 });
 

dojo/src/app/feature/weather_animations/README.mdx

@@ -0,0 +1,166 @@
+# 🌦️ 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
+```tsx
+// 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
+```tsx
+// 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!