ChatGPT Image 设计转 React Native 网站

一键获取所有令人惊艳动效网站的提示词：

精确复刻提示词

项目设置

技术栈：React 19 + Vite 6 + Tailwind CSS 4 + Motion（Framer Motion）+ Lucide React 图标 + TypeScript

package.json 依赖：
- `react`、`react-dom` ^19.0.1
- `vite` ^6.2.3
- `@tailwindcss/vite` ^4.1.14、`tailwindcss` ^4.1.14
- `motion` ^12.23.24
- `lucide-react` ^0.546.0
- `@vitejs/plugin-react` ^5.0.4
- `typescript` ~5.8.2

字体（通过 Google Fonts 在 `index.css` 中加载）：
- 无衬线：Inter（字重：300、400、500、600）
- 等宽：JetBrains Mono（字重：400、500）

```css
/* index.css */
@import url('');
@import "tailwindcss";

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
}

@layer utilities {
  .text-mega {
    font-size: 21vw;
    line-height: 0.75;
    letter-spacing: -0.04em;
  }
}
```

全局样式：背景色 `#fcfcfc`，文字 `#111`，选中颜色 `bg-black text-white`，`overflow-x-hidden`，`font-sans`（Inter）。

---

数据

```tsx
const chaptersData = [
  { name: "Age of Dinosaurs", image: "" },
  { name: "Fossils of Ancient Life", image: "" },
  { name: "Reptiles of the Mesozoic", image: "" },
  { name: "Marine Fossil Gallery", image: "" },
  { name: "Prehistoric Giants", image: "" }
];
```

---

状态

```tsx
const [showVideo, setShowVideo] = useState(false);
const [activeChapter, setActiveChapter] = useState(2); // 起始为 "Reptiles of the Mesozoic"
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
```

- `showVideo` 在延迟 2800ms 后（setTimeout）切换为 `true`
- `activeChapter` 每隔 3500ms 通过 setInterval 自动循环切换，`(prev + 1) % 5` 循环

---

动画变体

```tsx
const fadeUp = {
  initial: { opacity: 0, y: 20 },
  animate: { opacity: 1, y: 0 },
};

const letterBlock = {
  initial: { y: 120, opacity: 0 },
  animate: { 
    y: 0, 
    opacity: 1, 
    transition: { duration: 1.2, ease: [0.16, 1, 0.3, 1] } 
  }
};
```

---

版块 1：HERO（全视口高度）

容器：`relative w-full min-h-screen flex flex-col overflow-hidden`

1A. 页头（NHM Logo）

- `motion.header`，配 `staggerChildren: 0.1, delayChildren: 0.1`
- 内边距：`pt-6 px-6 md:px-16`，`z-20`
- 「NHM」Logo 是一个自定义内联 SVG，`viewBox="0 0 840 100"`，`fill-[#111]`，全宽
- 该 SVG 包裹在 `motion.h1` 中，用 `variants` 从 `scale: 1.03` 动画到 `scale: 1`，配 `staggerChildren: 0.06, delayChildren: 0.1`
- 每个字母的每个多边形都使用 `letterBlock` 变体（从 `y: 120` 向上滑入）
- 字母 N（平移 0,0）：三个多边形——左侧竖线 `0,0 14,0 14,100 0,100`，右侧竖线 `200,0 214,0 214,100 200,100`，对角线 `0,0 33,0 214,100 181,100`
- 字母 H（平移 280,0）：三个多边形——左侧竖线 `0,0 14,0 14,100 0,100`，右侧竖线 `200,0 214,0 214,100 200,100`，横杠 `14,43 200,43 200,57 14,57`
- 字母 M（平移 560,0）：四个多边形——左侧竖线 `0,0 14,0 14,100 0,100`，右侧竖线 `266,0 280,0 280,100 266,100`，左对角线 `0,0 26,0 153,100 127,100`，右对角线 `254,0 280,0 153,100 127,100`

1B. 子导航栏

- 位于 SVG Logo 下方，`flex justify-between items-start mt-8`
- 字体：`text-[10px] md:text-[11px] font-mono tracking-[0.2em] uppercase`
- 使用 `fadeUp` 变体，`duration: 0.8, ease: "easeOut"`

左栏（宽度 15%）：三行文字——「Natura」/「History」/「Museum」

箭头分隔符（宽度 5%，移动端隐藏）：来自 lucide 的 `ArrowRight`，尺寸 14，描边宽度 1，`text-gray-400`

