WEB ANIMATION CATALOG
SEE IT.
COPY IT. BUILD IT.
CSSアニメーション・JavaScriptエフェクトを動くデモで確認し、コードをコピー。
Claude / Cursor / V0 用AIプロンプト付き。AIでサイトを作る人のためのWebアニメーション効果カタログ。
Motion Lab について
Motion Lab は、Claude / Cursor / V0 などのAIコーディングツールでWebサイトを作る人のためのWebアニメーション効果カタログです。ホバー・スクロール・カード・ボタン・テキスト演出など199種類のWebアニメーションを、動くデモ＋コピー可能なHTML / CSS / JSコード＋AIプロンプトの3点セットで提供します。
GSAP・Framer Motion 対応。Aceternity UI・Magic UI・shadcn-ui で頻出するトレンドエフェクト（Border Beam / Bento Grid / Animated Beam など）もカバー。すべて完全無料・登録不要・商用利用可。AIにそのまま貼り付けられるプロンプトで、エフェクトの組み込みが数秒で完了します。
CATEGORY
TECH
SEARCH
擬音で探す
SORT
/ で検索
199 / 199 SHOWN
BROWSE BY CATEGORY
カテゴリ別の解説ページでは、そのジャンルの実装の勘所とよくある失敗をまとめています。上のフィルターは一覧の絞り込み、こちらは読み物です。
RECENTLY VIEWED
№001
LIVE☆
+
№002
LIVE☆
REVEAL
№003
LIVE☆
SPLIT
№004
LIVE☆
TILT
№005
LIVE☆
BORDER
№006
LIVE☆
SPOT
№007
LIVE☆
HELLO!
№008
LIVE☆
№009
LIVE☆
№010
LIVE☆
SCENE
№011LIVE☆
№012LIVE☆
№013LIVE☆
№014LIVE☆
№015LIVE☆
№016LIVE☆
№017LIVE☆
№018LIVE☆
№019LIVE☆
№020LIVE☆
№021LIVE☆
№022LIVE☆
№023LIVE☆
№024LIVE☆
№025LIVE☆
№026LIVE☆
№027LIVE☆
№028LIVE☆
№029LIVE☆
№030LIVE☆
№031LIVE☆
№032LIVE☆
№033LIVE☆
№034LIVE☆
№035LIVE☆
№036LIVE☆
№037LIVE☆
№038LIVE☆
№039LIVE☆
№040LIVE☆
№041LIVE☆
№042LIVE☆
№043LIVE☆
№044LIVE☆
№045LIVE☆
№046LIVE☆
№047LIVE☆
№048LIVE☆
№049LIVE☆
№050LIVE☆
№051LIVE☆
№052LIVE☆
№053LIVE☆
№054LIVE☆
№055LIVE☆
№056LIVE☆
№057LIVE☆
№058LIVE☆
№059LIVE☆
№060LIVE☆
№061LIVE☆
№062LIVE☆
№063LIVE☆
№064LIVE☆
№065LIVE☆
№066LIVE☆
№067LIVE☆
№068LIVE☆
№069LIVE☆
№070LIVE☆
№071LIVE☆
№072LIVE☆
№073LIVE☆
№074LIVE☆
№075LIVE☆
№076LIVE☆
№077LIVE☆
№078LIVE☆
№079LIVE☆
№080LIVE☆
№081LIVE☆
№082LIVE☆
№083LIVE☆
№084LIVE☆
№085LIVE☆
№086LIVE☆
№087LIVE☆
№088LIVE☆
№089LIVE☆
№090LIVE☆
№091LIVE☆
№092LIVE☆
№093LIVE☆
№094LIVE☆
№095LIVE☆
№096LIVE☆
№097LIVE☆
№098LIVE☆
№099LIVE☆
№100LIVE☆
№101LIVE☆
№102LIVE☆
№103LIVE☆
№104LIVE☆
№105LIVE☆
№106LIVE☆
№107LIVE☆
№108LIVE☆
№109LIVE☆
№110LIVE☆
№111LIVE☆
№112LIVE☆
№113LIVE☆
№114LIVE☆
№115LIVE☆
№116LIVE☆
№117LIVE☆
№118LIVE☆
№119LIVE☆
№120LIVE☆
№121LIVE☆
№122LIVE☆
№123LIVE☆
№124LIVE☆
№125LIVE☆
№126LIVE☆
№127LIVE☆
№128LIVE☆
№129LIVE☆
№130LIVE☆
№131LIVE☆
№132LIVE☆
№133LIVE☆
№134LIVE☆
№135LIVE☆
№136LIVE☆
№137LIVE☆
№138LIVE☆
№139LIVE☆
№140LIVE
№141LIVE
№142LIVE
№143LIVE
№144LIVE
№145LIVE
№146LIVE
№147LIVE
№148LIVE
№149LIVE
№150LIVE
№151LIVE
№152LIVE
№153LIVE
№154LIVE
№155LIVE
№156LIVE
№157LIVE
№158LIVE
№159LIVE
№160LIVE
№161LIVE
№162LIVE
№163LIVE
№164LIVE
№165LIVE
№166LIVE
№167LIVE
№168LIVE
№169LIVE
№170LIVE
№171LIVE
№172LIVE
№173LIVE
№174LIVE
№175LIVE
№176LIVE
№177LIVE
№178LIVE
№179LIVE
№180LIVE
№181LIVE
№182LIVE
№183LIVE
№184LIVE
№185LIVE
№186LIVE
№187LIVE
№188LIVE
№189LIVE
№190LIVE
№191LIVE
№192LIVE
№193LIVE
№194LIVE
№195LIVE
№196LIVE
№197LIVE
№198LIVE
№199LIVE
NO EFFECTS FOUND
— LEARN MORE
GUIDES
Webアニメーション・CSS・JavaScript・UX設計の長文ガイド28本。基礎から最新トレンドまで体系的に学べます。
BASICS
Webアニメーションとは？基本と効果がわかる完全ガイド
BASICS
CSSアニメーション入門 — transition と @keyframes の使い分け
HOVER
ホバーエフェクトの作り方 — 5つの基本パターン
SCROLL
スクロールアニメーション完全ガイド — IntersectionObserver
MICRO
マイクロインタラクション設計 — UX底上げの小さな動き
BASICS
CSS vs JavaScript アニメーション — 使い分けの基準
UX
WebアニメーションがUXに与える 7つの心理効果
PERFORMANCE
Core Web Vitalsに影響しないアニメーション設計
AI
Claude / Cursor / v0 でアニメーション付きサイトを作る方法
TRENDS
2026年Webアニメーショントレンド — 最新10選
FRAMER
Framer Motion入門 — React アニメーションの定番ライブラリ
TAILWIND
Tailwind CSSでアニメーション — animate・transition・group/peer
GSAP
GSAP ScrollTrigger 完全ガイド — スクロール連動アニメーション
LOADING
ローディングUIの設計 — スケルトン・スピナー・プログレスバー
BUTTON
ボタンアニメーション大全 — ホバー・プレス・CTA演出
CURSOR
カーソルエフェクトの作り方 — 追従・マグネット・スポットライト
CSS
CSSアニメーション コピペで使える実装例12選
LOADING
ローディングアニメーション css コピペ集 — 定番7種を比較
HOVER
ホバーアニメーション css コピペ集 — 11の実装例
TEXT
テキストアニメーション css コピペ集 — 厳選13種を用途別に整理
CSS
CSSオーロラエフェクトの作り方｜背景・テキスト・ボタン・カード実装4選
AI
Claude Code でWebアニメーションを実装する — 指示の書き方と実例5選
AI
Cursor（AIコードエディタ）でCSSアニメーションを実装する — Rules設定とプロンプト実例
AI
CSSアニメーション AIプロンプト例文集 — そのまま使える指示文テンプレ
AI
CLAUDE.md / .cursorrules に書くアニメーション規約テンプレート【コピペ可】
AI
GitHub Copilot でCSSアニメーションを実装する — 補完・Chat・Edits の使い分け
AI
AIが書いたアニメーションが動かないとき — 原因7分類と切り分けの手順
AI
AIコーディングツール比較：アニメーション実装で何が違うか — 4ツールを同条件で検証
— BOOKS · PR · AMAZON
Motion Lab の100エフェクトを支える「動き」と「UI設計」の基礎を、紙の本でも体系的に。3冊いずれも編集部おすすめ。
なかしまぁ先生のCSSアニメーション入門
初学者の決定版・hover/keyframe/transition を体で覚える →
マイクロインタラクション
UI/UXデザインの神は細部に宿る・Dan Saffer →
Fundamentals of Web Animation with GSAP
GSAP / ScrollTrigger 公式実装テクの英語決定版 →
Amazonのアソシエイトとして適格販売により収入を得ています。
— LEARN OFFLINE / 学びを止めないPR
CSS・JavaScript・UXデザインの技術書やオーディオブックは、Amazonのサブスクで読み放題・聴き放題。すべて初回無料体験あり。
Kindle Unlimited
技術書・デザイン書が読み放題。30日無料体験 →
Audible
移動中に耳で学ぶ。30日無料体験 →
Amazon Prime
Prime Reading・配送特典も。30日無料体験 →
Music Unlimited
作業用BGMに。1億曲が聴き放題・30日無料体験 →
Amazonのアソシエイトとして適格販売により収入を得ています。
PR — モーション・アニメ制作におすすめ
Webアニメの次は、キャラクターを動かす
2Dアニメーション制作ソフト。動画素材・LP装飾としても展開可能。
Live2Dを試す →
動画編集を1本仕上げると、世界が変わる
動画編集・プログラミングが学べる買い切り型オンラインスクール。
講座を見る →
デモの先の、本番デザインへ
Photoshop・Illustrator・After Effects などデザイン&モーション制作の業界標準ツール。
Adobeを見る →
コピペの次は、仕事にするWebスキル
Web制作・デザイン・動画編集を実務レベルで学べるオンラインスクール。
デイトラを見る →
AIプロンプトを、仕事の武器にする
ChatGPTなどの生成AIを実務で活かすスキルを学ぶオンライン講座。無料セミナーあり。
DMM 生成AI CAMPを見る →※ A8.netアフィリエイト広告を利用しています。
FAQ · よくある質問
FREQUENTLY ASKED
Motion Lab は何ができるサイトですか？
Webサイトのアニメーション効果（ホバー・スクロール・テキスト・ローディング等）をカタログ化したサイトです。各効果について「動くデモ」「コピー可能なコード（HTML/CSS/JS）」「Claude/Cursor/V0 用の AI プロンプト」の3点セットを提供します。
提供されているコードは商用利用できますか？
はい、コードスニペットおよび AI プロンプトは商用・非商用を問わず自由にコピー・改変・利用可能です。出典明記も不要です。詳細は利用規約をご確認ください。
AI プロンプトはどう使えばよいですか？
各エフェクトの詳細ページに Claude / Cursor / V0 用に最適化された3種類のプロンプトがあります。「COPY」ボタンでコピーして、お使いの AI ツールに貼り付けるだけで実装コードが生成されます。
CUSTOMIZE 機能とは何ですか？
各エフェクトページの上部に「TEXT / COLOR / SPEED」等の入力フィールドがあり、入力するとデモ・コード・AI プロンプトが全てリアルタイムで書き換わります。コピーすればそのまま自分のサイトで使える状態になります。
CSS のみのエフェクトと JavaScript が必要なエフェクトの違いは？
各エフェクトカードに「CSS」「JS」「FRAMER」等の技術タグがついています。CSS のみで完結するもの（軽量・高パフォーマンス）と、カーソル追従などインタラクションに JS が必要なものがあります。フィルターで技術別に絞り込み可能です。
エフェクトは今後追加されますか？
はい、現在199種類のエフェクトを公開しています。今後も12カテゴリ × 5技術の組み合わせを目標に、順次追加していく計画です。