← All skills

Add shader cursor trail

Add a WebGPU halftone cursor trail with chromatic ripples and film grain to a hero, with touch, accessibility and performance fallbacks.

Install

npx degit MengTo/Skills/agent-skills/web-design/add-shader-cursor-trail .claude/skills/add-shader-cursor-trail

Run it in your project root, then ask your agent for what you want. More detail

What it built

A page built by the Add shader cursor trail design skill
A page this skill built when we ran it. Your result will differ with your brief.

What it does

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 web projects.

Straight from the skill's own SKILL.md. This is what your agent reads.