SynapseX 全屏 3D Hero

我只用一个 Prompt 就构建了这个动画 3D 网站。

Grok Imagine 1.5 + Grok Build。

Prompt：
为名为 “SynapseX” 的品牌制作一个单页全屏 Hero 区块，使用 React、Vite、Tailwind CSS v4 和 Framer Motion（motion/react）。桌面端使用 lenis 库实现平滑滚动。页面是一个由视频作为背景、带滚动驱动动画和文字扰动效果的深色电影感全屏落地页。

--- 技术栈：
- React 19、Vite、TypeScript
- Tailwind CSS v4（通过 @tailwindcss/vite 插件）
- motion（Framer Motion v12+，从 motion/react 导入）
- lenis，仅桌面端使用平滑滚动
- 字体：来自 Google Fonts 的 Space Mono 等宽字体（所有字体族 sans、serif、mono 均使用它）
- Bootstrap Icons CDN，用于 Apple 图标（bi bi-apple）

--- 字体 / CSS 设置（index.css）：
- 导入 Google Fonts：Space Mono 的 400、700 和斜体变体
- 从 jsdelivr 导入 Bootstrap Icons CSS
- 导入 tailwindcss
- 将所有 Tailwind 字体主题变量（--font-sans、--font-serif、--font-inter、--font-mono）覆盖为 “Space Mono”, monospace
- html、body 使用 font-family var(--font-sans)，黑色背景、白色文字、无 margin/padding、overflow-x hidden、overflow-y auto
- Lenis 兼容类（.lenis.lenis-smooth、.lenis.lenis-stopped、.lenis.lenis-scrolling iframe）

--- 背景视频（关键，请仔细阅读）：
- URL：
- 在 LiquidVideoCanvas 组件中渲染：一个固定全屏的 video 元素（loop、muted、playsInline、preload="auto"、object-cover）
- 重要：不要暗色叠加层。视频容器不得有暗色叠加、半透明黑层、bg-black/50、带 opacity 的 ::after 伪元素，也不得在视频上加渐变层。视频必须以自然亮度完全可见。唯一的容器背景只能是包装器 div 上的 bg-black（仅在视频加载前可见）。不要添加任何变暗滤镜、叠加层 div 或色调。
- 重要：必须严格遵循以下 Z-Index 分层：
  - 视频容器：fixed inset-0 z-[1]，这是最低层
  - 渐进模糊：fixed bottom-0 z-30
  - 主内容（文字、标题）：z-10（位于视频上方、Header 下方）
  - Header：z-50（最上层）
  - 根包装器为 relative，并设置 overflow-x-hidden。主内容区域不得设置会遮挡视频的背景色。视频必须始终透过内容层可见。不要在位于视频容器上方的任何元素上设置 bg-black。
- 视频滚动擦除（关键，帧定位逻辑）：
  - 视频不自动播放。其 currentTime 通过 requestAnimationFrame 根据滚动进度驱动，并使用 0.12 的 LERP 平滑。
  - 通过 if (!video.seeking) 守卫实现精确帧定位：只有浏览器完全完成上一帧渲染后，才请求新的视频帧定位。这可以防止跳帧、卡顿和黑闪。模式如下：
    if (!isSeeking && !video.seeking) { isSeeking = true; video.currentTime = clampedTime; } else { nextSeekTime = clampedTime; // 在当前定位完成后排队处理 }
    我们是在告诉浏览器：只有上一帧完全绘制后才更新视频帧。这对所有设备上的顺滑播放都很重要。没有这个守卫，多个重叠定位会让视频出现黑帧或卡顿。
  - 在 video 元素上监听 seeking 和 seeked 事件。在 seeked 时检查是否有排队的 nextSeekTime，然后执行它。
- 入场动画：
  - 从 scale 1.12、opacity 0 开始。当视频 readyState >= 3 时，用 1.4 秒的 cubic ease-out 动画到 scale 1.0、opacity 1。设置 3.5 秒安全超时作为回退。
- 滚动驱动视觉效果（直接通过 ref 操作 DOM，不要使用 React state）：
  - 渐进模糊：根据滚动进度从 0 到 55px（前半段保持 0 到 5px 的轻微基础模糊，后半段从 5px 激增到 55px）。