跳到正文
cccskills
免费在 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.

中文简介正在准备中。当前显示原文说明。

karanmrn/karanagentskills星标 3(GitHub 3 + cccskills 0)

实测评分 未实测

查看安装方法

包含的文件(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(原文)

安装前可以查看交给 AI 代理的指令内容。

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.

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

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

中文简介正在准备中。当前显示原文说明。

karanmrn/karanagentskills32026年8月28日 更新

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

中文简介正在准备中。当前显示原文说明。

karanmrn/karanagentskills32026年8月28日 更新

1password

免费

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

中文简介正在准备中。当前显示原文说明。

karanmrn/karanagentskills32026年8月28日 更新

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

中文简介正在准备中。当前显示原文说明。

karanmrn/karanagentskills32026年8月28日 更新

9router

免费

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.

中文简介正在准备中。当前显示原文说明。

karanmrn/karanagentskills32026年8月28日 更新

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.

中文简介正在准备中。当前显示原文说明。

karanmrn/karanagentskills32026年8月28日 更新

查看 karanmrn 的全部技能

报告此技能的问题