デザイン&モーション · iart-ai/webgl-animation-skills

particle-system

This skill should be used when the user asks to "build a particle system", "make confetti/snow/smoke/sparks", "create a connected-dot/constellation network background", "add a flow-field or curl-noise particle effect", "render thousands of GPU particles with Three.js Points", or "animate emitters with forces". Covers per-particle integration, forces, flow fields, burst/continuous emission, spatial-grid connected dots, and GPU points + shaders.

L4 高権限 · 段階的認可と監査V1 コミット固定コマンド実行ネットワーク通信ファイル書き込みDual-pass Audit
Author iart-aiGitHub iart-ai/webgl-animation-skills ↗Stars 14License MIT(仓库根 LICENSE 为 MIT License / Copyright (c) 2026 iart.ai;.claude-plugin/plugin.json 亦声明 "license": "MIT")Commit 50697d659f
管理レベルは Skill の能力と推奨統制措置を示すものであり、品質や安全性の認証、利用可否の判定ではありません。使用の可否はユーザーおよび管理者が決定します。Agent 環境によって制約が異なるため、自動保護を仮定しないでください。第三者製 Skill の著作権は原著作者に帰属し、利用リスクは利用者が負います。

1仕組みと動作原理

機能はすべて「インラインの実行可能コード+ルール」に集約:SKILL.md の本文で各粒子の状態更新ループ、外力関数、フローフィールド/curl ノイズ、空間グリッド連線、GPU Points シェーダー断片を直接提示しており、ライブラリやビルド手順なしでそのままコピー&ペーストして動作可能。

skills/particle-system/SKILL.md
Drive many small elements with simple per-particle rules to get emergent, organic motion. Use 2D canvas for hundreds, GPU `Points` for thousands.
ここでの意図:「粒子エフェクト」を一本のメインライン(各粒子の更新)と複数の組み合わせ可能なパーツに分解。本文をレシピとし、references で完全な実行可能システムを提供。

安定性はパラメータ調整ではなく数値積分形式で担保:半陰解法オイラー法(先に速度を更新し、新しい速度で位置を更新)と dt のクランプを明示的に要求。理由はそれぞれバネ/減衰力下での安定性と、タブの非アクティブ・カクつき後のシミュレーション破綻防止。

skills/particle-system/SKILL.md
Prefer **semi-implicit Euler** (update velocity first, then position with the new velocity, as above) — it is stable for the spring/drag forces particles use. Use a fixed or clamped `dt` (`Math.min(dt, 1/30)`) so a stalled tab does not explode the simulation.
ここでの意図:コードだけでなく「なぜそう書くのか」の理由を提示。reference の canvas テンプレートでもコメントとして `const dt = Math.min((now - last) / 1000, 1 / 30); // clamp dt` と記載。

パフォーマンスのボトルネックを特定しデータ構造による解決策を提示:接続点ネットワークで総当たり比較を避け、半径に応じたバケット分割と隣接8グリッドのみの比較により、計算量を O(n²) から O(n) 近傍に削減。

skills/particle-system/SKILL.md
Naively checking every pair is O(n²) and dies past ~300 particles. Use a **uniform spatial grid**: bin particles by cell, only compare against the 8 neighboring cells.
ここでの意図:定量的しきい値(約300個以上でアルゴリズム切り替え必須)と複製可能な実装を示し、「実装を切り替えるべきか否か」を判定可能な問題に落とし込む。

数万パーティクルへの道筋はアニメーションを頂点シェーダーへ移行すること:位置を BufferGeometry に格納して Points としてレンダリングし、「発光点に見せる」ための2つのスイッチ(加算合成+深度書き込みオフ、gl_PointCoord の距離ディスカードによる矩形から円形へのクリッピング)を明記。

skills/particle-system/SKILL.md
`AdditiveBlending` + `depthWrite: false` gives the glowing-particle look. `discard` on `gl_PointCoord` distance makes square points round.
ここでの意図:GPU 版はデータの配置場所を変えるもの(各粒子属性を attribute に入れ、時間は uniform 1つのみ渡す)であるため、「単に同じことを速くする」のではなく別セクションとして記載。

成果物は単一ファイル HTML に限定しバンドラーを禁止:canvas 2D をインライン化、または GPU 版では importmap で three を CDN に指定。1つのレンダリングループでビルド手順ゼロ。

skills/particle-system/SKILL.md
For a self-contained particle effect (constellation background, confetti burst, flow field, GPU points) the deliverable is **one HTML file that opens directly in a browser** — canvas 2D inline, or Three.js from a CDN via an importmap for GPU `Points`, one render loop, no build step.
ここでの意図:成果物のティアを固定(単一ファイルこそが適切な構成)し、粒子エフェクトのためだけにスキャフォールディングを組む無駄を排除。

