Bring the atmosphere of the outdoors to your website with Cloudy Sky. This high-performance WebGL component procedurally generates a realistic, animated sky with drifting clouds and a radiant sun. Unlike static images or heavy video loops, this shader renders infinite, non-repeating cloud formations directly on the GPU.
It is the perfect backdrop for weather apps, travel landing pages, meditation guides, or any interface needing a breath of fresh air. You have full control over the atmosphere: choose from beautiful built-in presets (Dawn, Day, Dusk) or dive into Custom Mode to define your own sky gradients and cloud colors. Adjust cloud density, speed, and sun intensity to create the perfect mood.
Functions (Key Features):
☁️ Procedural Clouds: Uses FBM noise to create organic, never-ending cloud shapes that drift across the screen.
☀️ Toggleable Sun: Features a radiant sun element that can be adjusted from bright (1.0) to completely hidden (0).
🎨 Time Presets: Instantly switch between Dawn (Pastel), Day (Blue), and Dusk (Orange/Purple) modes.
🛠️ Custom Colors: Override presets to create alien skies, monochromatic moods, or brand-specific gradients.
🚀 Performance: Lightweight WebGL implementation ensures 60fps animation without bogging down the browser.
How to Use:
Insert: Drag the Cloudy Sky component onto your canvas.
Sizing: Set Width and Height to "Fill" (100%) for a full-screen immersive background.
Mode: Select a Time of Day for instant results or enable Custom Colors.
Sun Control: Use the Sun Intensity slider. Set it to 0.8 for a bright sunny day, or 0 to turn the sun off (perfect for overcast days or backgrounds with text).
Wind: Adjust Cloud Speed to determine how fast the weather moves.
Bring the atmosphere of the outdoors to your website with Cloudy Sky. This high-performance WebGL component procedurally generates a realistic, animated sky with drifting clouds and a radiant sun. Unlike static images or heavy video loops, this shader renders infinite, non-repeating cloud formations directly on the GPU.
It is the perfect backdrop for weather apps, travel landing pages, meditation guides, or any interface needing a breath of fresh air. You have full control over the atmosphere: choose from beautiful built-in presets (Dawn, Day, Dusk) or dive into Custom Mode to define your own sky gradients and cloud colors. Adjust cloud density, speed, and sun intensity to create the perfect mood.
Functions (Key Features):
☁️ Procedural Clouds: Uses FBM noise to create organic, never-ending cloud shapes that drift across the screen.
☀️ Toggleable Sun: Features a radiant sun element that can be adjusted from bright (1.0) to completely hidden (0).
🎨 Time Presets: Instantly switch between Dawn (Pastel), Day (Blue), and Dusk (Orange/Purple) modes.
🛠️ Custom Colors: Override presets to create alien skies, monochromatic moods, or brand-specific gradients.
🚀 Performance: Lightweight WebGL implementation ensures 60fps animation without bogging down the browser.
How to Use:
Insert: Drag the Cloudy Sky component onto your canvas.
Sizing: Set Width and Height to "Fill" (100%) for a full-screen immersive background.
Mode: Select a Time of Day for instant results or enable Custom Colors.
Sun Control: Use the Sun Intensity slider. Set it to 0.8 for a bright sunny day, or 0 to turn the sun off (perfect for overcast days or backgrounds with text).
Wind: Adjust Cloud Speed to determine how fast the weather moves.
