太空旅行全屏动画 Hero

Prompt

无限量的动画 AI Hero ——

这是我使用的确切提示词：

用 React、Vite、TypeScript、Tailwind CSS 和 motion/react（Framer Motion）库为一个太空旅行网站构建一个全屏电影感 Hero 区域。严格按照下面的每一处细节还原。

1. 字体

从 Google Fonts 引入 Instrument Serif（斜体）和 Barlow（300、400、500、600 字重）：
@import url('');
在 tailwind.config.ts 中注册：
fontFamily: {
heading: ["'Instrument Serif'", "serif"],
body: ["'Barlow'", "sans-serif"],
}
设置 --radius: 9999px 以实现完全圆角元素。使用基于 HSL 的色彩系统，其中 --background: 213 45% 67%（柔和天空蓝），--foreground: 0 0% 100%（白色）。

2. 背景视频

使用一个全屏 <video> 元素，定位为 absolute inset-0，配 object-cover、z-0，并带以下属性：autoPlay loop muted playsInline preload="auto"。

视频 URL：

海报图片：/images/hero_bg.jpeg

叠加层：一个 div，absolute inset-0 bg-black/5 z-0，位于视频之上。

在 index.html 的 <head> 中添加预加载提示：

<link rel="preload" as="image" href="/images/hero_bg.jpeg" type="image/jpeg" />
<link rel="preload" as="video" href="" type="video/mp4" />

3. 液态玻璃 CSS

在 index.css 的 @layer components 下定义两个工具类：

.liquid-glass（轻量）：

.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;
}

.liquid-glass-strong（加强版，用于 CTA 按钮）：

.liquid-glass-strong {
background: rgba(255, 255, 255, 0.01);
background-blend-mode: luminosity;
backdrop-filter: blur(50px);
-webkit-backdrop-filter: blur(50px);
border: none;
box-shadow: 4px 4px 4px rgba(0,0,0,0.05), inset 0 1px 1px rgba(255,255,255,0.15);
position: relative;
overflow: hidden;
}

与 .liquid-glass 相同的 ::before 伪元素，但透明度值改为 0.5 和 0.2，而不是 0.45 和 0.15。

4. 导航栏

固定定位：fixed top-4 left-0 right-0 z-50，配 px-8 lg:px-16。包含：

左侧：一个 Logo 图片（h-12 w-12）。

中间（仅桌面端）：一个液态玻璃圆角药丸容器，内含导航链接：「Home」「Voyages」「Worlds」「Innovation」「Plan Launch」——每个都是 px-3 py-2 text-sm font-medium text-foreground/90 font-body。

药丸内最后一项：一个纯白色按钮 bg-white text-black rounded-full px-3.5 py-1.5 text-sm font-medium font-body，文字为「Claim a Spot」，配一个 ArrowUpRight 图标（lucide-react，h-4 w-4）。

5. Hero 内容（居中）

外层容器：flex-1 flex flex-col items-center justify-center text-center px-4 pt-24。

a) 徽标：
一个液态玻璃圆角 px-1 py-1 容器，内含：

一个纯白色药丸：bg-white text-black rounded-full px-3 py-1 text-xs font-semibold font-body，文字为「New」。

相邻文字：text-sm text-foreground/90 pr-3 font-body —— 「Maiden Crewed Voyage to Mars Arrives 2026」。

底部外边距 mb-2。

b) 标题：
使用一个自定义的 BlurText 组件（逐词从下方模糊显现动画）。属性：

text="Venture Past Our Sky Across the Universe"
className="text-6xl md:text-7xl lg:text-[5.5rem] font-heading italic text-foreground leading-[0.8] max-w-2xl justify-center tracking-[-4px]"
delay={100}
animateBy="words"
direction="bottom"

BlurText 组件按词拆分文字，使用 IntersectionObserver 触发，并用 motion.span 让每个词从 {filter: 'blur(10px)', opacity: 0, y: 50} 经过 {filter: 'blur(5px)', opacity: 0.5, y: -5} 动画到 {filter: 'blur(0px)', opacity: 1, y: 0}，stepDuration: 0.35，每个词错开 100ms 延迟。

c) 副标题：
一个 motion.p，类名为 mt-1 text-sm md:text-base text-white max-w-2xl font-body font-light leading-tight。文字：「Discover the universe in ways once unimaginable. Our pioneering vessels and breakthrough engineering bring deep-space exploration within reach—secure and extraordinary.」
动画：initial={{ filter: 'blur(10px)', opacity: 0, y: 20 }} → animate={{ filter: 'blur(0px)', opacity: 1, y: 0 }}，duration: 0.6，delay: 0.8。