中间栏（移动端 flex-1，桌面端 30%）：「Exploring the story of life on earth through science, discovery and wonder.」——桌面端（3 行）与移动端（4 行）的换行方式不同。`text-gray-800 leading-relaxed font-mono`

箭头分隔符（宽度 5%，移动端隐藏）：与上方相同

右栏（宽度 15%，移动端隐藏）：导航链接列表——Visit、Exhibitions、Discover、Learn、About。`text-gray-800`，`hover:text-black hover:underline`

汉堡按钮（最右侧，z-60）：两条水平线（`w-8 h-[1.5px] bg-black`），`gap-[6px]`。悬停：第一条线收缩为 `w-6`，第二条扩展为 `w-10`。打开时：第一条旋转 45 度加位移，第二条旋转 -45 度加位移（形成 X 形）。过渡：`duration-300`。

1C. 移动端菜单叠加层

- `AnimatePresence` 包裹一个 `motion.div`
- 出现在页头下方，从 `y: -20`，`opacity: 0` 滑入到 `y: 0, opacity: 1`
- `bg-[#fcfcfc] border-b border-gray-200 shadow-xl`，仅在 `md:hidden` 时可见
- 包含与桌面版相同的导航链接，`text-sm font-mono tracking-[0.2em] uppercase`，`space-y-6`

1D. 背景视频

- 延迟 2800ms 后出现（由 `showVideo` 状态控制）
- `absolute top-0 left-0 w-full h-full pointer-events-none z-0`
- 视频：`autoPlay loop muted playsInline`，`w-full h-full object-cover`
- 视频 URL：``

1E. 左侧栏内容

- `motion.div`，配 `staggerChildren: 0.15, delayChildren: 0.6`
- 位置：`px-10 md:px-16`，`mt-20 sm:mt-28 md:mt-32`，`w-[320px]`，`z-10`

版块指示器：「01」加水平线（`w-16 h-[1.5px] bg-black/20`），`text-xs font-mono`

主标题：「TIMELESS WONDERS」——`text-[3.5rem] md:text-[5rem] font-normal tracking-tight leading-[1]`。「TIMELESS」和「WONDERS」之间换行。

描述：「Step into the natural world and / discover the stories written / millions of years ago.」——`text-[13px] md:text-[14px] text-gray-700 w-[240px] leading-[1.6]`

CTA 按钮（「Explore Now」）：
- 容器：`bg-[#1a1a1a] px-6 py-3.5 border border-[#1a1a1a] rounded-md shadow-sm`
- 悬停：上移 0.5px，加 `shadow-[3px_3px_0px_rgba(17,17,17,0.5)]`
- 点击态：重置位移和阴影
- 带一个滑动背景层：`bg-[#fcfcfc]`，悬停时从 `-translate-x-[101%]` 滑到 `translate-x-0`，`duration-700 ease-[cubic-bezier(0.16,1,0.3,1)]`
- 图标：自定义 SVG 叶片 / 植物形状（4 条路径构成风格化叶片），默认白色，悬停时变为 `#111`，配 `scale-110 -rotate-12 -translate-y-1` 变换
- 文字：「Explore Now」，`text-[15px] font-medium`，白色，悬停时变为 `#111`

1F. 右侧栏（移动端隐藏）

- `motion.div`，配 `staggerChildren: 0.15, delayChildren: 0.9`
- 位置：`w-[200px] mt-12 md:mt-20`，`hidden md:flex`

标本信息：「Tyrannosaurus Rex」标题（`text-[10px] font-bold font-mono tracking-widest uppercase`），副文本「Late Cretaceous period / 68-66 million years ago」（`text-[12px] text-gray-600 leading-[1.6]`）

数据：「Length」标签加「12.3 m」数值，「Height」标签加「4.0 m」数值。标签：`text-[10px] font-mono tracking-widest uppercase text-gray-500`。数值：`text-[13px] font-medium`。

View Details 按钮：圆圈（`w-10 h-10 rounded-full border border-gray-400`）配 `Plus` 图标（尺寸 16，描边宽度 1.5），文字「View Details」（`text-[10px] font-mono uppercase tracking-widest font-bold`）。悬停：圆圈变为 `border-black bg-[#111]`，图标变白。

1G. 左下角「SCROLL TO EXPLORE」

