diff --git a/dojo/scripts/generate-content-json.js b/dojo/scripts/generate-content-json.js
index 2bc90bb3..ae8c6d65 100644
--- a/dojo/scripts/generate-content-json.js
+++ b/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
diff --git a/dojo/src/app/api/copilotkit/route.ts b/dojo/src/app/api/copilotkit/route.ts
index 48a2e5a7..54626fe7 100644
--- a/dojo/src/app/api/copilotkit/route.ts
+++ b/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,
   },
 });
 
diff --git a/dojo/src/app/feature/weather_animations/README.mdx b/dojo/src/app/feature/weather_animations/README.mdx
new file mode 100644
index 00000000..dd6c1f14
--- /dev/null
+++ b/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!
diff --git a/dojo/src/app/feature/weather_animations/page.tsx b/dojo/src/app/feature/weather_animations/page.tsx
new file mode 100644
index 00000000..e0ac633a
--- /dev/null
+++ b/dojo/src/app/feature/weather_animations/page.tsx
@@ -0,0 +1,255 @@
+"use client";
+import React, { useState, useEffect } from "react";
+import "@copilotkit/react-ui/styles.css";
+import "./style.css";
+import {
+  CopilotKit,
+  useCopilotAction,
+} from "@copilotkit/react-core";
+import { CopilotChat } from "@copilotkit/react-ui";
+
+type WeatherType = 'clear' | 'rain' | 'snow' | 'wind' | 'clouds' | 'storm' | 'sunset' | 'night';
+
+interface WeatherState {
+  type: WeatherType;
+  intensity: 'light' | 'medium' | 'heavy';
+  duration?: number;
+}
+
+const WeatherAnimations: React.FC = () => {
+  return (
+    <CopilotKit
+      runtimeUrl="/api/copilotkit"
+      showDevConsole={false}
+      agent="weatherAnimationsAgent"
+    >
+      <WeatherScene />
+    </CopilotKit>
+  );
+};
+
+const WeatherScene = () => {
+  const [weatherState, setWeatherState] = useState<WeatherState>({
+    type: 'clear',
+    intensity: 'medium'
+  });
+  const [isTransitioning, setIsTransitioning] = useState(false);
+
+  // Agent action to change weather
+  useCopilotAction({
+    name: "change_weather",
+    description: "Change the weather animation based on the conversation context. Use this when users mention weather, emotions, or atmospheric conditions.",
+    parameters: [
+      {
+        name: "weatherType",
+        type: "string",
+        description: "Type of weather: clear, rain, snow, wind, clouds, storm, sunset, night",
+      },
+      {
+        name: "intensity",
+        type: "string", 
+        description: "Intensity level: light, medium, heavy",
+      },
+      {
+        name: "reason",
+        type: "string",
+        description: "Why this weather was chosen based on the conversation",
+      }
+    ],
+    handler: ({ weatherType, intensity, reason }) => {
+      console.log(`Changing weather to ${weatherType} (${intensity}) - ${reason}`);
+      
+      setIsTransitioning(true);
+      setTimeout(() => {
+        setWeatherState({
+          type: weatherType as WeatherType,
+          intensity: (intensity as 'light' | 'medium' | 'heavy') || 'medium'
+        });
+        setIsTransitioning(false);
+      }, 500);
+      
+      return `Weather changed to ${weatherType} with ${intensity} intensity. ${reason}`;
+    },
+    followUp: false,
+  });
+
+  // Auto-detect weather keywords in conversation
+  useCopilotAction({
+    name: "detect_mood_weather",
+    description: "Automatically detect mood or weather-related context and change the atmosphere accordingly",
+    parameters: [
+      {
+        name: "mood",
+        type: "string",
+        description: "Detected mood: happy, sad, excited, calm, energetic, peaceful, dramatic, mysterious",
+      }
+    ],
+    handler: ({ mood }) => {
+      const moodWeatherMap: Record<string, { type: WeatherType; intensity: 'light' | 'medium' | 'heavy' }> = {
+        happy: { type: 'clear', intensity: 'light' },
+        excited: { type: 'wind', intensity: 'medium' },
+        calm: { type: 'clouds', intensity: 'light' },
+        peaceful: { type: 'sunset', intensity: 'light' },
+        sad: { type: 'rain', intensity: 'medium' },
+        dramatic: { type: 'storm', intensity: 'heavy' },
+        mysterious: { type: 'night', intensity: 'medium' },
+        energetic: { type: 'wind', intensity: 'heavy' }
+      };
+
+      const weather = moodWeatherMap[mood] || { type: 'clear', intensity: 'medium' };
+      
+      setIsTransitioning(true);
+      setTimeout(() => {
+        setWeatherState(weather);
+        setIsTransitioning(false);
+      }, 500);
+
+      return `Atmosphere changed to match ${mood} mood`;
+    },
+    followUp: false,
+  });
+
+  const getWeatherDescription = () => {
+    const descriptions = {
+      clear: "☀️ Clear skies with gentle warmth",
+      rain: "🌧️ Gentle raindrops creating ripples",
+      snow: "❄️ Soft snowflakes dancing in the air", 
+      wind: "💨 Swirling winds with moving elements",
+      clouds: "☁️ Peaceful cloudy atmosphere",
+      storm: "⛈️ Dramatic stormy weather with lightning",
+      sunset: "🌅 Beautiful sunset colors painting the sky",
+      night: "🌙 Mysterious nighttime with twinkling stars"
+    };
+    return descriptions[weatherState.type];
+  };
+
+  return (
+    <div className={`weather-container ${weatherState.type} ${weatherState.intensity} ${isTransitioning ? 'transitioning' : ''}`}>
+      {/* Weather Effects Layer */}
+      <div className="weather-effects">
+        {weatherState.type === 'rain' && <RainEffect intensity={weatherState.intensity} />}
+        {weatherState.type === 'snow' && <SnowEffect intensity={weatherState.intensity} />}
+        {weatherState.type === 'wind' && <WindEffect intensity={weatherState.intensity} />}
+        {weatherState.type === 'clouds' && <CloudEffect intensity={weatherState.intensity} />}
+        {weatherState.type === 'storm' && <StormEffect intensity={weatherState.intensity} />}
+        {weatherState.type === 'sunset' && <SunsetEffect />}
+        {weatherState.type === 'night' && <NightEffect />}
+      </div>
+
+      {/* Content Layer */}
+      <div className="content-layer">
+        <div className="flex h-full w-full">
+          {/* Main Content Area */}
+          <div className="flex-1 flex flex-col items-center justify-center p-8">
+            <div className="weather-display text-center backdrop-blur-sm bg-white/10 rounded-2xl p-8 border border-white/20">
+              <h1 className="text-5xl font-bold mb-4 text-white drop-shadow-lg">
+                Weather Animations
+              </h1>
+              <div className="text-2xl mb-6 text-white/90">
+                {getWeatherDescription()}
+              </div>
+              <div className="text-lg text-white/80 mb-4">
+                Current: <span className="font-semibold capitalize">{weatherState.type}</span> 
+                {' '}({weatherState.intensity})
+              </div>
+              <div className="text-sm text-white/70 max-w-md">
+                💬 Chat with the agent about weather, moods, or emotions to see the animations change dynamically!
+              </div>
+            </div>
+          </div>
+          
+          {/* Chat Sidebar */}
+          <div className="w-96 backdrop-blur-md bg-white/5 border-l border-white/20">
+            <CopilotChat
+              className="h-full weather-chat"
+              labels={{ 
+                initial: "Hi! I can change the weather and atmosphere based on our conversation. Try mentioning weather, emotions, or moods!" 
+              }}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// Weather Effect Components
+const RainEffect = ({ intensity }: { intensity: string }) => (
+  <div className={`rain-effect ${intensity}`}>
+    {Array.from({ length: intensity === 'heavy' ? 200 : intensity === 'medium' ? 100 : 50 }, (_, i) => (
+      <div key={i} className="raindrop" style={{
+        left: `${Math.random() * 100}%`,
+        animationDelay: `${Math.random() * 2}s`,
+        animationDuration: `${0.5 + Math.random() * 0.5}s`
+      }} />
+    ))}
+  </div>
+);
+
+const SnowEffect = ({ intensity }: { intensity: string }) => (
+  <div className={`snow-effect ${intensity}`}>
+    {Array.from({ length: intensity === 'heavy' ? 150 : intensity === 'medium' ? 75 : 40 }, (_, i) => (
+      <div key={i} className="snowflake" style={{
+        left: `${Math.random() * 100}%`,
+        animationDelay: `${Math.random() * 3}s`,
+        animationDuration: `${2 + Math.random() * 3}s`,
+        fontSize: `${8 + Math.random() * 8}px`
+      }}>❄</div>
+    ))}
+  </div>
+);
+
+const WindEffect = ({ intensity }: { intensity: string }) => (
+  <div className={`wind-effect ${intensity}`}>
+    {Array.from({ length: 30 }, (_, i) => (
+      <div key={i} className="wind-particle" style={{
+        top: `${Math.random() * 100}%`,
+        animationDelay: `${Math.random() * 2}s`,
+        animationDuration: `${1 + Math.random() * 2}s`
+      }} />
+    ))}
+  </div>
+);
+
+const CloudEffect = ({ intensity }: { intensity: string }) => (
+  <div className={`cloud-effect ${intensity}`}>
+    <div className="cloud cloud-1">☁️</div>
+    <div className="cloud cloud-2">☁️</div>
+    <div className="cloud cloud-3">☁️</div>
+  </div>
+);
+
+const StormEffect = ({ intensity }: { intensity: string }) => (
+  <div className={`storm-effect ${intensity}`}>
+    <div className="lightning-flash" />
+    <RainEffect intensity="heavy" />
+    {Array.from({ length: 5 }, (_, i) => (
+      <div key={i} className="lightning-bolt" style={{
+        left: `${20 + Math.random() * 60}%`,
+        animationDelay: `${Math.random() * 3}s`
+      }}>⚡</div>
+    ))}
+  </div>
+);
+
+const SunsetEffect = () => (
+  <div className="sunset-effect">
+    <div className="sun">☀️</div>
+    <div className="sunset-glow" />
+  </div>
+);
+
+const NightEffect = () => (
+  <div className="night-effect">
+    <div className="moon">🌙</div>
+    {Array.from({ length: 50 }, (_, i) => (
+      <div key={i} className="star" style={{
+        top: `${Math.random() * 70}%`,
+        left: `${Math.random() * 100}%`,
+        animationDelay: `${Math.random() * 3}s`
+      }}>✨</div>
+    ))}
+  </div>
+);
+
+export default WeatherAnimations;
diff --git a/dojo/src/app/feature/weather_animations/style.css b/dojo/src/app/feature/weather_animations/style.css
new file mode 100644
index 00000000..9f2d6189
--- /dev/null
+++ b/dojo/src/app/feature/weather_animations/style.css
@@ -0,0 +1,435 @@
+/* Weather Animation Container */
+.weather-container {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+  transition: all 1s ease-in-out;
+}
+
+/* Weather-specific backgrounds */
+.weather-container.clear {
+  background: linear-gradient(135deg, #74b9ff 0%, #0984e3 50%, #a29bfe 100%);
+}
+
+.weather-container.rain {
+  background: linear-gradient(135deg, #636e72 0%, #2d3436 50%, #74b9ff 100%);
+}
+
+.weather-container.snow {
+  background: linear-gradient(135deg, #ddd6fe 0%, #a5b4fc 50%, #e0e7ff 100%);
+}
+
+.weather-container.wind {
+  background: linear-gradient(135deg, #81ecec 0%, #00b894 50%, #55a3ff 100%);
+}
+
+.weather-container.clouds {
+  background: linear-gradient(135deg, #b2bec3 0%, #636e72 50%, #74b9ff 100%);
+}
+
+.weather-container.storm {
+  background: linear-gradient(135deg, #2d3436 0%, #636e72 30%, #74b9ff 100%);
+}
+
+.weather-container.sunset {
+  background: linear-gradient(135deg, #fd79a8 0%, #fdcb6e 30%, #e17055 70%, #74b9ff 100%);
+}
+
+.weather-container.night {
+  background: linear-gradient(135deg, #2d3436 0%, #636e72 30%, #0984e3 100%);
+}
+
+/* Transition effects */
+.weather-container.transitioning {
+  filter: blur(2px);
+  opacity: 0.8;
+}
+
+/* Weather Effects Layer */
+.weather-effects {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* Content Layer */
+.content-layer {
+  position: relative;
+  z-index: 2;
+  width: 100%;
+  height: 100%;
+}
+
+/* Weather Display */
+.weather-display {
+  animation: fadeInUp 1s ease-out;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Rain Effects */
+.rain-effect {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.raindrop {
+  position: absolute;
+  width: 2px;
+  height: 20px;
+  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.6));
+  animation: rainFall linear infinite;
+}
+
+@keyframes rainFall {
+  to {
+    transform: translateY(100vh);
+  }
+}
+
+.rain-effect.light .raindrop {
+  opacity: 0.4;
+}
+
+.rain-effect.medium .raindrop {
+  opacity: 0.6;
+}
+
+.rain-effect.heavy .raindrop {
+  opacity: 0.8;
+  height: 30px;
+}
+
+/* Snow Effects */
+.snow-effect {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.snowflake {
+  position: absolute;
+  color: rgba(255, 255, 255, 0.8);
+  animation: snowFall linear infinite;
+  text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
+}
+
+@keyframes snowFall {
+  to {
+    transform: translateY(100vh) rotate(360deg);
+  }
+}
+
+.snow-effect.light .snowflake {
+  opacity: 0.5;
+}
+
+.snow-effect.medium .snowflake {
+  opacity: 0.7;
+}
+
+.snow-effect.heavy .snowflake {
+  opacity: 0.9;
+  font-size: 16px !important;
+}
+
+/* Wind Effects */
+.wind-effect {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.wind-particle {
+  position: absolute;
+  width: 3px;
+  height: 3px;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  animation: windBlow linear infinite;
+}
+
+@keyframes windBlow {
+  0% {
+    transform: translateX(-100px) translateY(0px);
+    opacity: 0;
+  }
+  10% {
+    opacity: 1;
+  }
+  90% {
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(calc(100vw + 100px)) translateY(-50px);
+    opacity: 0;
+  }
+}
+
+.wind-effect.heavy .wind-particle {
+  width: 5px;
+  height: 5px;
+  animation-duration: 0.8s !important;
+}
+
+/* Cloud Effects */
+.cloud-effect {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.cloud {
+  position: absolute;
+  font-size: 60px;
+  opacity: 0.7;
+  animation: cloudFloat linear infinite;
+}
+
+.cloud-1 {
+  top: 10%;
+  animation-duration: 20s;
+  animation-delay: 0s;
+}
+
+.cloud-2 {
+  top: 30%;
+  animation-duration: 25s;
+  animation-delay: -5s;
+}
+
+.cloud-3 {
+  top: 60%;
+  animation-duration: 30s;
+  animation-delay: -10s;
+}
+
+@keyframes cloudFloat {
+  0% {
+    transform: translateX(-200px);
+  }
+  100% {
+    transform: translateX(calc(100vw + 200px));
+  }
+}
+
+.cloud-effect.light .cloud {
+  opacity: 0.4;
+}
+
+.cloud-effect.heavy .cloud {
+  opacity: 0.9;
+  font-size: 80px;
+}
+
+/* Storm Effects */
+.storm-effect {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.lightning-flash {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.1);
+  animation: lightningFlash 3s infinite;
+}
+
+@keyframes lightningFlash {
+  0%, 90%, 100% {
+    opacity: 0;
+  }
+  5%, 10% {
+    opacity: 1;
+  }
+}
+
+.lightning-bolt {
+  position: absolute;
+  font-size: 40px;
+  color: #fdcb6e;
+  animation: lightningStrike 3s infinite;
+  text-shadow: 0 0 10px #fdcb6e;
+}
+
+@keyframes lightningStrike {
+  0%, 90%, 100% {
+    opacity: 0;
+    transform: scale(1);
+  }
+  5% {
+    opacity: 1;
+    transform: scale(1.2);
+  }
+  10% {
+    opacity: 0.5;
+    transform: scale(1);
+  }
+}
+
+/* Sunset Effects */
+.sunset-effect {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.sun {
+  position: absolute;
+  top: 20%;
+  right: 10%;
+  font-size: 80px;
+  animation: sunGlow 4s ease-in-out infinite alternate;
+}
+
+@keyframes sunGlow {
+  to {
+    transform: scale(1.1);
+    filter: drop-shadow(0 0 20px rgba(253, 203, 110, 0.8));
+  }
+}
+
+.sunset-glow {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 40%;
+  background: radial-gradient(ellipse at bottom, rgba(253, 203, 110, 0.3) 0%, transparent 70%);
+  animation: glowPulse 3s ease-in-out infinite alternate;
+}
+
+@keyframes glowPulse {
+  to {
+    opacity: 0.7;
+  }
+}
+
+/* Night Effects */
+.night-effect {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.moon {
+  position: absolute;
+  top: 15%;
+  right: 15%;
+  font-size: 60px;
+  animation: moonGlow 5s ease-in-out infinite alternate;
+}
+
+@keyframes moonGlow {
+  to {
+    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.5));
+  }
+}
+
+.star {
+  position: absolute;
+  font-size: 12px;
+  animation: starTwinkle 2s ease-in-out infinite alternate;
+}
+
+@keyframes starTwinkle {
+  0% {
+    opacity: 0.3;
+    transform: scale(0.8);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1.2);
+  }
+}
+
+/* Chat Customization */
+.weather-chat {
+  background: rgba(255, 255, 255, 0.1) !important;
+  backdrop-filter: blur(10px);
+  border: none !important;
+}
+
+.weather-chat .copilotKitInput {
+  background: rgba(255, 255, 255, 0.1) !important;
+  border: 1px solid rgba(255, 255, 255, 0.2) !important;
+  backdrop-filter: blur(5px);
+  color: white !important;
+}
+
+.weather-chat .copilotKitInput::placeholder {
+  color: rgba(255, 255, 255, 0.7) !important;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .weather-container .content-layer .flex {
+    flex-direction: column;
+  }
+  
+  .weather-container .content-layer .w-96 {
+    width: 100%;
+    height: 300px;
+  }
+  
+  .weather-display {
+    padding: 1rem;
+  }
+  
+  .weather-display h1 {
+    font-size: 2rem;
+  }
+  
+  .cloud {
+    font-size: 40px;
+  }
+  
+  .sun, .moon {
+    font-size: 50px;
+  }
+}
+
+/* Additional Weather Intensity Variations */
+.weather-container.light {
+  filter: brightness(1.1);
+}
+
+.weather-container.heavy {
+  filter: brightness(0.9) contrast(1.1);
+}
+
+/* Smooth transitions between weather states */
+.weather-container * {
+  transition: opacity 0.5s ease-in-out;
+}
+
+/* Performance optimizations */
+.weather-effects * {
+  will-change: transform;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .weather-effects * {
+    animation-duration: 0.1s !important;
+    animation-iteration-count: 1 !important;
+  }
+}
diff --git a/dojo/src/config.ts b/dojo/src/config.ts
index 0e3752e8..d009dbad 100644
--- a/dojo/src/config.ts
+++ b/dojo/src/config.ts
@@ -60,6 +60,12 @@ const config: DemoConfig[] = [
       "Use collaboration to edit a document in real time with your Copilot",
     tags: ["State", "Streaming", "Tools"],
   }),
+  createDemoConfig({
+    id: "weather_animations",
+    name: "Weather Animations",
+    description: "Dynamic weather animations that respond to chat content and mood",
+    tags: ["Animations", "Context-Aware", "Visual Effects", "Mood Detection"],
+  }),
 ];
 
 export default config;
diff --git a/dojo/src/files.json b/dojo/src/files.json
index 52feae12..7217c020 100644
--- a/dojo/src/files.json
+++ b/dojo/src/files.json
@@ -136,5 +136,28 @@
       }
     ],
     "readmeContent": "# 🪶 Tool-Based Generative UI Haiku Creator\n\n## What This Demo Shows\n\nThis demo showcases CopilotKit's **tool-based generative UI** capabilities:\n1. **Frontend Rendering of Tool Calls**: Backend tool calls are automatically rendered in the UI\n2. **Dynamic UI Generation**: The UI updates in real-time as the agent generates content\n3. **Elegant Content Presentation**: Complex structured data (haikus) are beautifully displayed\n\n## How to Interact\n\nChat with your Copilot and ask for haikus about different topics:\n- \"Create a haiku about nature\"\n- \"Write a haiku about technology\"\n- \"Generate a haiku about the changing seasons\"\n- \"Make a humorous haiku about programming\"\n\nEach request will trigger the agent to generate a haiku and display it in a visually appealing card format in the UI.\n\n## ✨ Tool-Based Generative UI in Action\n\n**What's happening technically:**\n- The agent processes your request and determines it should create a haiku\n- It calls a backend tool that returns structured haiku data\n- CopilotKit automatically renders this tool call in the frontend\n- The rendering is handled by the registered tool component in your React app\n- No manual state management is required to display the results\n\n**What you'll see in this demo:**\n- As you request a haiku, a beautifully formatted card appears in the UI\n- The haiku follows the traditional 5-7-5 syllable structure\n- Each haiku is presented with consistent styling\n- Multiple haikus can be generated in sequence\n- The UI adapts to display each new piece of content\n\nThis pattern of tool-based generative UI can be extended to create any kind of dynamic content - from data visualizations to interactive components, all driven by your Copilot's tool calls! "
+  },
+  "weather_animations": {
+    "files": [
+      {
+        "name": "page.tsx",
+        "content": "\"use client\";\nimport React, { useState, useEffect } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport {\n  CopilotKit,\n  useCopilotAction,\n} from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\n\ntype WeatherType = 'clear' | 'rain' | 'snow' | 'wind' | 'clouds' | 'storm' | 'sunset' | 'night';\n\ninterface WeatherState {\n  type: WeatherType;\n  intensity: 'light' | 'medium' | 'heavy';\n  duration?: number;\n}\n\nconst WeatherAnimations: React.FC = () => {\n  return (\n    <CopilotKit\n      runtimeUrl=\"/api/copilotkit\"\n      showDevConsole={false}\n      agent=\"weatherAnimationsAgent\"\n    >\n      <WeatherScene />\n    </CopilotKit>\n  );\n};\n\nconst WeatherScene = () => {\n  const [weatherState, setWeatherState] = useState<WeatherState>({\n    type: 'clear',\n    intensity: 'medium'\n  });\n  const [isTransitioning, setIsTransitioning] = useState(false);\n\n  // Agent action to change weather\n  useCopilotAction({\n    name: \"change_weather\",\n    description: \"Change the weather animation based on the conversation context. Use this when users mention weather, emotions, or atmospheric conditions.\",\n    parameters: [\n      {\n        name: \"weatherType\",\n        type: \"string\",\n        description: \"Type of weather: clear, rain, snow, wind, clouds, storm, sunset, night\",\n      },\n      {\n        name: \"intensity\",\n        type: \"string\", \n        description: \"Intensity level: light, medium, heavy\",\n      },\n      {\n        name: \"reason\",\n        type: \"string\",\n        description: \"Why this weather was chosen based on the conversation\",\n      }\n    ],\n    handler: ({ weatherType, intensity, reason }) => {\n      console.log(`Changing weather to ${weatherType} (${intensity}) - ${reason}`);\n      \n      setIsTransitioning(true);\n      setTimeout(() => {\n        setWeatherState({\n          type: weatherType as WeatherType,\n          intensity: (intensity as 'light' | 'medium' | 'heavy') || 'medium'\n        });\n        setIsTransitioning(false);\n      }, 500);\n      \n      return `Weather changed to ${weatherType} with ${intensity} intensity. ${reason}`;\n    },\n    followUp: false,\n  });\n\n  // Auto-detect weather keywords in conversation\n  useCopilotAction({\n    name: \"detect_mood_weather\",\n    description: \"Automatically detect mood or weather-related context and change the atmosphere accordingly\",\n    parameters: [\n      {\n        name: \"mood\",\n        type: \"string\",\n        description: \"Detected mood: happy, sad, excited, calm, energetic, peaceful, dramatic, mysterious\",\n      }\n    ],\n    handler: ({ mood }) => {\n      const moodWeatherMap: Record<string, { type: WeatherType; intensity: 'light' | 'medium' | 'heavy' }> = {\n        happy: { type: 'clear', intensity: 'light' },\n        excited: { type: 'wind', intensity: 'medium' },\n        calm: { type: 'clouds', intensity: 'light' },\n        peaceful: { type: 'sunset', intensity: 'light' },\n        sad: { type: 'rain', intensity: 'medium' },\n        dramatic: { type: 'storm', intensity: 'heavy' },\n        mysterious: { type: 'night', intensity: 'medium' },\n        energetic: { type: 'wind', intensity: 'heavy' }\n      };\n\n      const weather = moodWeatherMap[mood] || { type: 'clear', intensity: 'medium' };\n      \n      setIsTransitioning(true);\n      setTimeout(() => {\n        setWeatherState(weather);\n        setIsTransitioning(false);\n      }, 500);\n\n      return `Atmosphere changed to match ${mood} mood`;\n    },\n    followUp: false,\n  });\n\n  const getWeatherDescription = () => {\n    const descriptions = {\n      clear: \"☀️ Clear skies with gentle warmth\",\n      rain: \"🌧️ Gentle raindrops creating ripples\",\n      snow: \"❄️ Soft snowflakes dancing in the air\", \n      wind: \"💨 Swirling winds with moving elements\",\n      clouds: \"☁️ Peaceful cloudy atmosphere\",\n      storm: \"⛈️ Dramatic stormy weather with lightning\",\n      sunset: \"🌅 Beautiful sunset colors painting the sky\",\n      night: \"🌙 Mysterious nighttime with twinkling stars\"\n    };\n    return descriptions[weatherState.type];\n  };\n\n  return (\n    <div className={`weather-container ${weatherState.type} ${weatherState.intensity} ${isTransitioning ? 'transitioning' : ''}`}>\n      {/* Weather Effects Layer */}\n      <div className=\"weather-effects\">\n        {weatherState.type === 'rain' && <RainEffect intensity={weatherState.intensity} />}\n        {weatherState.type === 'snow' && <SnowEffect intensity={weatherState.intensity} />}\n        {weatherState.type === 'wind' && <WindEffect intensity={weatherState.intensity} />}\n        {weatherState.type === 'clouds' && <CloudEffect intensity={weatherState.intensity} />}\n        {weatherState.type === 'storm' && <StormEffect intensity={weatherState.intensity} />}\n        {weatherState.type === 'sunset' && <SunsetEffect />}\n        {weatherState.type === 'night' && <NightEffect />}\n      </div>\n\n      {/* Content Layer */}\n      <div className=\"content-layer\">\n        <div className=\"flex h-full w-full\">\n          {/* Main Content Area */}\n          <div className=\"flex-1 flex flex-col items-center justify-center p-8\">\n            <div className=\"weather-display text-center backdrop-blur-sm bg-white/10 rounded-2xl p-8 border border-white/20\">\n              <h1 className=\"text-5xl font-bold mb-4 text-white drop-shadow-lg\">\n                Weather Animations\n              </h1>\n              <div className=\"text-2xl mb-6 text-white/90\">\n                {getWeatherDescription()}\n              </div>\n              <div className=\"text-lg text-white/80 mb-4\">\n                Current: <span className=\"font-semibold capitalize\">{weatherState.type}</span> \n                {' '}({weatherState.intensity})\n              </div>\n              <div className=\"text-sm text-white/70 max-w-md\">\n                💬 Chat with the agent about weather, moods, or emotions to see the animations change dynamically!\n              </div>\n            </div>\n          </div>\n          \n          {/* Chat Sidebar */}\n          <div className=\"w-96 backdrop-blur-md bg-white/5 border-l border-white/20\">\n            <CopilotChat\n              className=\"h-full weather-chat\"\n              labels={{ \n                initial: \"Hi! I can change the weather and atmosphere based on our conversation. Try mentioning weather, emotions, or moods!\" \n              }}\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\n// Weather Effect Components\nconst RainEffect = ({ intensity }: { intensity: string }) => (\n  <div className={`rain-effect ${intensity}`}>\n    {Array.from({ length: intensity === 'heavy' ? 200 : intensity === 'medium' ? 100 : 50 }, (_, i) => (\n      <div key={i} className=\"raindrop\" style={{\n        left: `${Math.random() * 100}%`,\n        animationDelay: `${Math.random() * 2}s`,\n        animationDuration: `${0.5 + Math.random() * 0.5}s`\n      }} />\n    ))}\n  </div>\n);\n\nconst SnowEffect = ({ intensity }: { intensity: string }) => (\n  <div className={`snow-effect ${intensity}`}>\n    {Array.from({ length: intensity === 'heavy' ? 150 : intensity === 'medium' ? 75 : 40 }, (_, i) => (\n      <div key={i} className=\"snowflake\" style={{\n        left: `${Math.random() * 100}%`,\n        animationDelay: `${Math.random() * 3}s`,\n        animationDuration: `${2 + Math.random() * 3}s`,\n        fontSize: `${8 + Math.random() * 8}px`\n      }}>❄</div>\n    ))}\n  </div>\n);\n\nconst WindEffect = ({ intensity }: { intensity: string }) => (\n  <div className={`wind-effect ${intensity}`}>\n    {Array.from({ length: 30 }, (_, i) => (\n      <div key={i} className=\"wind-particle\" style={{\n        top: `${Math.random() * 100}%`,\n        animationDelay: `${Math.random() * 2}s`,\n        animationDuration: `${1 + Math.random() * 2}s`\n      }} />\n    ))}\n  </div>\n);\n\nconst CloudEffect = ({ intensity }: { intensity: string }) => (\n  <div className={`cloud-effect ${intensity}`}>\n    <div className=\"cloud cloud-1\">☁️</div>\n    <div className=\"cloud cloud-2\">☁️</div>\n    <div className=\"cloud cloud-3\">☁️</div>\n  </div>\n);\n\nconst StormEffect = ({ intensity }: { intensity: string }) => (\n  <div className={`storm-effect ${intensity}`}>\n    <div className=\"lightning-flash\" />\n    <RainEffect intensity=\"heavy\" />\n    {Array.from({ length: 5 }, (_, i) => (\n      <div key={i} className=\"lightning-bolt\" style={{\n        left: `${20 + Math.random() * 60}%`,\n        animationDelay: `${Math.random() * 3}s`\n      }}>⚡</div>\n    ))}\n  </div>\n);\n\nconst SunsetEffect = () => (\n  <div className=\"sunset-effect\">\n    <div className=\"sun\">☀️</div>\n    <div className=\"sunset-glow\" />\n  </div>\n);\n\nconst NightEffect = () => (\n  <div className=\"night-effect\">\n    <div className=\"moon\">🌙</div>\n    {Array.from({ length: 50 }, (_, i) => (\n      <div key={i} className=\"star\" style={{\n        top: `${Math.random() * 70}%`,\n        left: `${Math.random() * 100}%`,\n        animationDelay: `${Math.random() * 3}s`\n      }}>✨</div>\n    ))}\n  </div>\n);\n\nexport default WeatherAnimations;\n",
+        "path": "page.tsx",
+        "language": "typescript"
+      },
+      {
+        "name": "style.css",
+        "content": "/* Weather Animation Container */\n.weather-container {\n  position: relative;\n  width: 100%;\n  height: 100vh;\n  overflow: hidden;\n  transition: all 1s ease-in-out;\n}\n\n/* Weather-specific backgrounds */\n.weather-container.clear {\n  background: linear-gradient(135deg, #74b9ff 0%, #0984e3 50%, #a29bfe 100%);\n}\n\n.weather-container.rain {\n  background: linear-gradient(135deg, #636e72 0%, #2d3436 50%, #74b9ff 100%);\n}\n\n.weather-container.snow {\n  background: linear-gradient(135deg, #ddd6fe 0%, #a5b4fc 50%, #e0e7ff 100%);\n}\n\n.weather-container.wind {\n  background: linear-gradient(135deg, #81ecec 0%, #00b894 50%, #55a3ff 100%);\n}\n\n.weather-container.clouds {\n  background: linear-gradient(135deg, #b2bec3 0%, #636e72 50%, #74b9ff 100%);\n}\n\n.weather-container.storm {\n  background: linear-gradient(135deg, #2d3436 0%, #636e72 30%, #74b9ff 100%);\n}\n\n.weather-container.sunset {\n  background: linear-gradient(135deg, #fd79a8 0%, #fdcb6e 30%, #e17055 70%, #74b9ff 100%);\n}\n\n.weather-container.night {\n  background: linear-gradient(135deg, #2d3436 0%, #636e72 30%, #0984e3 100%);\n}\n\n/* Transition effects */\n.weather-container.transitioning {\n  filter: blur(2px);\n  opacity: 0.8;\n}\n\n/* Weather Effects Layer */\n.weather-effects {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  z-index: 1;\n}\n\n/* Content Layer */\n.content-layer {\n  position: relative;\n  z-index: 2;\n  width: 100%;\n  height: 100%;\n}\n\n/* Weather Display */\n.weather-display {\n  animation: fadeInUp 1s ease-out;\n}\n\n@keyframes fadeInUp {\n  from {\n    opacity: 0;\n    transform: translateY(30px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n/* Rain Effects */\n.rain-effect {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.raindrop {\n  position: absolute;\n  width: 2px;\n  height: 20px;\n  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.6));\n  animation: rainFall linear infinite;\n}\n\n@keyframes rainFall {\n  to {\n    transform: translateY(100vh);\n  }\n}\n\n.rain-effect.light .raindrop {\n  opacity: 0.4;\n}\n\n.rain-effect.medium .raindrop {\n  opacity: 0.6;\n}\n\n.rain-effect.heavy .raindrop {\n  opacity: 0.8;\n  height: 30px;\n}\n\n/* Snow Effects */\n.snow-effect {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.snowflake {\n  position: absolute;\n  color: rgba(255, 255, 255, 0.8);\n  animation: snowFall linear infinite;\n  text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);\n}\n\n@keyframes snowFall {\n  to {\n    transform: translateY(100vh) rotate(360deg);\n  }\n}\n\n.snow-effect.light .snowflake {\n  opacity: 0.5;\n}\n\n.snow-effect.medium .snowflake {\n  opacity: 0.7;\n}\n\n.snow-effect.heavy .snowflake {\n  opacity: 0.9;\n  font-size: 16px !important;\n}\n\n/* Wind Effects */\n.wind-effect {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.wind-particle {\n  position: absolute;\n  width: 3px;\n  height: 3px;\n  background: rgba(255, 255, 255, 0.3);\n  border-radius: 50%;\n  animation: windBlow linear infinite;\n}\n\n@keyframes windBlow {\n  0% {\n    transform: translateX(-100px) translateY(0px);\n    opacity: 0;\n  }\n  10% {\n    opacity: 1;\n  }\n  90% {\n    opacity: 1;\n  }\n  100% {\n    transform: translateX(calc(100vw + 100px)) translateY(-50px);\n    opacity: 0;\n  }\n}\n\n.wind-effect.heavy .wind-particle {\n  width: 5px;\n  height: 5px;\n  animation-duration: 0.8s !important;\n}\n\n/* Cloud Effects */\n.cloud-effect {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n\n.cloud {\n  position: absolute;\n  font-size: 60px;\n  opacity: 0.7;\n  animation: cloudFloat linear infinite;\n}\n\n.cloud-1 {\n  top: 10%;\n  animation-duration: 20s;\n  animation-delay: 0s;\n}\n\n.cloud-2 {\n  top: 30%;\n  animation-duration: 25s;\n  animation-delay: -5s;\n}\n\n.cloud-3 {\n  top: 60%;\n  animation-duration: 30s;\n  animation-delay: -10s;\n}\n\n@keyframes cloudFloat {\n  0% {\n    transform: translateX(-200px);\n  }\n  100% {\n    transform: translateX(calc(100vw + 200px));\n  }\n}\n\n.cloud-effect.light .cloud {\n  opacity: 0.4;\n}\n\n.cloud-effect.heavy .cloud {\n  opacity: 0.9;\n  font-size: 80px;\n}\n\n/* Storm Effects */\n.storm-effect {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n\n.lightning-flash {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  background: rgba(255, 255, 255, 0.1);\n  animation: lightningFlash 3s infinite;\n}\n\n@keyframes lightningFlash {\n  0%, 90%, 100% {\n    opacity: 0;\n  }\n  5%, 10% {\n    opacity: 1;\n  }\n}\n\n.lightning-bolt {\n  position: absolute;\n  font-size: 40px;\n  color: #fdcb6e;\n  animation: lightningStrike 3s infinite;\n  text-shadow: 0 0 10px #fdcb6e;\n}\n\n@keyframes lightningStrike {\n  0%, 90%, 100% {\n    opacity: 0;\n    transform: scale(1);\n  }\n  5% {\n    opacity: 1;\n    transform: scale(1.2);\n  }\n  10% {\n    opacity: 0.5;\n    transform: scale(1);\n  }\n}\n\n/* Sunset Effects */\n.sunset-effect {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n\n.sun {\n  position: absolute;\n  top: 20%;\n  right: 10%;\n  font-size: 80px;\n  animation: sunGlow 4s ease-in-out infinite alternate;\n}\n\n@keyframes sunGlow {\n  to {\n    transform: scale(1.1);\n    filter: drop-shadow(0 0 20px rgba(253, 203, 110, 0.8));\n  }\n}\n\n.sunset-glow {\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  height: 40%;\n  background: radial-gradient(ellipse at bottom, rgba(253, 203, 110, 0.3) 0%, transparent 70%);\n  animation: glowPulse 3s ease-in-out infinite alternate;\n}\n\n@keyframes glowPulse {\n  to {\n    opacity: 0.7;\n  }\n}\n\n/* Night Effects */\n.night-effect {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n\n.moon {\n  position: absolute;\n  top: 15%;\n  right: 15%;\n  font-size: 60px;\n  animation: moonGlow 5s ease-in-out infinite alternate;\n}\n\n@keyframes moonGlow {\n  to {\n    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.5));\n  }\n}\n\n.star {\n  position: absolute;\n  font-size: 12px;\n  animation: starTwinkle 2s ease-in-out infinite alternate;\n}\n\n@keyframes starTwinkle {\n  0% {\n    opacity: 0.3;\n    transform: scale(0.8);\n  }\n  100% {\n    opacity: 1;\n    transform: scale(1.2);\n  }\n}\n\n/* Chat Customization */\n.weather-chat {\n  background: rgba(255, 255, 255, 0.1) !important;\n  backdrop-filter: blur(10px);\n  border: none !important;\n}\n\n.weather-chat .copilotKitInput {\n  background: rgba(255, 255, 255, 0.1) !important;\n  border: 1px solid rgba(255, 255, 255, 0.2) !important;\n  backdrop-filter: blur(5px);\n  color: white !important;\n}\n\n.weather-chat .copilotKitInput::placeholder {\n  color: rgba(255, 255, 255, 0.7) !important;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n  .weather-container .content-layer .flex {\n    flex-direction: column;\n  }\n  \n  .weather-container .content-layer .w-96 {\n    width: 100%;\n    height: 300px;\n  }\n  \n  .weather-display {\n    padding: 1rem;\n  }\n  \n  .weather-display h1 {\n    font-size: 2rem;\n  }\n  \n  .cloud {\n    font-size: 40px;\n  }\n  \n  .sun, .moon {\n    font-size: 50px;\n  }\n}\n\n/* Additional Weather Intensity Variations */\n.weather-container.light {\n  filter: brightness(1.1);\n}\n\n.weather-container.heavy {\n  filter: brightness(0.9) contrast(1.1);\n}\n\n/* Smooth transitions between weather states */\n.weather-container * {\n  transition: opacity 0.5s ease-in-out;\n}\n\n/* Performance optimizations */\n.weather-effects * {\n  will-change: transform;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .weather-effects * {\n    animation-duration: 0.1s !important;\n    animation-iteration-count: 1 !important;\n  }\n}\n",
+        "path": "style.css",
+        "language": "css"
+      },
+      {
+        "name": "README.mdx",
+        "content": "# 🌦️ Weather Animations - Dynamic UI Atmosphere\n\n## What This Demo Shows\n\nThis demo showcases **dynamic weather animations** that respond to chat content and conversation context:\n\n1. **Contextual Weather Changes**: The agent automatically detects weather mentions and mood in conversations\n2. **Real-time Visual Effects**: Smooth animated transitions between different weather states\n3. **Mood-based Atmosphere**: UI atmosphere changes based on emotional context\n4. **Interactive Weather Control**: Direct weather manipulation through chat commands\n5. **Immersive Experience**: Full-screen weather effects with backdrop-filtered UI elements\n\n## 🎮 How to Interact\n\n### Direct Weather Commands\nTry asking the agent:\n- **\"Make it rain!\"** - Triggers rain animation\n- **\"I want to see snow\"** - Activates snowfall effect  \n- **\"Create a storm\"** - Brings dramatic storm with lightning\n- **\"Show me a beautiful sunset\"** - Displays sunset atmosphere\n- **\"Make it a clear sunny day\"** - Switches to clear sky\n- **\"I love windy weather\"** - Activates wind particle effects\n- **\"It's getting cloudy\"** - Shows moving cloud formations\n- **\"Make it nighttime\"** - Switches to night mode with stars\n\n### Mood-based Atmospheric Changes\nThe agent can also detect emotional context:\n- **\"I'm feeling sad today\"** → Gentle rain\n- **\"I'm so excited!\"** → Energetic wind effects\n- **\"I need to relax\"** → Peaceful clouds\n- **\"This is dramatic!\"** → Storm effects\n- **\"I'm happy!\"** → Clear sunny weather\n- **\"Feeling mysterious\"** → Night atmosphere\n- **\"So peaceful and calm\"** → Sunset glow\n\n### Intensity Control\nSpecify intensity levels:\n- **\"Light rain please\"** → Gentle rain effect\n- **\"Heavy snowfall\"** → Intense snow animation\n- **\"Dramatic storm\"** → Full-intensity storm with lightning\n\n## ⚡ Available Weather Effects\n\n| Weather Type | Visual Effect | Intensity Levels |\n|--------------|---------------|-------------------|\n| **Clear** ☀️ | Bright gradient sky | Light, Medium, Heavy |\n| **Rain** 🌧️ | Animated raindrops | Light → Heavy downpour |\n| **Snow** ❄️ | Floating snowflakes | Light flurries → Heavy snowfall |\n| **Wind** 💨 | Moving particles | Gentle breeze → Strong gusts |\n| **Clouds** ☁️ | Drifting cloud formations | Light cover → Overcast |\n| **Storm** ⛈️ | Lightning + Rain | Light → Dramatic thunderstorm |\n| **Sunset** 🌅 | Warm color gradients | Soft glow → Vibrant colors |\n| **Night** 🌙 | Stars + Moon | Calm → Twinkling sky |\n\n## 🛠️ Technical Implementation\n\n### Agent Integration\n```tsx\n// Weather control action\nuseCopilotAction({\n  name: \"change_weather\",\n  description: \"Change weather based on conversation context\",\n  parameters: [\n    { name: \"weatherType\", type: \"string\" },\n    { name: \"intensity\", type: \"string\" },\n    { name: \"reason\", type: \"string\" }\n  ],\n  handler: ({ weatherType, intensity, reason }) => {\n    // Smooth transition to new weather state\n    setWeatherState({ type: weatherType, intensity });\n  }\n});\n```\n\n### Mood Detection\n```tsx\n// Automatic mood-based atmosphere changes\nuseCopilotAction({\n  name: \"detect_mood_weather\", \n  description: \"Auto-detect mood and change atmosphere\",\n  parameters: [{ name: \"mood\", type: \"string\" }],\n  handler: ({ mood }) => {\n    // Map moods to weather states\n    const weather = moodWeatherMap[mood];\n    setWeatherState(weather);\n  }\n});\n```\n\n### Animation System\n- **CSS Keyframe Animations**: Smooth, performant weather effects\n- **Dynamic Particle Systems**: Configurable rain, snow, and wind particles\n- **Layered Rendering**: Background gradients + particle effects + UI content\n- **Responsive Design**: Adapts to different screen sizes\n- **Performance Optimized**: Uses `will-change` and reduced motion support\n\n## 🎨 Weather Animation Details\n\n### Rain Effect\n- Animated droplets falling from top to bottom\n- Variable opacity and speed based on intensity\n- Realistic raindrop shapes and gradients\n\n### Snow Effect  \n- Rotating snowflake emojis with random trajectories\n- Different sizes and fall speeds\n- Gentle floating motion with wind drift\n\n### Wind Effect\n- Fast-moving particles across the screen\n- Horizontal movement with slight vertical variation\n- Speed increases with intensity\n\n### Storm Effect\n- Combined rain + lightning effects\n- Periodic lightning flashes illuminating the screen\n- Thunder bolt emojis with glow effects\n\n### Cloud Effect\n- Large emoji clouds drifting across the sky\n- Different heights and speeds\n- Opacity variation for depth\n\n### Sunset/Night Effects\n- Gradient background transitions\n- Glowing sun/moon with pulse animation\n- Twinkling stars with random timing\n\n## 🌟 Advanced Features\n\n### Smooth Transitions\n- **Fade Effects**: Smooth opacity transitions between weather states\n- **Blur Transitions**: Brief blur effect during weather changes\n- **Background Morphing**: Gradient backgrounds smoothly shift colors\n\n### Contextual Intelligence\n- **Keyword Detection**: Agent recognizes weather and mood keywords\n- **Emotional Analysis**: Maps emotions to appropriate atmospheric effects\n- **Conversation Context**: Considers full conversation context for weather changes\n\n### Visual Hierarchy\n- **Layered Design**: Weather effects don't interfere with chat functionality\n- **Backdrop Filters**: UI elements use glass-morphism effects\n- **Adaptive Contrast**: Text remains readable in all weather conditions\n\n## 💡 Extension Ideas\n\nThis weather system can be extended with:\n- **Seasonal Themes**: Spring, summer, autumn, winter variations\n- **Location-based Weather**: Real weather data integration\n- **Sound Effects**: Audio accompaniment for weather effects\n- **Time-based Changes**: Automatic day/night cycles\n- **Custom Weather**: User-created weather combinations\n- **Weather Persistence**: Remember user's preferred weather\n- **Interactive Elements**: Click-to-change weather hotspots\n\n## 🎯 Use Cases\n\n- **Mood Enhancement**: Create atmosphere matching conversation tone\n- **Storytelling**: Visual accompaniment for narrative content\n- **Meditation Apps**: Calming weather effects for relaxation\n- **Gaming Interfaces**: Dynamic environmental effects\n- **Presentation Tools**: Engaging visual backgrounds\n- **Educational Content**: Weather system demonstrations\n\nThe weather animations create an **immersive, responsive environment** that makes conversations more engaging and emotionally resonant!\n",
+        "path": "README.mdx",
+        "language": "markdown"
+      }
+    ],
+    "readmeContent": "# 🌦️ Weather Animations - Dynamic UI Atmosphere\n\n## What This Demo Shows\n\nThis demo showcases **dynamic weather animations** that respond to chat content and conversation context:\n\n1. **Contextual Weather Changes**: The agent automatically detects weather mentions and mood in conversations\n2. **Real-time Visual Effects**: Smooth animated transitions between different weather states\n3. **Mood-based Atmosphere**: UI atmosphere changes based on emotional context\n4. **Interactive Weather Control**: Direct weather manipulation through chat commands\n5. **Immersive Experience**: Full-screen weather effects with backdrop-filtered UI elements\n\n## 🎮 How to Interact\n\n### Direct Weather Commands\nTry asking the agent:\n- **\"Make it rain!\"** - Triggers rain animation\n- **\"I want to see snow\"** - Activates snowfall effect  \n- **\"Create a storm\"** - Brings dramatic storm with lightning\n- **\"Show me a beautiful sunset\"** - Displays sunset atmosphere\n- **\"Make it a clear sunny day\"** - Switches to clear sky\n- **\"I love windy weather\"** - Activates wind particle effects\n- **\"It's getting cloudy\"** - Shows moving cloud formations\n- **\"Make it nighttime\"** - Switches to night mode with stars\n\n### Mood-based Atmospheric Changes\nThe agent can also detect emotional context:\n- **\"I'm feeling sad today\"** → Gentle rain\n- **\"I'm so excited!\"** → Energetic wind effects\n- **\"I need to relax\"** → Peaceful clouds\n- **\"This is dramatic!\"** → Storm effects\n- **\"I'm happy!\"** → Clear sunny weather\n- **\"Feeling mysterious\"** → Night atmosphere\n- **\"So peaceful and calm\"** → Sunset glow\n\n### Intensity Control\nSpecify intensity levels:\n- **\"Light rain please\"** → Gentle rain effect\n- **\"Heavy snowfall\"** → Intense snow animation\n- **\"Dramatic storm\"** → Full-intensity storm with lightning\n\n## ⚡ Available Weather Effects\n\n| Weather Type | Visual Effect | Intensity Levels |\n|--------------|---------------|-------------------|\n| **Clear** ☀️ | Bright gradient sky | Light, Medium, Heavy |\n| **Rain** 🌧️ | Animated raindrops | Light → Heavy downpour |\n| **Snow** ❄️ | Floating snowflakes | Light flurries → Heavy snowfall |\n| **Wind** 💨 | Moving particles | Gentle breeze → Strong gusts |\n| **Clouds** ☁️ | Drifting cloud formations | Light cover → Overcast |\n| **Storm** ⛈️ | Lightning + Rain | Light → Dramatic thunderstorm |\n| **Sunset** 🌅 | Warm color gradients | Soft glow → Vibrant colors |\n| **Night** 🌙 | Stars + Moon | Calm → Twinkling sky |\n\n## 🛠️ Technical Implementation\n\n### Agent Integration\n```tsx\n// Weather control action\nuseCopilotAction({\n  name: \"change_weather\",\n  description: \"Change weather based on conversation context\",\n  parameters: [\n    { name: \"weatherType\", type: \"string\" },\n    { name: \"intensity\", type: \"string\" },\n    { name: \"reason\", type: \"string\" }\n  ],\n  handler: ({ weatherType, intensity, reason }) => {\n    // Smooth transition to new weather state\n    setWeatherState({ type: weatherType, intensity });\n  }\n});\n```\n\n### Mood Detection\n```tsx\n// Automatic mood-based atmosphere changes\nuseCopilotAction({\n  name: \"detect_mood_weather\", \n  description: \"Auto-detect mood and change atmosphere\",\n  parameters: [{ name: \"mood\", type: \"string\" }],\n  handler: ({ mood }) => {\n    // Map moods to weather states\n    const weather = moodWeatherMap[mood];\n    setWeatherState(weather);\n  }\n});\n```\n\n### Animation System\n- **CSS Keyframe Animations**: Smooth, performant weather effects\n- **Dynamic Particle Systems**: Configurable rain, snow, and wind particles\n- **Layered Rendering**: Background gradients + particle effects + UI content\n- **Responsive Design**: Adapts to different screen sizes\n- **Performance Optimized**: Uses `will-change` and reduced motion support\n\n## 🎨 Weather Animation Details\n\n### Rain Effect\n- Animated droplets falling from top to bottom\n- Variable opacity and speed based on intensity\n- Realistic raindrop shapes and gradients\n\n### Snow Effect  \n- Rotating snowflake emojis with random trajectories\n- Different sizes and fall speeds\n- Gentle floating motion with wind drift\n\n### Wind Effect\n- Fast-moving particles across the screen\n- Horizontal movement with slight vertical variation\n- Speed increases with intensity\n\n### Storm Effect\n- Combined rain + lightning effects\n- Periodic lightning flashes illuminating the screen\n- Thunder bolt emojis with glow effects\n\n### Cloud Effect\n- Large emoji clouds drifting across the sky\n- Different heights and speeds\n- Opacity variation for depth\n\n### Sunset/Night Effects\n- Gradient background transitions\n- Glowing sun/moon with pulse animation\n- Twinkling stars with random timing\n\n## 🌟 Advanced Features\n\n### Smooth Transitions\n- **Fade Effects**: Smooth opacity transitions between weather states\n- **Blur Transitions**: Brief blur effect during weather changes\n- **Background Morphing**: Gradient backgrounds smoothly shift colors\n\n### Contextual Intelligence\n- **Keyword Detection**: Agent recognizes weather and mood keywords\n- **Emotional Analysis**: Maps emotions to appropriate atmospheric effects\n- **Conversation Context**: Considers full conversation context for weather changes\n\n### Visual Hierarchy\n- **Layered Design**: Weather effects don't interfere with chat functionality\n- **Backdrop Filters**: UI elements use glass-morphism effects\n- **Adaptive Contrast**: Text remains readable in all weather conditions\n\n## 💡 Extension Ideas\n\nThis weather system can be extended with:\n- **Seasonal Themes**: Spring, summer, autumn, winter variations\n- **Location-based Weather**: Real weather data integration\n- **Sound Effects**: Audio accompaniment for weather effects\n- **Time-based Changes**: Automatic day/night cycles\n- **Custom Weather**: User-created weather combinations\n- **Weather Persistence**: Remember user's preferred weather\n- **Interactive Elements**: Click-to-change weather hotspots\n\n## 🎯 Use Cases\n\n- **Mood Enhancement**: Create atmosphere matching conversation tone\n- **Storytelling**: Visual accompaniment for narrative content\n- **Meditation Apps**: Calming weather effects for relaxation\n- **Gaming Interfaces**: Dynamic environmental effects\n- **Presentation Tools**: Engaging visual backgrounds\n- **Educational Content**: Weather system demonstrations\n\nThe weather animations create an **immersive, responsive environment** that makes conversations more engaging and emotionally resonant!\n"
   }
 }
\ No newline at end of file