数字体验

## 提示词

构建一个单页 React + Vite + TypeScript + Tailwind CSS 网站，包含恰好两个全屏区块（Hero 和 Capabilities）。页面是一个深色、富有电影感的网页设计机构落地页，使用“液态玻璃”拟态 UI 元素，并通过 Framer Motion 实现流畅的模糊/淡入淡出动画。

---

### 字体（Google Fonts）

通过 `index.html` 中的 `<link>` 加载：
- **Instrument Serif**（斜体）——用于所有标题（`font-heading`）
- **Barlow**（字重 300、400、500、600）——用于正文（`font-body`）

Tailwind 配置扩展 `fontFamily`：
```js
heading: ["'Instrument Serif'", 'serif'],
body: ["'Barlow'", 'sans-serif'],
```

基础 CSS：`html, body { background: #000; color: #fff; font-family: 'Barlow', sans-serif; }`

---

### 液态玻璃 CSS（位于 index.css）

以普通 CSS 类定义两种变体：

**`.liquid-glass`**（轻微）：
- `background: rgba(255, 255, 255, 0.01)`，并设置 `background-blend-mode: luminosity`
- `backdrop-filter: blur(4px)` / `-webkit-backdrop-filter: blur(4px)`
- 无边框；`box-shadow: inset 0 1px 1px rgba(255,255,255,0.1)`
- `position: relative; overflow: hidden`
- `::before` 伪元素创建渐变描边边框：
- `position: absolute; inset: 0; border-radius: inherit; padding: 1.4px`
- `background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%)`
- 使用 `-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;` 添加遮罩
- `pointer-events: none`

**`.liquid-glass-strong`**（更醒目）：
- 结构相同，但使用 `backdrop-filter: blur(50px)`
- `box-shadow: 4px 4px 4px rgba(0,0,0,0.05), inset 0 1px 1px rgba(255,255,255,0.15)`
- `::before` 渐变在边缘使用 0.5 alpha，在 20%/80% 处使用 0.2

---

### FadingVideo 组件

一个可复用的 `<video>` 组件，接受 `src`（string 或 string[]）、`className` 和 `style`。它：
1. 初始设置为 `opacity: 0`
2. 在 `loadeddata` 时，使用 `requestAnimationFrame` 在 500ms 内淡入
3. 在 `timeupdate` 时，当剩余时间 <= 0.55s，在 550ms 内淡出
4. 在 `ended` 时，如果是单个来源：将 `currentTime` 重置为 0，重新播放并再次淡入。如果是数组：前进至下一个索引（循环）。
5. 视频设置为 `autoPlay`、`muted`、`playsInline`、`preload="auto"`

---

### BlurText 组件

一个使用 Framer Motion、逐词交错模糊淡入的动画组件：
- 按空格拆分 `text` prop
- 每个单词都是一个 `motion.span`，设置 `display: inline-block`、`marginRight: 0.28em`
- 通过 IntersectionObserver（threshold 0.1）触发
- 每个单词的动画：`filter` 从 `blur(10px)` 变为 `blur(0px)`，`opacity` 从 0 变为 1，`y` 从 50 变为 0
- 每个单词持续 0.7s，按单词索引交错延迟 100ms
- 容器使用 `display: flex; flexWrap: wrap; justifyContent: center; rowGap: 0.1em`

---

### 区块 1：Hero

- 完整视口高度（`h-screen`）、`overflow-hidden`、`bg-black`
- **背景视频**：单个 `<FadingVideo>`，设置：
- `src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260619_191346_9d19d66e-86a4-47f7-8dc6-712c1788c3b2.mp4"`
- 定位：`absolute left-1/2 top-0 -translate-x-1/2 object-cover object-top z-0`
- 内联样式：`width: 120%; height: 120%`

- **内容**（`relative z-10, flex flex-col h-full`）：

**导航栏**（固定，`top-4 left-0 right-0 z-50`，两端对齐，`px-8 lg:px-16`）：
- 左侧：`liquid-glass` 圆形（h-12 w-12 rounded-full），内部是使用 `font-heading text-2xl` 的斜体“a”
- 中间（移动端隐藏，`md:flex`）：`liquid-glass rounded-full px-1.5 py-1.5` 胶囊，包含链接 ["作品", "工作室", "服务", "期刊", "联系"]，样式为 `px-3 py-2 text-sm font-medium text-white/90 font-body`，另加一个带 ArrowUpRight 图标的白色 CTA 按钮“启动项目”
- 右侧：空的 `h-12 w-12` 占位 div

**主要内容**（居中，`flex-1 flex flex-col items-center justify-center pt-24 px-4 text-center`）：
- **徽章**（motion.div，delay 0.4）：`liquid-glass rounded-full` 胶囊，内部含白色“最新”徽章和文字“正在预约 2026 年第三季度合作——名额有限”
- **主标题**（mt-6，max-w-3xl）：`<BlurText>` 的文字为“精心打造经得起潮流更迭的数字体验”，类为：`text-6xl md:text-7xl lg:text-[5.5rem] font-heading italic text-white leading-[0.8] tracking-[-4px]`
- **副文案**（motion.p，delay 0.8，mt-4）：“我们是一家由设计师和工程师组成的小型工作室，为雄心勃勃的公司打造定义品牌的网站。精准的字体排印、富有电影感的动态效果，以及令你引以为傲的代码。”——`text-sm md:text-base text-white max-w-2xl font-body font-light leading-tight`
- **CTA 按钮**（motion.div，delay 1.1，mt-6，flex gap-6）：使用 `liquid-glass-strong rounded-full px-5 py-2.5`、带 ArrowUpRight 的“启动项目”，以及带 Play 图标的纯文本“观看作品集”
- **数据卡片**（motion.div，delay 1.3，mt-8，flex gap-4）：两张 `liquid-glass p-5 w-[220px] rounded-[1.25rem]` 卡片：
- 卡片 1：ClockIcon、“6 周”、“平均端到端上线时间”
- 卡片 2：GlobeIcon、“140+”、“已为横跨四大洲的品牌交付项目”
- 数字：`text-4xl font-heading italic tracking-[-1px] leading-none mt-4`

