Agent skill · design visual · erichowens
web-wave-designer
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,
Why this skill is useful
Provides specific SVG filter commands and techniques for creating realistic water effects that the AI wouldn't reliably generate on its own.
What it needs
About 9k tokens when loaded. Last updated 2026-07-14. 180 stars on the source repository.
What this skill does
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 SVG Filter Pipeline for Water The fundamental water effect filter chain: 1. feTurbulence - Wave Pattern Generation 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. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills erichowens/web-wave-designer