skills.rest
MengTo
MengToCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

add-shader-cursor-trail

Implements a WebGPU halftone cursor trail shader layer with accessibility and performance fallbacks.

5.7k|685|Updated Feb 3, 2026
Search Tags:#webgpu#Progressive Enhancement# accessibility#shader#halftone#reAct#cursor trail
One-click install
npx skills add https://github.com/MengTo/Skills --skill add-shader-cursor-trail
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: add-shader-cursor-trail
Source: https://github.com/MengTo/Skills/tree/main/agent-skills/web-design/add-shader-cursor-trail
Command: npx skills add https://github.com/MengTo/Skills --skill add-shader-cursor-trail

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires shaders, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

Adding an interactive WebGPU cursor trail to a hero or contact section often breaks accessibility, SSR rendering, bundle size, or GPU usage on unsupported devices. This Skill provides an exact, verified implementation of the Shaders halftone cursor trail with progressive enhancement so the static section always works.

Core Features & Use Cases

  • Exact Shader Graph: Prescribes the six-node graph (DotGrid, ChromaFlow, two LinearGradients, CursorRipples, FilmGrain) with required IDs and linkages so the twinkling halftone trail renders correctly.
  • Capability Gating: Loads the shader only when WebGPU, fine pointer, motion/transparency preferences, visibility, focus, and viewport intersection all pass, with CSS media-query fallbacks.
  • Framework Templates: Ships React/Next.js gate and shader components plus CSS, with adaptation guidance for Vue, Svelte, Solid, and plain JavaScript.
  • Use Case: A developer wants the Tidal Commons-style twinkling dot cursor trail behind a Next.js hero section without breaking keyboard navigation, reduced-motion users, or the production build.

Quick Start

Ask your agent to use the add-shader-cursor-trail skill to add the WebGPU halftone cursor trail to your hero section, then run the verify script against the generated files.

Frequently Asked Questions about add-shader-cursor-trail

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a WebGPU cursor trail effect to a React or Next.js hero section?▼

Install the shaders package, copy the CursorTrailGate and CursorTrailShader components plus cursor-trail.css, and place the aria-hidden layer behind your section content. The gate lazy-loads the shader only after WebGPU, pointer, and preference checks pass.

What is the correct Shaders graph for a halftone cursor trail?▼

Use one Shader root containing DotGrid, ChromaFlow, two LinearGradients, CursorRipples, and FilmGrain in that order. The invisible ChromaFlow drives dot size via the trailFlow ID, and trailDots masks the white gradient; breaking either ID link removes the visible trail.

Does the shader cursor trail work on touch devices or with reduced motion?▼

No, and that is intentional. The layer is hidden for coarse or no-hover pointers, reduced motion, reduced transparency, and forced colors, and the static background remains as the complete fallback for those users.

Why does my cursor trail show a gradient but no dots?▼

The ID linkages are broken. Restore source: "trailFlow" on the DotGrid dotSize map, id="trailFlow" on ChromaFlow, maskSource="trailDots" on the white gradient, and id="trailDots" on DotGrid, keeping both drivers invisible.

How do I prevent the WebGPU shader from hurting bundle size or running offscreen?▼

Keep capability checks in a lightweight gate component that dynamically imports the shader module only after eligibility passes. Use IntersectionObserver to unmount the shader when the section leaves the viewport and clean up visibility and focus listeners.

Related Skills

Explore More Design & Creative Skills→
mattwoodcomattwoodco
3

unicorn-studio

Integrate no-code WebGL shader effects into web applications via JSON configurations.

Community
Intermediate
smarmen86smarmen86

seo-unlighthouse

Run automated multi-page Lighthouse audits and generate aggregate JSON reports.

Community
Intermediate
imalfectimalfect
1

framer-motion-animator

Implement Framer Motion animations and micro-interactions in React applications.

Community
Advanced
abrahamgreysonabrahamgreyson

web-shader-extractor

Extract and replay WebGL, WebGPU, and Canvas effects from webpages.

Community
Advanced