Skip to content
Get packs

Shader Cursor Trail

Adds a WebGPU halftone cursor trail effect to a web hero section, with fallbacks

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

What it does

It teaches an AI coding agent how to add a specific animated mouse effect to a website: a white, twinkling halftone dot trail that follows the cursor, rendered with WebGPU (a modern browser graphics API). The agent is told to keep the page's existing content and background image as the default, and to show the effect only on capable desktop browsers where motion is allowed. The skill also includes a script that checks the generated React code for the required shader structure.

Great for

  • Front-end developers adding an interactive shader background to a React, Next.js, Vue, Svelte, or Solid site
  • Designers or teams who want to reproduce the Tidal Commons hero effect in their own project
  • Developers who need fallbacks for static, touch, reduced-motion, and unsupported-browser visitors

Skip it if

  • Sites that need broad compatibility without a WebGPU-capable browser, since the effect only appears on supported browsers and otherwise falls back to a static background
  • Users who want a generic cursor effect or a different design, because the skill asks the agent to keep the exact graph rather than customise it
  • Projects that cannot install the external shaders npm package or accept a dependency on its hosted assets

Try asking

  • “Add the shader mouse effect from this skill to my React hero section, keeping the existing background image as the fallback”
  • “Create a reusable cursor-following shader layer in my Next.js project that loads only on desktop with hover support”
  • “Check my CursorTrailShader.tsx and CursorTrailGate.tsx files against the cursor trail verification script”
Step-by-step guide: how to use Shader Cursor TrailInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

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

    add-shader-cursor-trail.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip add-shader-cursor-trail.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip add-shader-cursor-trail.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

  • Tell the agent your framework and whether you use Next.js server rendering so it chooses the correct import and SSR-safe loading
  • Ask the agent to report the blend mode, fallback behaviour, and build result, and to state clearly if WebGPU was not visually tested
  • Run the verification script after changes, and test in a real browser with reduced motion and touch enabled

What's inside

  • agents/openai.yaml
  • assets/react/cursor-trail.css
  • references/implementation.md
  • scripts/verify-cursor-trail.mjs
  • 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.