提示词
为“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 应用。
---原文提示词（English）
Build a single-page landing site for "SynapseX" -- a futuristic neural-AI interface product. The entire site uses a black background with white text and full-viewport video backgrounds. The primary font is "Space Mono" (monospace) for all text. Use React + TypeScript + Vite + Tailwind CSS + Framer Motion.
### Fonts & External Assets
- **Primary font:** "Space Mono" (all weights: 400, 700, italic) from Google Fonts
- **Display font (background watermark only):** "Anton SC" from Google Fonts
- **Icons:** Bootstrap Icons CDN (`https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css`) -- used only for the Apple icon (`bi bi-apple`) in the download button
- **All Tailwind `fontFamily` keys** (`sans`, `serif`, `mono`) are overridden to `"Space Mono", monospace`
### Video URLs (CloudFront -- use exactly these)
1. **Hero (mouse-scrubbed, NOT autoplay):**
`https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260622_083515_290e5a10-0b95-41af-a5e2-32b6389baa4d.mp4`
2. **Second Section (autoplay, muted, loop):**
`https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260622_092455_089c54f8-3b03-4966-9df1-e9746063d0ef.mp4`
3. **Metrics Section (autoplay, muted, loop):**
`https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260622_095810_ecea3dd2-fc5e-4e41-8696-4219290b6589.mp4`
4. **Technology Section (autoplay, muted, loop):**
`https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260622_095750_32a52ce0-2005-45c9-9093-41f03fde9530.mp4`
5. **Footer (autoplay, muted, loop):**
`https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260622_080203_fd7f4f85-3a86-4837-8192-85e7bfe68e75.mp4`
### Dependencies
```json
"framer-motion": "^12.40.0",
"lucide-react": "^0.344.0",
"react": "^18.3.1",
"react-dom": "^18.3.1"
```
### Global CSS (`index.css`)
- Import Space Mono from Google Fonts
- Import Bootstrap Icons CSS
- Tailwind directives (`@tailwind base/components/utilities`)
- CSS variables: all `--font-*` set to `"Space Mono", monospace`
- Global reset: `* { 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 smooth scroll utility classes (`.lenis.lenis-smooth`, `.lenis.lenis-stopped`, `.lenis.lenis-scrolling iframe`)
### Custom Text Animation Components
#### 1. `ScrambleIn` -- entrance reveal animation
- Props: `text: string`, `delay: number` (ms before start), `triggered: boolean`
- Character set: `ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+~|}{[]:;?><`
- On trigger (after delay): runs interval every 25ms, revealing characters left-to-right at 0.5 chars/frame
- Characters not yet revealed show random chars (up to 3 ahead of the reveal cursor); characters beyond that are empty
- Spaces always show as spaces
- Before triggered: renders ` `
#### 2. `ScrambleText` -- hover-driven scramble
- Props: `text: string`, `isHovered: boolean`, `className?: string`
- On hover: scrambles all chars with random chars, then reveals left-to-right at 4 frames/char, interval 25ms
- On unhover: immediately resets to original text
### Custom SVG Logo (`SynapseXLogo`)
A 4-fold rotationally symmetric abstract shape rendered in an SVG with `viewBox="-50 -50 100 100"`. Each quadrant is the same path rotated 0/90/180/270 degrees:
```
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
```
### Animated Hamburger (`SquashHamburger`)
- 3 horizontal bars (absolute positioned spans)
- Desktop: container 18x12px, bar height 1.5px
- Mobile: container 15x10px, bar height 1.2px
- On open: top bar rotates 45deg + translates down to center; middle bar fades/scales out; bottom bar rotates -45deg + translates up to center
- Spring animation: stiffness 300, damping 20
---
### Page Sections (in order)
---
#### SECTION 1: Hero (full viewport height)
- **Background:** Video #1, `object-cover`, paused on load. Controlled by mouse-scrub: horizontal mouse movement across viewport scrubs the video timeline forward/backward. Sensitivity factor: `0.8`. Uses `seeked` event to chain seeks without dropping frames.
- **Entrance animation:** After 800ms delay, `entranceComplete` state becomes true -- all hero content fades in (opacity 0 -> 1, duration 1s).
- **Dot grid overlay:** `radial-gradient(#ffffff 1px, transparent 1px)` with 24x24px grid, opacity 0.05, pointer-events-none
- **Large background watermark text:** The word "TRANSCENDENCE" in "Anton SC" font, centered vertically (offset +50px from center), `clamp(120px, 30vw, 521px)` font size, uppercase, letter-spacing -4px. Opacity 0.10. Color achieved via `radial-gradient(circle, rgba(142,127,148,0) 0%, #8E7F94 70%)` as `background-clip: text` with transparent fill.
- **Layout:** Flexbox column, padding `px-4 sm:px-6 md:px-8 pt-20 sm:pt-24 pb-8 sm:pb-12`. Content is pushed to the bottom using `flex-1` spacer.
- **Bottom row:** `flex-col gap-6 md:flex-row md:items-end md:justify-between`
- **Left column** (`flex flex-col gap-4`):
- **h1** "Brain" / "And Body" (two lines via `<br>`): `text-white font-light leading-[0.95] tracking-[-0.03em] text-[clamp(40px,10vw,100px)]`. Each line uses `ScrambleIn` with delays 200ms and 500ms.
- **Description paragraph** (motion.p): fade-up animation (y:25->0, opacity 0->1, duration 0.9s, cubic-bezier ease `[0.215, 0.610, 0.355, 1.000]`, delay 0.2s). Text: "Built at the intersection of neuroscience and artificial intelligence. SynapseX continuously maps neural pathways, cognitive load, and physiological states into a single adaptive intelligence layer." Style: `max-w-sm text-[13px] sm:text-[15px] text-white/60 leading-relaxed`
- **Right h1** "One" / "Network": Same styling as left h1 but with `text-left md:text-right`. ScrambleIn delays: 700ms and 1000ms.
---
#### NAVBAR (fixed, z-50)
- Fixed to top, height 80px (h-20), transparent background, full width
- Fades in with `entranceComplete` (opacity 0->1, duration 0.8s)
**Desktop (hidden below `sm`):**
- Left group: two pills side by side with gap-2
- **Logo pill:** h-12, px-5, `bg-white/15 backdrop-blur-md rounded-[14px]`. Contains SynapseXLogo (18x18px white) + "SynapseX" text (16px font-medium tracking-tight white). WhileHover: scale 1.02 + bg rgba(255,255,255,0.22). WhileTap: scale 0.98. Hides on `sm` when menu open (`hidden md:flex`), shows normally otherwise.
- **Expanding menu pill:** Animates width from 48px (closed) to 290px (open) with spring (stiffness 350, damping 28). h-12, `rounded-[14px]`, `bg-white/15 backdrop-blur-md`. Contains:
- Hamburger button: when closed = 48x48px rounded-[14px]; when open = 36x36px rounded-[11px] with `bg-white/10 hover:bg-white/20 ml-1.5`
- Nav links (fade in when open, offset x:15->0): "About" and "Metrics" with ScrambleText on hover. 16px font-normal text-white/85 hover:text-white. Smooth-scroll to `window.innerHeight` and `window.innerHeight * 2` respectively.
- Right: **Download button** -- `h-12 px-6 bg-white rounded-full`, black text. Apple icon + "Download" with ScrambleText on hover. WhileHover: scale 1.03 + bg #e2e2e6. WhileTap: scale 0.97.
**Mobile (visible below `sm`):**
- Scaled-down version: h-9 pills, rounded-[10px], smaller text (13px), logo pill animates to width 0 when menu open (spring stiffness 350, damping 28). Menu capsule expands to 100% width when open. Download button: h-9 px-3.5 rounded-full.
---
#### SECTION 2: Cinematic Text (full viewport height)
- **Background:** Video #2, autoplay muted loop, object-cover
- **Top gradient overlay:** 180px height, linear-gradient from `#010103` to transparent, z-10
- **Content:** Centered large paragraph in a `max-w-5xl` container with 3D perspective (400px)
- Framer Motion: `rotateX(24deg) translateY(${yScaleValue}px) translateZ(15px)` where `yScaleValue` transforms from 60 to -120 based on smooth scroll progress (spring: stiffness 15, damping 32, mass 1.8). Opacity fades in from 0 to 1 between scroll progress 0.3-0.5.
- Text: "A neural-AI interface built on the architecture of the human nervous system. SynapseX translates synaptic activity into computational intelligence. Every signal becomes measurable, structured, and visible. It continuously reconstructs internal state as a dynamic neural map. Biological noise is filtered into actionable cognitive patterns."
- Style: `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: Metrics (min-h-screen)
- **Background:** Video #3, autoplay muted loop, object-cover
- **Layout:** Centered content, `pt-32 pb-32 px-6`, max-w-6xl
- **Subtitle:** "Performance Metrics" -- `text-white/40 text-[13px] sm:text-[14px] tracking-[0.2em] uppercase mb-20 text-center`. Fades in on scroll (whileInView, duration 1.2s, once, amount 0.3).
- **Metrics grid:** 3 columns on md, 1 on mobile, gap-16 md:gap-8. Each metric fades up (y:30->0, opacity, duration 0.8s, staggered 0.15s delay per item):
- "2.4ms" -- Synaptic Latency
- "99.7%" -- Signal Accuracy
- "140B" -- Neural Parameters
- Value: `text-white text-[clamp(48px,10vw,96px)] font-light tracking-[-0.04em] leading-none`
- Label: `text-white/40 text-[13px] sm:text-[15px] mt-4 tracking-wide`
---
#### SECTION 4: Technology / Adaptive Intelligence (full viewport height)
- **Background:** Video #4, autoplay muted loop, object-cover
- **Layout:** Flexbox column, `px-8 sm:px-12 md:px-16 py-12 sm:py-16`
- **Top area:** flex-col md:flex-row md:justify-between md:items-start gap-6
- **Left heading:** "Adaptive / Intelligence" (two lines), `text-white font-light text-[clamp(36px,8vw,72px)] leading-[0.95] tracking-[-0.03em]`. Fades up (y:40->0, duration 1.0s, whileInView once amount 0.3).
- **Right paragraph:** "The system learns your neural baseline within 72 hours. From there, every cognitive state is mapped, predicted, and optimized in real time." `text-white/50 text-[13px] sm:text-[15px] leading-relaxed max-w-xs md:text-right md:pt-2`. Fades up (y:20->0, duration 1.0s, delay 0.2s).
- **Spacer** (`flex-1`)
- **Bottom grid:** 2 cols on mobile, 4 cols on md, gap-8 md:gap-6. Fades in on scroll (duration 1.0s, delay 0.3s). Each item staggered (y:20->0, duration 0.7s, delay i*0.1):
1. "Cortical Mapping" -- "Real-time spatial reconstruction of active neural regions."
2. "Signal Isolation" -- "Separates cognitive intent from biological noise."
3. "State Prediction" -- "Anticipates cognitive transitions before they occur."
4. "Loop Feedback" -- "Closed-loop adjustment based on outcome correlation."
- Title: `text-white text-[14px] sm:text-[16px] font-normal mb-2`
- Desc: `text-white/40 text-[12px] sm:text-[14px] leading-relaxed`
---
#### SECTION 5: Architecture (min-h-screen, pure black background, no video)
- Centered content, max-w-3xl, `px-6 py-32`
- **Heading block** (fades up y:30->0, duration 1.0s, whileInView once amount 0.4):
- Subtitle: "Architecture" -- `text-white/40 text-[13px] sm:text-[14px] tracking-[0.2em] uppercase mb-8`
- Heading: "Three layers. Zero friction." -- `text-white font-light text-[clamp(28px,6vw,56px)] leading-[1.15] tracking-[-0.02em] mb-10`
- Description: "Sensor layer captures raw bioelectric signals. Processing layer isolates intent. Interface layer delivers structured output to any connected system." -- `text-white/45 text-[15px] sm:text-[17px] leading-relaxed max-w-xl mx-auto`
- **Layer cards** (fade in, duration 1.2s, delay 0.4s, whileInView once amount 0.4): 3 stacked cards, `mt-20 flex-col items-center gap-4`. Each card: `max-w-md h-[72px] border border-white/10 rounded-lg flex items-center justify-between px-6`
- Left: "Layer 1/2/3" -- `text-white/30 text-[12px] tracking-[0.15em] uppercase`
- Right: "Capture" / "Process" / "Interface" -- `text-white text-[16px] sm:text-[18px] font-light`
---
#### FOOTER
- Black background, overflow hidden
- Two-column layout (stacked on mobile): `flex-col md:flex-row min-h-[400px]`
- **Left:** Video #5, `object-cover`, fills half width (h-[300px] on mobile, auto height on md)
- **Right:** Flex column justify-between, `p-10 sm:p-16`
- Top: SynapseXLogo (18x18px, text-white/70) + "SynapseX" text (15px font-medium text-white/70 tracking-tight), mb-8. Below: "The next evolution of human-machine interaction. Built for those who refuse to be limited by biology alone." `text-white/40 text-[14px] sm:text-[15px] leading-relaxed max-w-sm`
- Bottom: "(c) 2026 SynapseX Labs. All rights reserved." `text-white/25 text-[12px] mt-12`
---
### Key Technical Details
- The entire app wrapper has inline style: `fontFamily: '"Space Mono", monospace'`
- All `h-screen` elements also have `h-[100dvh]` for mobile viewport compatibility
- The hero video is NOT autoplay -- it starts paused at time 0 and is scrubbed by horizontal mouse movement (delta-based, not absolute position). The seek logic chains via `seeked` event to avoid frame-dropping.
- Framer Motion `useScroll` tracks the second section with offset `["start end", "end start"]`, piped through `useSpring` (stiffness 15, damping 32, mass 1.8) then `useTransform` and `useMotionTemplate` for the 3D text rotation effect.
- No external state management, no routing, no database -- pure single-page React app.
---
