shaders-cursor-ripples

Shaders Cursor Ripples

Core Contract

1. Preserve the existing page, content, and semantic image.
2. Install shaders and import from the active framework subpath.
3. Render the source image through one Shader canvas.
4. Place CursorRipples after ImageTexture so it post-processes that image.
5. Keep toneMapping="aces" on the root.
6. Let Shaders track the cursor. Remove custom spotlight coordinates, radial masks, duplicated reveal images, and pointer animation loops.
7. Keep one real image beneath the canvas as the accessible loading and WebGPU fallback.
8. Disable the shader for reduced motion and unsupported WebGPU.
9. Lazy-load the shader code so the library does not inflate the initial page bundle.

When the user asks for only the shader effect, do not copy a reference's ribbon, blob, glow, typography, layout, copy, colors, or identity. Do not substitute the Shaders Water component: CursorRipples is the interactive image-displacement effect.

Inspect Before Editing