web-cloud-designer

Use for:

• Realistic cloud backgrounds and skyboxes
• Weather-themed UI elements and transitions
• Parallax cloud scenes with depth
• Animated atmospheric effects
• Stylized/cartoon cloud designs
• Hero section backgrounds with sky themes
• Loading states with cloud animations
• Game-style cloud layers

Do NOT use for:

• 3D volumetric cloud rendering -> use WebGL/Three.js
• Photo manipulation of real clouds -> use image editing
• Weather data integration -> use weather API skills
• Simple gradient skies without cloud shapes
• Video backgrounds with clouds

SVG Filter Pipeline

The fundamental cloud effect uses this filter chain:

```

Source -> feTurbulence -> feDisplacementMap -> feGaussianBlur -> feDiffuseLighting -> Composite

```

1. feTurbulence - The Foundation

Generates Perlin noise that forms cloud shapes.

```xml

type="fractalNoise"

baseFrequency="0.01"

numOctaves="4"

seed="42"

result="noise"

/>

```

| Parameter | Range | Effect |

|-----------|-------|--------|

| baseFrequency | 0.005-0.02 | Scale of cloud shapes. 0.005 = giant cumulus, 0.02 = small wisps |

| numOctaves | 3-5 | Detail layers. 3 = smooth, 5 = detailed. Above 5 = CPU waste |

| seed | 0-999999 | Shape variation. Change this, NOT baseFrequency for variety |

| type | fractalNoise | ALWAYS use fractalNoise for clouds (turbulence = fire/water) |

2. feDisplacementMap - Shape Distortion

Creates organic, billowing cloud shapes from the noise.

```xml

in="SourceGraphic"

in2="noise"

scale="80"

xChannelSelector="R"

yChannelSelector="G"

/>

```

| Scale Value | Effect |

|-------------|--------|

| 20-50 | Subtle, wispy cirrus |

| 50-100 | Balanced cumulus |

| 100-170 | Dramatic, billowing storm clouds |

3. feGaussianBlur - Edge Softening

CRITICAL: Apply BEFORE displacement for performance (per CSS-Tricks).

```xml

stdDeviation="3"

result="blurred"

/>

```

4. feDiffuseLighting - Volumetric Depth

Adds 3D-like shading to flat noise.

```xml

in="noise"

lighting-color="white"

surfaceScale="2"

result="light"

>

azimuth="45"

elevation="55"

/>

```

Cumulus (Puffy, Happy Clouds)

```svg

numOctaves="4" seed="5" result="noise"/>

fill="white" filter="url(#cumulus)"/>

```

Cirrus (Wispy, High Altitude)

```svg

numOctaves="3" seed="12" result="noise"/>

```

Key: Use anisotropic baseFrequency (two values) for stretched, directional wisps.

Stratus (Flat Layers)

```svg

numOctaves="3" seed="8" result="noise"/>

```

Cumulonimbus (Storm Clouds)

```svg

numOctaves="5" seed="99" result="noise"/>

```

Stylized/Cartoon Clouds

```svg

numOctaves="2" seed="3" result="noise"/>

```

Create depth with multiple cloud layers:

```html

```

```css

.clouds-back {

filter: url(#cloud-soft);

opacity: 0.3;

animation: drift 120s linear infinite;

transform: scale(1.5);

}

.clouds-mid {

filter: url(#cloud-medium);

opacity: 0.6;

animation: drift 80s linear infinite;

transform: scale(1);

}

.clouds-front {

filter: url(#cloud-sharp);

opacity: 0.9;

animation: drift 50s linear infinite;

transform: scale(0.8);

}

```

Layer Parameter Guide

| Layer | Opacity | Speed | Scale | blur stdDeviation |

|-------|---------|-------|-------|-------------------|

| Back (distant) | 0.2-0.4 | 90-120s | 1.3-1.5x | 5-8 |

| Mid | 0.5-0.7 | 50-80s | 1.0x | 3-5 |

| Front (close) | 0.8-1.0 | 30-50s | 0.7-0.9x | 1-3 |

CSS Keyframes (Recommended - Best Performance)

```css

@keyframes drift {

from { transform: translateX(-100%); }

to { transform: translateX(100%); }

}

@keyframes morph {

0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }

50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }

}

.cloud {

animation:

drift 60s linear infinite,

morph 15s ease-in-out infinite;

}

```

SVG Animate (Use Sparingly - CPU Intensive)

```svg

attributeName="baseFrequency"

values="0.008;0.012;0.008"

dur="20s"

repeatCount="indefinite"

/>

```

WARNING: Animating filter properties recalculates the entire filter. Use only for hero effects, not background loops.

GSAP (Best Control)

```javascript

gsap.to("#cloud-filter feTurbulence", {

attr: { baseFrequency: 0.015 },

duration: 10,

ease: "sine.inOut",

yoyo: true,

repeat: -1

});

```

3D Parallax (Billboard Technique)

```css

.cloud-layer {

transform-style: preserve-3d;

perspective: 1000px;

}

.cloud {

transform: translateZ(-100px) scale(1.1);

/ Further clouds appear smaller, move slower on scroll /

}

```

Template 1: Simple Sky Background

```html

```

Template 2: Layered Parallax Clouds

```html

```

Template 3: React Component

