Web Wave Designer

What it does

The Web Wave Designer skill enables AI agents to generate responsive, styled CSS code snippets for creating realistic water and ocean wave effects on web applications. It leverages SVG filters, CSS animations, and layering techniques to produce visuals ranging from gentle ripples to dramatic ocean swells, with a focus on accurately simulating light refraction through water. This allows for the creation of dynamic aquatic backgrounds and UI elements.

When to use it

• Creating ocean wave backgrounds or seascapes for websites.
• Generating underwater distortion/refraction effects.
• Animating beach shore waves with foam or pond/pool ripple animations.
• Designing liquid glass UI effects or water-themed loading states.
• Developing parallax ocean layers to create a sense of depth.

Key capabilities

• Generates CSS code snippets for SVG filters and CSS animations.
• Specializes in creating realistic water wave effects, including light refraction.
• Utilizes feTurbulence (for water) versus fractalNoise (for clouds/smoke).
• Allows control over wave complexity (numOctaves) and variation (seed).
• Provides options for adjusting horizontal and vertical frequency of waves using baseFrequency.
• Creates refraction effects using feDisplacementMap and controls distortion scale.

Example prompts

• "Create a CSS code snippet for an ocean wave background with long, horizontal waves."
• "Generate SVG filter code to simulate underwater distortion for my website's header."
• "Give me the CSS for a pond ripple animation effect."

Tips & gotchas

• Crucially, use type="turbulence" within your <feTurbulence> element for water effects; avoid using fractalNoise.
• The baseFrequency attribute in <feTurbulence> uses two values (x-frequency, y-frequency) to control wave direction and appearance. Experiment with these ratios!
• This skill is not intended for 3D volumetric ocean rendering or real-time fluid simulation; use WebGL/Three.js or canvas physics engines instead.