霓虹逻辑

为“SynapseX”构建一个单页落地网站——这是一款未来主义神经 AI 界面产品。整个网站采用黑色背景、白色文字和全视口视频背景。所有文字均使用“Space Mono”（等宽字体）作为主字体。使用 React + TypeScript + Vite + Tailwind CSS + Framer Motion。

### 字体与外部资源

- **主字体：** Google Fonts 的“Space Mono”（所有字重：400、700、italic）
- **展示字体（仅用于背景水印）：** Google Fonts 的“Anton SC”
- **图标：** Bootstrap Icons CDN（`https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css`）——仅用于下载按钮中的 Apple 图标（`bi bi-apple`）
- **所有 Tailwind `fontFamily` 键**（`sans`、`serif`、`mono`）均覆盖为 `"Space Mono", monospace`

### 视频 URL（CloudFront——严格使用以下地址）

1. **Hero（鼠标擦洗，NOT autoplay）：**
   `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260622_083515_290e5a10-0b95-41af-a5e2-32b6389baa4d.mp4`

2. **第二部分（autoplay, muted, loop）：**
   `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260622_092455_089c54f8-3b03-4966-9df1-e9746063d0ef.mp4`

3. **指标部分（autoplay, muted, loop）：**
   `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260622_095810_ecea3dd2-fc5e-4e41-8696-4219290b6589.mp4`

4. **技术部分（autoplay, muted, loop）：**
   `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260622_095750_32a52ce0-2005-45c9-9093-41f03fde9530.mp4`

5. **页脚（autoplay, muted, loop）：**
   `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260622_080203_fd7f4f85-3a86-4837-8192-85e7bfe68e75.mp4`

### 依赖项

```json
"framer-motion": "^12.40.0",
"lucide-react": "^0.344.0",
"react": "^18.3.1",
"react-dom": "^18.3.1"
```

### 全局 CSS（`index.css`）

- 从 Google Fonts 导入 Space Mono
- 导入 Bootstrap Icons CSS
- Tailwind 指令（`@tailwind base/components/utilities`）
- CSS 变量：所有 `--font-*` 均设为 `"Space Mono", monospace`
- 全局重置：`* { margin: 0; padding: 0; box-sizing: border-box; }`
- `html, body`：`background: #000; color: #fff; overflow-x: hidden; overflow-y: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;`
- Lenis 平滑滚动工具类（`.lenis.lenis-smooth`、`.lenis.lenis-stopped`、`.lenis.lenis-scrolling iframe`）

### 自定义文字动画组件

#### 1. `ScrambleIn`——入场揭示动画
- Props：`text: string`、`delay: number`（开始前的毫秒延迟）、`triggered: boolean`
- 字符集：`ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+~|}{[]:;?><`
- 触发后（经过延迟）：每 25ms 运行一次 interval，以每帧 0.5 个字符的速度从左到右揭示字符
- 尚未揭示的字符显示随机字符（最多延伸至揭示光标前方 3 个字符）；更远的字符为空
- 空格始终显示为空格
- 触发前：渲染 ` `

#### 2. `ScrambleText`——悬停驱动的字符扰动
- Props：`text: string`、`isHovered: boolean`、`className?: string`
- 悬停时：用随机字符扰动所有字符，然后以每个字符 4 帧的速度从左到右揭示，interval 为 25ms
- 取消悬停时：立即重置为原始文字

### 自定义 SVG 标志（`SynapseXLogo`）

一个具有四重旋转对称性的抽象图形，在 `viewBox="-50 -50 100 100"` 的 SVG 中渲染。每个象限使用同一条 path，分别旋转 0/90/180/270 度：

```
M 1.5,23 L 1.5,33 C 1.5,38.5 6,43 11.5,43 L 16.5,43 C 22,43 26.5,38.5 26.5,33 Q 28,28 33,26.5 C 38.5,26.5 43,22 43,16.5 L 43,11.5 C 43,6 38.5,1.5 33,1.5 L 23,1.5 Q 12,12 1.5,23 Z
```

