Skip to content
cccskills
FreePublished on GitHub

add-shader-cursor-trail

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 English summary is being prepared. Showing the original description.

karanmrn/karanagentskills3 stars(GitHub 3 + cccskills 0)

Run score Not tested

See how to install

Files included (7)

  • SKILL.md3.0 KB
  • agents/openai.yaml251 B
  • assets/react/cursor-trail.css817 B
  • assets/react/CursorTrailGate.tsx2.9 KB
  • assets/react/CursorTrailShader.tsx1.8 KB
  • references/implementation.md5.3 KB
  • scripts/verify-cursor-trail.mjs2.9 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

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.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

Automate 21risk tasks via Rube MCP (Composio). Always search tools first for current schemas.

The English summary is being prepared. Showing the original description.

karanmrn/karanagentskills3Updated Aug 28, 2026

Automate 2chat tasks via Rube MCP (Composio). Always search tools first for current schemas.

The English summary is being prepared. Showing the original description.

karanmrn/karanagentskills3Updated Aug 28, 2026

Set up and use 1Password CLI for sign-in, desktop integration, and reading or injecting secrets.

The English summary is being prepared. Showing the original description.

karanmrn/karanagentskills3Updated Aug 28, 2026

Build integrated IS/BS/CF financial workbooks in Excel.

The English summary is being prepared. Showing the original description.

karanmrn/karanagentskills3Updated Aug 28, 2026

Entry point for 9Router — local/remote AI gateway with OpenAI-compatible REST for chat, image, TTS, embeddings, web search, web fetch. Use when the user mentions 9Router, NINEROUTER_URL, or wants AI without writing provider boilerplate. This skill covers setup + indexes capability skills; fetch the relevant capability SKILL.md from the URLs below when needed.

The English summary is being prepared. Showing the original description.

karanmrn/karanagentskills3Updated Aug 28, 2026

Chat / code generation via 9Router using OpenAI /v1/chat/completions or Anthropic /v1/messages format with streaming + auto-fallback combos. Use when the user wants to ask an LLM, generate code, summarize text, or run prompts through 9Router.

The English summary is being prepared. Showing the original description.

karanmrn/karanagentskills3Updated Aug 28, 2026

See all skills by karanmrn

Report a problem with this skill