d) CTA 按钮：
一个 motion.div，flex items-center gap-6 mt-4，使用相同的模糊显现动画，delay: 1.1。
主按钮：liquid-glass-strong rounded-full px-5 py-2.5 text-sm font-medium text-foreground font-body —— 「Start Your Voyage」加 ArrowUpRight 图标（h-5 w-5）。
次按钮：纯文字按钮 —— 「View Liftoff」加 Play 图标（h-4 w-4 fill-current）。

6. 合作伙伴条（底部）

定位在底部：flex flex-col items-center gap-4 pb-8。
一个液态玻璃圆角 px-3.5 py-1 text-xs font-medium text-white font-body 标签：「Collaborating with top aerospace pioneers globally」。
一排 5 个合作伙伴名称：「Aeon」「Vela」「Apex」「Orbit」「Zeno」——每个样式为 text-2xl md:text-3xl font-heading italic text-white tracking-tight，间距 gap-12 md:gap-16。

7. Z-Index 层级
视频加叠加层：z-0
所有内容（导航栏、Hero、合作伙伴）：包裹在一个 relative z-10 容器中。
导航栏：z-50。

溯源 · 已核对已发布案例的 prompt 均经人工核对与原帖一致；平台逆向重构的 prompt 不予收录。核对原帖 ↗

适用模型与稳定度

建议模型

React · Vite · TypeScript

稳定度: 79 / 100
成本: 中

AI 编程(UI)X

3D 超市包装式创意机构官网

@Oluwaphilemon1 使用 Claude Fable 5 · Three.js · Blender · GSAP完成的网页案例，包含公开结果、完整 Prompt 与原始来源。

Skill · 3D / 动效 Hero Skill · 个人作品集叙事

提示语

Claude Fable 5 和 GPT-5.6 很强🥵🥵🥵 下面是我如何使用 Claude 构建的 👇 提示词：「设计一个机构网站，把服务以 3D 超市商品包装的形式呈现」使用 Three.js 和 WebGL 在浏览器中实时渲染所有产品使用 Blender 制作包装模型，然后导出为 GLTF 以加载到 Three.js 中使用 GSAP 实现流畅的产品旋转和悬停交互如果你想做一个让客户感觉像是在购买高级商品的作品集，请保存这条 🛒

来源热度 · X

稳定度

查看 Case →

AI 编程(UI)Aceternity UI

3D 动画图钉

复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「3D Animated Pin」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。

Skill · 3D / 动效 Hero

提示语

// components/ui/3d-pin.tsx "use client"; import React, { useState } from "react"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; export const PinContainer = ({ children, title, href, className, containerClassName…

来源热度 · Aceternity UI

—

稳定度

查看 Case →

AI 编程(UI)X2026/09/06

高密度 3D 浏览器森林生成器

一个复杂的提示词，用于利用 Three.js 风格优化和逼真光照，在浏览器中生成精细的实时 3D 森林环境。

Skill · 3D / 动效 Hero Skill · 产品与电商转化页

提示语

首先搜索 "/unlazy" skill，完整阅读它，并在整个任务中持续使用。将此视为一项至少持续 {argument name="minimum duration" default="5 小时"} 的大型视觉构建。如果环境允许，最好进行 {argument name="optimal duration" default="8–24 小时"} 有实质意义的实现和迭代。不要在制作出一个还不错的场景后就停下。在浏览器中创建一个细节极其丰富的实时 {argument nam

来源热度 · X

稳定度

查看 Case →

Prompt

无限量的动画 AI Hero ——

这是我使用的确切提示词：

用 React、Vite、TypeScript、Tailwind CSS 和 motion/react（Framer Motion）库为一个太空旅行网站构建一个全屏电影感 Hero 区域。严格按照下面的每一处细节还原。

1. 字体

从 Google Fonts 引入 Instrument Serif（斜体）和 Barlow（300、400、500、600 字重）：
@import url('');
在 tailwind.config.ts 中注册：
fontFamily: {
heading: ["'Instrument Serif'", "serif"],
body: ["'Barlow'", "sans-serif"],
}
设置 --radius: 9999px 以实现完全圆角元素。使用基于 HSL 的色彩系统，其中 --background: 213 45% 67%（柔和天空蓝），--foreground: 0 0% 100%（白色）。

2. 背景视频

使用一个全屏 <video> 元素，定位为 absolute inset-0，配 object-cover、z-0，并带以下属性：autoPlay loop muted playsInline preload="auto"。

视频 URL：

海报图片：/images/hero_bg.jpeg

叠加层：一个 div，absolute inset-0 bg-black/5 z-0，位于视频之上。

在 index.html 的 <head> 中添加预加载提示：

<link rel="preload" as="image" href="/images/hero_bg.jpeg" type="image/jpeg" />
<link rel="preload" as="video" href="" type="video/mp4" />

3. 液态玻璃 CSS

在 index.css 的 @layer components 下定义两个工具类：

.liquid-glass（轻量）：

.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;
}

