---
title: "Cloudy Sky — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Sirrah Space · Buttons. Bring the atmosphere of the outdoors to your website with Cloudy Sky."
canonical: "https://framer.elliotli.dev/component/cloudy-sky"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Cloudy Sky

# Cloudy Sky

Animated sky & cloud background.

[View on Framer](https://framer.com/marketplace/components/cloudy-sky/?via=elliot-li)

![Cloudy Sky preview image 1](https://framer.elliotli.dev/og/component/cloudy-sky/d2a6c17f2025f3c3/1600x1200.jpg)

## Summary

Bring the atmosphere of the outdoors to your website with Cloudy Sky.

## Description

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:**

1.  **Insert:** Drag the **Cloudy Sky** component onto your canvas.
    
2.  **Sizing:** Set Width and Height to **"Fill" (100%)** for a full-screen immersive background.
    
3.  **Mode:** Select a **Time of Day** for instant results or enable **Custom Colors**.
    
4.  **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).
    
5.  **Wind:** Adjust **Cloud Speed** to determine how fast the weather moves.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #8072

## Details

- **Author**: Sirrah Space
- **Price**: $5.00
- **Published**: 2026-02-17
- **Updated**: 2026-07-26
- **Added**: 2026-02-16
- **Categories**: Buttons

## More like this

-   [Liquid Blob Button](/component/liquid-blob-button) — Oddframe · Free — Interactive Liquid Blob CTA Button
-   [Pixel Face Toggle](/component/pixel-face-toggle) — Zac Nielson · $9 — Dark mode switch with a pixel face
-   [Liquid Hover Media](/component/liquid-hover-media) — Bardia Madani · $5 — Fluid media distortion on hover
-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow