すぐに使えるデモ

これらのレシピは、presets/presets ワークスペース (リリースに向けたベータ/アルファ) で利用可能な公式プリセットを使用します。

パターンベースの開始/停止 (自動再生なし)

import { tsParticles } from "@tsparticles/engine";
import type { Container, ISourceOptions } from "@tsparticles/engine";

let container: Container | undefined;

export async function start(id: string, options: ISourceOptions): Promise<void> {
  container?.destroy();
  container = await tsParticles.load({ id, options });
}

export function stop(): void {
  container?.pause();
}

export function resume(): void {
  container?.play();
}

プリセットレシピ

• プリセットカタログ: /demos/presets

• パレット カタログ: /demos/palettes

• シェイプ カタログ: /demos/shapes

• Ambient

• Big Circles

• Bubbles

• Confetti

• Confetti Cannon

• Confetti Explosions

• Confetti Falling

• Confetti Parade

• Fire

• Firefly

• Fireworks

• Fountain

• Hyperspace

• Links

• Matrix

• Sea Anemone

• Snow

• Squares

• Stars

• Triangles

UI ですぐにテストするには、Playground を使用し、必要な場合にのみ Start で開始します。

フレームワークのデモ プロジェクト

モノリポジトリには、実行可能な統合デモも含まれています。

• ソースフォルダー: https://github.com/tsparticles/tsparticles/tree/main/demo
• 利用可能なデモには次のものがあります: angular、astro、electron、inferno、ionic、jquery、lit、nextjs、nextjs-legacy、 nuxt2、nuxt3、nuxt4、preact、react、riot、solid、svelte、svelte-kit、 vanilla、vanilla_new、vite、vue2、vue3、webcomponents。