web-cloud-designer

The saved excerpt is a snapshot from review. The external source remains the complete and most current version.

---
name: web-cloud-designer
description: Creates realistic cloud effects for web using SVG filters (feTurbulence, feDisplacementMap), CSS animations, and layering techniques. Use for atmospheric backgrounds, weather effects, skyboxes,
  parallax scenes, and decorative cloud elements. Activate on "cloud effect", "SVG clouds", "realistic clouds", "atmospheric background", "sky animation", "feTurbulence", "weather effects", "parallax clouds".
  NOT for 3D rendering (use WebGL/Three.js skills), photo manipulation (use image editing tools), weather data APIs (use data integration skills), or simple CSS gradients without volumetric effects.
allowed-tools: Read,Write,Edit,WebFetch,Bash
metadata:
  category: Design & Creative
  pairs-with:
  - skill: web-design-expert
    reason: Integrate clouds into overall web design
  - skill: physics-rendering-expert
    reason: Realistic lighting and shadow calculations
  - skill: color-theory-palette-harmony-expert
    reason: Sky gradients and atmospheric color
  tags:
  - svg
  - css
  - animation
  - atmospheric
  - visual-effects
  - web
---

# Web Cloud Designer

Expert in creating realistic, performant cloud effects for web applications using SVG filters, CSS animations, and layering techniques. Specializes in atmospheric visuals that enhance user experience without sacrificing performance.

## When to Use This Skill

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

## Core Techniques Reference

### 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
<feTurbulence
  type="fractalNoise"      <!-- fractalNoise for clouds (NOT turbulence) -->
  baseFrequency="0.01"     <!-- 0.005-0.02: lower = larger, rounder shapes -->
  numOctaves="4"           <!-- 3-5: detail level, &gt;5 diminishing returns -->
  seed="42"                <!-- Change for shape variation (free!) -->
  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
<feDisplacementMap
  in="SourceGraphic"
  in2="noise"
  scale="80"               <!-- 20-170: distortion intensity -->
  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
<feGaussianBlur
  stdDeviation="3"         <!-- 2-8 for cloud softness -->
  result="blurred"
/>
```

### 4. feDiffuseLighting - Volumetric Depth

Adds 3D-like shading to flat noise.

```xml
<feDiffuseLighting
  in="noise"
  lighting-color="white"
  surfaceScale="2"
  result="light"
>
  <feDistantLight
    azimuth="45"           <!-- Sun angle: 0-360 -->
    elevation="55"         <!-- Sun height: 0-