- `absolute bottom-10 left-[2.5rem] md:left-[4rem]`，`hidden md:flex`
- 淡入上移动画：`delay: 1.2`
- 圆圈（`w-12 h-12 rounded-full border border-gray-300`），内含两条细竖线（`w-[1px] h-[12px] bg-gray-600`，`gap-[4px]`），代表暂停图标
- 文字：「Scroll to explore」——`text-[10px] font-mono tracking-widest uppercase text-gray-500 font-semibold`

---

版块 2：「EXPLORE OUR WORLD」

容器：`relative w-full min-h-[75vh] md:min-h-screen bg-[#fcfcfc]`，flex 纵向居中，`pt-24 md:pt-32 pb-0 z-20`

2A. 版块标签

`[ 02 ] Explore Our World`——`text-[10px] md:text-[11px] font-mono tracking-[0.2em]`，`mb-12`。「02」为 `text-gray-500`，「Explore Our World」为 `text-gray-900 font-bold uppercase`。

2B. 主标题

「Unearth the stories of our planet's past through fossils, minerals, and ancient wonders.」——`text-[2.2rem] md:text-[3.5rem] lg:text-[4.2rem] leading-[1.1] font-medium tracking-tight text-[#111]`，最大宽度 1000px，居中文字。桌面端在「past」后换行。动画使用 `whileInView`，从 `y: 40, opacity: 0` 到 `y: 0, opacity: 1`，`once: true`，边距 `-100px`。

2C. 操作药丸

五个药丸按钮，flex-wrap 行，`gap-3 md:gap-4`，`mb-10 md:mb-24`。交错揭示动画（`staggerChildren: 0.1, delayChildren: 0.3`）。每个药丸：`rounded-full border border-gray-300 text-[11px] font-medium uppercase tracking-wider bg-white/50 backdrop-blur-sm text-gray-800`。悬停：`border-black bg-black text-white`。图标来自 lucide（尺寸 14，描边宽度 2）：

1. `Bone` 加「Dinosaurs」
2. `Dna` 加「Ancient Life」
3. `Gem` 加「Minerals」
4. `Leaf` 加「Fossils」
5. `BookOpen` 加「Learn More」

2D. 间隔区

`min-h-[220px] md:min-h-[450px]`——为版块 3 的翼龙图片向上重叠预留空间。

2E. 底部文字

绝对定位在底部，`px-8 md:px-16 pb-8 md:pb-12`，`pointer-events-none`。两个文字元素，`justify-between`：
- 左侧：「WE DON'T JUST TELL STORIES.」
- 右侧：「PALEONTOLOGY (C) 2026」
- 两者均为：`text-[10px] font-mono tracking-widest uppercase text-gray-500 font-medium`，移动端隐藏。

---

版块 3：「ANCIENT COLLECTION」（深色版块）

容器：`relative w-full bg-[#0a0a0a] text-white flex flex-col z-30`

3A. 翼龙图片（重叠）

- 绝对定位在顶部，水平居中（`left-1/2 -translate-x-1/2`）
- 宽度：`w-[160vw] md:w-[1100px]`
- 图片 URL：``
- 动画使用 `whileInView`，从 `y: "-65%", opacity: 0` 到 `y: "-78%", opacity: 1`，`duration: 1.4, ease: "easeOut"`，视口边距 `100px`
- `pointer-events-none z-0`，此处不应用 `mix-blend`

3B. 标题区域

- 内边距：`px-8 md:px-16 pt-32 md:pt-48 mb-16`，`z-10`
- xl 断点下两栏布局（`flex-col xl:flex-row justify-between`）

左侧——主标题：「Curated from millions of years of wonder [3 个圆形图标] & discovery.」——`text-[1.8rem] md:text-[3rem] lg:text-[3.8rem] xl:text-[4rem] leading-[1.15] font-medium tracking-tight text-white`。三个圆形图标为内联（`inline-flex gap-2 md:gap-3 align-middle mx-2 md:mx-4 translate-y-[-4px]`），每个都是 `w-10 h-10 md:w-14 md:h-14 rounded-full border border-gray-600 bg-black text-gray-400`。悬停：`bg-white text-black border-white`。图标：`Bone`、`Dna`、`Leaf`（尺寸 22）。

