Web Wave Designer

If you need realistic water effects on the web without reaching for WebGL, this is your skill. It teaches the proper use of SVG's feTurbulence (type turbulence, not fractalNoise) and feDisplacementMap to create everything from gentle pond ripples to choppy ocean swells. The source material is thorough about the baseFrequency parameter, explaining why you want two different values for horizontal waves versus circular ripples. You also get recipes for underwater refraction, shore foam, and caustic light patterns. It won't help with 3D fluid simulation or video effects, but for performant CSS and SVG wave animations that actually look like water, it covers the technical details well.

skills.sh installs: 119
GitHub stars: 113
last updated: Jun 3, 2026

View on GitHub

Install

$ npx -y skills add erichowens/some_claude_skills --skill web-wave-designer --agent claude-code

Installs into .claude/skills of the current project.

Files

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.