**底部信任栏**（motion.div，delay 1.4，flex-col items-center gap-4 pb-8）：
- `liquid-glass rounded-full` 胶囊：“深受全球创始人、运营者和创意总监信赖”
- Logo 名称以 flex 行排列（gap-12 md:gap-16）：["Aeon", "Vela", "Apex", "Orbit", "Zeno"]，每个使用 `font-heading italic text-2xl md:text-3xl tracking-tight`

- **所有 motion 元素**使用共享的 initial/animate：`{ filter: 'blur(10px)', opacity: 0, y: 20 }` -> `{ filter: 'blur(0px)', opacity: 1, y: 0 }`，duration 0.8s，easeOut

---

### 区块 2：Capabilities

- `min-h-screen`、`overflow-hidden`、`bg-black`、relative
- **背景视频**：`<FadingVideo>`，设置：
- `src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260622_093722_ccfc7ebf-182f-419f-8a62-2dc02db7dd9d.mp4"`
- `absolute inset-0 w-full h-full object-cover z-0`

- **内容**（`relative z-10 px-8 md:px-16 lg:px-20 pt-24 pb-10 flex flex-col min-h-screen`）：
- **页头**（mb-auto）：
- 标签：`text-sm font-body text-white/80 mb-6`——“// 能力”
- 标题：`font-heading italic text-6xl md:text-7xl lg:text-[6rem] leading-[0.9] tracking-[-3px]`——“工作室级匠心，\n全程贯穿始终”

- **卡片网格**（mt-16，`grid grid-cols-1 md:grid-cols-3 gap-6`），三张卡片：
1. **设计**——图标：ImageIcon（实心图片图标），标签：["品牌系统", "艺术指导", "视觉识别", "动态设计"]，正文：“我们塑造独属于你的品牌形象与界面——从字体系统、组件库到经过艺术指导的页面，均可规模化扩展而不失灵魂。”
2. **工程**——图标：MovieIcon（胶片/场记板），标签：["React", "Next.js", "Headless CMS", "Edge-Ready"]，正文：“基于现代技术栈构建生产级前端。高性能、无障碍且配备监测能力——代码让你的团队在上线许久之后仍乐于继续扩展。”
3. **增长**——图标：LightbulbIcon，标签：["SEO", "分析", "A/B 测试", "留存"]，正文：“上线只是起跑线。我们与你的团队在转化、内容和迭代循环方面展开合作，让一个漂亮的网站转化为持续增值的资产。”

- 每张卡片：`liquid-glass rounded-[1.25rem] p-6 min-h-[360px] flex flex-col`
- 顶部行：图标位于嵌套的 `liquid-glass h-11 w-11 rounded-[0.75rem]` 方块内，标签（flex-wrap、gap-1.5）右对齐，每个标签使用 `liquid-glass rounded-full px-3 py-1 text-[11px] text-white/90 font-body whitespace-nowrap`
- 间隔区：`flex-1`
- 底部：标题使用 `font-heading italic text-3xl md:text-4xl tracking-[-1px] leading-none`，正文使用 `text-sm text-white/90 font-body font-light leading-snug max-w-[32ch]`

---

### 自定义 SVG 图标（这些图标无需外部图标库）

- **ArrowUpRight**：24x24，stroke，路径 "M7 17L17 7" 和 "M7 7h10v10"
- **Play**：24x24，实心多边形 "6 4 20 12 6 20 6 4"
- **ClockIcon**：24x24，stroke（1.5），circle r=9 + "M12 7v5l3 2"
- **GlobeIcon**：24x24，stroke（1.5），circle r=9 + 水平线 + 两条弧线路径
- **ImageIcon**：24x24，实心 Material 风格图片图标
- **MovieIcon**：24x24，实心 Material 风格电影图标
- **LightbulbIcon**：24x24，实心 Material 风格灯泡图标

---

### 依赖项

- react, react-dom
- framer-motion
- tailwindcss, postcss, autoprefixer
- vite, @vitejs/plugin-react
- typescript

---

### 核心设计原则

- 所有内容都位于纯黑色（#000）背景上
- 所有文字均为白色；次要文字使用 `white/80` 或 `white/90`
- 液态玻璃元素使用近乎不可见的填充，并通过 CSS masks 实现渐变描边边框
- 视频作为氛围背景覆盖各区块，并流畅地淡入淡出
- 字体排印：标题字体始终使用斜体和非常紧密的字距（负值），正文字体使用轻字重
- 响应式：导航链接在移动端隐藏，网格折叠为单列，文字大小随断点缩放
- 动画：Hero 内容加载时交错模糊淡入，BlurText 由交叉进入视口触发