---
title: "CleanSky"
canonical_url: "https://framerhub.io/components/clean-sky"
last_updated: "2026-06-15T14:46:28.980Z"
---

## Dynamic Procedural Sky Backgrounds

Create stunning animated sky effects with organic cloud movement. CleanSky uses advanced domain warping techniques to generate beautiful, ever-changing cloudscapes.

## Features

**Procedural Generation**
No static images needed—clouds are generated in real-time using noise functions and domain warping for truly organic movement.

**Three-Color System**
Mix deep, mid, and highlight colors to create any sky mood—from peaceful blue skies to dramatic sunset atmospheres.

**Auto Quality Detection**
Automatically adapts to device capabilities for smooth performance on any device, from mobile to desktop.

**Fully Customizable**
Control cloud density, warp strength, flow speed, and contrast to achieve your perfect sky effect.

## Use Cases

**Hero Backgrounds** — Create immersive landing pages with animated sky backgrounds that captivate visitors.

**Mood Setting** — Set the atmosphere for weather apps, meditation apps, or any project needing dynamic ambiance.

**Creative Portfolios** — Add visual interest with subtle, ever-changing backgrounds that don't distract from content.

![CleanSky Preview](/framerhub/img/components/control/clean-sky.jpg)

## How to Use

### Installation

1. Log in to your account at framerhub.io
2. Navigate to framerhub.io/dashboard
3. Find CleanSky in your Recent Purchases
4. Click the "Copy" button
5. Open your Framer project
6. Paste the component anywhere on your canvas (Cmd/Ctrl + V)

### Customization

**Atmosphere Settings**

- Deep Color: Base sky color
- Mid Color: Secondary cloud color
- Highlight: Accent color for cloud edges
- Contrast: Color intensity control

**Simulation Settings**

- Flow Speed: How fast clouds move (0-2)
- Cloud Density: Coverage amount (0.1-5.0)
- Warp Strength: Organic distortion intensity (0.1-10.0)

### Quick Tips

**Color Harmony** — Use colors in the same temperature family for natural skies, or contrasting colors for dramatic effect.

**Subtle Motion** — Lower flow speeds (0.1-0.3) create relaxing backgrounds perfect for content sites.

**Performance** — Use Auto quality mode; it automatically detects device capabilities for optimal performance.

**Layering** — Works great as a background layer with content placed on top.

## License

**Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client.

## Refund Policy

Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns!

## Why Designers Love This

CleanSky brings your hero sections to life with hypnotic, organic cloud movement. No static images, no video files—just smooth, procedural animation that works on any device.

---