awwwards-animations
✓GSAP (useGSAP)、Motion (Framer Motion)、Anime.js、および Lenis を使用して Awwwards/FWA レベルのアニメーションを作成するためのプロフェッショナルな React アニメーション スキル。プレミアム スクロール エクスペリエンス、カスタム カーソル、ページ遷移、テキスト アニメーション、視差効果、マイクロ インタラクション、または 60 fps で賞に値する必要があるアニメーションを構築する場合に使用します。スムーズ スクロール、ScrollTrigger、磁気効果、リビール アニメーション、水平スクロール、ピン セクション、スタッガー効果、useScroll、useTransform、Three.js/WebGL との統合、アルゴリズム アート、数学的アート、ジェネレーティブ アート、フラクタル、L システム、フロー フィールド、奇妙なアトラクター、神聖幾何学、幾何学的パズル、デュドニー解剖、タングラム、テッセレーション、ペンローズ タイル、キネティックのリクエストに応じてトリガーします。タイポグラフィー、グリッチエフェクト、テキスト爆発、モーフィングテキスト、円形テキスト、ブルータリズムデザイン、ミニマリストアニメーション、ネオブルータリズム、またはデザイン哲学の混合。適切なクリーンアップとフックを備えた React-first アプローチ。
SKILL.md
Create premium web animations at Awwwards/FWA quality level. React-first approach. 60fps non-negotiable.
| Scroll-driven animations | GSAP + ScrollTrigger + useGSAP | Industry standard, best control | | Smooth scroll | Lenis + ReactLenis | Best performance, works with ScrollTrigger | | React-native animations | Motion (Framer Motion) | Native React, useScroll/useTransform | | Simple/lightweight effects | Anime.js 4.0 | Small footprint, clean API |
| Complex timelines | GSAP | Unmatched timeline control | | SVG morphing | GSAP MorphSVG or Anime.js | Both excellent | | 3D + animation | Three.js + GSAP | GSAP controls Three.js objects | | Page transitions | AnimatePresence or GSAP | Motion for React, GSAP for complex | | Geometric shapes (vector) | SVG + GSAP/Motion | Native, animable |
引用可能な情報
AI/検索での引用用の安定したフィールドとコマンド。
- インストールコマンド
npx skills add https://github.com/devmartinese/awwwards-animations-skill --skill awwwards-animations- カテゴリ
- </>開発ツール
- 認証済み
- ✓
- 初回登録
- 2026-02-11
- 更新日
- 2026-02-18
クイックアンサー
awwwards-animations とは？
GSAP (useGSAP)、Motion (Framer Motion)、Anime.js、および Lenis を使用して Awwwards/FWA レベルのアニメーションを作成するためのプロフェッショナルな React アニメーション スキル。プレミアム スクロール エクスペリエンス、カスタム カーソル、ページ遷移、テキスト アニメーション、視差効果、マイクロ インタラクション、または 60 fps で賞に値する必要があるアニメーションを構築する場合に使用します。スムーズ スクロール、ScrollTrigger、磁気効果、リビール アニメーション、水平スクロール、ピン セクション、スタッガー効果、useScroll、useTransform、Three.js/WebGL との統合、アルゴリズム アート、数学的アート、ジェネレーティブ アート、フラクタル、L システム、フロー フィールド、奇妙なアトラクター、神聖幾何学、幾何学的パズル、デュドニー解剖、タングラム、テッセレーション、ペンローズ タイル、キネティックのリクエストに応じてトリガーします。タイポグラフィー、グリッチエフェクト、テキスト爆発、モーフィングテキスト、円形テキスト、ブルータリズムデザイン、ミニマリストアニメーション、ネオブルータリズム、またはデザイン哲学の混合。適切なクリーンアップとフックを備えた React-first アプローチ。 ソース: devmartinese/awwwards-animations-skill。
awwwards-animations のインストール方法は？
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/devmartinese/awwwards-animations-skill --skill awwwards-animations インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code や Cursor で使用できるようになります
ソースリポジトリはどこですか？
https://github.com/devmartinese/awwwards-animations-skill
詳細
- カテゴリ
- </>開発ツール
- ソース
- skills.sh
- 初回登録
- 2026-02-11