web-wave-designer

SKILL.md

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.

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

| turbulence | Continuous flow patterns, starts from transparent black | Water, waves, liquid | | fractalNoise | Random cloudlike patches, opaque | Clouds, smoke, terrain |

使用 SVG 滤镜（feTurbulence、feDisplacementMap）、CSS 动画和分层技术为 Web 创建逼真的海洋和水波效果。用于海洋背景、水下扭曲、海滩场景、波纹效果、液体玻璃和水主题 UI。激活“海浪”、“水效果”、“SVG 水”、“波纹动画”、“水下扭曲”、“液体玻璃”、“波浪动画”、“feTurbulence 水”、“海滩波浪”、“海泡沫”。不适用于 3D 海洋模拟（使用 WebGL/Three.js）、视频水效果（使用视频编辑）、基于物理的流体模拟（使用 canvas/WebGL）或没有波浪运动的简单渐变背景。 来源：erichowens/some_claude_skills。

查看原文