Back to Details

gsap-awwwards-website

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

GSAP Awwwards Website

GSAP Awwwards 网站

A stunning product landing page with GSAP scroll animations, modern React 19 architecture, and Tailwind CSS 4 styling.
一个采用GSAP滚动动画、现代React 19架构和Tailwind CSS 4样式的惊艳产品着陆页。

Tech Stack

技术栈

  • Framework: React 19
  • Build Tool: Vite
  • Animation: GSAP
  • Styling: Tailwind CSS 4
  • Package Manager: npm
  • Output: 
    dist
    directory
  • Dev Port: 5173
  • 框架: React 19
  • 构建工具: Vite
  • 动画库: GSAP
  • 样式方案: Tailwind CSS 4
  • 包管理器: npm
  • 输出目录: 
    dist
    文件夹
  • 开发端口: 5173

Setup

设置步骤

1. Clone the Template

1. 克隆模板

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_template
mv _temp_template/* _temp_template/.* . 2>/dev/null || true
rm -rf _temp_template
bash
git clone --depth 1 https://github.com/Eng0AI/gsap-awwwards-website-template.git .
如果目标目录非空：
bash
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)

2. 移除Git历史记录（可选）

bash
rm -rf .git
git init
bash
rm -rf .git
git init

3. Install Dependencies

3. 安装依赖

bash
npm install
bash
npm install

Build

构建

bash
npm run build
Creates a production build in the 
dist/
directory.
bash
npm run build
在
dist/
目录中生成生产环境构建文件。

Deploy

部署

CRITICAL: For Vercel, you MUST use 
vercel build --prod
then 
vercel deploy --prebuilt --prod
. Never use 
vercel --prod
directly.
重要提示: 对于Vercel平台，必须先执行
vercel build --prod
，再执行
vercel deploy --prebuilt --prod
。切勿直接使用
vercel --prod
命令。

Vercel (Recommended)

Vercel（推荐）

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

Netlify

Netlify

bash
netlify deploy --prod --dir=dist
bash
netlify deploy --prod --dir=dist

Development

开发

bash
npm run dev
Opens at http://localhost:5173
bash
npm run dev
启动后访问 http://localhost:5173

Notes

注意事项

  • Static React site - no environment variables needed
  • Never run 
    npm run dev
    in VM environment
  • 静态React站点 - 无需环境变量
  • 切勿在虚拟机环境中运行
    npm run dev
    命令