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.
80
100%
Does it follow best practices?
Run evals on this skill
Adds up to 20 points to the overall score
View guide
Passed
No findings from the security scan
Implement the exact trail as progressive enhancement. Preserve the host section's semantic content, imagery, controls, and static first frame.
shaders with the existing package manager. Import from the matching framework subpath: shaders/react, shaders/vue, shaders/svelte, or shaders/solid.assets/react/. Keep the lightweight capability gate separate from the heavy shader module so ineligible visitors do not request the shader bundle.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.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.cssVerify 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.
46abf78
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.