導入してエフェクトを選ぶ
AnimeFX を導入し、88 のエフェクトまたは 8 のシナリオデモから要件に近いものを選びます。
npm install @voltwake/animefxエフェクト一覧
カード上ですぐに再生でき、専用の詳細ページではすべてのパラメータ調整・再生・呼び出しコードのコピーが行えます。ポータルは常にアクティブなプレビューを 1 つだけ保持し、WebGL コンテキストの枯渇を防ぎます。
エフェクト一覧を読み込み中…
3 ステップで導入
既存のデザインシステムがあればそのまま取り込み、なければ Design by Curio から選べます。AnimeFX はその色とフォントを引き継ぐので、あなたはエフェクトを選んでパラメータを調整するだけです。
デザインシステムを取り込む
`design.md` があればそのまま取り込み、なければ Curio の 1000+ のデザインシステムから選んでダウンロードするか、AI に Curio MCP 経由で取得させます。このサイト自体が生きた実例です——インターフェースのスタイルはすべて「景徳鎮ブラン」の design.md から、モーションはすべて AnimeFX から来ています。
詳細を開いて微調整
任意のエフェクト詳細ページを開き、速度・強度・数量などのパラメータを直接調整。納得できたら呼び出しコードをコピーします——ブラウザでは `<script>` で `lib/anime-fx.js` を読み込み、プロジェクトでは `import '@voltwake/animefx'` で呼び出せます。
一覧でパラメータを調整する →あるいは、一言で AI に任せる
animefx を導入したら、下の一文を AI コーディングアシスタントに渡すだけです。
このプロジェクトで animefx を使う（未導入なら npm install @voltwake/animefx）：node_modules/@voltwake/animefx/AGENTS.md を読み、その指示に従って適切なモーションを検索し、私の要望に適用してください。デモ集
そのまま開ける実シナリオページ 8 個 — SaaS ヒーロー、運用ダッシュボード、アプリ紹介、商品ページ、ポートフォリオ、イベント LP、AI チャット、マーケットデータ。カードのプレビューをクリックするとモーダルで再生され、1920×1080 の画面がウィンドウに合わせて縮小されます。Web / Video タグは、そのシーンが Web ページ向きかプログラマティック動画向きかを示します。
オープンソースと参加
サイトは紹介を担い、コードベースは独立して管理されています。すべてのリリースファイル・コントリビューション規約・セキュリティ報告の入口は GitHub リポジトリにあります。