What problem does it solve?
Replacing fragile custom spotlight or flashlight reveal effects with a maintainable cursor-following fluid distortion is hard: manual pointer tracking, radial masks, and duplicated images cause coordinate drift and accessibility issues. This Skill implements the Shaders library's CursorRipples effect over an existing image while preserving layout, brand, and fallbacks.
Core Features & Use Cases
- WebGPU Ripple Composition: Renders an existing image through a single Shader canvas with ImageTexture and CursorRipples, with correct component ordering and ACES tone mapping.
- Safe Fallback Pattern: Keeps a semantic image beneath the canvas, lazy-loads the shader module, and disables the effect for reduced motion or missing WebGPU support.
- Legacy Cleanup: Removes old reveal code such as radial masks, duplicated images, and manual requestAnimationFrame pointer loops.
- Use Case: A hero section on a landing page uses a drifting CSS spotlight reveal; you replace it with a water-ripple mouse effect that follows the cursor over the same image without changing copy, colors, or layout.
Quick Start
Use the shaders-cursor-ripples skill to add a cursor-following WebGPU water ripple effect to the hero image on this page while keeping the existing layout and fallback image.
