---
title: "CleanSky — Framer component · Best of Framer"
description: "$9.00 · Framer component · by FramerHub.io  · Effects. Sky Clouds Shader WebGL Animated"
canonical: "https://framer.elliotli.dev/component/cleansky"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/CleanSky

# CleanSky

Sky Clouds Shader WebGL Animated

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

![CleanSky preview image 1](https://framer.elliotli.dev/og/component/cleansky/b73b382a87caf82d/1600x1200.jpg)

## Summary

Sky Clouds Shader WebGL Animated

## Description

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-6yj5jwhd-nt0W8w26OdShDysNPs28rSOquQJkI4)](https://framerhub.io/components?utm_source=framer_marketplace&utm_medium=framer_marketplace_components&utm_content=CleanSky)

### Overview

Procedural sky/cloud shader with domain warping and customizable colors. Creates dynamic, animated sky backgrounds with organic cloud movement.

### 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.

### Properties

-   **Deep Color**: Base sky color
    
-   **Mid Color**: Secondary cloud color
    
-   **Highlight**: Accent highlights
    
-   **Contrast**: Color intensity (0.5-3.0)
    
-   **Flow Speed**: Animation speed (0-2)
    
-   **Cloud Density**: Cloud coverage density (0.1-5.0)
    
-   **Warp Strength**: Organic movement intensity (0.1-10.0)
    
-   **Quality**: Auto, Performance, Balanced, or Quality
    

### 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)
    

## 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!

### Version

1.0.0

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

-   All · #9390

## Details

- **Author**: FramerHub.io
- **Price**: $9.00
- **Published**: 2026-03-25
- **Updated**: 2026-04-07
- **Added**: 2026-01-17
- **Categories**: Effects

## More like this

-   [Mist](/component/mist) — Atypikal Agency · Free — Drifting mist over any photo
-   [Waypoint Road](/component/waypoint-road) — Litchi Solutions · $10 — A road that draws itself on scroll
-   [Badge Hider](/component/badge-hider) — valorsic studio · Free — Made in Framer Badge Hider
-   [Blob Tracker](/component/blob-tracker) — Shubhang Chouhan · $10 — Motion tracking with lens boxes