mcpField
G
gsap-awwwards-website

gsap-awwwards-website

github.com/rebyteai-templateデザイン・UI17812 回インストール19 週間前に更新
リポジトリ

gsap-awwwards-website について

静的サイトを作る開発者向けのReact 19製品ランディングページテンプレートです。GSAPのスクロールアニメーションとTailwind CSS 4のスタイルを組み合わせ、Viteで開発・ビルドできます。

主な機能

  1. 01React 19ランディングページテンプレート
  2. 02GSAPスクロールアニメーション
  3. 03Tailwind CSS 4のスタイル
  4. 04Viteによる開発とビルド
  5. 05distへの静的出力

活用シーン

  1. 01製品ランディングページの制作
  2. 02スクロールアニメーションサイトの作成
  3. 03静的なReactプロジェクトの開始

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/rebyteai-template/rebyte-skills --skill gsap-awwwards-website

インストール後、Claude Code で/gsap-awwwards-websiteを入力して読み込まれたか確認します。

詳細

GSAP Awwwards ウェブサイト

GSAP のスクロールアニメーション、最新の React 19 アーキテクチャ、Tailwind CSS 4 のスタイリングを採用した、魅力的なプロダクトランディングページです。

技術スタック

  • フレームワーク: React 19
  • ビルドツール: Vite
  • アニメーション: GSAP
  • スタイリング: Tailwind CSS 4
  • パッケージマネージャー: npm
  • 出力先: dist ディレクトリ
  • 開発ポート: 5173

セットアップ

1. テンプレートをクローンする
git clone --depth 1 https://github.com/Eng0AI/gsap-awwwards-website-template.git .

ディレクトリが空でない場合：

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. Git の履歴を削除する（任意）
rm -rf .git
git init
3. 依存関係をインストールする
npm install

ビルド

npm run build

dist/ ディレクトリに本番用ビルドを作成します。

デプロイ

重要: Vercel を使用する場合は、必ず vercel build --prod を実行してから vercel deploy --prebuilt --prod を実行してください。vercel --prod を直接使用しないでください。

Vercel（推奨）
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

開発

npm run dev

http://localhost:5173 で開きます

注意事項

  • 静的な React サイトのため、環境変数は不要です
  • VM 環境では npm run dev を実行しないでください

コメント

Markdown 対応