web-wave-designer

これはレビュー時に保存された抜粋です。完全で最新の内容は外部ソースを確認してください。

---
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
metadata:
  category: Design & Creative
  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
  tags:
  - svg
  - css
  - animation
  - water
  - ocean
  - visual-effects
  - web
---

# Web Wave Designer

Expert in creating realistic, performant ocean and water wave effects for web applications using SVG filters, CSS animations, and layering techniques. Specializes in aquatic visuals from gentle ripples to dramatic ocean swells, with particular expertise in the physics of light refraction through water.

## When to Use This Skill

**Use for:**
- Ocean wave backgrounds and seascapes
- Underwater distortion/refraction effects
- Beach shore waves with foam
- Pond/pool ripple animations
- Liquid glass UI effects
- Water-themed loading states
- Parallax ocean layers with depth
- Stylized/cartoon water for games
- Reflection effects on water surfaces

**Do NOT use for:**
- 3D volumetric ocean rendering -> use **WebGL/Three.js/Ocean.js**
- Real-time fluid simulation -> use **canvas physics engines**
- Video effects -> use video editing software
- Simple blue gradients without motion
- Water droplet physics -> use particle systems

## Core Distinction: turbulence vs fractalNoise

**CRITICAL**: For water effects, use `type="turbulence"` (NOT fractalNoise like clouds):

| Type | Visual | Best For |
|------|--------|----------|
| `turbulence` | Continuous flow patterns, starts from transparent black | **Water, waves, liquid** |
| `fractalNoise` | Random cloudlike patches, opaque | Clouds, smoke, terrain |

```xml
<!-- WATER - use turbulence -->
<feTurbulence type="turbulence" baseFrequency="0.01 0.1" />

<!-- CLOUDS - use fractalNoise -->
<feTurbulence type="fractalNoise" baseFrequency="0.01" />
```

## SVG Filter Pipeline for Water

The fundamental water effect filter chain:

```
Source -> feTurbulence -> feDisplacementMap -> feComponentTransfer -> feComposite
            (waves)        (distortion)         (color/opacity)      (blend)
```

### 1. feTurbulence - Wave Pattern Generation

```xml
<feTurbulence
  type="turbulence"           <!-- MUST be turbulence for water -->
  baseFrequency="0.01 0.1"    <!-- TWO values: x-freq y-freq -->
  numOctaves="3"              <!-- 2-5: wave complexity -->
  seed="42"                   <!-- Variation (free performance) -->
  result="waves"
/>
```

**baseFrequency Explained (TWO Values):**

| X-Frequency | Y-Frequency | Result |
|-------------|-------------|--------|
| 0.01 | 0.1 | Long horizontal waves with vertical oscillation |
| 0.005 | 0.05 | Deep ocean swells |
| 0.02 | 0.15 | Choppy surface waves |
| 0.03 | 0.03 | Square ripples (pond) |

The ratio matters:
- **X much less than Y**: Stretched horizontal waves (ocean)
- **X == Y**: Circular ripples (pond, pool)
- **X much greater than Y**: Vertical striations (waterfall)

### 2. feDisplacementMap - Refraction Effect

Creates the bending/distortion that makes content behind water appear to ripple.

```xml
<feD