決定性は検証可能性の前提条件:素の Math.random をシード付き PRNG(mulberry32)に置き換えることで `?t=N` のフリーズフレームを再現可能にし、同一の N で同一ピクセルを出力させスクリーンショット検証を成立させる。

skills/particle-system/SKILL.md
**Seed the RNG** — replace bare `Math.random()` with a seeded PRNG (e.g. mulberry32) so spawn positions, angles, and bursts reproduce frame-for-frame.
ここでの意図:harness セクションで `let rng = mulberry32(1234);` と固定ステップ(`const step = 1 / 60`)による単一フレームレンダリングをセットで提供。

2コア機能

012D canvas 粒子エフェクト群:confetti / snow / smoke / sparks(重力、減衰、寿命、回転、形状で差別化)
02組み合わせ可能な外力システム(重力、減衰、引力/斥力、ホーム復帰バネ)、力=加速度を返す関数
03フローフィールドおよび curl ノイズ(発散ゼロ、流体表現)、時間経過による変化にも対応
04接続点/星座ネットワーク:空間グリッド+距離に応じたフェードアウト連線、線形に近い計算量
05GPU パーティクル(Three.js Points + ShaderMaterial、頂点シェーダー内アニメーション、life/seed などの粒子個別 attribute をサポート)
062種類の放出モデル:1回限りのバースト(コーン状ランダム+上向きバイアス)と連続放出(定常レート+死亡時の回収・再生成)
07決定論的フリーズ harness(?t=N の再シード+固定ステップ+単一フレーム描画+window.__ready)および完了前チェックリスト(reduced-motion フォールバックと dispose を含む)

3外部依存関係

