Cocktail - Velvet Pour

一个使用 React + GSAP + Lenis 构建的现代化鸡尾酒展示网站，专注于提供流畅的滚动体验和精美的动画效果。

技术栈

• 框架: React 19.1.1
• 语言: TypeScript 5.8.3
• 构建工具: Vite 7.1.2
• 样式: TailwindCSS 4.1.13
• 动画: GSAP 3.13.0
• 平滑滚动: Lenis 1.3.11
• 响应式: react-responsive 10.0.1
• 包管理器: pnpm

功能特性

核心功能

• 精美的鸡尾酒展示页面
• 流畅的平滑滚动体验
• 丰富的滚动触发动画
• 响应式设计，完美支持移动端
• 视频同步滚动展示
• 现代化的 UI 设计

页面结构

• Navbar: 导航栏，支持滚动时背景渐变
• Hero: 首页横幅，包含文字拆分动画和视频展示
• Cocktails: 鸡尾酒产品展示
• About: 关于我们页面
• Art: 调酒艺术展示
• Menu: 菜单展示
• Contact: 联系方式和门店信息

动画效果

• 文字拆分动画（SplitText）
• 滚动触发动画（ScrollTrigger）
• 视频时间轴同步
• 叶片装饰元素滚动动画
• 导航栏背景渐变

项目结构

cocktail/
├── public/
│   ├── images/          # 图片资源
│   ├── fonts/           # 字体文件
│   ├── json/            # 静态数据
│   ├── videos/          # 视频资源
│   └── readme/          # 说明图片
├── src/
│   ├── components/      # React 组件
│   │   ├── About.tsx
│   │   ├── Art.tsx
│   │   ├── Cocktails.tsx
│   │   ├── Contact.tsx
│   │   ├── Hero.tsx
│   │   ├── Menu.tsx
│   │   └── Navbar.tsx
│   ├── App.tsx          # 主应用组件
│   ├── main.tsx         # 入口文件
│   └── index.css        # 全局样式
├── constants/
│   └── index.ts         # 常量和数据定义
├── index.html           # HTML 模板
├── vite.config.ts       # Vite 配置
├── tsconfig.json        # TypeScript 配置
└── package.json         # 项目依赖

安装和运行

前置要求

• Node.js >= 18.0.0
• pnpm >= 8.0.0

安装依赖

pnpm install

开发模式

启动开发服务器（默认端口: 8080）：

pnpm dev

开发服务器将自动在浏览器中打开，支持热模块替换（HMR）。

构建生产版本

pnpm build

构建产物将输出到 dist/ 目录。

预览生产构建

pnpm preview

代码检查

pnpm lint

开发指南

添加新的鸡尾酒

在 constants/index.ts 中的 allCocktails 数组添加新的鸡尾酒信息：

{
  id: 5,
  name: "鸡尾酒名称",
  image: "/images/图片路径.png",
  title: "标题",
  description: "描述文字"
}

修改导航链接

在 constants/index.ts 中的 navLinks 数组修改导航链接：

{
  id: "section-id",
  title: "显示文字"
}

自定义动画

项目使用 GSAP 进行动画控制，主要动画逻辑在各组件的 useGSAP hook 中实现。可以参考 Hero.tsx 和 Navbar.tsx 了解如何使用 GSAP 插件。

平滑滚动配置

在 App.tsx 中可以调整 Lenis 的平滑滚动参数：

options={{
  autoRaf: false,
  duration: 1.2,     // 滚动持续时间
  lerp: 0.05,        // 平滑度（0-1，值越小越丝滑）
  smoothWheel: true, // 鼠标平滑滚动
}}

浏览器支持

• Chrome (推荐)
• Firefox
• Safari
• Edge

建议使用最新版本的浏览器以获得最佳体验。

性能优化

• 使用 Vite 的快速构建和 HMR
• GSAP 的 ticker 优化与 Lenis 平滑滚动集成
• 视频预加载优化
• 响应式图片加载

注意事项

• 项目使用了 GSAP 的付费插件（SplitText），确保你有相应的授权
• 视频文件较大，建议使用压缩后的视频以提高加载速度
• 图片资源位于 public/images/ 目录，确保路径正确

许可证

本项目仅供学习和参考使用。

联系方式

如有问题或建议，欢迎提交 Issue 或 Pull Request。