Shaders Cursor Ripples

What it does

When your agent uses it

• Media panel needs a water-ripple mouse effect
• Replacing a drifting CSS spotlight
• Flashlight reveal
• A prompt says to borrow only the shader interaction from a Shaders.com reference while preserving the current brand

Example prompts

• “/shaders-cursor-ripples”

Requirements

• Node.js

Workflow steps

9 steps, taken from the first numbered list in SKILL.md.

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

What it can do on your machine

Read from SKILL.md and the folder at commit 645553c. It shows what the files ask for, not the result of running them.

• Tool permissions

  Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

  From allowed-tools in the SKILL.md frontmatter.

• Runs code

  Shell commands in SKILL.md call:

  • npm
  • git

  From the folder's file list and the shell code blocks in SKILL.md.

• Network

  No URLs in SKILL.md. Its commands use npm and git, which can reach the network depending on how they are called.

  From URLs in SKILL.md, links to its own repository left out.

• Credentials

  Names no API keys, tokens, secrets or passwords.

  From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Shaders Cursor Ripples loads about 2.1k tokens when it runs. Until then it costs about 112 tokens; SKILL.md has 895 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~112

When it runs · the whole SKILL.md, loaded when a task matches

~2.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from boraoztunc/skills at commit 645553c, republished under its Apache-2.0 licence (© boraoztunc). 895 words, ~2,061 tokens.

name

shaders-cursor-ripples

description

Add cursor-following fluid WebGPU distortion over an existing image with the Shaders library's ImageTexture and CursorRipples components. Use when a hero, gallery, or media panel needs a water-ripple mouse effect; when replacing a drifting CSS spotlight or flashlight reveal; or when a prompt says to borrow only the shader interaction from a Shaders.com reference while preserving the current brand, image, copy, and layout.

npm install shaders

<Shader toneMapping="aces">
  <ImageTexture url={imageUrl} objectFit="cover" />
  <CursorRipples decay={7.3} radius={0.6} />
</Shader>

const CursorRippleShader = lazy(() => import("./cursor-ripple-shader"));

const [shaderEnabled, setShaderEnabled] = useState(false);
const [shaderReady, setShaderReady] = useState(false);

useEffect(() => {
  const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)");

  const sync = () => {
    const enabled = "gpu" in navigator && !reduceMotion.matches;
    setShaderEnabled(enabled);
    if (!enabled) setShaderReady(false);
  };

  sync();
  reduceMotion.addEventListener("change", sync);
  return () => reduceMotion.removeEventListener("change", sync);
}, []);

<figure className="cursor-ripple-media">
  <img
    className="cursor-ripple-media__fallback"
    src={imageUrl}
    alt={meaningfulAlt}
    width={width}
    height={height}
  />

  {shaderEnabled ? (
    <Suspense fallback={null}>
      <CursorRippleShader
        imageUrl={imageUrl}
        ready={shaderReady}
        onReady={() => setShaderReady(true)}
      />
    </Suspense>
  ) : null}
</figure>

© boraoztunc, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file in shaders-cursor-ripples of boraoztunc/skills.

• SKILL.md
• REFERENCES.md

Open the folder on GitHubat commit 645553c

Used in 2 other repositories

We found 2 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 2 other GitHub owners. This page covers the copy in boraoztunc/skills, which our catalogue first saw on October 7, 2026.

• nirholas/three.wsthird_party/designcode-agent-skills/agent-skills/web-design/shaders-cursor-ripples
• MengTo/Skillsagent-skills/web-design/shaders-cursor-ripples