提示词
❤️🔥 一键获取所有高级 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，已安装但未实际使用）原文提示词（English）
❤️🔥 Access ALL prompts for Premium AI websites in one click:
Build a scroll-driven hero landing page in React + TypeScript + Vite + Tailwind CSS v4. The page has a black background, white text, and 3 main elements: a scroll-scrubbed background video, a floating text overlay that animates out on scroll, a pill-shaped navigation bar, and a glass panel that slides up from below.
---
## VIDEO (Background, scroll-scrubbed)
**URL:** ``
- Fixed position, full viewport, z-index 0, scaled 1.05 at the wrapper and 1.35 on the video element itself (for parallax mouse effect coverage).
- Video is always paused; time is controlled manually via scroll.
- Uses HLS.js if the source is `.m3u8`, otherwise native `<video>`.
- Scroll-scrubbing logic uses `requestAnimationFrame` loop:
- Calculates `scrollProgress = window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)`, clamped 0-1.
- `targetTime = progress * (video.duration - 0.05)`
- Smooth interpolation: `currentTime += (targetTime - currentTime) * 0.08`
- Back-pressure guard: only sets `video.currentTime` when `!video.seeking` and delta > 0.01.
- Mouse parallax on the wrapper: on `mousemove`, GSAP tweens `x` and `y` by +/-30px based on normalized mouse position, duration 1.5s, `power2.out` ease.
- Shows a loading overlay ("Loading... X%") until `canplay` fires, with buffer progress tracked.
---
## SCROLL FLOAT TEXT
**Text:** "Unleash The
Full Power" (two lines)
**Font:** Custom "Dirtyline 36 Days of Type 2022" loaded from `/Dirtyline-36daysoftype-2022.woff2` via `@font-face`. Registered as Tailwind font `font-dirtyline`.
- Fixed position, full viewport, flex column, `justify-end`, padding `p-4 md:p-8`, `pointer-events-none`, z-10.
- Font size: `clamp(4rem, 15vw, 317px)`, line-height: 0.85, letter-spacing: 0%.
- Each character is wrapped in a `<span class="char">` with `display: inline-block`. Words are wrapped in inline-block spans to prevent mid-word breaks.
- GSAP ScrollTrigger animation on all `.char` elements:
- From: `opacity: 1, yPercent: 0, scaleY: 1, scaleX: 1, transformOrigin: '50% 0%'`
- To: `opacity: 0, yPercent: 250, scaleY: 1.2, scaleX: 0.9`
- Stagger: 0.05, ease: `power2.inOut`, duration: 1
- ScrollTrigger: trigger `document.body`, start `top top`, end `+=600`, scrub: 1.5
---
## PILL NAVIGATION
- Fixed, centered horizontally, `top: 24px`, z-100.
- Font: Manrope (Google Fonts), 600 weight, 14px, uppercase, 0.05em tracking.
- Structure: circular logo pill (48x48px, black bg, white SVG 4-petal flower icon) + adjacent rounded pill bar containing nav items.
- Nav items: HOME, ABOUT, SERVICES, CONTACT. Each pill has `#f0f0f0` background, black text, `border-radius: 50px`, padding `8px 24px`.
- Hover animation (GSAP timeline per pill):
- A hidden circle element positioned at bottom expands (`scale: 3`) to fill the pill with black.
- Label text slides up (`yPercent: -100`) and a duplicate white label slides in from below (`yPercent: 100 -> 0`).
- On leave, reverses.
- Entry animation: logo scales from 0 with `back.out(1.7)` ease; nav items width animates from 0 with 0.2s delay.
- Logo spins 360 degrees on hover (GSAP `rotation: +=360`, duration 0.2).
- HOME click: GSAP `scrollTo: 0`, duration 3s, `power3.inOut`.
- ABOUT click: GSAP `scrollTo: document.body.scrollHeight`, duration 3s, `power3.inOut`.
- Mobile (<768px): nav items hidden, replaced with hamburger (two white lines that animate to X on click), popover dropdown menu.
---
## GLASS PANEL (Second Section)
- Positioned `absolute bottom-0` of a 350vh tall relative container.
- Slides up from below viewport using GSAP ScrollTrigger: `y: '100%'` to `y: '0%'`, trigger is the section itself, start `top bottom`, end `bottom bottom`, scrub 1.5, ease `none`.
- Mouse parallax: `x/y` +/-20px, plus `rotationY` +/-4deg and `rotationX` +/-4deg based on mouse, `power3.out` ease, 1s duration.
- Panel dimensions: `max-w-[1250px]`, `h-[900px]`, `max-h-[85vh]`, `mb-8`, `perspective: 1000px`.
- Glass effect: `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`.
- Content inside:
- Centered text: "About Us" in italic serif (Instrument Serif from Google Fonts), `text-white/70`, `text-base md:text-lg`.
- Large heading (Instrument Serif): "We transform sterile concrete into thriving *urban* jungles. Our innovative designs bring wild *nature* back to modern cities. Experience the *bloom*" -- italic words are `<span class="italic">`. Font size `text-4xl md:text-6xl lg:text-[96px]`, leading `1.1 / lg:92.6px`, tracking-tight, max-w-[1000px].
- Bottom marquee: brands VOICEFLOW, ZENDESK, PENDO, GLIDE, CANVA repeated 4x, `border-t border-white/10`, infinite horizontal scroll animation (`translateX(-50%)` over 20s linear), `opacity-40 hover:opacity-100`, uppercase, semibold, `text-sm`, `tracking-widest`, `px-8`.
---
## GLOBAL CSS / FONTS
- Google Fonts: `Manrope` (400-700) and `Instrument Serif` (normal + italic).
- Custom font: `Dirtyline36Daysoftype2022` from `/Dirtyline-36daysoftype-2022.woff2`.
- Tailwind v4 `@theme` block defines `--font-sans`, `--font-serif`, `--font-dirtyline`, and `--animate-marquee` keyframes.
- Body: `background-color: black; color: white;`
---
## PAGE STRUCTURE (App.tsx)
```
<ScrollVideo src={VIDEO_SRC} /> (fixed fullscreen)
<PillNav /> (fixed top center)
<div style="position: relative; height: 350vh">
<ScrollFloat>Unleash The
Full Power</ScrollFloat> (fixed overlay)
<GlassPanel /> (absolute bottom-0)
</div>
```
---
## DEPENDENCIES
- `react`, `react-dom` (v19)
- `gsap` (v3.12+) with ScrollTrigger and ScrollToPlugin
- `hls.js` (v1.5+)
- `tailwindcss` v4 with `@tailwindcss/vite`
- `lucide-react`
- `motion` (v12, installed but not actively used)
- `react-router-dom` (v7, installed but not actively used)建议模型
Fable · Claude Opus
视频地址
https://media.goodcase.ai/media/video/fable-opus-prompt-12601c6e0cf5.mp4
