Fable 与 Opus 同 Prompt 滚动页对比

❤️‍🔥 一键获取所有高级 AI 网站的提示词：

用 React + TypeScript + Vite + Tailwind CSS v4 构建一个滚动驱动的 Hero 落地页。页面为黑色背景，白色文字，包含 3 个主要元素：一个随滚动擦动的背景视频、一个滚动时淡出的漂浮文字叠加层、一个药丸形状的导航栏，以及一个从下方滑入的玻璃面板。

---

## 视频（背景，随滚动擦动）

URL：``

- 固定定位，铺满整个视口，z-index 0，外层容器缩放 1.05，视频元素本身缩放 1.35（用于覆盖鼠标视差效果的范围）。
- 视频始终暂停；播放进度由滚动手动控制。
- 若视频源是 .m3u8，使用 HLS.js，否则使用原生 `<video>`。
- 滚动擦动逻辑使用 `requestAnimationFrame` 循环：
- 计算 `scrollProgress = window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)`，限制在 0 到 1 之间。
- `targetTime = progress * (video.duration - 0.05)`
- 平滑插值：`currentTime += (targetTime - currentTime) * 0.08`
- 背压保护：仅当 `!video.seeking` 且差值大于 0.01 时才设置 `video.currentTime`。
- 外层容器的鼠标视差：在 `mousemove` 时，用 GSAP 根据归一化的鼠标位置对 `x` 和 `y` 做 ±30px 的补间动画，时长 1.5 秒，缓动函数 `power2.out`。
- 在 `canplay` 触发之前显示一个加载叠加层（「Loading... X%」），并追踪缓冲进度。

---

## 滚动漂浮文字

**文字：**「Unleash The
完整力量」（两行）

**字体：** 自定义字体「Dirtyline 36 Days of Type 2022」，通过 `@font-face` 从 `/Dirtyline-36daysoftype-2022.woff2` 加载。注册为 Tailwind 字体 `font-dirtyline`。

- 固定定位，铺满整个视口，flex 纵向排列，`justify-end`，内边距 `p-4 md:p-8`，`pointer-events-none`，z-10。
- 字号：`clamp(4rem, 15vw, 317px)`，行高：0.85，字间距：0%。
- 每个字符都包裹在一个 `<span class="char">` 中，`display: inline-block`。单词也用行内块元素包裹，避免单词中间被截断。
- 对所有 `.char` 元素使用 GSAP ScrollTrigger 动画：
- 起始状态：`opacity: 1, yPercent: 0, scaleY: 1, scaleX: 1, transformOrigin: '50% 0%'`
- 结束状态：`opacity: 0, yPercent: 250, scaleY: 1.2, scaleX: 0.9`
- 交错时间：0.05，缓动：`power2.inOut`，时长：1
- ScrollTrigger：触发元素为 `document.body`，起点 `top top`，终点 `+=600`，scrub: 1.5

---

## 药丸导航栏

- 固定定位，水平居中，`top: 24px`，z-100。
- 字体：Manrope（Google Fonts），600 字重，14px，全大写，字间距 0.05em。
- 结构：圆形 Logo 药丸（48x48px，黑色背景，白色四瓣花朵 SVG 图标）加相邻的圆角药丸导航条。
- 导航项：HOME、ABOUT、SERVICES、CONTACT。每个药丸背景色 `#f0f0f0`，黑色文字，`border-radius: 50px`，内边距 `8px 24px`。
- 悬停动画（每个药丸的 GSAP 时间线）：
- 一个位于底部的隐藏圆形元素扩展（`scale: 3`）以黑色填满药丸。
- 标签文字向上滑出（`yPercent: -100`），同时一个重复的白色标签从下方滑入（`yPercent: 100 -> 0`）。
- 鼠标移出时反向执行。
- 入场动画：Logo 从 0 缩放，缓动 `back.out(1.7)`；导航项宽度从 0 开始动画，延迟 0.2 秒。
- Logo 悬停时旋转 360 度（GSAP `rotation: +=360`，时长 0.2）。
- HOME 点击：GSAP `scrollTo: 0`，时长 3 秒，`power3.inOut`。
- ABOUT 点击：GSAP `scrollTo: document.body.scrollHeight`，时长 3 秒，`power3.inOut`。
- 移动端（<768px）：隐藏导航项，替换为汉堡菜单（两条白线，点击后动画变为 X），弹出下拉菜单。

---

## 玻璃面板（第二版块）

- 定位在一个高度为 350vh 的相对定位容器的 `absolute bottom-0`。
- 使用 GSAP ScrollTrigger 从视口下方滑入：`y: '100%'` 到 `y: '0%'`，触发元素为该版块本身，起点 `top bottom`，终点 `bottom bottom`，scrub 1.5，缓动 `none`。
- 鼠标视差：根据鼠标位置做 `x/y` ±20px，以及 `rotationY` ±4 度和 `rotationX` ±4 度，缓动 `power3.out`，时长 1 秒。
- 面板尺寸：`max-w-[1250px]`，`h-[900px]`，`max-h-[85vh]`，`mb-8`，`perspective: 1000px`。
- 玻璃效果：`background-color: rgba(0, 0, 0, 0.16)`，`backdrop-filter: blur(160px)`，`border: 1px solid rgba(255, 255, 255, 0.1)`，`border-radius: 1.5rem`，`transformStyle: preserve-3d`，`willChange: transform`。
- 内部内容：
- 居中文字：「About Us」，斜体衬线字体（Google Fonts 的 Instrument Serif），`text-white/70`，`text-base md:text-lg`。
- 大标题（Instrument Serif）：「We transform sterile concrete into thriving *urban* jungles. Our innovative designs bring wild *nature* back to modern cities. Experience the *bloom*」——斜体单词用 `<span class="italic">` 包裹。字号 `text-4xl md:text-6xl lg:text-[96px]`，行高 `1.1 / lg:92.6px`，字间距收紧，最大宽度 `max-w-[1000px]`。
- 底部跑马灯：品牌 VOICEFLOW、ZENDESK、PENDO、GLIDE、CANVA 重复 4 次，`border-t border-white/10`，无限水平滚动动画（`translateX(-50%)`，20 秒线性），`opacity-40 hover:opacity-100`，全大写，半粗体，`text-sm`，`tracking-widest`，`px-8`。

---

## 全局 CSS / 字体

- Google Fonts：`Manrope`（400-700）和 `Instrument Serif`（正常加斜体）。
- 自定义字体：`Dirtyline36Daysoftype2022`，来自 `/Dirtyline-36daysoftype-2022.woff2`。
- Tailwind v4 `@theme` 块定义 `--font-sans`、`--font-serif`、`--font-dirtyline` 和 `--animate-marquee` 关键帧。
- Body：`background-color: black; color: white;`

---

## 页面结构（App.tsx）

```
<ScrollVideo src={VIDEO_SRC} />  （固定全屏）
<PillNav />  （固定顶部居中）
<div style="position: relative; height: 350vh">
<ScrollFloat>Unleash The
Full Power</ScrollFloat> （固定叠加层）
<GlassPanel /> （absolute bottom-0）
</div>
```

---

## 依赖项

- `react`、`react-dom`（v19）
- `gsap`（v3.12+），含 ScrollTrigger 和 ScrollToPlugin
- `hls.js`（v1.5+）
- `tailwindcss` v4，配 `@tailwindcss/vite`
- `lucide-react`
- `motion`（v12，已安装但未实际使用）
- `react-router-dom`（v7，已安装但未实际使用）