{"id":"de1b1ac2-c7d9-4303-b524-5b3cd8ab52da","slug":"animation-factory","kind":"mcp","name":"animation-factory","summary":"React 開発者向けの UI アニメーションカタログ。.animation.md として取得して AI に渡せる。MCP / CLI / web の 3 経路でアクセス可能。","owner":"Daichi8922028","repoUrl":"https://github.com/Daichi8922028/animation-factory","license":"MIT","licenseTier":"permissive","trust":"community","stars":0,"match":null,"fewStars":true,"format":"mcp","createdAt":"2026-05-22T16:45:53.000Z","addedAt":"2026-10-21T06:09:00.931Z","logoUrl":"https://avatars.githubusercontent.com/u/207496413?u=60e9770585ae01aeaf7980801c2ac1d5f167f7f9&v=4","linkOnly":false,"collection":null,"skillPath":null,"categories":["design-media","memory-knowledge"],"tags":["ai-coding","animation","catalog","gsap","lottie","motion","nextjs","react"],"runtime":"binary","local":true,"cloudCapable":false,"cloudCapability":"unknown","cloudReadyOnPlatform":false,"needsApiKey":false,"reviewed":false,"syncedAt":"2026-10-23T02:36:13.181Z","sample":false,"url":"https://conduits.dev/tools/animation-factory","language":"TypeScript","transports":["stdio"],"install":{},"requirements":{"env":[],"upstreamMayCharge":false},"tools":null,"readme":"# animation factory\n\n![animation factory](docs/screenshot-home.png)\n\nReact 開発者向けの「アニメーションのカタログ」。あらゆる UI アニメーションを視覚的に試して、`.animation.md` パッケージとして取得し、AI に渡してそのまま実装させられる無料サイト。\n\n🌐 **本番**: <https://animation-factory-five.vercel.app>\n📚 **About**: <https://animation-factory-five.vercel.app/about>\n📐 **Schema docs**: <https://animation-factory-five.vercel.app/docs/schema>\n\n> 売上目的ではなく、自分が本当に欲しいアニメーションを誰でも使える形にするための個人発プロジェクト。\n\n---\n\n## AI / Agent から使う（3 経路）\n\n「動きの辞書」をどんな AI / シェルからも引けるよう、3 つの入口を用意しています。\n\n### 1. MCP サーバ（Claude Code / Cursor / Cline 等）\n\n[Model Context Protocol](https://modelcontextprotocol.io) を喋れる AI クライアントなら、サイトを **そのまま「カタログ」として扱える** ようになります。AI が自律的に検索 → 取得 → 適用までやる。\n\n```bash\n# Claude Code に登録（一度だけ）\nclaude mcp add animation-factory --transport http \\\n  https://animation-factory-five.vercel.app/mcp\n\n# Cursor / Cline 等も同じ URL を MCP HTTP transport で登録\n```\n\n登録後はチャットで:\n\n> Card.tsx にホバーで浮き上がる動きを足して\n\n…と頼むだけで、AI が `search_animations` → `get_animation(\"hover-lift\")` → `AI Apply Prompt` セクションに沿って `Card.tsx` を編集します。\n\n**公開ツール**:\n- `search_animations(query?, category?, release?, tag?, limit?)` — 自然言語 + ファセット検索\n- `get_animation(id)` — `.animation.md` 全文（frontmatter + 本文 + AI Apply Prompt）\n- `list_categories()` — 全 7 カテゴリ + count\n- `list_by_tag(tag)` — タグ絞り込み\n- `get_kit(ids[])` — 複数 .md を 1 つの大きな markdown に連結\n\n### 2. CLI（任意の AI / シェル / CI）\n\n`fetch` できる Node 22+ ならどこでも動く単一ファイル CLI。MCP に対応していない AI（ChatGPT 等）に渡す `.md` をワンコマンドで取りに行けます。\n\n```bash\n# インストール不要、その場で実行（GitHub から）\nnpx github:Daichi8922028/animation-factory get fade-up hover-lift --out ./animations\n\n# 検索\nnpx github:Daichi8922028/animation-factory search \"ホバー\" --category hover-press --limit 5\n\n# 束ね DL（zip）\nnpx github:Daichi8922028/animation-factory kit fade-up hover-lift scroll-reveal --out .\n```\n\n`npm publish` 後は `npx animation-factory@latest get fade-up` で動きます（パッケージ詳細は `cli/README.md`）。\n\n### 3. curl / fetch（MCP 未対応の AI、汎用エージェント）\n\n最低限の依存。ChatGPT や GitHub Copilot にも「下の URL を読んで適用して」で渡せます。\n\n```bash\n# 1 件取得\ncurl -o fade-up.animation.md \\\n  https://animation-factory-five.vercel.app/api/animation/fade-up\n\n# 複数の zip 取得\ncurl -o kit.zip \\\n  \"https://animation-factory-five.vercel.app/api/kit?ids=fade-up,hover-lift,scroll-reveal\"\n```\n\n**AI への指示例（ChatGPT）**:\n\n```\nこのアニメーションを Card.tsx に適用して:\nhttps://animation-factory-five.vercel.app/api/animation/hover-lift\n\n末尾の \"AI Apply Prompt\" セクションに従ってください。\n```\n\n---\n\n## ブラウザでカタログを使う\n\n1. <https://animation-factory-five.vercel.app> を開く\n2. カテゴリ / 検索 / タグから動きを探す\n3. カードをホバーで試し、気に入ったら詳細ページへ\n4. `.md をダウンロード` で 1 件、`add to kit` を貯めて画面下の `Kit を DL` で複数を zip 取得\n5. 取得した `.animation.md` を AI に渡し、末尾の `AI Apply Prompt` に従って適用\n\n---\n\n## 設計ドキュメント（真正本）\n\n設計の真正本は Obsidian の Vault 側にある。実装で迷ったらそちらを読む。\n\n- ProjectBrief — アイデア本体・スコープ\n- Roadmap — Phase 0〜5 の作業フロー\n- Web-Animation-Taxonomy — アニメーションの MECE 5 軸\n- Specs/animation-md-schema — `.animation.md` スキーマ v1.0（確定）\n- Specs/react-implementability — Tier A / B / C 振り分け\n- Specs/site-ia — サイト IA / データモデル\n- Specs/ui-design — UI・ビジュアル設計\n- Specs/preview-engine — プレビュー基盤の技術選定\n- Specs/implementation-plan — 本リポジトリの進め方\n\nVault: `10_Projects/アニメーション工場/`\n\n## 技術スタック\n\n- Next.js 16（App Router）+ TypeScript\n- Tailwind CSS v4\n- Motion / GSAP（Tier B のスクロール演出）/ Lottie / Rive\n- Zod（`.animation.md` フロントマターの検証）\n- JSZip（複数 .md の束ね DL）\n- marked + shiki（詳細ページの Markdown / コードハイライト）\n- Playwright（E2E + 静的サムネ生成）\n- ホスティング: Vercel 無料枠\n\n## 構成\n\n```\nsrc/                  Next.js アプリ（App Router）\n  app/(site)/         ホーム / カテゴリ / 詳細 / タグ / about / docs\n  app/mcp/route.ts    MCP サーバ（stateless HTTP, JSON-RPC 2.0）\n  app/api/            REST API（/api/animation/[id], /api/kit）\ncli/                  animation-factory CLI（独立サブパッケージ）\ncontent/animations/   本番の *.animation.md\ncontent/docs/         About / Schema docs の Markdown\nscripts/              .animation.md → 索引・プレビューサムネのビルド\ntests/e2e/            Playwright 致命パス E2E\nsrc/generated/        animation-index.json（ビルド成果物、git 管理外）\npublic/thumbs/        Playwright で撮影した各プレビューのサムネ\n```\n\n## 開発\n\n```bash\nnpm run dev            # 開発サーバ\nnpm run verify         # lint + content check + production build + E2E\nnpm run test:e2e       # production build 後に Playwright E2E\nnpm run check:content  # .animation.md の v1.0 スキーマ検証\nnpm run build:index    # content から索引を生成（dev/build 前に自動実行）\nnpm run build:thumbs   # /preview/[id] を Playwright で全件キャプチャ\nnpm run build          # 本番ビルド\nnpm run lint           # ESLint\n```\n\n## CI / CD\n\n- CI: `.github/workflows/ci.yml`\n  - `main` への push と pull request で `npm run verify` を実行\n  - 検証内容: ESLint、`.animation.md` 検証、Next.js production build、Playwright E2E\n- CD: `.github/workflows/vercel-production.yml`\n  - 手動実行（workflow_dispatch）で Vercel production に prebuilt deploy\n  - Vercel CLI の `pull -> build -> deploy --prebuilt --prod --archive=tgz` 構成\n  - GitHub Secrets: `VERCEL_TOKEN` / `VERCEL_ORG_ID` / `VERCEL_PROJECT_ID`\n\n## セキュリティ\n\n- 基本ヘッダ済（X-Frame-Options=SAMEORIGIN / X-Content-Type-Options=nosniff / Referrer-Policy / Permissions-Policy）\n- API 入力は regex 検証 + 件数上限（kit max 50）\n- back-link の `?from=` は `/c/` `/t/` `/a/` `/?q=` のみ受理（外部 URL は home にサニタイズ）\n- 現状の `.md` 本文は curated（user 投稿なし）。Phase 4 で user 投稿を入れる時は `DOMPurify` で sanitize する想定\n\n## ステータス\n\nPhase 3（ベータ版）コア完成。本番 deploy 済、E2E 13/13 OK、コンテンツ 45 件（alpha 38 + beta 7）、全 7 カテゴリ充足。AI 連携 3 経路（MCP / CLI / curl）公開。次は Phase 4（任意拡張：ユーザー投稿）/ Phase 5（Tier C: 3D / シェーダ / 物理）。\n"}