abdussalam0079/mustang-1969-70-web

# Mustang Reveal — Ducati 风格的电影级微型网站 ## 这是什么 这是一个使用 Next.js 14 + Tailwind + GSAP 构建的单页网站，其结构与 Ducati Superleggera V4 Centenario 网站相同：固定导航栏、滚动驱动的 hero 区域（使用你真实的 Mustang 素材 —— 通过滚动来浏览视频画面，而非线性播放）、数据统计栏、五个使用你真实 Mustang 照片的全出血（full-bleed）故事版块，以及结尾的 CTA。 ## 你的素材及其使用方式 - `public/frames/f_001.jpg` ... `f_090.jpg` — 从你的“Video Project.mp4”中以均匀间隔直接提取的 90 帧画面，用于滚动驱动的 hero 区域。 **针对第一版的修复：** hero 区域最初通过 `currentTime` 来定位（seek）你的原始 .mp4，但该视频在大约 390 帧的长度内仅有 3 个真实关键帧，因此浏览器不得不在每次滚动触发时从关键帧开始反向解码 —— 这正是你之前看到卡顿的原因。预先将帧提取为图像并将其绘制在 `` 上（这也是 Ducati 网站自身实际采用的技术），可以完全将视频解码移出滚动处理路径之外，因此现在在任何滚动速度下都能瞬间响应。 - `public/images/frame_00X.jpg` — 你原始 13 帧 PNG 中的 7 帧，已被压缩为适用于网页的 JPG 格式，用作 5 个故事版块及结尾 CTA 的背景图。 - `public/images/loading.jpg` — 在首次访问预加载这 90 帧画面时，显示在加载百分比后方的背景图。 - 未使用：`mustang.glb`（这是一个占位文本文件，并非真正的 3D 模型），`index.html`/`home.html`（不相关的占位脚手架），`helpers.js`（空占位文件）。 ## 运行项目 ``` npm install npm run dev ``` 打开 http://localhost:3000 ## 部署项目 推送到 GitHub，然后导入到 Vercel 中（或者在任意 Node 主机上运行 `npm run build && npm run start`）。无需环境变量。 ## 自定义配置 - 真实规格：编辑 `components/Stats.tsx` 中的 `stats` 数组 - 文案/版块顺序：编辑 `app/page.tsx` - 颜色/排版：编辑 `tailwind.config.ts` 和 `app/globals.css` - 替换更多/更好的照片：将它们放入 `public/images/` 目录下，并在 `app/page.tsx` 中进行引用

标签：React, Syscalls, Web动画, 单页应用, 后端开发