Add Shader Cursor Trail

From the author

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.

— the description by Meng To

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides a structured approach to implementing a specific WebGPU cursor trail effect, originally used in the Tidal Commons hero section. It emphasizes a progressive enhancement strategy, ensuring that the effect only loads when specific hardware and accessibility conditions are met. The implementation relies on a precise shader graph configuration and a two-part component architecture to separate the lightweight capability gate from the heavier shader module, maintaining semantic integrity and accessibility for all users.

What it does

Implements a twinkling halftone cursor trail using WebGPU.
Provides a two-module architecture to gate shader loading based on hardware and user preferences.
Ensures semantic content remains accessible and functional without the shader.
Includes logic for cleanup, such as unmounting the shader when the section leaves the viewport.
Provides a validation script to verify the implementation against project requirements.
Supports integration across React, Next.js, Vue, Svelte, and Solid frameworks.

When to use it

When adding an interactive, cursor-following shader background to a hero or contact section.
When you need to maintain a static, accessible fallback for users with reduced motion or unsupported hardware.
When working within React, Next.js, Vue, Svelte, or Solid environments.
When you need to ensure GPU resources are managed efficiently by unmounting offscreen effects.

Advantages

Maintains site accessibility by using CSS and JS capability gates.
Preserves semantic content and interactivity regardless of shader availability.
Reduces unnecessary resource usage by gating shader execution.
Provides a standardized implementation contract to ensure consistent visual output.

Usage examples

“Add the Tidal Commons cursor trail to my React hero section.”: The agent will guide you through installing the shaders package, setting up the CursorTrailGate and CursorTrailShader components, and ensuring the shader layer is placed correctly behind your content.
“How do I ensure the cursor trail doesn't break accessibility on my site?”: The agent will explain how to implement the required capability gates, such as checking for reduced motion preferences and ensuring the canvas is aria-hidden.

Install

Download the skill as a ZIP:
https://mp-staging.autogineer.com/agent-skills/mengto/add-shader-cursor-trail/download

Unzip it into the cross-client skills folder of your project:

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

Documentation by Meng To

Implement the exact trail as progressive enhancement. Preserve the host section's semantic content, imagery, controls, and static first frame.

Workflow

Inspect the framework, rendering mode, existing motion stack, layer order, reduced-motion rules, and package manager. Do not add another smooth-scroll engine or replace the section's content.
Install shaders with the existing package manager. Import from the matching framework subpath: shaders/react, shaders/vue, shaders/svelte, or shaders/solid.
Read references/implementation.md before implementation. Keep the six shader nodes, their order, both invisible drivers, and both ID linkages exact.
For React or Next.js, copy and adapt the files in assets/react/. Keep the lightweight capability gate separate from the heavy shader module so ineligible visitors do not request the shader bundle.
Place one full-bleed, aria-hidden="true" shader layer behind the section content. Keep links and controls above it. Do not set pointer-events: none on the canvas unless cursor tracking is verified to use global events.
Gate loading on WebGPU, a fine hover pointer, normal motion/transparency preferences, document visibility, window focus, and section intersection. Unmount when the section leaves view so GPU work stops.
Keep the original image or dark background as the complete fallback. Hide the layer for reduced motion, reduced transparency, coarse/no-hover pointers, and forced colors.
Adapt only presentation variables such as opacity and blend mode. Do not change the graph to decorative noise, add WebGL/Three.js, or hotlink Shaders preview assets.

Validate

Run the project's lint, typecheck/tests, and production build. For React implementations, also run:

node /path/to/add-shader-cursor-trail/scripts/verify-cursor-trail.mjs \
  path/to/CursorTrailShader.tsx \
  path/to/CursorTrailGate.tsx \
  path/to/cursor-trail.css

Verify the static section with JavaScript unavailable, keyboard access to content above the layer, touch behavior, reduced motion, unsupported WebGPU, focus/visibility cleanup, and absence of runtime requests to previews.shaders.com or data.shaders.com.

Report the chosen blend mode, fallback, capability gates, production-build result, and any browser limitation. Do not claim WebGPU visual verification unless it was actually performed in a compatible browser.

Files

ATTRIBUTION.mdAdded by AutoGineer868 B
LICENSELicence file added by AutoGineer1.0 KiB
SKILL.md3.0 KiB
agents/openai.yaml251 B
assets/react/CursorTrailGate.tsxScript2.9 KiB
assets/react/CursorTrailShader.tsxScript1.8 KiB
assets/react/cursor-trail.css817 B
references/implementation.md5.3 KiB
scripts/verify-cursor-trail.mjsScript2.9 KiB

SKILL.md