提示词
一键获取所有令人惊艳动效网站的提示词：
# 提示词：精确复刻这个落地页
为一个名为「Mindloop」的用心经营的通讯平台构建一个生产级质量的营销落地页，使用 Vite + React + TypeScript 应用，配 Tailwind CSS、shadcn/ui、framer-motion 和 lucide-react。整体美学是平静、编辑感、电影感——黑色背景、白色前景、衬线斜体点缀、环境氛围的循环背景视频，以及交互表面上标志性的「液态玻璃」效果。不使用紫色 / 靛蓝色调。
## 技术栈与依赖
- Vite + React 18 + TypeScript
- Tailwind CSS，配 shadcn/ui 设计令牌（HSL CSS 变量）
- `framer-motion` 用于动画
- `lucide-react` 用于图标
- `@fontsource/inter`（400、500、600、700）和 `@fontsource/instrument-serif`（400、400-italic）作为字体
- 不要安装其他 UI 库
## 全局主题（src/index.css）
在顶部引入 fontsource 的 CSS，然后是 Tailwind layers。通过 HSL 变量实现纯黑白配色：
```css
@import "@fontsource/inter/400.css";
@import "@fontsource/inter/500.css";
@import "@fontsource/inter/600.css";
@import "@fontsource/inter/700.css";
@import "@fontsource/instrument-serif/400.css";
@import "@fontsource/instrument-serif/400-italic.css";
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--background: 0 0% 0%;
--foreground: 0 0% 100%;
--card: 0 0% 5%;
--card-foreground: 0 0% 100%;
--popover: 0 0% 5%;
--popover-foreground: 0 0% 100%;
--primary: 0 0% 100%;
--primary-foreground: 0 0% 0%;
--secondary: 0 0% 12%;
--secondary-foreground: 0 0% 85%;
--muted: 0 0% 15%;
--muted-foreground: 0 0% 65%;
--accent: 170 15% 45%;
--accent-foreground: 0 0% 100%;
--border: 0 0% 20%;
--input: 0 0% 18%;
--ring: 0 0% 40%;
--hero-subtitle: 210 17% 95%;
--radius: 0.5rem;
}
}
@layer base {
* { @apply border-border; }
html, body {
margin: 0; padding: 0;
background-color: hsl(var(--background));
color: hsl(var(--foreground));
font-family: Inter, system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body { @apply bg-background text-foreground; }
}
.font-serif { font-family: "Instrument Serif", ui-serif, Georgia, serif; }
/* 液态玻璃效果——磨砂表面，带内嵌高光和动态渐变边框 */
.liquid-glass {
background: rgba(255, 255, 255, 0.01);
background-blend-mode: luminosity;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border: none;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
}
.liquid-glass::before {
content: '';
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;
}
```
Tailwind 配置扩展 `fontFamily.sans = Inter`、`fontFamily.serif = "Instrument Serif"`，并把所有颜色映射到 HSL 变量。暗色模式基于 class（但整个网站默认就是黑色）。
## 共享动画辅助函数（src/lib/animations.ts）
```ts
export const fadeUp = (delay: number = 0) => ({
initial: { opacity: 0, y: 20 },
whileInView: { opacity: 1, y: 0 },
viewport: { once: true, margin: "-100px" },
transition: { duration: 0.6, delay, ease: "easeOut" as const },
});
```
## App 结构（src/App.tsx）
```tsx
<div className="bg-background text-foreground min-h-screen font-sans">
<Navbar />
<main>
<Hero />
<SearchChanged />
<Mission />
<Solution />
<CTA />
</main>
<Footer />
</div>
```
## Logo 组件
Logo 是放置在 `public/image.png` 的 PNG 图片。组件渲染 `<img src="/image.png" className="h-7 w-auto" />`，配一个可选的 `className` 属性用于调整尺寸（例如 CTA 版块中使用 `h-12 w-auto`）。
---
## 版块 1 —— 导航栏（固定，滚动时收缩为液态玻璃药丸）
- `fixed top-0 left-0 right-0 z-50`，居中的 flex 包装器 `pt-4 px-4`。
- 内层容器：`max-w-6xl rounded-full`，在两种状态间做 500ms 过渡：
- 未滚动：`bg-transparent px-6 py-3`
- 已滚动（>20px）：`liquid-glass px-5 py-2.5`
- 左侧：仅 `<Logo />`（无文字）。
- 中间（桌面端）：链接「Home」「How It Works」「Philosophy」「Use Cases」，`text-muted-foreground`，悬停变为 `foreground`，配一条从宽度 0 增长到全宽的动态下划线。
- 右侧（桌面端）：三个圆形 9x9 图标按钮，Instagram / LinkedIn / Twitter（lucide），描边宽度 1.5，悬停背景 `white/5`。
- 移动端：汉堡菜单（`Menu`），点击切换一个 `liquid-glass rounded-2xl` 下拉面板，显示在导航栏下方。
## 版块 2 —— Hero（全屏，循环背景视频）
- 版块：`relative min-h-screen w-full overflow-hidden`。
- 全出血自动播放 / 静音 / 循环 / playsInline 的 `<video>`，铺满视口：
- src：``
- 底部渐隐叠加层：`absolute bottom-0 h-64 bg-gradient-to-t from-background to-transparent z-[1]`。
- 内容 `z-10 pt-28 md:pt-32` 居中纵向排列：
1. 社会证明行（淡入 + 滑入）：三个重叠的圆形头像（`w-8 h-8 rounded-full border-2 border-background`），来自 Pexels（使用 ID 415829、774909、1222271，配 `?auto=compress&cs=tinysrgb&w=100&h=100&fit=crop`）加低调文字「7,000+ people already subscribed」。
2. H1：`text-5xl md:text-7xl lg:text-8xl font-medium tracking-[-2px] max-w-5xl leading-[1.02]`，内容：`Get <span className="font-serif italic font-normal">Inspired</span> with Us`。
3. 副标题，颜色为 `--hero-subtitle`，`text-lg max-w-2xl mt-8`：「Join our feed for meaningful updates, news around technology and a shared journey toward depth and direction.」
4. 邮箱采集表单：`liquid-glass rounded-full p-2 max-w-lg w-full mt-10 flex items-center gap-2`。透明输入框，药丸按钮 `bg-foreground text-background rounded-full px-8 py-3 text-xs font-semibold tracking-[2px]`，标签为「SUBSCRIBE」，配 framer 悬停缩放 1.03 / 点击缩放 0.98。
- 每个元素依次淡入（延迟 0、0.1、0.25、0.4 秒）。
## 版块 3 —— SearchChanged（转变）
- `pt-52 md:pt-64 pb-20 px-6 md:px-8`。
- 标题网格（12 列）：左侧 7 列——小标签「THE SHIFT」（全大写字间距 3px）加 H2 `text-5xl md:text-7xl lg:text-8xl font-medium tracking-[-2px] leading-[0.95]`，内容为 `Search has <italic serif>changed.</italic><br/>Have you?`。右侧 5 列——正文：「The way people discover ideas has quietly shifted. Answers arrive synthesized, personal, and instant — and the old playbook of SEO keywords is running on borrowed time.」
- 三卡片网格，使用 1px `bg-border/40` 间隙，包裹在一个 `rounded-3xl overflow-hidden` 容器内，让分隔线看起来像发丝线。每张卡片 `bg-background p-8 md:p-10`，悬停 `bg-white/[0.02]`。
- 卡片头部：`liquid-glass` 圆角 2xl 的 12x12 图标块（左侧）加 `ArrowUpRight`（右侧），group 悬停时向右上方位移。
- 大数据：`text-4xl md:text-5xl font-medium tracking-[-1px]` 加低调标签。
- 名称（半粗体）加低调描述。
- 卡片内容：ChatGPT / 每周 4 亿用户 /「对话式回答……」；Perplexity / 每日 1500 万次查询 /「带引用来源的回答……」；Google AI / 每月 20 亿+次 AI 概览 /「生成式概览正在取代传统搜索结果页。」
- 下方：居中引语，用两条 `h-px w-12 bg-border` 发丝线框住：`If you don't answer the questions, <foreground>someone else will.</foreground>`
- 每个区块都用 `fadeUp` 交错动画。
## 版块 4 —— Mission（滚动驱动的文字揭示，叠加视差视频）
- 外层：`relative w-full`，内层包装器 `h-[130vh] md:h-[150vh] overflow-hidden`。
- 带视差的背景：`y` 值随滚动进度从 `-6%` 变换到 `6%`，`scale` 在 `1.08 → 1.02 → 1.08` 之间弹动。视频 src：``
- 用于保证可读性的叠加层：
- `bg-gradient-to-b from-background via-transparent to-background` 加 `bg-background/25`
- 顶部 `h-32` 和底部 `h-40` 渐隐到背景色。
- 粘性内容容器 `sticky top-0 h-screen flex items-end justify-center pb-16 md:pb-24`。
- 小标签：发丝线加「OUR MISSION」（全大写字间距 3px）。
- 两段堆叠的段落，每个单词根据自己在 `useScroll({ target, offset: ["start 0.85","end 0.2"] })` 进度中的切片，从 `opacity 0.2 → 1` 和 `blur(6px) → blur(0)` 做动画。
- 段落 1（大号 `text-2xl md:text-4xl lg:text-6xl font-medium tracking-[-1.5px] leading-[1.12]`）：「We're building a space where curiosity meets clarity — where readers find depth, writers find reach, and every newsletter becomes a conversation worth having.」其中 **curiosity**、**meets**、**clarity** 三个词高亮为全白色并带稍强的文字阴影；其余单词使用 `--hero-subtitle` 颜色，配柔和文字阴影 `0 2px 20px rgba(0,0,0,0.6)`。
- 段落 2（较小 `text-xl md:text-2xl lg:text-3xl`）：「A platform where content, community, and insight flow together — with less noise, less friction, and more meaning for everyone involved.」
- 带项目符号的标签行：`Depth`、`Reach`、`Meaning`（全大写字间距 3px，低调色）。
## 版块 5 —— Solution（粘性 12 列网格）
- `py-32 md:py-44 border-t border-border/30 px-6 md:px-8`。
- 左栏（`lg:col-span-5 lg:sticky lg:top-32`）：
- 小标签「SOLUTION」。
- H2 `text-4xl md:text-5xl lg:text-6xl font-medium tracking-[-1px]`：`The platform for <italic serif>meaningful</italic> content`。
- 正文：「Four tools, one quiet ecosystem — built so writing, reading, and discovering all reward the same thing: depth.」
- 视频卡片 `rounded-2xl overflow-hidden aspect-video`，src：``
- 右栏（`lg:col-span-7`）：4 个功能行的纵向列表，用 `border-b border-border/40` 分隔（最后一项无边框）。每行有一个 `liquid-glass` 12x12 圆角 2xl 图标块、标题 `text-xl md:text-2xl font-semibold tracking-[-0.5px]`、右对齐的编号 `01–04`（低调色，字间距 2px），标题下方是低调的描述。图标加文案：
1. `Compass`—— Curated Feed ——「Editorial-quality recommendations that match your pace and depth.」
2. `PenLine`—— Writer Tools ——「A calm canvas with the scaffolding serious writers ask for.」
3. `Users`—— Community ——「Thoughtful readers and creators rewarded for their attention.」
4. `Radio`—— Distribution ——「Reach built on signal, not noise — measured by meaning.」
## 版块 6 —— CTA（视频背景加居中内容）
- `relative py-32 md:py-44 border-t border-border/30 overflow-hidden px-6 md:px-8`。
- 背景视频（cover，z-0），src：``
- 叠加层 `absolute inset-0 bg-background/45 z-[1]`。
- 居中内容（最大宽度 3xl）：
- 顶部 `<Logo className="h-12 w-auto" />`。
- H2 `text-4xl md:text-6xl lg:text-7xl font-medium tracking-[-1px] mt-8 leading-[1.05]`：`<italic serif>Start</italic> Your Journey`。
- 低调导语：「Step into a quieter internet. Join the readers and writers shaping what comes next.」
- 按钮行（悬停缩放 1.03，点击缩放 0.98）：
- 主按钮：`bg-foreground text-background rounded-lg px-8 py-3.5 text-sm font-semibold` ——「Subscribe Now」。
- 次按钮：`liquid-glass rounded-lg px-8 py-3.5 text-sm font-semibold` ——「Start Writing」。
- 每个元素都用 `fadeUp`，延迟分别为 0、0.1、0.2、0.3。
## 版块 7 —— 页脚
- `border-t border-border/30 px-6 md:px-8`，内层 `max-w-7xl pt-20 pb-12`。
- 顶部区块：12 列网格，5/7 拆分，配一条 `border-b border-border/30 pb-16`。
- 左侧 5 列：仅 `<Logo />`（无「Mindloop」文字）加段落「A quieter internet for readers and writers. Meaningful updates, every week.」加一排三个 `liquid-glass` 10x10 圆形图标按钮（Instagram、LinkedIn、Twitter）。
- 右侧 7 列：三个链接栏，每栏都有一个全大写字间距 3px 的低调标题，加 4 个链接：
- Product：How It Works、Philosophy、Use Cases、Changelog
- Resources：Writer Guide、Reader FAQ、Press Kit、Brand
- Company：About、Careers、Contact、Journal
- 底部栏 `pt-8 flex md:flex-row items-center justify-between`：左侧「© 2026 Mindloop. All rights reserved.」；右侧 Privacy / Terms / Cookies。
- 巨大的装饰性水印：一个不可交互的 div，渲染单词 `mindloop`，`text-[18vw] leading-none font-serif italic text-foreground/[0.04] tracking-[-0.02em] text-center -mb-[4vw]`，在页脚背后形成一个低调的超大衬线字底纹。
## 视频 URL 汇总（精确使用这些地址）
- Hero：``
- Mission：``
- Solution：``
- CTA：``
## 动画规则
- 所有揭示动画使用 `fadeUp(delay)`（`y: 20 → 0`，`opacity: 0 → 1`，0.6 秒 easeOut，只触发一次，`margin: -100px`）。
- Hero 元素在挂载时就播放动画，而不是等待滚动。
- 导航栏在 `window.scrollY > 20` 时，用 500ms 在透明和液态玻璃之间过渡。
- 按钮使用 `whileHover={{ scale: 1.03 }}`，`whileTap={{ scale: 0.98 }}`。
- Mission 版块使用 `useScroll` 加逐词 `useTransform`，分别控制透明度和模糊度（`6px → 0px`）。
- SearchChanged 卡片：`ArrowUpRight` 在 group 悬停时向右上位移 `-translate-y-0.5 translate-x-0.5`，下划线链接通过 `w-0 → w-full` 增长。
## 排版规则
- 正文：Inter，行高约 1.5。
- 标题：Inter `font-medium`，字间距非常紧（展示级为 `-2px`，版块标题为 `-1.5px` / `-1px`）。
- 斜体强调词用 `<span className="font-serif italic font-normal">…</span>` 包裹，使用 Instrument Serif 与几何无衬线字体形成对比。
- 小标签使用 `text-xs uppercase tracking-[3px] text-muted-foreground`。
## 质量标准
- 完全响应式，支持到 375px 移动端；网格折叠为单列；字体随 `md:` / `lg:` 变体缩放。
- 保持黑色（`#000`）背景一致；所有文字为白色或低调灰色——不使用紫色 / 靛蓝色。
- 视频必须是 `autoplay muted loop playsInline` 且 `object-cover`。
- 除了三张 Pexels 头像和 `/image.png` 的 Logo 外，不使用其他外部图片。
- 构建必须能通过 `npm run build`，不产生 TS 错误。原文提示词（English）
Access ALL prompts for stunning animated websites in one click:
# PROMPT: Recreate this landing page exactly
Build a production-quality marketing landing page for a thoughtful newsletter platform called "Mindloop" as a Vite + React + TypeScript app using Tailwind CSS, shadcn/ui, framer-motion, and lucide-react. The aesthetic is calm, editorial, cinematic — black background, white foreground, serif italic accents, ambient looping background videos, and a signature "liquid glass" effect on interactive surfaces. No purple/indigo hues.
## Stack & dependencies
- Vite + React 18 + TypeScript
- Tailwind CSS with shadcn/ui design tokens (HSL CSS variables)
- `framer-motion` for animation
- `lucide-react` for icons
- `@fontsource/inter` (400, 500, 600, 700) and `@fontsource/instrument-serif` (400, 400-italic) for fonts
- Do NOT install other UI libraries
## Global theme (src/index.css)
Import fontsource CSS at top, then Tailwind layers. Pure black/white palette via HSL vars:
```css
@import "@fontsource/inter/400.css";
@import "@fontsource/inter/500.css";
@import "@fontsource/inter/600.css";
@import "@fontsource/inter/700.css";
@import "@fontsource/instrument-serif/400.css";
@import "@fontsource/instrument-serif/400-italic.css";
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--background: 0 0% 0%;
--foreground: 0 0% 100%;
--card: 0 0% 5%;
--card-foreground: 0 0% 100%;
--popover: 0 0% 5%;
--popover-foreground: 0 0% 100%;
--primary: 0 0% 100%;
--primary-foreground: 0 0% 0%;
--secondary: 0 0% 12%;
--secondary-foreground: 0 0% 85%;
--muted: 0 0% 15%;
--muted-foreground: 0 0% 65%;
--accent: 170 15% 45%;
--accent-foreground: 0 0% 100%;
--border: 0 0% 20%;
--input: 0 0% 18%;
--ring: 0 0% 40%;
--hero-subtitle: 210 17% 95%;
--radius: 0.5rem;
}
}
@layer base {
* { @apply border-border; }
html, body {
margin: 0; padding: 0;
background-color: hsl(var(--background));
color: hsl(var(--foreground));
font-family: Inter, system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body { @apply bg-background text-foreground; }
}
.font-serif { font-family: "Instrument Serif", ui-serif, Georgia, serif; }
/* Liquid glass effect — frosted surface with inset highlight + animated gradient border */
.liquid-glass {
background: rgba(255, 255, 255, 0.01);
background-blend-mode: luminosity;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border: none;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
}
.liquid-glass::before {
content: '';
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;
}
```
Tailwind config extends `fontFamily.sans = Inter`, `fontFamily.serif = "Instrument Serif"`, and maps all colors to the HSL vars. Dark mode is class-based (but the whole site is black by default).
## Shared animation helper (src/lib/animations.ts)
```ts
export const fadeUp = (delay: number = 0) => ({
initial: { opacity: 0, y: 20 },
whileInView: { opacity: 1, y: 0 },
viewport: { once: true, margin: "-100px" },
transition: { duration: 0.6, delay, ease: "easeOut" as const },
});
```
## App structure (src/App.tsx)
```tsx
<div className="bg-background text-foreground min-h-screen font-sans">
<Navbar />
<main>
<Hero />
<SearchChanged />
<Mission />
<Solution />
<CTA />
</main>
<Footer />
</div>
```
## Logo component
The logo is a PNG placed at `public/image.png`. Component renders `<img src="/image.png" className="h-7 w-auto" />` with an optional `className` prop to resize it (e.g. `h-12 w-auto` in the CTA).
---
## Section 1 — Navbar (fixed, shrinks to liquid-glass pill on scroll)
- `fixed top-0 left-0 right-0 z-50`, centered flex wrapper `pt-4 px-4`.
- Inner container: `max-w-6xl rounded-full`, transitions over 500ms between two states:
- Not scrolled: `bg-transparent px-6 py-3`
- Scrolled (>20px): `liquid-glass px-5 py-2.5`
- Left: `<Logo />` only (no text).
- Center (desktop): links "Home", "How It Works", "Philosophy", "Use Cases" in `text-muted-foreground`, hover to `foreground`, with an animated underline that grows from width 0 to full on hover.
- Right (desktop): three circular 9x9 icon buttons for Instagram / LinkedIn / Twitter (lucide), strokeWidth 1.5, hover bg `white/5`.
- Mobile: hamburger (`Menu`) that toggles a `liquid-glass rounded-2xl` dropdown panel below the bar.
## Section 2 — Hero (fullscreen, looping background video)
- Section: `relative min-h-screen w-full overflow-hidden`.
- Full-bleed autoplay/muted/loop/playsInline `<video>` covering the viewport:
- src: ``
- Bottom fade overlay: `absolute bottom-0 h-64 bg-gradient-to-t from-background to-transparent z-[1]`.
- Content `z-10 pt-28 md:pt-32` centered column:
1. Social proof row (fade+slide in): three overlapping round avatars (`w-8 h-8 rounded-full border-2 border-background`) from Pexels (use IDs 415829, 774909, 1222271 with `?auto=compress&cs=tinysrgb&w=100&h=100&fit=crop`) + muted text "7,000+ people already subscribed".
2. H1: `text-5xl md:text-7xl lg:text-8xl font-medium tracking-[-2px] max-w-5xl leading-[1.02]`, content: `Get <span className="font-serif italic font-normal">Inspired</span> with Us`.
3. Subhead in `--hero-subtitle` color, `text-lg max-w-2xl mt-8`: "Join our feed for meaningful updates, news around technology and a shared journey toward depth and direction."
4. Email capture form: `liquid-glass rounded-full p-2 max-w-lg w-full mt-10 flex items-center gap-2`. Transparent input, pill button `bg-foreground text-background rounded-full px-8 py-3 text-xs font-semibold tracking-[2px]` labeled "SUBSCRIBE" with framer hover scale 1.03 / tap 0.98.
- Each element fades in sequentially (delays 0, 0.1, 0.25, 0.4s).
## Section 3 — SearchChanged (the shift)
- `pt-52 md:pt-64 pb-20 px-6 md:px-8`.
- Header grid (12 col): left 7 — eyebrow "THE SHIFT" (uppercase tracking-[3px]) + H2 `text-5xl md:text-7xl lg:text-8xl font-medium tracking-[-2px] leading-[0.95]` reading `Search has <italic serif>changed.</italic><br/>Have you?`. Right 5 — body copy: "The way people discover ideas has quietly shifted. Answers arrive synthesized, personal, and instant — and the old playbook of SEO keywords is running on borrowed time."
- Three-card grid using 1px `bg-border/40` gaps inside a `rounded-3xl overflow-hidden` wrapper so the divider lines look like hairlines. Each card `bg-background p-8 md:p-10` with hover `bg-white/[0.02]`.
- Card header: `liquid-glass` rounded-2xl 12x12 icon tile (left) + `ArrowUpRight` (right) that translates up/right on group hover.
- Big stat `text-4xl md:text-5xl font-medium tracking-[-1px]` + muted label.
- Name (semibold) + muted description.
- Cards: ChatGPT / 400M weekly users / "Conversational answers…"; Perplexity / 15M daily queries / "Cited, sourced responses…"; Google AI / 2B+ AI overviews / mo / "Generative overviews replacing classic search result pages."
- Below: centered quote framed by two `h-px w-12 bg-border` hairlines: `If you don't answer the questions, <foreground>someone else will.</foreground>`
- Every block animates with `fadeUp` staggered.
## Section 4 — Mission (scroll-driven word reveal over parallax video)
- Outer: `relative w-full`, inner wrapper `h-[130vh] md:h-[150vh] overflow-hidden`.
- Background `<>` with parallax: `y` transforms from `-6%` to `6%` across scroll progress, and `scale` bounces `1.08 → 1.02 → 1.08`. Video src: ``
- Overlays for legibility:
- `bg-gradient-to-b from-background via-transparent to-background` + `bg-background/25`
- Top `h-32` and bottom `h-40` fades to background.
- Sticky content container `sticky top-0 h-screen flex items-end justify-center pb-16 md:pb-24`.
- Eyebrow: hairline + "OUR MISSION" (uppercase tracking-[3px]).
- Two stacked paragraphs where each word animates from `opacity 0.2 → 1` and `blur(6px) → blur(0)` based on its own slice of `useScroll({ target, offset: ["start 0.85","end 0.2"] })` progress.
- Paragraph 1 (large `text-2xl md:text-4xl lg:text-6xl font-medium tracking-[-1.5px] leading-[1.12]`): "We're building a space where curiosity meets clarity — where readers find depth, writers find reach, and every newsletter becomes a conversation worth having." The words **curiosity**, **meets**, **clarity** are highlighted full-white with a slightly stronger text-shadow; other words use `--hero-subtitle` color with a soft text-shadow `0 2px 20px rgba(0,0,0,0.6)`.
- Paragraph 2 (smaller `text-xl md:text-2xl lg:text-3xl`): "A platform where content, community, and insight flow together — with less noise, less friction, and more meaning for everyone involved."
- Tag row with bullet dots: `Depth`, `Reach`, `Meaning` (uppercase tracking-[3px] muted).
## Section 5 — Solution (sticky 12-col grid)
- `py-32 md:py-44 border-t border-border/30 px-6 md:px-8`.
- Left column (`lg:col-span-5 lg:sticky lg:top-32`):
- Eyebrow "SOLUTION".
- H2 `text-4xl md:text-5xl lg:text-6xl font-medium tracking-[-1px]`: `The platform for <italic serif>meaningful</italic> content`.
- Body: "Four tools, one quiet ecosystem — built so writing, reading, and discovering all reward the same thing: depth."
- Video card `rounded-2xl overflow-hidden aspect-video` with src: ``
- Right column (`lg:col-span-7`): vertical list of 4 feature rows separated by `border-b border-border/40` (no border on last). Each row has a `liquid-glass` 12x12 rounded-2xl icon tile, title `text-xl md:text-2xl font-semibold tracking-[-0.5px]`, right-aligned index `01–04` in muted tracking-[2px], and muted description under the title. Icons + copy:
1. `Compass` — Curated Feed — "Editorial-quality recommendations that match your pace and depth."
2. `PenLine` — Writer Tools — "A calm canvas with the scaffolding serious writers ask for."
3. `Users` — Community — "Thoughtful readers and creators rewarded for their attention."
4. `Radio` — Distribution — "Reach built on signal, not noise — measured by meaning."
## Section 6 — CTA (video background + centered content)
- `relative py-32 md:py-44 border-t border-border/30 overflow-hidden px-6 md:px-8`.
- Background video (cover, z-0) src: ``
- Overlay `absolute inset-0 bg-background/45 z-[1]`.
- Centered content (max-w-3xl):
- `<Logo className="h-12 w-auto" />` at the top.
- H2 `text-4xl md:text-6xl lg:text-7xl font-medium tracking-[-1px] mt-8 leading-[1.05]`: `<italic serif>Start</italic> Your Journey`.
- Muted lede: "Step into a quieter internet. Join the readers and writers shaping what comes next."
- Buttons row (hover scale 1.03, tap 0.98):
- Primary: `bg-foreground text-background rounded-lg px-8 py-3.5 text-sm font-semibold` — "Subscribe Now".
- Secondary: `liquid-glass rounded-lg px-8 py-3.5 text-sm font-semibold` — "Start Writing".
- Each element `fadeUp` with delays 0, 0.1, 0.2, 0.3.
## Section 7 — Footer
- `border-t border-border/30 px-6 md:px-8`, inner `max-w-7xl pt-20 pb-12`.
- Top block: 12-col grid split 5/7, with a `border-b border-border/30 pb-16`.
- Left 5 cols: `<Logo />` only (no "Mindloop" text) + paragraph "A quieter internet for readers and writers. Meaningful updates, every week." + row of three `liquid-glass` 10x10 rounded-full icon buttons (Instagram, LinkedIn, Twitter).
- Right 7 cols: three link columns, each with a uppercase tracking-[3px] muted heading and 4 links:
- Product: How It Works, Philosophy, Use Cases, Changelog
- Resources: Writer Guide, Reader FAQ, Press Kit, Brand
- Company: About, Careers, Contact, Journal
- Bottom bar `pt-8 flex md:flex-row items-center justify-between`: `© 2026 Mindloop. All rights reserved.` left; Privacy / Terms / Cookies right.
- Giant decorative watermark: a non-interactive div rendering the word `mindloop` at `text-[18vw] leading-none font-serif italic text-foreground/[0.04] tracking-[-0.02em] text-center -mb-[4vw]`, giving a subtle oversized serif backdrop behind the footer.
## Video URLs summary (use exactly these)
- Hero: ``
- Mission: ``
- Solution: ``
- CTA: ``
## Animation rules
- All reveal animations use `fadeUp(delay)` (`y: 20 → 0`, `opacity: 0 → 1`, 0.6s easeOut, once, `margin: -100px`).
- Hero elements animate in on mount, not on scroll.
- Navbar transitions between transparent and liquid-glass over 500ms when `window.scrollY > 20`.
- Buttons use `whileHover={{ scale: 1.03 }}`, `whileTap={{ scale: 0.98 }}`.
- Mission section uses `useScroll` + per-word `useTransform` for opacity and blur (`6px → 0px`).
- SearchChanged cards: `ArrowUpRight` group-hover translates `-translate-y-0.5 translate-x-0.5`, underline links grow via `w-0 → w-full`.
## Typography rules
- Body: Inter, line-height ~1.5.
- Headings: Inter `font-medium` with very tight negative tracking (`-2px` on display, `-1.5px`/`-1px` on section heads).
- Italic accent words wrap in `<span className="font-serif italic font-normal">…</span>` using Instrument Serif to contrast with the geometric sans.
- Eyebrows use `text-xs uppercase tracking-[3px] text-muted-foreground`.
## Quality bar
- Fully responsive down to 375px mobile; grids collapse to single column; fonts scale with `md:` / `lg:` variants.
- Keep black (`#000`) background consistent; all text white or muted grays — no purple/indigo.
- Videos must be `autoplay muted loop playsInline` and `object-cover`.
- No external images besides the three Pexels avatars and the logo at `/image.png`.
- Build must pass `npm run build` without TS errors.建议模型
GPT Image 2 · Veo 3 · Lovable / GPT-5.6 Sol
视频地址
https://media.goodcase.ai/media/video/gpt-image-2-veo-3-lovable-cec7a074af1a.mp4
