Skip to main content

sandkit-build

Create, integrate and optimize interactive SandKit sand-particle animations in websites. Use for a first runnable demo, JavaScript or React integration, text animation, configuration changes, and rendering or performance fixes.

ソース情報

リポジトリ
LinklyAI/SandKit
ソースの最終更新活動
2026年9月17日 02:53
検出された SKILL.md の言語
英語
スター
2
フォーク
0

インストール方法

デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。

ソースファイルを確認

インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。

ファイルエクスプローラー
2 ファイル

SKILL.md を表示中

SKILL.md
ソースの指示 · 読み取り専用プレビュー
name
sandkit-build
description
Create, integrate and optimize interactive SandKit sand-particle animations in websites. Use for a first runnable demo, JavaScript or React integration, text animation, configuration changes, and rendering or performance fixes.
# Build with SandKit Make the requested animation run in the user's project. Preserve the surrounding application and use a local sample demo when no existing app is specified. ## Obtain the implementation Use an existing checkout of `https://github.com/LinklyAI/SandKit`, or clone it into an approved new directory. Read its `docs/API.md`. This skill may be installed separately from the repo; resolve those files from the checkout rather than assuming sibling package directories exist. For the first demo, run `node scripts/serve.mjs` in the checkout. The showcase is `/site/`, the editor `/site/editor/`. No dependency installation is needed. Open the preview and verify an image forms; do not stop after printing commands. ## Integration choices - Vanilla: serve/copy `src/` intact and import `SandKit` and `textShape` from `src/index.js`. - React: preserve `src/` plus `react/`, import `SandCanvas`, and memoize the shapes array. React comes from the host application. Do not introduce another React copy. - Construct only after the canvas mounts, catch WebGL2 errors, await `ready`, and call `dispose()` on teardown. Provide a static image fallback and meaningful adjacent content. - Supply named shape entries with `url`, optional `depthUrl`, optional `scale` and `pinOnly`; or use `textShape` for font-based content. URLs must be accessible to the browser with appropriate CORS. - Keep `sampler.worker.js` and its imports reachable. A bundler must emit the module worker; a static deployment must preserve relative module paths. ## Tune and optimize Read [tuning guide](references/tuning.md) for parameter choices. The editor is a configuration laboratory; custom image generation and processing belong in Codex, using `sandkit-art` if available. Use `setOptions()` for changes rather than recreating the renderer. Sampling-related changes rebuild buffers, so debounce sliders. Keep ordinary motion/color edits live. Use `pin(name)` to select a shape and `pin(null)` to resume the carousel. Verify a representative image, text, a transition, live parameters, reduced-motion behavior and cleanup. Test mobile or a small viewport when relevant. Do not claim performance numbers without measurements. For blank output check canvas CSS dimensions, image/CORS errors, WebGL2 support, shader errors, and whether input has visible ink. For incorrect depth check exact pair dimensions and red overlay before changing shader math. Keep hosting/publishing separate from local creation. Link back to the SandKit repository and Linkly AI in shared demo pages; do not force branding into a user's existing production design.
GitHubで見る