motion-catalogue

motion-catalogue

モーションデザイン、アニメーション、3D、シェーダー、ジェネレーティブメディアのドメインナビゲーターです。 ユーザーがこれらの分野のスキルを求めたときに有効化してください。

→ すべてのドメインを含むカタログ全体については、design-catalogueを使用してください。

使用するタイミング

以下のような場合に有効化してください。

• アニメーションライブラリ（GSAP、Framer Motion、Lottie、CSS アニメーション）について尋ねられた場合
• 3D（Three.js、WebGPU、シェーダー、WebGL、R3F）が必要な場合
• ジェネレーティブアート（p5.js、アルゴリズムアート、クリエイティブコーディング）が必要な場合
• 動画／メディア生成（Remotion、fal.ai、ジェネレーティブメディア）を求められた場合

モーションとアニメーション

スキル	最適な用途
gsap-skills	GSAP 公式：8 つのスキル — コア、タイムライン、ScrollTrigger、Flip、Draggable、SplitText
framer-motion-skills	Framer Motion の 6 つのスキル：コア、Next.js、バリアント、スクロール、ジェスチャー、レイアウト
motion-design-skill	LottieFiles 公式：タイミング、イージング、振り付け、ディズニーの 12 原則
animate-skill	Emil に着想を得た Next.js／React のパターン：ホバー、トースト、テキスト表示、モーダル
animate-css-skill	Animate.css v4 ＋ スクロールトリガー ＋ RTL ＋ prefers-reduced-motion
css-animation-skill	実際のアプリのデザイン言語をスクレイピングし、単体のアニメーションファイルを生成
wiggle-claude-skill	SVG ロゴをアニメーション化し、Lottie JSON → GIF ＋ MP4 に変換
emilkowalski-skill	アニメーションの意思決定フレームワーク、イージングカーブ、インタラクションの原則
claudedesignskills	22 スキルのバンドル：Three.js、GSAP、R3F、Framer、Babylon、A-Frame、PixiJS、Rive、Lottie
hyperframes	「HTML を記述 → 動画をレンダリング」：GSAP／CSS／Lottie／Three.js ＋ TTS（HeyGen）

ジェネレーティブアートとクリエイティブコーディング

スキル	最適な用途
algorithmic-art	p5.js、フローフィールド、パーティクルシステムを使ったジェネレーティブアート
p5js-hermes	p5.js のクリエイティブコーディング：ノイズ、パーティクル、GLSL、オーディオリアクティブ
remotion	React を使ったプログラムによる動画制作

3D、シェーダー、メディア

スキル	最適な用途
shader-dev	GLSL シェーダー：レイマーチング、流体シミュレーション、WebGL エフェクト
cloudai-threejs	Three.js による 3D シーン、アニメーション、WebGL
webgpu-claude-skill	Three.js TSL、ノードマテリアル、GPU コンピュート、WGSL — r183+
threejs-ecs-ts	Three.js ＋ エンティティコンポーネントシステム ＋ TypeScript
threejs-claude-skill-package	24 スキル：WebGL、WebGPU、R3F、物理演算、IFC／BIM 建築
fal-ai-skills	fal.ai による画像／動画と 3D モデルの生成
generative-media-skills	41 のワークフロー：Midjourney v7、Flux Kontext、Kling 3.0、Veo3、Suno オーディオ