domains / families / design / add-shader-cursor-trail

add-shader-cursor-trail

separate

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.

When to use

• shader mouse effect
• halftone cursor trail
• interactive WebGPU hero/contact background
• reusable cursor-following shader layer
• React, Next.js, Vue, Svelte, Solid, or plain web projects

When not to use

• adding another smooth-scroll engine
• replacing the section's content
• changing the graph to decorative noise
• adding WebGL/Three.js
• hotlinking Shaders preview assets

Skill page

Source