← Back to catalog📄 Implementation guide
Advanced WebGL / Canvas

Ripple Shader

Creates water-like ripples from clicks, hover, or motion.

Interactive, premium, fluid

Professional
Casual
Exotic
Visual impact
Difficulty
Performance cost

Best use: Image galleries, hero sections

Halcyon

Halcyon Atlas · Vol. IV

The shoreline answers
every touch.

An immersive atlas of the world's quietest water. Drag across the scene to send ripples through it — then follow the calm to the place that pulls you in.

Click or drag the water — it ripples back
Cala Saraina, Sardinia41.20°N · 9.41°E

Technique: three.js fragment shader — damped concentric sine-rings spawned at pointer UVs refract the image texture (UV offset + specular glint)