KindDependency / Endpoint
clinpx playwright screenshot(验证回路:打开本地 file:// 页面并截冻结帧)
cli仓库根共享脚本 scripts/seek-shot.sh、scripts/contact-sheet.sh(截图与拼图;不在 skill 目录内)
cliffmpeg / ffprobe(contact-sheet.sh 用 hstack 拼图;probe-mp4.sh 读编码参数)
network交付 HTML 经 importmap 从 CDN 取 three(GPU Points 分支)——产物期引用,由浏览器拉取
packagesimplex-noise(流场/curl 噪声示例引用的噪声库,注释中点名)

4推奨統制措置と判定根拠

安全運用のための推奨統制措置
Agent 向け
段階的・都度認可、サンドボックス推奨
管理者向け
承認フロー、ロールバック可能、全履歴監査
判定根拠(ファイルパスと抜粋)
  • scripts/: ローカルスクリプトまたはコマンドの実行: (SKILL.md の指示)npx playwright screenshot --wait-for-timeout=600 "file://$PWD/
  • 网络端点: 外部ネットワークアクセスの宣言: skill ディレクトリ内にネットワーク呼び出しコードは一切存在しない。実行時のネットワーク面はツールチェーンに起因:`npx playwright` の初回実行時に npm registry から playw を取得
  • 本地工作目录: ファイルの読み書きと成果物出力: 成果物本体:単一の particles.html(出力規約に基づきエージェントが生成)
監査ノート: 評価対象=skill ディレクトリ自体。SKILL.md と1つの markdown reference(および0バイトの README.md)のみで構成され、同梱スクリプトなし、認証情報読み取りなし、エンドポイント呼び出しなし、ユーザー素材の外部送信なし。指示内容はすべて「ローカル HTML の作成」に限定される。実行時に関与するのはローカルツールのみ(`npx playwright screenshot` はローカルの file:// ページを開き、リポジトリルートのスクリプトはローカルスクリーンショットおよび ffmpeg によるコンタクトシート作成を実行)。生成物である HTML が importmap 経由で CDN から three を取得する処理はブラウザ側の取得に該当(パラダイム上「生成物の実行時参照は評価対象外」、理由欄への記録のみ)。留意点:① `npx playwright` はリモートパッケージを取得し初回時に Chromium をダウンロードする(一過性のツール取得、バージョン未固定でありサプライチェーン接触面に該当。ローカル導入済み Playwright を使用すれば完全に排除可能);② 参照されている scripts/seek-shot.sh および scripts/contact-sheet.sh はリポジトリルートにあり skill ディレクトリ内にはないため、skill 単体導入時は参照が宙に浮く;③ WebGL/GPU 依存性:ヘッドレス環境では swiftshader が必要であり、ない場合は粒子ページ全体が真っ白になる可能性がある。実装の不具合と即断せず、SKILL.md のアーティファクトリストに基づいて原因を特定すべきである。いずれも黄色(定常的な外部ネットワーク送信なし)および橙色の基準には該当しない。全リポジトリスキャンにより、サンドボックス回避、TLS 無効化、自動検出回避などの赤色基準の挙動がないことを確認済み。

5二重目の独立検証

  • [ok] 「skill 目录内无脚本」是否成立(决定蓝而非黄/橙的关键) — 文件清单实证:skills/particle-system/ 下只有 SKILL.md、README.md(0 B)、references/particle-recipes.md。SKILL.md 提到的 `scripts/seek-shot.sh` 实际位于仓库根 scripts/,并非 skill 自有资产;因此判级对象内确实没有可执行代码。已在 reason/risks 记录「单装 skill 目录会使引用悬空」。
  • [ok] 是否存在凭证或环境变量读取 — 全仓正则 `process.env|API_KEY|TOKEN|SECRET|Authorization` 在三个 iart 仓内零命中(唯一命中在 javascript-animation-skills 的 soundtrack/references/ai-music.md,属另一 skill)。本 skill 的 credential_reads 为空成立。
  • [ok] 是否有比蓝更高的触发条件被漏掉(红档特征) — 对 `sandbox|automationcontrolled|no-verify|stealth|bypass|ignoreHTTPSErrors|dangerously` 全仓扫描零命中;不存在关沙箱、关 TLS、绕过自动化侦测或任意代码执行面。
  • [ok] GPU / 无头渲染前提是否真的写进文档(任务特别提示项) — SKILL.md 验证段原文承认这是环境前提并把归因从代码上摘开:'For GPU points, WebGL needs a GPU context; Playwright/Chromium supplies one (swiftshader) headless.';完成清单第 1 条也要求无 WebGL 错误。
  • [ok] 「O(n) 连接点」与「?t=N 可复现」两条能力声明是否与代码相符 — 空间网格实现(`cell = radius` 分桶、只查 3×3 邻域)与声明一致;harness 要求 seeded PRNG + 固定步进(`const step = 1 / 60`)再渲单帧,确实保证同 N 同像素。无夸大。
  • [ok] reference 描述是否逐条落地 — references/particle-recipes.md 开篇即 'Complete, runnable systems for canvas and GPU particles.',与 SKILL.md 末尾列出的能力项(confetti/snow/smoke、鼠标吸引排斥、simplex 流场与 curl、空间网格星座、GPU Points)在文件内可逐节验证。

6結論

  • コードだけでなく「なぜそう書くのか」を明示:積分形式、dt クランプ、グリッド計算量のすべてに理由と定量的しきい値を記載
  • 2つのアプローチの境界が明確(canvas は数百個/GPU Points は数万個)、かつ GPU 版を「単に同じ処理の高速化」ではなくデータ配置の転換として解説
  • 決定性を検証可能性の前提として定義:シード付き PRNG + 固定ステップ + ?t=N 単一フレームにより、スクリーンショット検証の信頼性を担保
  • 検証ループにより「目視確認」をアーティファクトと根本原因の対照表(ブランク/画面外/NaN/原点スタック)へと落とし込み、誤認を大幅に低減
  • アクセシビリティと組み込みライフサイクルを完了チェックリストに網羅(reduced-motion、rAF キャンセル、dispose)
  • 最適な用途: パーティクル/星座背景、confetti/sparks のバースト、降雪/降雨、煙、フローフィールドや curl ノイズの渦流、数万個の粒子による GPU ポイントクラウドなど、「コードによって動きを生成する」用途に最適。成果物はダブルクリックで直接開ける単一ファイル HTML であり、既存ページへの埋め込みにも適している(ドキュメントに dispose と rAF キャンセルのクリーンアップ要件を明記)。ヘッドレスブラウザのスクリーンショット検証を受け入れ可能で、WebGL 環境がある(またはソフトウェアレンダリングで代替可能な)ユーザーに適合。
    不向きな用途: 非推奨:① 実写素材や動画合成が必要なパーティクル(本 skill は HTML 生成のみで、エンコード出力や多重化は非対応);② バックエンドやクラスタの計算能力を要する超大規模シミュレーション(GPU 分岐もシェーダー内頂点単位アニメーションに限定);③ 厳密なバージョン固定やオフラインビルドが求められる商用リリース(three のセルフホストおよびバージョン固定が別途必要);④ リポジトリルートの scripts/ を含まず本 skill ディレクトリ単体のみを導入した環境(検証スクリプトへの参照が切れるため、コマンドの手動置換が必要);⑤ 粒子を純粋な装飾としつつ完全な静止アクセシビリティを求める用途で、静的表示の設計を独自に行う必要がある場合(ドキュメントの要件は reduced-motion 降格のみ)。
    Install Agent-Ready
    ① Verified Mirror 2026-09-28
    Option A · Direct DownloadDownload particle-system.tar.gz
    sha256: d8271a602d6dd44b…
    Option B · Copy Guide for Agent
    install.json
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 50697d659f.