Back to Skills

add-shader-cursor-trail

Add the Shaders WebGPU mouse effect used for the Tidal Commons hero: a white twinkling halftone cursor trail driven by ChromaFlow, masked through a DotGrid, finished with chromatic ripples and film grain, and protected by static, touch, accessibility, SSR, and performance fallbacks. Use when a user asks for this shader mouse effect, a halftone cursor trail, an interactive WebGPU hero/contact background, or a reusable cursor-following shader layer in React, Next.js, Vue, Svelte, Solid, or plain w

7,184stars837forksUpdated 11/2/2026

Security Assessment

Safe(100/100)
Security Score100/100
Detailed description not yet generated. View the SKILL.md tab for raw content.

All Files

7 files
assets/react/CursorTrailGate.tsx2.9 KB
View
scripts/verify-cursor-trail.mjs2.9 KB
View
agents/openai.yaml0.2 KB
View
assets/react/CursorTrailShader.tsx1.8 KB
View
SKILL.md3.0 KB
View
assets/react/cursor-trail.css0.8 KB
View
references/implementation.md5.3 KB
View

Install add-shader-cursor-trail

Download and extract the skill files to your .claude/skills/ directory.

Quick Setup:

  1. Copy the skill folder to .claude/skills/
  2. Claude will automatically detect and use the skill

Repository

mengto/skills