web-wave-designer

license	Apache-2.0
name	web-wave-designer
description	Creates realistic ocean and water wave effects for web using SVG filters (feTurbulence, feDisplacementMap), CSS animations, and layering techniques. Use for ocean backgrounds, underwater distortion, beach scenes, ripple effects, liquid glass, and water-themed UI. Activate on "ocean wave", "water effect", "SVG water", "ripple animation", "underwater distortion", "liquid glass", "wave animation", "feTurbulence water", "beach waves", "sea foam". NOT for 3D ocean simulation (use WebGL/Three.js), video water effects (use video editing), physics-based fluid simulation (use canvas/WebGL), or simple gradient backgrounds without wave motion.
allowed-tools	Read,Write,Edit,WebFetch,Bash
category	Design & Creative
tags	["svg","css","animation","water","ocean","visual-effects","web"]
pairs-with	[{"skill":"web-cloud-designer","reason":"Complete atmospheric scenes with sky and water"},{"skill":"physics-rendering-expert","reason":"Realistic light refraction and caustics"},{"skill":"color-theory-palette-harmony-expert","reason":"Ocean palettes and depth gradients"},{"skill":"web-design-expert","reason":"Integrate water effects into overall web design"}]

Web Wave Designer

Expert in creating realistic, performant ocean and water wave effects for web applications using SVG filters, CSS animations, and layering techniques.

Decision Points

1. Effect Type Selection

IF request mentions "background ocean", "seascape", "horizon"
  → Use multi-layer ocean with 3-4 wave layers, parallax movement
  → baseFrequency: [0.005, 0.05] to [0.01, 0.1] across layers
  → Scale: 15-25, Animation: 35-90s drift speeds

ELSE IF request mentions "looking through water", "underwater", "aquarium"
  → Use displacement-only filter on content
  → baseFrequency: [0.015, 0.08], Scale: 18-22
  → Add blue tint: feColorMatrix with boosted blue channel

ELSE IF request mentions "ripples", "pond", "pool"
  → Use equal baseFrequency values for circular patterns
  → baseFrequency: [0.02, 0.02], Scale: 8-15
  → Lower octaves (2-3) for cleaner shapes

ELSE IF request mentions "glass", "modern UI", "subtle"
  → Use low-scale displacement with blur
  → baseFrequency: [0.01, 0.05], Scale: 5-10
  → Add feGaussianBlur stdDeviation="0.5-1"

ELSE IF request mentions "beach", "shore", "foam"
  → Use high Y-frequency for breaking wave motion
  → baseFrequency: [0.008, 0.12], Add foam layer
  → Include fractalNoise for foam texture

2. Animation Strategy Selection

IF performance is critical OR mobile target
  → Use CSS transform animations only
  → Move wave layers, not filter parameters
  → will-change: transform on animated elements

ELSE IF smooth parameter changes needed
  → Use requestAnimationFrame for baseFrequency
  → Limit to 1-2 parameters changing simultaneously
  → Include performance monitoring

ELSE IF simple declarative animation acceptable
  → Use SVG animate on seed attribute
  → Avoid baseFrequency animation (expensive)
  → Use for background effects only

3. Layer Composition Strategy

IF simple single effect
  → One SVG filter applied directly
  → Single feTurbulence → feDisplacementMap chain

ELSE IF depth/realism needed
  → 3-layer system: back (slow), mid, front (fast)
  → Different opacity: 0.3, 0.5, 0.7
  → Staggered animation speeds: 80s, 55s, 35s

ELSE IF includes foam/whitecaps
  → Add 4th layer using fractalNoise for foam
  → High baseFrequency [0.02-0.03]
  → White/transparent gradient, screen blend mode

4. Color Treatment Decision

IF realistic ocean
  → Use linear gradient: deep blue (#0c4a6e) to surface (#0ea5e9)
  → Apply feComponentTransfer to boost blue channel

ELSE IF stylized/cartoon
  → Use flat colors, no gradients
  → Lower numOctaves (1-2) for bold shapes
  → High contrast, saturated palette

ELSE IF underwater tint needed
  → Apply feColorMatrix to entire effect
  → Reduce red (0.85), boost blue (1.1)
  → Add slight green tint for depth

5. Performance Optimization Decision

IF >768px viewport AND GPU available
  → Full multi-layer setup with all effects
  → numOctaves: 3-4, all animation types

ELSE IF mobile OR integrated graphics detected
  → Reduce to 2 layers maximum
  → numOctaves: 2-3, CSS-only animation
  → Add prefers-reduced-motion query

ELSE IF critical performance path
  → CSS gradient waves only, no SVG filters
  → Use radial gradients with transform animation
  → Fallback for low-end devices