ホーム/前端开发/gsap-awwwards-website
G

gsap-awwwards-website

by @eng0aiv
4.7(66)

GSAPスクロールアニメーションとReact 19を使用してSPYLT製品ランディングページを構築し、スムーズなインタラクティブ体験を実現します。

GSAP (GreenSock Animation Platform)Awwwards DesignWeb AnimationFrontend DevelopmentJavaScriptGitHub
インストール方法
npx skills add eng0ai/eng0-template-skills --skill gsap-awwwards-website
compare_arrows

Before / After 効果比較

1
使用前

従来のウェブアニメーション開発は複雑で、パフォーマンス最適化が困難であり、スムーズなスクロール効果の実現が難しいです。ウェブサイトの視覚的表現力も不足しがちで、多くのウェブサイトの中で際立つことが困難です。

使用後

GSAP、React、Tailwindを組み合わせることで、高性能なスクロールアニメーションを簡単に実現できます。ウェブサイトの視覚効果は驚くほど素晴らしく、ユーザー体験も非常にスムーズで、Awwwardsレベルに到達します。

description SKILL.md


name: gsap-awwwards-website description: SPYLT product landing with GSAP scroll animations, React 19, and Tailwind CSS 4.

GSAP Awwwards Website

A stunning product landing page with GSAP scroll animations, modern React 19 architecture, and Tailwind CSS 4 styling.

Tech Stack

  • Framework: React 19
  • Build Tool: Vite
  • Animation: GSAP
  • Styling: Tailwind CSS 4
  • Package Manager: npm
  • Output: dist directory
  • Dev Port: 5173

Setup

1. Clone the Template

git clone --depth 1 https://github.com/Eng0AI/gsap-awwwards-website-template.git .

If the directory is not empty:

git clone --depth 1 https://github.com/Eng0AI/gsap-awwwards-website-template.git _temp_template
mv _temp_template/* _temp_template/.* . 2>/dev/null || true
rm -rf _temp_template

2. Remove Git History (Optional)

rm -rf .git
git init

3. Install Dependencies

npm install

Build

npm run build

Creates a production build in the dist/ directory.

Deploy

CRITICAL: For Vercel, you MUST use vercel build --prod then vercel deploy --prebuilt --prod. Never use vercel --prod directly.

Vercel (Recommended)

vercel pull --yes -t $VERCEL_TOKEN
vercel build --prod -t $VERCEL_TOKEN
vercel deploy --prebuilt --prod --yes -t $VERCEL_TOKEN

Netlify

netlify deploy --prod --dir=dist

Development

npm run dev

Opens at http://localhost:5173

Notes

  • Static React site - no environment variables needed
  • Never run npm run dev in VM environment

forumユーザーレビュー (0)

レビューを書く

効果
使いやすさ
ドキュメント
互換性

レビューなし

統計データ

インストール数1.7K
評価4.7 / 5.0
バージョン
更新日2026年3月16日
比較事例1 件

ユーザー評価

4.7(66)
5
0%
4
0%
3
0%
2
0%
1
0%

この Skill を評価

0.0

対応プラットフォーム

🔧Claude Code
🔧OpenClaw
🔧OpenCode
🔧Codex
🔧Gemini CLI
🔧GitHub Copilot
🔧Amp
🔧Kimi CLI

タイムライン

作成2026年3月16日
最終更新2026年3月16日