Fable 与 Opus 同 Prompt 滚动页对比

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，已安装但未实际使用）

复用方法

关键决定

关键决定是把滚动驱动的电影感体验拆成四个独立机制分别给出精确参数：视频用 lerp 平滑逼近目标帧并带背压保护、文字用逐字符 ScrollTrigger 淡出上移、导航药丸用底部圆形扩散做悬停填色、玻璃面板用视差旋转增强立体感；四个机制各自独立又通过统一的黑白配色和字体系统拼成一个整体。

换到你的题材

换到你的题材时可以替换背景视频、漂浮文字内容、导航项和跑马灯品牌名单，骨架是视频擦动加漂浮文字的首屏、药丸导航的交互动画、以及玻璃面板承载第二段内容这三层结构。换成别的产品官网时保留 lerp 驱动视频和 ScrollTrigger 驱动文字这两套核心动画逻辑。

容易翻车

容易翻车的是视频 seeking 状态处理不当会导致滚动时出现黑帧或卡顿，逐字符动画在长文本上也容易性能骤降；复测时先快速滚动检查视频是否流畅无黑闪，再看文字消失动画的交错节奏是否均匀，同时确认移动端汉堡菜单和玻璃面板的模糊效果在低性能设备上仍可接受。

建议模型

Fable · Claude Opus

稳定度
成本: 中

创作者

viktoroddy

viktoroddy 在X输出 UI 工程化实践，《应式3D角色轮播动画UI》搭 Claude Sonnet 出方案，带可复现代码。

值得学习AI 编程(UI)稳定输出来源互动高

查看创作者 →

AI 编程(UI)X@Oluwaphilemon1 →

3D 超市包装式创意机构官网

@Oluwaphilemon1 使用 Claude Fable 5 · Three.js · Blender · GSAP完成的网页案例，包含公开结果、完整 Prompt 与原始来源。

Skill · 3D / 动效 Hero Skill · 个人作品集叙事

提示语

Claude Fable 5 和 GPT-5.6 很强🥵🥵🥵 下面是我如何使用 Claude 构建的 👇 提示词：「设计一个机构网站，把服务以 3D 超市商品包装的形式呈现」使用 Three.js 和 WebGL 在浏览器中实时渲染所有产品使用 Blender 制作包装模型，然后导出为 GLTF 以加载到 Three.js 中使用 GSAP 实现流畅的产品旋转和悬停交互如果你想做一个让客户感觉像是在购买高级商品的作品集，请保存这条 🛒

来源热度

稳定度

查看 Case →

AI 编程(UI)X@uxsweta →

3D 发票打印机 SaaS 组件

@uxsweta 使用 AI UI Builder完成的网页案例，包含公开结果、完整 Prompt 与原始来源。

Skill · 3D / 动效 Hero Skill · 产品与电商转化页

提示语

有几个人询问提示词，所以放在这里 👇 附言：根据你的使用场景进行调整。创建一个现代、极简的 3D 发票生成器机器组件，采用高级 SaaS 风格美学。视觉设计 - 设计一台宽幅横向的发票打印机，灵感来自小票打印机，但外观未来感十足且干净利落。 - 使用细微的灰色线条、柔和阴影和极少细节。 - 机器应显得高级、轻盈而现代，而不是写实或工业化。 - 保持整体设计足够干净，使其可以放入仪表盘或落地页的 Hero 区域。 - 直接在机器上添加一个醒目的 Print Inv

来源热度

稳定度

查看 Case →

AI 编程(UI)X@shushant_l →

极简 AI 顾问个人作品集

@shushant_l 使用 AI Website Builder完成的网页案例，包含公开结果、完整 Prompt 与原始来源。

Skill · 个人作品集叙事 Skill · 产品与电商转化页

提示语

下面介绍如何用 AI 以极简设计风格创建你的网站。使用这条提示：为一位数字创作者和 AI 顾问设计一个现代极简作品集网站。采用干净的黑、白和中性色调，不使用渐变、玻璃拟态或过度的视觉效果。注重简洁、留白、强有力的排版、清晰的层级和快速加载性能。加入首屏介绍与行动号召、关于版块、精选项目作品集、服务版块、客户评价、博客/文章预览、技能与工具展示、客户 Logo、联系表单和页脚。加入细微动效、平滑滚动、优雅的卡片布局、移动端优先的响应式设计，以及对 SEO 友好的结构。整体美

来源热度

稳定度

查看 Case →

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，已安装但未实际使用）

复用方法

关键决定

换到你的题材

容易翻车

建议模型

Fable · Claude Opus