提示词
---
**提示词：**
创建一个位于固定背景视频之上的全 viewport section（100vh）。该 section 本身没有背景色——完全透明，因此可以透出其后的固定视频。
**背景视频（固定在所有内容之后）：**
一个固定在 viewport 上的 `<video>` 元素（`position: fixed; top: 0; left: 0; width: 100%; height: 100vh; object-fit: cover; z-index: 0`），使用以下 source：
```
```
它应设置 `autoPlay`、`muted`、`loop` 和 `playsInline`。
**Section 布局：**
- `position: relative; z-index: 1`
- `display: flex; flex-direction: column; justify-content: center`（垂直居中内容）
- `height: 100vh`
- Padding：`70px 32px 32px 32px`
**内容块**（位于 section 内）：
- 一个 wrapper `div`，设置 `display: flex; flex-direction: column; align-items: flex-start; max-width: 720px`
- **标题（`<h2>`）：**
- 文本：`"WE BUILD END-TO-END AI AUTOMATION SYSTEMS."`
- 每个单词分别包裹在独立的 `<span>` 元素中，并使用 `display: flex; flex-wrap: wrap; gap: 0.25em` 显示
- 每个单词通过依次错开的 fade-up animation 进入：初始为 `opacity: 0, y: 32px`，使用 Framer Motion `whileInView` 动画至 `opacity: 1, y: 0`，并设置 `viewport: { once: true, amount: 0.2 }`
- Stagger：第一个单词的 `delay: 0.15`，之后每个单词增加 `0.08s`（因此第 2 个单词 = 0.23，第 3 个单词 = 0.31，依此类推）
- Animation easing：`[0.22, 1, 0.36, 1]`，duration：`0.7s`
- Typography：`font-size: clamp(26px, 3vw, 42px); font-weight: 700; line-height: 1.08; letter-spacing: -0.01em; text-transform: uppercase; color: #fff; margin: 0`
- **辅助文本（`<p>`）：**
- 文本：`"We provide all-in-one AI automation services in one place."`
- `margin-top: 24px; font-size: 14px; line-height: 1.65; color: rgba(255,255,255,0.85); max-width: 260px`
- 使用与单词相同的 fade-up animation，但设置 `delay: 0.9`，默认 `y: 24px`
**字体：**
```css
@import url('https://db.onlinewebfonts.com/c/e66905e07608167a84e6ad52f638c3c6?family=Helvetica+Now+Var');
* { font-family: 'Helvetica Now Var', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
```
**FadeUp 组件（可复用，Framer Motion）：**
```tsx
import { motion } from 'framer-motion';
import { CSSProperties, ReactNode } from 'react';
type FadeUpProps = {
children: ReactNode;
delay?: number;
duration?: number;
y?: number;
className?: string;
style?: CSSProperties;
as?: 'div' | 'section' | 'span' | 'h1' | 'h2' | 'h3' | 'p' | 'nav';
once?: boolean;
};
export function FadeUp({
children, delay = 0, duration = 0.7, y = 24,
className, style, as = 'div', once = true,
}: FadeUpProps) {
const Tag = motion[as];
return (
<Tag
className={className}
style={style}
initial={{ opacity: 0, y }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once, amount: 0.2 }}
transition={{ duration, delay, ease: [0.22, 1, 0.36, 1] }}
>
{children}
</Tag>
);
}
```
**Mobile 响应式（max-width: 900px）：**
- Section padding 调整为 `90px 18px 32px 18px`
**Tech stack：** React 18、TypeScript、Vite、Tailwind CSS 3、Framer Motion 12。
---原文提示词（English）
---
**Prompt:**
Create a full-viewport section (100vh) that sits over a fixed background video. The section has no background color of its own -- it is fully transparent so the fixed video behind it shows through.
**Background video (fixed, behind everything):**
A `<video>` element fixed to the viewport (`position: fixed; top: 0; left: 0; width: 100%; height: 100vh; object-fit: cover; z-index: 0`), using this source:
```
```
It should `autoPlay`, be `muted`, `loop`, and `playsInline`.
**Section layout:**
- `position: relative; z-index: 1`
- `display: flex; flex-direction: column; justify-content: center` (centers content vertically)
- `height: 100vh`
- Padding: `70px 32px 32px 32px`
**Content block** (inside the section):
- A wrapper `div` with `display: flex; flex-direction: column; align-items: flex-start; max-width: 720px`
- **Heading (`<h2>`):**
- Text: `"WE BUILD END-TO-END AI AUTOMATION SYSTEMS."`
- Each word is wrapped in an individual `<span>` element, displayed using `display: flex; flex-wrap: wrap; gap: 0.25em`
- Each word animates in with a staggered fade-up animation: starts at `opacity: 0, y: 32px`, animates to `opacity: 1, y: 0` using Framer Motion `whileInView` with `viewport: { once: true, amount: 0.2 }`
- Stagger: first word at `delay: 0.15`, each subsequent word adds `0.08s` (so word 2 = 0.23, word 3 = 0.31, etc.)
- Animation easing: `[0.22, 1, 0.36, 1]`, duration: `0.7s`
- Typography: `font-size: clamp(26px, 3vw, 42px); font-weight: 700; line-height: 1.08; letter-spacing: -0.01em; text-transform: uppercase; color: #fff; margin: 0`
- **Subtext (`<p>`):**
- Text: `"We provide all-in-one AI automation services in one place."`
- `margin-top: 24px; font-size: 14px; line-height: 1.65; color: rgba(255,255,255,0.85); max-width: 260px`
- Same fade-up animation as the words but with `delay: 0.9` and default `y: 24px`
**Font:**
```css
@import url('https://db.onlinewebfonts.com/c/e66905e07608167a84e6ad52f638c3c6?family=Helvetica+Now+Var');
* { font-family: 'Helvetica Now Var', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
```
**FadeUp component (reusable, Framer Motion):**
```tsx
import { motion } from 'framer-motion';
import { CSSProperties, ReactNode } from 'react';
type FadeUpProps = {
children: ReactNode;
delay?: number;
duration?: number;
y?: number;
className?: string;
style?: CSSProperties;
as?: 'div' | 'section' | 'span' | 'h1' | 'h2' | 'h3' | 'p' | 'nav';
once?: boolean;
};
export function FadeUp({
children, delay = 0, duration = 0.7, y = 24,
className, style, as = 'div', once = true,
}: FadeUpProps) {
const Tag = motion[as];
return (
<Tag
className={className}
style={style}
initial={{ opacity: 0, y }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once, amount: 0.2 }}
transition={{ duration, delay, ease: [0.22, 1, 0.36, 1] }}
>
{children}
</Tag>
);
}
```
**Mobile responsive (max-width: 900px):**
- Section padding changes to `90px 18px 32px 18px`
**Tech stack:** React 18, TypeScript, Vite, Tailwind CSS 3, Framer Motion 12.
---
