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.

Quellinformationen

Repository
LinklyAI/SandKit
Letzte Quellaktivität
17. September 2026 um 02:53
Erkannte Sprache von SKILL.md
Englisch
Sterne
2
Forks
0

Installationsoptionen

Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.

Quelldateien prüfen

Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.

Datei-Explorer
2 Dateien

SKILL.md wird angezeigt

SKILL.md
Quellanweisungen · Schreibgeschützte Vorschau
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.
Auf GitHub ansehen