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. 04使用 Vite 开发和构建
  5. 05输出静态文件至 dist

适用场景

  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