web-cloud-designer

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