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 Development32K5周前更新

Vercel React Native Skills

vercel-labs

精选

React Native 与 Expo 最佳实践规则，涵盖列表性能、动画、导航、UI 模式、状态与 monorepo 配置。

Software Development32K5周前更新

Vercel React Best Practices

vercel-labs

精选

Vercel 的 React 与 Next.js 性能指南，以 70 条规则的形式用于编写、审查和重构代码。

Software Development32K5周前更新