--- 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 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 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 result="blurred" /> ``` ### 4. feDiffuseLighting - Volumetric Depth Adds 3D-like shading to flat noise. ```xml elevation="55" /> ``` ## Cloud Type Recipes ### Cumulus (Puffy, Happy Clouds) ```svg ``` ### Cirrus (Wispy, High Altitude) ```svg ``` Key: Use anisotropic `baseFrequency` (two values) for stretched, directional wisps. ### Stratus (Flat Layers) ```svg ``` ### Cumulonimbus (Storm Clouds) ```svg ``` ### Stylized/Cartoon Clouds ```svg ``` ## Layering Strategy 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 | ## Animation Techniques ### 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 ``` **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 */ } ``` ## Complete Implementation Templates ### 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 ( <>

); }; // 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; } ``` ## Performance Optimization ### Critical Rules 1. **numOctaves 5 or fewer** - 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'); }; ``` ## Framework Integration ### 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 (

{/* SVG defs in portal to document head */} {/* Cloud layers */}

); } ``` ### 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%' }, }, }, }, }, }; ``` ## Debugging Tips ### 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 | ## Reference Sources - 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.*

web-cloud-designer

Install this skill

Comments