Gsap Awwwards Website

rebyteai-template/rebyte-skills/gsap-awwwards-website

作者 rebyteai-template0062e44684f109fb580e67fe600f581e01fa7209無授權條款收錄於 2026年10月9日更新於 2026年10月9日

SPYLT product landing with GSAP scroll animations, React 19, and Tailwind CSS 4.

僅含說明Software DevelopmentDevOps & Cloud
AI 產生的概覽

使用範本儲存庫建立、建置並部署具備 GSAP 捲動動畫的 React 19 產品著陸頁。

功能
此技能說明如何複製 GSAP Awwwards 網站範本、以 npm 安裝相依套件，並在 dist 目錄產生正式建置。它也提供 Vercel 與 Netlify 的部署指令，以及執行於 5173 連接埠的本機開發伺服器。最終產出是一個採用 Tailwind CSS 4 樣式、由 GSAP 驅動動畫的靜態 React 19 著陸頁。
適用情境
當你想依據所提供的範本建立、建置或部署具捲動動畫的產品著陸頁時使用。它適合需要 React 19、Vite 與 Tailwind CSS 4 前端並搭配 GSAP 動畫的專案。
執行需求
需要含 npm 的 Node.js、用於複製範本儲存庫與安裝套件的網路存取，以及 Vercel 或 Netlify CLI 和用於部署的 VERCEL_TOKEN。此技能不附帶指令碼，僅為操作說明。

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

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

If the directory is not empty:

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

2. Remove Git History (Optional)

bash
rm -rf .gitgit init

3. Install Dependencies

bash
npm install

Build

bash
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)

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

Netlify

bash
netlify deploy --prod --dir=dist

Development

bash
npm run dev

Opens at http://localhost:5173

Notes

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

來源與署名

來源：rebyteai-template/rebyte-skills位於gsap-awwwards-website提交0062e44

授權條款： 無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

更多來自 rebyteai-template/rebyte-skills 的技能

Awwwards Landing Page

rebyteai-template

建立、建置並部署一個帶動畫的 Next.js 設計師作品集著陸頁範本。

Design & Creative2026年10月9日

更多Software Development技能

Playground

anthropics

精選

建立自成一體的互動式 HTML 遊樂場，包含控制項、即時預覽與可複製的提示詞輸出。

Software Development37K今天更新

M5 Onboard

anthropics

精選

透過 USB 偵測 M5Stack ESP32 開發板，燒錄 UIFlow 2.0 韌體並安裝 MicroPython 應用程式套件。

Software Development37K今天更新

Cardputer Buddy

anthropics

精選

指導迭代 Cardputer-Adv 的 MicroPython 應用程式套件：新增應用程式、透過 USB 序列埠推送檔案、查看日誌並執行 REPL 指令。

Software Development37K今天更新

Web Design Guidelines

vercel-labs

精選

依據從遠端來源取得的 Web Interface Guidelines 審查 UI 程式碼，並以 file:line 形式回報問題。

Software Development32K6 週前更新

Vercel React Native Skills

vercel-labs

精選

React Native 與 Expo 最佳實務規則，涵蓋清單效能、動畫、導覽、UI 模式、狀態與 monorepo 設定。

Software Development32K6 週前更新

Vercel React Best Practices

vercel-labs

精選

Vercel 的 React 與 Next.js 效能指南，以 70 條規則的形式用於撰寫、審查與重構程式碼。

Software Development32K6 週前更新