### 动画汉堡菜单（`SquashHamburger`）

- 3 条水平线（绝对定位的 spans）
- 桌面端：容器 18x12px，线条高度 1.5px
- 移动端：容器 15x10px，线条高度 1.2px
- 打开时：顶部线条旋转 45deg 并向下平移至中心；中间线条淡出并缩小消失；底部线条旋转 -45deg 并向上平移至中心
- Spring 动画：stiffness 300，damping 20

---

### 页面分区（按顺序）

---

#### SECTION 1：Hero（全视口高度）

- **背景：** Video #1，`object-cover`，加载时暂停。由鼠标擦洗控制：鼠标在视口中的水平移动使视频时间轴向前或向后擦洗。灵敏度系数：`0.8`。使用 `seeked` 事件串联 seek，避免丢帧。
- **入场动画：** 延迟 800ms 后，`entranceComplete` 状态变为 true——所有 Hero 内容淡入（opacity 0 -> 1，duration 1s）。
- **点阵网格叠加层：** `radial-gradient(#ffffff 1px, transparent 1px)`，网格为 24x24px，opacity 0.05，pointer-events-none
- **大型背景水印文字：** 单词“TRANSCENDENCE”，使用“Anton SC”字体，垂直居中（相对中心向下偏移 +50px），字号为 `clamp(120px, 30vw, 521px)`，uppercase，letter-spacing -4px。Opacity 0.10。颜色通过将 `radial-gradient(circle, rgba(142,127,148,0) 0%, #8E7F94 70%)` 设为 `background-clip: text` 并使用透明填充实现。
- **布局：** Flexbox column，padding 为 `px-4 sm:px-6 md:px-8 pt-20 sm:pt-24 pb-8 sm:pb-12`。使用 `flex-1` spacer 将内容推至底部。
- **底部行：** `flex-col gap-6 md:flex-row md:items-end md:justify-between`
  - **左栏**（`flex flex-col gap-4`）：
    - **h1** “Brain” / “And Body”（通过 `<br>` 分为两行）：`text-white font-light leading-[0.95] tracking-[-0.03em] text-[clamp(40px,10vw,100px)]`。两行分别使用 `ScrambleIn`，delay 为 200ms 和 500ms。
    - **描述段落**（motion.p）：向上淡入动画（y:25->0、opacity 0->1、duration 0.9s、cubic-bezier ease `[0.215, 0.610, 0.355, 1.000]`、delay 0.2s）。文字：“构建于神经科学与人工智能的交汇处。SynapseX 持续将神经通路、认知负荷和生理状态映射至一个自适应智能层中。”样式：`max-w-sm text-[13px] sm:text-[15px] text-white/60 leading-relaxed`
  - **右侧 h1** “One” / “Network”：样式与左侧 h1 相同，但使用 `text-left md:text-right`。ScrambleIn delay：700ms 和 1000ms。

---

#### NAVBAR（fixed，z-50）

- 固定在顶部，高度 80px（h-20），透明背景，全宽
- 随 `entranceComplete` 淡入（opacity 0->1，duration 0.8s）

**桌面端（低于 `sm` 时隐藏）：**
- 左侧组：两个胶囊并排，gap-2
  - **标志胶囊：** h-12、px-5、`bg-white/15 backdrop-blur-md rounded-[14px]`。包含 SynapseXLogo（18x18px，白色）和“SynapseX”文字（16px、font-medium、tracking-tight、白色）。WhileHover：scale 1.02 + bg rgba(255,255,255,0.22)。WhileTap：scale 0.98。菜单打开时在 `sm` 隐藏（`hidden md:flex`），否则正常显示。
  - **扩展菜单胶囊：** 使用 spring（stiffness 350、damping 28）将宽度从关闭时的 48px 动画扩展至打开时的 290px。h-12、`rounded-[14px]`、`bg-white/15 backdrop-blur-md`。包含：
    - 汉堡菜单按钮：关闭时 = 48x48px、rounded-[14px]；打开时 = 36x36px、rounded-[11px]，并使用 `bg-white/10 hover:bg-white/20 ml-1.5`
    - 导航链接（打开时淡入，offset x:15->0）：“About”和“Metrics”，悬停时使用 ScrambleText。16px、font-normal、text-white/85、hover:text-white。分别平滑滚动至 `window.innerHeight` 和 `window.innerHeight * 2`。
