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

feTurbulence - The Foundation

Generates Perlin noise that forms cloud shapes.

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.

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).

result="blurred" />

feDiffuseLighting - Volumetric Depth

Adds 3D-like shading to flat noise.

<feDiffuseLighting in="noise" lighting-color="white" surfaceScale="2" result="light"

elevation="55" \ />

Cloud Type Recipes Cumulus (Puffy, Happy Clouds)

Cirrus (Wispy, High Altitude)

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

Stratus (Flat Layers)

Cumulonimbus (Storm Clouds)

Stylized/Cartoon Clouds

Layering Strategy

Create depth with multiple cloud layers:

.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) @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)

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

GSAP (Best Control) gsap.to("#cloud-filter feTurbulence", { attr: { baseFrequency: 0.015 }, duration: 10, ease: "sine.inOut", yoyo: true, repeat: -1 });

3D Parallax (Billboard Technique) .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

Template 2: Layered Parallax Clouds

Template 3: React Component 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 ( <>

url(#${filterId}) }} /> </> ); };

// Usage: //

Template 4: CSS-Only Box-Shadow Clouds

For simpler, more performant clouds without SVG filters:

.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 numOctaves <= 5 - Above 5 provides diminishing visual returns with exponential CPU cost Blur BEFORE displacement - 40% more efficient than blur after Avoid animating filter properties - Use CSS transforms instead Use seed for variation - Free performance vs. changing baseFrequency will-change: transform - Only on animated elements, remove when static 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 @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 // 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 // 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 /}

); }

Tailwind CSS // 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

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

安装