mcpField
A
awwwards-landing-page

awwwards-landing-page

github.com/rebyteai-template设计与 UI171.3k 次安装19 周前更新
代码仓库

关于 awwwards-landing-page

面向开发者和设计师的 Next.js 作品集落地页模板，结合 Locomotive Scroll、GSAP 和 Framer Motion 实现滚动与动画效果。

主要功能

  1. 01Next.js 落地页模板
  2. 02集成 Locomotive Scroll
  3. 03GSAP 与 Framer Motion 动效
  4. 04无需环境变量的静态站点

适用场景

  1. 01制作作品集落地页
  2. 02创建滚动动画网站
  3. 03启动静态 Next.js 项目

安装

复制下面的命令，在终端中运行。

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

安装后在 Claude Code 中输入/awwwards-landing-page确认已加载。

详细介绍

Awwwards 落地页

一个令人惊艳的作品集落地页，使用 Locomotive Scroll、GSAP 和 Framer Motion 实现流畅的滚动动画。

技术栈

  • 框架：Next.js
  • 动画：Locomotive Scroll、GSAP、Framer Motion
  • 包管理器：pnpm 或 npm
  • 开发端口：3000

设置

1. 克隆模板
git clone --depth 1 https://github.com/Eng0AI/awwwards-landing-page-template.git .

如果目录不为空：

git clone --depth 1 https://github.com/Eng0AI/awwwards-landing-page-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

部署

重要：使用 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

开发

npm run dev

访问 http://localhost:3000

备注

  • 这是静态 Next.js 网站，无需环境变量
  • 切勿在 VM 环境中运行 npm run dev

评论

支持 Markdown