Skip to content
Get packs

Shaders Cursor Ripples

Adds a cursor-following water-ripple distortion over an existing image using the Shaders WebGPU library.

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
4 files

What it does

When installed, the agent knows how to add an interactive water-ripple effect to an image on a web page: the picture bends and ripples where the mouse moves, using the Shaders library and WebGPU (a modern browser graphics API). It is told to keep the existing page, copy, brand and layout intact, to keep a normal static image as a fallback for browsers without WebGPU or users who prefer reduced motion, and to remove older spotlight or flashlight hover effects it replaces.

Great for

  • Front-end developers adding a hover effect to a hero image or gallery
  • Designers or teams replacing a CSS spotlight or flashlight reveal with a shader-based ripple
  • Anyone who wants to borrow only the interaction from a Shaders.com reference without copying its artwork

Skip it if

  • Projects that cannot depend on WebGPU or a client-side JavaScript library; the effect is decorative and degrades to a static image, so essential content must not rely on it
  • Commercial releases without first checking the current Shaders license terms, which the skill itself says to verify

Try asking

  • “Add a cursor ripple effect over the hero image on my landing page, keeping the current copy and layout.”
  • “Replace the flashlight reveal on our gallery panel with the Shaders CursorRipples effect.”
  • “Install the shaders package and set up a lazy-loaded React component with a WebGPU and reduced-motion fallback.”
Step-by-step guide: how to use Shaders Cursor RipplesInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 4 original files, the MIT licence and an attribution note.

    shaders-cursor-ripples.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip shaders-cursor-ripples.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip shaders-cursor-ripples.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give the agent the actual image URL and the media wrapper's selector so it can follow the inspect-before-editing steps.
  • Ask it to verify in a real browser, including the fallback with WebGPU disabled and with reduced motion on.
  • Review the installed shaders version and license before shipping to production.

What's inside

  • agents/openai.yaml
  • assets/react/cursor-ripple-media.css
  • REFERENCES.md
  • SKILL.md

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.