本文へ移動
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(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

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 のスキルをすべて見る

このスキルの問題を報告する