AutoGineer
Generated banner for Add Shader Cursor Trail
Generated logo for Add Shader Cursor Trail

Add Shader Cursor Trail

Meng ToCommunityCreated by Meng To

  • Skill
  • Tool integration
  • Software development
  • MIT
  • Low risk
  • Has scripts
Download ZIP

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

  1. Download the skill as a ZIP:

    https://autogineer.com/agent-skills/mengto/add-shader-cursor-trail/download

  2. 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

Add Shader Cursor Trail

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

Workflow

  1. 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.

  2. Install shaders with the existing package manager. Import from the matching framework subpath: shaders/react, shaders/vue, shaders/svelte, or shaders/solid.

  3. Read references/implementation.md before implementation. Keep the six shader nodes, their order, both invisible drivers, and both ID linkages exact.

  4. 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.

  5. 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.

  6. 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.

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

  8. 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

assets/react/cursor-trail.css

.cursor-trail-region {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #070708;
}

.cursor-trail-layer {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  mix-blend-mode: screen;
  opacity: 0.78;
}

.cursor-trail-mount {
  display: contents;
}

.cursor-trail-shader {
  position: absolute !important;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.cursor-trail-content {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .cursor-trail-layer {
    display: none !important;
  }
}

@media (prefers-reduced-transparency: reduce), (hover: none), (pointer: coarse) {
  .cursor-trail-layer {
    display: none;
  }
}

@media (forced-colors: active) {
  .cursor-trail-layer {
    display: none;
  }
}

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Needs: Needs Node.js

Security

What our scanner noticed· Low risk

  • Scripts that your agent may run

This skill includes scripts that your agent may run. Read them before you use it.

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by
Meng To
Publisher
Meng To (Community)
Source
MengTo/Skills · agent-skills/web-design/add-shader-cursor-trail · commit 5ea1661
Licence
MIT License (redistribution allowed)
  • LICENSE (added by AutoGineer from LICENSE)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by Meng To or Meng To.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download add-shader-cursor-trail.zip