- 右侧：**下载按钮**——`h-12 px-6 bg-white rounded-full`，黑色文字。Apple 图标 + “Download”，悬停时使用 ScrambleText。WhileHover：scale 1.03 + bg #e2e2e6。WhileTap：scale 0.97。

**移动端（低于 `sm` 时可见）：**
- 缩小版本：h-9 胶囊、rounded-[10px]、较小文字（13px）；菜单打开时，标志胶囊使用动画缩至 width 0（spring stiffness 350、damping 28）。菜单胶囊打开时扩展至 100% 宽度。下载按钮：h-9 px-3.5 rounded-full。

---

#### SECTION 2：电影感文字（全视口高度）

- **背景：** Video #2，autoplay muted loop，object-cover
- **顶部渐变叠加层：** 高度 180px，从 `#010103` 到透明的 linear-gradient，z-10
- **内容：** 在具有 3D perspective（400px）的 `max-w-5xl` 容器中放置居中的大段文字
  - Framer Motion：`rotateX(24deg) translateY(${yScaleValue}px) translateZ(15px)`，其中 `yScaleValue` 根据平滑滚动进度从 60 转换为 -120（spring：stiffness 15、damping 32、mass 1.8）。Opacity 在滚动进度 0.3-0.5 之间从 0 淡入至 1。
  - 文字：“一个基于人类神经系统架构构建的神经 AI 界面。SynapseX 将突触活动转化为计算智能。每个信号都变得可测量、结构化且可见。它持续将内部状态重建为动态神经地图。生物噪声被过滤为可执行的认知模式。”
  - 样式：`font-sans font-normal text-[22px] sm:text-[30px] md:text-[36px] lg:text-[42px] text-white leading-[1.35] tracking-[-0.02em] select-none px-6 sm:px-12 text-center`

---

#### SECTION 3：指标（min-h-screen）

- **背景：** Video #3，autoplay muted loop，object-cover
- **布局：** 内容居中，`pt-32 pb-32 px-6`，max-w-6xl
- **副标题：** “性能指标”——`text-white/40 text-[13px] sm:text-[14px] tracking-[0.2em] uppercase mb-20 text-center`。滚动进入视口时淡入（whileInView、duration 1.2s、once、amount 0.3）。
- **指标网格：** md 为 3 列，移动端为 1 列，gap-16 md:gap-8。每项指标向上淡入（y:30->0、opacity、duration 0.8s，每项依次错开 0.15s delay）：
  - “2.4ms”——突触延迟
  - “99.7%”——信号准确率
  - “140B”——神经参数
  - 数值：`text-white text-[clamp(48px,10vw,96px)] font-light tracking-[-0.04em] leading-none`
  - 标签：`text-white/40 text-[13px] sm:text-[15px] mt-4 tracking-wide`

---

#### SECTION 4：技术 / 自适应智能（全视口高度）

- **背景：** Video #4，autoplay muted loop，object-cover
- **布局：** Flexbox column，`px-8 sm:px-12 md:px-16 py-12 sm:py-16`
- **顶部区域：** flex-col md:flex-row md:justify-between md:items-start gap-6
  - **左侧标题：** “Adaptive / Intelligence”（两行），`text-white font-light text-[clamp(36px,8vw,72px)] leading-[0.95] tracking-[-0.03em]`。向上淡入（y:40->0、duration 1.0s、whileInView once amount 0.3）。
  - **右侧段落：** “系统会在 72 小时内学习你的神经基线。从此，每种认知状态都会得到实时映射、预测和优化。”`text-white/50 text-[13px] sm:text-[15px] leading-relaxed max-w-xs md:text-right md:pt-2`。向上淡入（y:20->0、duration 1.0s、delay 0.2s）。
