创作者viktoroddy →@viktoroddy 使用 React · Vite · TypeScript完成的网页案例，包含公开结果、完整 Prompt 与原始来源。
查看原始来源 ↗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。复用方法
关键决定
关键决定是把液态玻璃组件拆成普通和加强两个强度级别分别用于导航和 CTA 按钮，并用自定义的逐词模糊显现组件精确控制标题动画的每个阶段参数，这种把动效拆成可复用组件加精确时间参数的写法，让电影感效果变得可执行而不是形容词堆砌。
换到你的题材
换到你的题材时可以替换背景视频、标题文案、徽章文字和合作伙伴名单，骨架是双强度液态玻璃系统、逐词模糊显现的标题动画、以及带延迟节奏的多层内容淡入序列。换成其他探索类产品的 Hero 时保留这套分层动画时序，只替换文案与视觉素材。
容易翻车
容易翻车的是逐词动画的层叠延迟在长标题上容易显得拖沓，液态玻璃在浅色视频背景上对比度也可能不足；复测时先看标题动画节奏是否与整体 Hero 停留时间匹配，再检查徽章和按钮上的液态玻璃边框在不同视频帧背景下是否始终可读。
建议模型
Derived Skill
Skill 只从多个已发布 Case 的重复模式中派生，不是另一套投稿内容。
创作者
viktoroddy 在X输出 UI 工程化实践，《应式3D角色轮播动画UI》搭 Claude Sonnet 出方案，带可复现代码。
继续探索
@Oluwaphilemon1 使用 Claude Fable 5 · Three.js · Blender · GSAP完成的网页案例，包含公开结果、完整 Prompt 与原始来源。
提示语
Claude Fable 5 和 GPT-5.6 很强🥵🥵🥵 下面是我如何使用 Claude 构建的 👇 提示词：「设计一个机构网站，把服务以 3D 超市商品包装的形式呈现」 使用 Three.js 和 WebGL 在浏览器中实时渲染所有产品 使用 Blender 制作包装模型，然后导出为 GLTF 以加载到 Three.js 中 使用 GSAP 实现流畅的产品旋转和悬停交互 如果你想做一个让客户感觉像是在购买高级商品的作品集，请保存这条 🛒
提示语
有几个人询问提示词，所以放在这里 👇 附言：根据你的使用场景进行调整。 创建一个现代、极简的 3D 发票生成器机器组件，采用高级 SaaS 风格美学。 视觉设计 - 设计一台宽幅横向的发票打印机，灵感来自小票打印机，但外观未来感十足且干净利落。 - 使用细微的灰色线条、柔和阴影和极少细节。 - 机器应显得高级、轻盈而现代，而不是写实或工业化。 - 保持整体设计足够干净，使其可以放入仪表盘或落地页的 Hero 区域。 - 直接在机器上添加一个醒目的 Print Inv
@shushant_l 使用 AI Website Builder完成的网页案例，包含公开结果、完整 Prompt 与原始来源。
提示语
下面介绍如何用 AI 以极简设计风格创建你的网站。 使用这条提示：为一位数字创作者和 AI 顾问设计一个现代极简作品集网站。采用干净的黑、白和中性色调，不使用渐变、玻璃拟态或过度的视觉效果。注重简洁、留白、强有力的排版、清晰的层级和快速加载性能。加入首屏介绍与行动号召、关于版块、精选项目作品集、服务版块、客户评价、博客/文章预览、技能与工具展示、客户 Logo、联系表单和页脚。加入细微动效、平滑滚动、优雅的卡片布局、移动端优先的响应式设计，以及对 SEO 友好的结构。整体美