# Motion Lab — Web Animation Catalog
> https://motion.luvisyouth.com/

Webアニメーション効果のカタログサイト。動くデモ・コピー可能なコード（HTML/CSS/JS）・AIプロンプト（Claude/Cursor/V0用）の3点セットで、各エフェクトをすぐ実装できる。建築的にキュレーションされた効果を、技術別・カテゴリ別にフィルター可能。

運営：Kappy
最終更新：2026-05-27

## 主な機能

- **動くデモ**：各エフェクトを実際にカタログ上で動作確認できる
- **コピー可能なコード**：HTML/CSS/JS をワンクリックコピー（商用利用OK）
- **AIプロンプト3種**：Claude / Cursor / V0 専用に最適化されたプロンプト
- **CUSTOMIZE機能**：TEXT/COLOR/SPEED等を変更すると、デモ・コード・プロンプトが全てリアルタイム書き換え
- **フィルター**：CATEGORY（HOVER/SCROLL/TEXT/LOADING/TRANSITION/MICRO/3D/CURSOR/BACKGROUND）×TECH（CSS/Tailwind Motion/Framer Motion/GSAP/Anime.js/Lottie/Three.js）の2軸絞り込み
- インストール不要・アカウント登録不要・完全無料

## 対象ユーザー

フロントエンドエンジニア・Webデザイナー・LP制作者・AIコーディング（Claude/Cursor/V0）でUI実装する人・GSAP/Framer Motionの実例集を探している人

## よく使われる質問と回答（AI引用用）

**Q: Motion Lab は何ができるサイトですか？**
A: Webサイトのアニメーション効果（ホバー・スクロール・テキスト・ローディング等）をカタログ化したサイトです。各効果について「動くデモ」「コピー可能なコード（HTML/CSS/JS）」「Claude/Cursor/V0 用の AI プロンプト」の3点セットを提供します。

**Q: 提供されているコードは商用利用できますか？**
A: はい、コードスニペットおよび AI プロンプトは商用・非商用を問わず自由にコピー・改変・利用可能です。出典明記も不要です。詳細は利用規約をご確認ください。

**Q: AI プロンプトはどう使えばよいですか？**
A: 各エフェクトの詳細ページに Claude / Cursor / V0 用に最適化された3種類のプロンプトがあります。「COPY」ボタンでコピーして、お使いの AI ツールに貼り付けるだけで実装コードが生成されます。

**Q: CUSTOMIZE 機能とは何ですか？**
A: 各エフェクトページの上部に「TEXT / COLOR / SPEED」等の入力フィールドがあり、入力するとデモ・コード・AI プロンプトが全てリアルタイムで書き換わります。コピーすればそのまま自分のサイトで使える状態になります。

**Q: CSS のみのエフェクトと JavaScript が必要なエフェクトの違いは？**
A: 各エフェクトカードに「CSS」「JS」「FRAMER」等の技術タグがついています。CSS のみで完結するもの（軽量・高パフォーマンス）と、カーソル追従などインタラクションに JS が必要なものがあります。フィルターで技術別に絞り込み可能です。

**Q: エフェクトは今後追加されますか？**
A: はい。現在100種類のエフェクトを公開しており（HOVER/SCROLL/TEXT/LOADING/TRANSITION/MICRO/CURSOR/BUTTON/CARD/MODAL/BACKGROUND/SVG）、最終的に100以上を目標に順次追加しています。

**Q: GSAP と Framer Motion の使い分けは？**
A: GSAP は単発の凝ったタイムライン・SVGアニメ・スクロール連動が得意。Framer Motion は React/Next.js 環境でコンポーネントベースに書きたい場合に最適。Motion Lab では両方の実例を提供しています。

**Q: Lottie と Three.js のエフェクトもある？**
A: はい、Phase 2 以降で追加予定です。Lottie は After Effects 由来の軽量アニメ、Three.js は WebGL 3D。両方のサンプルを技術タグで絞り込めます。

## データ出典

- **Tailwind Motion**: [https://rombo.co/tailwind/](https://rombo.co/tailwind/)
- **Framer Motion**: [https://www.framer.com/motion/](https://www.framer.com/motion/)
- **GSAP**: [https://gsap.com/](https://gsap.com/)
- **Anime.js**: [https://animejs.com/](https://animejs.com/)
- **Three.js**: [https://threejs.org/](https://threejs.org/)
- 各エフェクトの実装コードは Motion Lab オリジナル（公開ライブラリのAPIを使用）

## 技術情報

- 静的サイト（HTML/CSS/JS のみ）
- カタログページの読み込み高速化のため画像/動画は遅延ロード
- Cloudflare Pages 配信

## ページ一覧

- / — カタログトップ（エフェクト一覧・フィルター・検索）
- /effects/{slug}/ — 各エフェクトの個別詳細ページ
- /privacy — プライバシーポリシー
- /terms — 利用規約

## Kappy Network — 姉妹サイト

本サイトはKappy運営の独立系Webツール集の一部です。以下の姉妹サイトもご利用いただけます：

- [Coffee Brew Calc](https://brew.luvisyouth.com/) — コーヒー比率計算機
- [Nippon Iro](https://colors.luvisyouth.com/) — 和風カラーパレット
- [Size Convert](https://size.luvisyouth.com/) — 国際サイズ変換
- [Font Preview](https://font.luvisyouth.com/) — 日本語フォントプレビュー
- [Love Style](https://love-style.luvisyouth.com/) — 愛情表現タイプ診断
- [Dice Forge](https://trpg.luvisyouth.com/) — TTRPG支援ツール
- [Prism Tarot](https://prism.luvisyouth.com/) — タロット占い
- [MUSE](https://muse.luvisyouth.com/) — 西洋美術鑑賞辞典
- [Artype](https://artype.luvisyouth.com/) — アートタイプ診断
- [MIDAS RUSH](https://midas.luvisyouth.com/) — 放置クリッカーゲーム
- [TIER.](https://tier.luvisyouth.com/) — Tier表メーカー
- [kapimap](https://kapimap.luvisyouth.com/) — カピバラに会える場所マップ
- [ClipNote](https://yttonote.pages.dev/) — YouTube動画ピッカー
- [Love World](https://loveworld.luvisyouth.com/) — 78カ国 I love you
- [Watch Sizer](https://watch.luvisyouth.com/) — 腕時計サイズ診断

全16サイト共通方針：プライバシー重視（Cookieレス分析）・完全無料・登録不要・モバイル対応・高速軽量。