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

溯源 · 已核对已发布案例的 prompt 均经人工核对与原帖一致；平台逆向重构的 prompt 不予收录。核对原帖 ↗

适用模型与稳定度

建议模型

Fable · Claude Opus

稳定度: 68 / 100
成本: 中

AI 编程(UI)X

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 实现流畅的产品旋转和悬停交互如果你想做一个让客户感觉像是在购买高级商品的作品集，请保存这条 🛒

来源热度 · X

稳定度

查看 Case →

AI 编程(UI)Aceternity UI

3D 动画图钉

复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「3D Animated Pin」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。

Skill · 3D / 动效 Hero

提示语

// components/ui/3d-pin.tsx "use client"; import React, { useState } from "react"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; export const PinContainer = ({ children, title, href, className, containerClassName…

来源热度 · Aceternity UI

—

稳定度

查看 Case →

AI 编程(UI)X2026/09/06

高密度 3D 浏览器森林生成器

一个复杂的提示词，用于利用 Three.js 风格优化和逼真光照，在浏览器中生成精细的实时 3D 森林环境。

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

提示语

首先搜索 "/unlazy" skill，完整阅读它，并在整个任务中持续使用。将此视为一项至少持续 {argument name="minimum duration" default="5 小时"} 的大型视觉构建。如果环境允许，最好进行 {argument name="optimal duration" default="8–24 小时"} 有实质意义的实现和迭代。不要在制作出一个还不错的场景后就停下。在浏览器中创建一个细节极其丰富的实时 {argument nam

来源热度 · X

稳定度

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

溯源 · 已核对已发布案例的 prompt 均经人工核对与原帖一致；平台逆向重构的 prompt 不予收录。核对原帖 ↗

适用模型与稳定度

建议模型

Fable · Claude Opus