右侧——标语加药丸：
- 标语：「WE DON'T JUST DISPLAY FOSSILS / WE SHARE EARTH'S STORY」——`text-[9px] md:text-[10px] font-mono tracking-widest text-gray-400 uppercase mb-6 leading-relaxed`
- 三个药丸：「Educational」「Authentic」「Inspiring」——`px-5 py-2 rounded-full border border-gray-600 text-[9px] font-mono tracking-widest uppercase text-gray-300`。悬停：`bg-white text-black border-white`。

3C. 两栏面板

用 `h-[1px] bg-gray-800` 线条分隔。桌面端横向，移动端纵向。

左侧面板（宽度 35%）：
- 桌面端 `border-r border-gray-800`，移动端 `border-b`
- `min-h-[400px] md:min-h-[500px]`
- 顶部：`***` 文字（`text-gray-500 text-xl tracking-[0.3em]`）
- 中间：使用 `SandTransitionImage` 组件（基于 SVG 滤镜的沙粒 / 溶解转场）展示章节图片。图片：`absolute inset-0 w-[80%] h-[80%] m-auto object-contain mix-blend-lighten`。使用 `AnimatePresence mode="wait"`。
- 底部：章节计数器，「01 / 05」样式，带动画数字（`motion.div` 垂直滑动）。`text-[10px] font-mono tracking-widest text-[#888] uppercase`。计数数字颜色 `#888`，分隔符 `#333`。

右侧面板（宽度 65%）：
- 顶部栏：「Explore the past. Understand the present.」加动态的「Chapter 0X」标签。`border-b border-gray-800 p-8 text-[10px] font-mono text-gray-400 tracking-widest`。
- 章节列表：5 个项目，每个都是 `border-b border-gray-800/80 py-8`。当前项：`text-white`，非当前项：`text-[#444] hover:text-[#999]`。章节名称：`text-2xl md:text-[2rem] font-medium tracking-tight`。当前项显示 `ArrowUpRight` 图标（尺寸 22，描边宽度 1，`text-gray-400`），带淡入淡出动画。
- 点击某个章节会设置 `activeChapter`。

3D. 底部页脚

- `h-[1px] bg-gray-800` 分隔线
- 文字：「DIGGING INTO OUR PLANET'S PAST」——`px-8 py-8 text-[10px] font-mono tracking-widest text-gray-500 uppercase bg-[#0a0a0a]`

---

SandTransitionImage 组件

一个使用 SVG 滤镜创建沙粒 / 粒子溶解效果的自定义组件：

```tsx
function SandTransitionImage({ src, alt, className }) {
  // 使用 motion/react 的 usePresence() 以感知 AnimatePresence
  // 每个实例通过 useRef 生成唯一的 filterId
  // requestAnimationFrame 循环，持续 900ms
  // 缓动：进入 = 四次方 ease-out (1 - Math.pow(1-t, 4))，退出 = 三次方 (Math.pow(t, 3))
  // SVG 滤镜链：
  //   1. feTurbulence：fractalNoise，baseFrequency 1.8，numOctaves 4
  //   2. feDisplacementMap：根据进度放大到最高 150
  //   3. feOffset：dy 最高到 -80（进入）或 120（退出），dx 最高到 -30/+30
  //   4. feGaussianBlur：最高 6px
  //   5. feColorMatrix：透明度渐隐 (1 - progress * 1.2)
  // 图片带 crossOrigin="anonymous" 和 referrerPolicy="no-referrer"
}
```

---

所有外部素材 URL

视频：
- ``

图片：
- 章节 1：``
- 章节 2：``
- 章节 3：``
- 章节 4：``
- 章节 5：``
- 翼龙：``

（注：这些是 Cloudinary URL，不是 CloudFront。本项目所有托管媒体素材都使用 Cloudinary。）

---

关键设计细节

- 配色方案：`#fcfcfc`（米白背景）、`#111` / `#1a1a1a`（近黑色）、`#0a0a0a`（深色版块背景）。灰阶通过 Tailwind：`gray-300` 到 `gray-800`。
- 全站不使用紫色 / 靛蓝色，严格黑白灰单色。
- 排版层级：大型展示标题（3.5-5rem）、等宽标签（10-11px）、正文（13-14px）。
- 间距：全站使用 8px 基础间距系统。
- 过渡：多数悬停过渡为 300-700ms。按钮滑动效果使用 `cubic-bezier(0.16, 1, 0.3, 1)`。字母动画使用相同的三次贝塞尔曲线。
- 整个页面就是一个单独的 `App.tsx` 组件，加上同文件中的 `SandTransitionImage` 辅助函数。