- **Spacer**（`flex-1`）
- **底部网格：** 移动端 2 列，md 为 4 列，gap-8 md:gap-6。滚动进入视口时淡入（duration 1.0s、delay 0.3s）。每项依次错开（y:20->0、duration 0.7s、delay i*0.1）：
  1. “皮层映射”——“实时空间重建活跃神经区域。”
  2. “信号分离”——“从生物噪声中分离认知意图。”
  3. “状态预测”——“在认知转换发生前进行预判。”
  4. “闭环反馈”——“根据结果相关性进行闭环调整。”
  - 标题：`text-white text-[14px] sm:text-[16px] font-normal mb-2`
  - 描述：`text-white/40 text-[12px] sm:text-[14px] leading-relaxed`

---

#### SECTION 5：架构（min-h-screen，纯黑背景，无视频）

- 内容居中，max-w-3xl，`px-6 py-32`
- **标题区块**（向上淡入 y:30->0、duration 1.0s、whileInView once amount 0.4）：
  - 副标题：“架构”——`text-white/40 text-[13px] sm:text-[14px] tracking-[0.2em] uppercase mb-8`
  - 标题：“三层架构。零摩擦。”——`text-white font-light text-[clamp(28px,6vw,56px)] leading-[1.15] tracking-[-0.02em] mb-10`
  - 描述：“传感器层采集原始生物电信号。处理层分离意图。界面层将结构化输出传递至任何已连接系统。”——`text-white/45 text-[15px] sm:text-[17px] leading-relaxed max-w-xl mx-auto`
- **层级卡片**（淡入、duration 1.2s、delay 0.4s、whileInView once amount 0.4）：3 张纵向堆叠卡片，`mt-20 flex-col items-center gap-4`。每张卡片：`max-w-md h-[72px] border border-white/10 rounded-lg flex items-center justify-between px-6`
  - 左侧：“Layer 1/2/3”——`text-white/30 text-[12px] tracking-[0.15em] uppercase`
  - 右侧：“Capture” / “Process” / “Interface”——`text-white text-[16px] sm:text-[18px] font-light`

---

#### FOOTER

- 黑色背景，overflow hidden
- 双栏布局（移动端纵向堆叠）：`flex-col md:flex-row min-h-[400px]`
- **左侧：** Video #5，`object-cover`，占据一半宽度（移动端 h-[300px]，md 为 auto height）
- **右侧：** Flex column justify-between，`p-10 sm:p-16`
  - 顶部：SynapseXLogo（18x18px、text-white/70）+ “SynapseX”文字（15px、font-medium、text-white/70、tracking-tight），mb-8。下方：“人机交互的下一次进化。为那些拒绝只受生物条件限制的人而打造。”`text-white/40 text-[14px] sm:text-[15px] leading-relaxed max-w-sm`
  - 底部：“(c) 2026 SynapseX Labs. 保留所有权利。”`text-white/25 text-[12px] mt-12`

---

### 关键技术细节

- 整个应用的 wrapper 使用 inline style：`fontFamily: '"Space Mono", monospace'`
- 所有 `h-screen` 元素还使用 `h-[100dvh]`，以兼容移动端视口
- Hero 视频 NOT autoplay——它从时间 0 开始保持暂停，并由鼠标水平移动进行擦洗（基于 delta，而非绝对位置）。seek 逻辑通过 `seeked` 事件串联，以避免丢帧。
- Framer Motion `useScroll` 使用 offset `["start end", "end start"]` 跟踪第二部分，依次经过 `useSpring`（stiffness 15、damping 32、mass 1.8），再通过 `useTransform` 和 `useMotionTemplate` 实现 3D 文字旋转效果。
- 无外部状态管理、无路由、无数据库——纯单页 React 应用。

---