Communitygithub.com

devmartinese/awwwards-animations

Awwwards/FWAレベルのスクロール体験、カスタムカーソル、ページトランジション、テキストアニメーションなどを構築するためのプロフェッショナルReactアニメーションスキル。GSAP、Motion(Framer Motion)、Anime.js、Lenisを使用し、60fpsの高品質なアニメーションを実現します。

awwwards-animations とは?

このスキルは、ReactアプリケーションにおいてAwwwardsやFWAレベルのアニメーションを実装するためのプロフェッショナルツールです。GSAP(useGSAP)、Motion(Framer Motion)、Anime.js、Lenisなどの主要なアニメーションライブラリを活用し、スムーズスクロール、ScrollTrigger、マグネティック効果、リビールアニメーション、水平スクロール、ピンセクション、スタッガー効果、useScroll、useTransformといった高度な機能を提供します。Three.js/WebGLとの連携にも対応しており、アルゴリズムアート、数理アート、ジェネラティブアート、フラクタル、L-system、流動場、ストレンジアトラクター、神聖幾何学、幾何学パズル、タングラム、テッセレーション、ペンローズタイルなどの複雑なビジュアル表現も実現可能です。また、キネティックタイポグラフィ、グリッチ効果、テキスト爆発、モーフィングテキスト、円形テキスト、ブルータリズムデザイン、ミニマリストアニメーション、ネオブルータリズムといった最新のデザイン哲学を統合したアニメーションを構築できます。Reactファーストのアプローチを採用し、useEffectやフックを使った適切なクリーンアップ処理が組み込まれているため、パフォーマンスとメンテナンス性に優れています。このスキルはClaude Code、Coder、Cursor、Copilot、Codex、Windsurfなど主要なAIエージェントプラットフォームで動作し、プロジェクトに賞に値するアニメーションを簡単に追加できます。

対応~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/devmartinese/awwwards-animations-skill/tree/main/skills/awwwards-animations

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

awwwards-animations は何をしますか?

Awwwards/FWAレベルのアニメーションをGSAP(useGSAP)、Motion(Framer Motion)、Anime.js、Lenisを使用して作成するためのプロフェッショナルReactアニメーションスキルです。プレミアムなスクロール体験、カスタムカーソル、ページトランジション、テキストアニメーション、パララックス効果、マイクロインタラクション、または60fpsで賞に値するアニメーションが必要なあらゆる場面で使用してください。スムーズスクロール、ScrollTrigger、マグネティック効果、リビールアニメーション、水平スクロール、ピンセクション、スタッガー効果、useScroll、useTransform、Three.js/WebGLとの統合、アルゴリズムアート、数理アート、ジェネラティブアート、フラクタル、L-system、流動場、ストレンジアトラクター、神聖幾何学、幾何学パズル、デュードニー分割、タングラム、テッセレーション、ペンローズタイル、キネティックタイポグラフィ、グリッチ効果、テキスト爆発、モーフィングテキスト、円形テキスト、ブルータリズムデザイン、ミニマリストアニメーション、ネオブルータリズム、またはデザイン哲学の混合のリクエスト時にトリガーされます。Reactファーストのアプローチで、適切なクリーンアップとフックを備えています。

関連スキル