.liquid-glass-strong（加强版，用于 CTA 按钮）：

.liquid-glass-strong {
background: rgba(255, 255, 255, 0.01);
background-blend-mode: luminosity;
backdrop-filter: blur(50px);
-webkit-backdrop-filter: blur(50px);
border: none;
box-shadow: 4px 4px 4px rgba(0,0,0,0.05), inset 0 1px 1px rgba(255,255,255,0.15);
position: relative;
overflow: hidden;
}

与 .liquid-glass 相同的 ::before 伪元素，但透明度值改为 0.5 和 0.2，而不是 0.45 和 0.15。

4. 导航栏

固定定位：fixed top-4 left-0 right-0 z-50，配 px-8 lg:px-16。包含：

左侧：一个 Logo 图片（h-12 w-12）。

中间（仅桌面端）：一个液态玻璃圆角药丸容器，内含导航链接：「Home」「Voyages」「Worlds」「Innovation」「Plan Launch」——每个都是 px-3 py-2 text-sm font-medium text-foreground/90 font-body。

药丸内最后一项：一个纯白色按钮 bg-white text-black rounded-full px-3.5 py-1.5 text-sm font-medium font-body，文字为「Claim a Spot」，配一个 ArrowUpRight 图标（lucide-react，h-4 w-4）。

5. Hero 内容（居中）

外层容器：flex-1 flex flex-col items-center justify-center text-center px-4 pt-24。

a) 徽标：
一个液态玻璃圆角 px-1 py-1 容器，内含：

一个纯白色药丸：bg-white text-black rounded-full px-3 py-1 text-xs font-semibold font-body，文字为「New」。

相邻文字：text-sm text-foreground/90 pr-3 font-body —— 「Maiden Crewed Voyage to Mars Arrives 2026」。

底部外边距 mb-2。

b) 标题：
使用一个自定义的 BlurText 组件（逐词从下方模糊显现动画）。属性：

text="Venture Past Our Sky Across the Universe"
className="text-6xl md:text-7xl lg:text-[5.5rem] font-heading italic text-foreground leading-[0.8] max-w-2xl justify-center tracking-[-4px]"
delay={100}
animateBy="words"
direction="bottom"

BlurText 组件按词拆分文字，使用 IntersectionObserver 触发，并用 motion.span 让每个词从 {filter: 'blur(10px)', opacity: 0, y: 50} 经过 {filter: 'blur(5px)', opacity: 0.5, y: -5} 动画到 {filter: 'blur(0px)', opacity: 1, y: 0}，stepDuration: 0.35，每个词错开 100ms 延迟。

c) 副标题：
一个 motion.p，类名为 mt-1 text-sm md:text-base text-white max-w-2xl font-body font-light leading-tight。文字：「Discover the universe in ways once unimaginable. Our pioneering vessels and breakthrough engineering bring deep-space exploration within reach—secure and extraordinary.」
动画：initial={{ filter: 'blur(10px)', opacity: 0, y: 20 }} → animate={{ filter: 'blur(0px)', opacity: 1, y: 0 }}，duration: 0.6，delay: 0.8。

d) CTA 按钮：
一个 motion.div，flex items-center gap-6 mt-4，使用相同的模糊显现动画，delay: 1.1。
主按钮：liquid-glass-strong rounded-full px-5 py-2.5 text-sm font-medium text-foreground font-body —— 「Start Your Voyage」加 ArrowUpRight 图标（h-5 w-5）。
次按钮：纯文字按钮 —— 「View Liftoff」加 Play 图标（h-4 w-4 fill-current）。

6. 合作伙伴条（底部）

定位在底部：flex flex-col items-center gap-4 pb-8。
一个液态玻璃圆角 px-3.5 py-1 text-xs font-medium text-white font-body 标签：「Collaborating with top aerospace pioneers globally」。
一排 5 个合作伙伴名称：「Aeon」「Vela」「Apex」「Orbit」「Zeno」——每个样式为 text-2xl md:text-3xl font-heading italic text-white tracking-tight，间距 gap-12 md:gap-16。

7. Z-Index 层级
视频加叠加层：z-0
所有内容（导航栏、Hero、合作伙伴）：包裹在一个 relative z-10 容器中。
导航栏：z-50。

溯源 · 已核对已发布案例的 prompt 均经人工核对与原帖一致；平台逆向重构的 prompt 不予收录。核对原帖 ↗

适用模型与稳定度

建议模型

React · Vite · TypeScript