提示词
## 提示词
构建一个单页 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 由交叉进入视口触发原文提示词（English）
## Prompt
Build a single-page React + Vite + TypeScript + Tailwind CSS site with exactly two full-screen sections (Hero and Capabilities). The page is a dark, cinematic web design agency landing page with "liquid glass" morphism UI elements and smooth blur/fade animations using Framer Motion.
---
### Fonts (Google Fonts)
Load via `<link>` in `index.html`:
- **Instrument Serif** (italic) -- used for all headings (`font-heading`)
- **Barlow** (weights 300, 400, 500, 600) -- used for body text (`font-body`)
Tailwind config extends `fontFamily`:
```js
heading: ["'Instrument Serif'", 'serif'],
body: ["'Barlow'", 'sans-serif'],
```
Base CSS: `html, body { background: #000; color: #fff; font-family: 'Barlow', sans-serif; }`
---
### Liquid Glass CSS (in index.css)
Two variants defined as plain CSS classes:
**`.liquid-glass`** (subtle):
- `background: rgba(255, 255, 255, 0.01)` with `background-blend-mode: luminosity`
- `backdrop-filter: blur(4px)` / `-webkit-backdrop-filter: blur(4px)`
- No border; `box-shadow: inset 0 1px 1px rgba(255,255,255,0.1)`
- `position: relative; overflow: hidden`
- `::before` pseudo-element creates a gradient stroke border:
- `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%)`
- Masked with `-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`** (bolder):
- Same structure but `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` gradient uses 0.5 alpha at edges, 0.2 at 20%/80%
---
### FadingVideo Component
A reusable `<video>` component accepting `src` (string or string[]), `className`, and `style`. It:
1. Starts with `opacity: 0`
2. On `loadeddata`, fades in over 500ms using `requestAnimationFrame`
3. On `timeupdate`, when remaining time <= 0.55s, fades out over 550ms
4. On `ended`, if single source: resets `currentTime` to 0, replays, fades back in. If array: advances to next index (cycling).
5. Video is `autoPlay`, `muted`, `playsInline`, `preload="auto"`
---
### BlurText Component
A word-by-word staggered blur-in animation component using Framer Motion:
- Splits `text` prop by spaces
- Each word is a `motion.span` with `display: inline-block`, `marginRight: 0.28em`
- Triggers on IntersectionObserver (threshold 0.1)
- Each word animates: `filter` from `blur(10px)` to `blur(0px)`, `opacity` 0 to 1, `y` from 50 to 0
- Duration 0.7s per word, stagger delay of 100ms per word index
- Container uses `display: flex; flexWrap: wrap; justifyContent: center; rowGap: 0.1em`
---
### Section 1: Hero
- Full viewport height (`h-screen`), `overflow-hidden`, `bg-black`
- **Background video**: Single `<FadingVideo>` with:
- `src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260619_191346_9d19d66e-86a4-47f7-8dc6-712c1788c3b2.mp4"`
- Positioned: `absolute left-1/2 top-0 -translate-x-1/2 object-cover object-top z-0`
- Inline style: `width: 120%; height: 120%`
- **Content** (`relative z-10, flex flex-col h-full`):
**Navbar** (fixed, `top-4 left-0 right-0 z-50`, flex between, `px-8 lg:px-16`):
- Left: `liquid-glass` circle (h-12 w-12 rounded-full) with italic "a" in `font-heading text-2xl`
- Center (hidden on mobile, `md:flex`): `liquid-glass rounded-full px-1.5 py-1.5` pill containing links ["Work", "Studio", "Services", "Journal", "Contact"] as `px-3 py-2 text-sm font-medium text-white/90 font-body` + a white CTA button "Start a Project" with ArrowUpRight icon
- Right: empty `h-12 w-12` spacer div
**Main content** (centered, `flex-1 flex flex-col items-center justify-center pt-24 px-4 text-center`):
- **Badge** (motion.div, delay 0.4): `liquid-glass rounded-full` pill with a white "New" badge inside + text "Booking Q3 2026 engagements -- limited capacity"
- **Headline** (mt-6, max-w-3xl): `<BlurText>` with text "Crafted Digital Experiences Built to Outlast Trends", classes: `text-6xl md:text-7xl lg:text-[5.5rem] font-heading italic text-white leading-[0.8] tracking-[-4px]`
- **Subtext** (motion.p, delay 0.8, mt-4): "We are a small studio of designers and engineers shaping brand-defining websites for ambitious companies. Precise typography, cinematic motion, and code you can be proud of." -- `text-sm md:text-base text-white max-w-2xl font-body font-light leading-tight`
- **CTA buttons** (motion.div, delay 1.1, mt-6, flex gap-6): "Start a Project" in `liquid-glass-strong rounded-full px-5 py-2.5` with ArrowUpRight + "Watch Showreel" plain text with Play icon
- **Stats cards** (motion.div, delay 1.3, mt-8, flex gap-4): Two `liquid-glass p-5 w-[220px] rounded-[1.25rem]` cards:
- Card 1: ClockIcon, "6 Weeks", "Average End-to-End Launch Time"
- Card 2: GlobeIcon, "140+", "Brands Shipped Across Four Continents"
- Numbers: `text-4xl font-heading italic tracking-[-1px] leading-none mt-4`
**Bottom trust bar** (motion.div, delay 1.4, flex-col items-center gap-4 pb-8):
- `liquid-glass rounded-full` pill: "Trusted by founders, operators, and creative directors worldwide"
- Logo names in a flex row (gap-12 md:gap-16): ["Aeon", "Vela", "Apex", "Orbit", "Zeno"] each as `font-heading italic text-2xl md:text-3xl tracking-tight`
- **All motion elements** use shared initial/animate: `{ filter: 'blur(10px)', opacity: 0, y: 20 }` -> `{ filter: 'blur(0px)', opacity: 1, y: 0 }`, duration 0.8s, easeOut
---
### Section 2: Capabilities
- `min-h-screen`, `overflow-hidden`, `bg-black`, relative
- **Background video**: `<FadingVideo>` with:
- `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`
- **Content** (`relative z-10 px-8 md:px-16 lg:px-20 pt-24 pb-10 flex flex-col min-h-screen`):
- **Header** (mb-auto):
- Label: `text-sm font-body text-white/80 mb-6` -- "// Capabilities"
- Heading: `font-heading italic text-6xl md:text-7xl lg:text-[6rem] leading-[0.9] tracking-[-3px]` -- "Studio craft,nend to end"
- **Cards grid** (mt-16, `grid grid-cols-1 md:grid-cols-3 gap-6`), three cards:
1. **Design** -- Icon: ImageIcon (filled image icon), Tags: ["Brand Systems", "Art Direction", "Visual Identity", "Motion"], Body: "We shape identities and interfaces that feel unmistakably yours -- typographic systems, component libraries, and art-directed pages that scale without losing soul."
2. **Engineering** -- Icon: MovieIcon (film/clapboard), Tags: ["React", "Next.js", "Headless CMS", "Edge-Ready"], Body: "Production-grade front-ends built on modern stacks. Performant, accessible, and instrumented -- with code your team will enjoy extending long after launch."
3. **Growth** -- Icon: LightbulbIcon, Tags: ["SEO", "Analytics", "A/B Testing", "Retention"], Body: "Launch is the starting line. We partner with your team on conversion, content, and iteration loops that turn a beautiful site into a compounding asset."
- Each card: `liquid-glass rounded-[1.25rem] p-6 min-h-[360px] flex flex-col`
- Top row: icon in a nested `liquid-glass h-11 w-11 rounded-[0.75rem]` square + tags (flex-wrap, gap-1.5) right-aligned, each tag is `liquid-glass rounded-full px-3 py-1 text-[11px] text-white/90 font-body whitespace-nowrap`
- Spacer: `flex-1`
- Bottom: title in `font-heading italic text-3xl md:text-4xl tracking-[-1px] leading-none` + body in `text-sm text-white/90 font-body font-light leading-snug max-w-[32ch]`
---
### Custom SVG Icons (no external icon library needed for these)
- **ArrowUpRight**: 24x24, stroke, paths "M7 17L17 7" and "M7 7h10v10"
- **Play**: 24x24, filled polygon "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 + horizontal line + two arc paths
- **ImageIcon**: 24x24, filled Material-style image icon
- **MovieIcon**: 24x24, filled Material-style movie icon
- **LightbulbIcon**: 24x24, filled Material-style bulb icon
---
### Dependencies
- react, react-dom
- framer-motion
- tailwindcss, postcss, autoprefixer
- vite, @vitejs/plugin-react
- typescript
---
### Key Design Principles
- Everything is on a pure black (#000) background
- All text is white; subtle text uses `white/80` or `white/90`
- Liquid glass elements have near-invisible fills with gradient-stroke borders via CSS masks
- Videos cover sections as atmospheric backgrounds, fading in/out smoothly
- Typography: heading font is always italic with very tight tracking (negative), body font is light weight
- Responsive: nav links hidden on mobile, grid collapses to single column, text sizes scale with breakpoints
- Animations: staggered blur-in on load for hero content, intersection-triggered for BlurText