```tsx

import React, { useMemo } from 'react';

interface CloudProps {

type?: 'cumulus' | 'cirrus' | 'stratus' | 'storm';

seed?: number;

className?: string;

}

const CLOUD_CONFIGS = {

cumulus: { baseFrequency: '0.008', numOctaves: 4, scale: 60, blur: 4 },

cirrus: { baseFrequency: '0.02 0.005', numOctaves: 3, scale: 25, blur: 2 },

stratus: { baseFrequency: '0.015 0.003', numOctaves: 3, scale: 30, blur: 6 },

storm: { baseFrequency: '0.006', numOctaves: 5, scale: 150, blur: 3 },

};

export const Cloud: React.FC = ({

type = 'cumulus',

seed = Math.floor(Math.random() * 1000),

className

}) => {

const filterId = useMemo(() => cloud-${type}-${seed}, [type, seed]);

const config = CLOUD_CONFIGS[type];

return (

<>

type="fractalNoise"

baseFrequency={config.baseFrequency}

numOctaves={config.numOctaves}

seed={seed}

result="noise"

/>

className={className}

style={{ filter: url(#${filterId}) }}

/>

);

};

// Usage:

//

```

Template 4: CSS-Only Box-Shadow Clouds

For simpler, more performant clouds without SVG filters:

```css

.cloud-simple {

width: 200px;

height: 60px;

background: white;

border-radius: 100px;

position: relative;

box-shadow:

/ Main body shadows for volume /

inset -10px -10px 30px rgba(0,0,0,0.05),

inset 10px 10px 30px rgba(255,255,255,0.8),

/ Outer glow /

0 10px 40px rgba(0,0,0,0.1);

}

.cloud-simple::before,

.cloud-simple::after {

content: '';

position: absolute;

background: white;

border-radius: 50%;

}

.cloud-simple::before {

width: 100px;

height: 100px;

top: -50px;

left: 30px;

}

.cloud-simple::after {

width: 70px;

height: 70px;

top: -30px;

left: 100px;

}

```

Critical Rules

1. numOctaves <= 5 - Above 5 provides diminishing visual returns with exponential CPU cost
2. Blur BEFORE displacement - 40% more efficient than blur after
3. Avoid animating filter properties - Use CSS transforms instead
4. Use seed for variation - Free performance vs. changing baseFrequency
5. will-change: transform - Only on animated elements, remove when static
6. Batch filter definitions - One block, reference by ID

Performance Tiers

| Tier | Technique | FPS Target | Use Case |

|------|-----------|------------|----------|

| Ultra | CSS box-shadow only | 60fps | Mobile, low-end |

| High | SVG filter, no animation | 60fps | Static backgrounds |

| Medium | SVG filter + CSS transform animation | 45-60fps | Subtle movement |

| Low | SVG filter + | 30fps | Hero sections only |

Mobile Considerations

```css

@media (prefers-reduced-motion: reduce) {

.cloud {

animation: none;

}

}

@media (max-width: 768px) {

.cloud-layer {

/ Reduce to 2 layers on mobile /

}

.cloud {

filter: url(#cloudSimple); / Fewer octaves /

}

}

```

Performance Detection

```javascript

// Detect if device can handle filter animations

const canHandleFilters = () => {

const canvas = document.createElement('canvas');

const gl = canvas.getContext('webgl');

if (!gl) return false;

const debugInfo = gl.getExtension('WEBGL_debug_renderer_info');

const renderer = debugInfo

? gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL)

: '';

// Reduce effects on integrated graphics

return !renderer.includes('Intel');

};

```

Next.js / React

```tsx

// components/CloudBackground.tsx

'use client';

import { useEffect, useState } from 'react';

export function CloudBackground() {

const [reducedMotion, setReducedMotion] = useState(false);

useEffect(() => {

const mq = window.matchMedia('(prefers-reduced-motion: reduce)');

setReducedMotion(mq.matches);

mq.addEventListener('change', (e) => setReducedMotion(e.matches));

}, []);

return (

);

}

```

Vue 3

```vue

```

Tailwind CSS

```javascript

// tailwind.config.js

module.exports = {

theme: {

extend: {

animation: {

'cloud-drift': 'drift 80s linear infinite',

'cloud-morph': 'morph 15s ease-in-out infinite',

},

keyframes: {

drift: {

from: { transform: 'translateX(-100%)' },

to: { transform: 'translateX(100vw)' },

},

morph: {

'0%, 100%': { borderRadius: '60% 40% 30% 70% / 60% 30% 70% 40%' },

'50%': { borderRadius: '30% 60% 70% 40% / 50% 60% 30% 60%' },

},

},

},

},

};

```

Visualize Filter Steps

```xml

```

Common Issues

| Problem | Cause | Solution |

|---------|-------|----------|

| Clouds cut off | Filter region too small | Add x="-50%" y="-50%" width="200%" height="200%" |

| Jagged edges | Missing blur | Add feGaussianBlur before displacement |

| No variation | Same seed | Use different seed values |

| Performance issues | Too many octaves | Reduce numOctaves to 3-4 |

| Animation stuttering | Animating filter attrs | Use CSS transform animations instead |

• CSS-Tricks: "Drawing Realistic Clouds with SVG and CSS"
• LogRocket: "Animated Cloud Generator with SVG CSS"
• Codrops: "SVG Filter Effects with feTurbulence"
• Click to Release: "CSS 3D Clouds" (billboard technique)
• Nephele Cloud Generator tool
• MDN: SVG Filter Primitives documentation

---

Clouds are nature's way of reminding us that even the sky has texture.