| license | Apache-2.0 |
| 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 |
| category | Design & Creative |
| tags | ["svg","css","animation","atmospheric","visual-effects","web"] |
| 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"}] |
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.
DECISION POINTS
Use Case → Cloud Type → Parameters
User Requirements
├─ Simple background decoration
│ └─ Cumulus clouds
│ ├─ baseFrequency: 0.008
│ ├─ numOctaves: 3-4
│ └─ scale: 40-60
│
├─ Weather/dramatic effect
│ └─ Storm clouds
│ ├─ baseFrequency: 0.006
│ ├─ numOctaves: 4-5
│ └─ scale: 120-170
│
├─ Hero section atmosphere
│ └─ Layered parallax
│ ├─ 3 layers minimum
│ ├─ Back: opacity 0.3, speed 120s
│ ├─ Mid: opacity 0.6, speed 80s
│ └─ Front: opacity 0.9, speed 50s
│
└─ Performance constraints
├─ Mobile → CSS box-shadow clouds
├─ Desktop normal → SVG filters, numOctaves ≤ 4
└─ Hero only → SVG filters, numOctaves ≤ 5
Animation Strategy Decision Tree
Performance Budget
├─ 60fps required (mobile/battery)
│ ├─ Static clouds → No animation
│ └─ Movement needed → CSS transform only
│
├─ 45-60fps acceptable
│ ├─ Simple drift → translateX animation
│ └─ Morphing shapes → border-radius keyframes
│
└─ 30fps acceptable (hero sections)
└─ Dynamic effects → Animate filter properties sparingly
Filter Parameter Ranges by Cloud Type
| Cloud Type | baseFrequency | numOctaves | scale | blur stdDev | Use When |
|---|
| Cumulus | 0.008-0.012 | 3-4 | 40-80 | 3-5 | Happy, puffy background |
| Cirrus | 0.015-0.025 | 2-3 | 20-40 | 1-3 | Wispy, high altitude |
| Stratus | 0.005-0.010 | 3-4 | 30-60 | 4-8 | Flat, overcast layer |
| Storm | 0.004-0.008 | 4-5 | 100-170 | 2-4 | Dramatic, billowing |
FAILURE MODES
Jagged Edge Syndrome
Symptoms: Clouds look pixelated, harsh edges, unnatural appearance
Diagnosis: Missing or insufficient Gaussian blur before displacement
Fix: Add <feGaussianBlur stdDeviation="3-5"/> before <feDisplacementMap/>
Detection Rule: If cloud edges look crisp/digital rather than soft/organic
Performance Death Spiral
