GoodCase.aiAI 动态 · Radar↗图谱 · AI Map↗课程 · LearnPrompt↗
出品GoodCase.aiAI News Radar ↗AI Map ↗LearnPrompt ↗
GoodCase.aiGoodCase.aiAI提示语案例合集
GoodCase.ai
排行榜案例Skills收藏投稿早报加入我们
中文EN
Agent 接入 →

出品

AI 动态 · Radar ↗图谱 · AI Map ↗课程 · LearnPrompt ↗
GoodCase.aiGoodCase.aiAI提示语案例合集
排行榜案例Skills收藏投稿早报加入我们
中文EN
Agent 接入 →

加载中…

GoodCase.ai · AI提示语案例合集
DSH 插件榜更新日志反馈
模型创作者Seedance 2.5Seedance 2.0GPT Image 2GeminiNano Banana ProClaudeClaude Opus 5.5Grok ImagineVeoKling 可灵Qwen ImageGPT Image 1.5MiniMax H3

Nano Banana + Veo 3 + Lovable 动效站

创作者 · viktoroddy

AI 编程(UI)X收录 2026/07/28已有人复测#web#human-reviewed
更多标签 (3)
#web-ui#motion-3dLovable · Nano Banana · Veo 3
查看原始来源 ↗
原帖 ♥ 3.1k

Prompt

复刻提示词保留原文,另附运行环境、素材与验收要求;附加说明不是原作者原话。

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

创建一个单页 Hero 区域,带全屏循环背景视频、玻璃拟态导航和电影感排版。使用 React + Vite + Tailwind CSS + TypeScript,配 shadcn/ui。

视频背景:

全屏 <video> 元素,带 autoPlay、loop、muted、playsInline
来源 URL:
定位为 absolute inset-0 w-full h-full object-cover z-0

字体:

从 Google Fonts 引入:Instrumental Serif(用于展示)和 Inter 的 400/500 字重(用于正文)
CSS 变量:--font-display: 'Instrumental Serif', serif 和 --font-body: 'Inter', sans-serif
正文使用 var(--font-body),标题使用内联 fontFamily: "'Instrument Serif', serif"

配色主题(暗色,CSS 变量使用 HSL 值):

--background: 201 100% 13%(深藏青色)
--foreground: 0 0% 100%(白色)
--muted-foreground: 240 4% 66%(柔和灰)
--primary: 0 0% 100%,--primary-foreground: 0 0% 4%
--secondary: 0 0% 10%,--muted: 0 0% 10%,--accent: 0 0% 10%
--border: 0 0% 18%,--input: 0 0% 18%

导航栏:

relative z-10,flex row,justify-between,px-8 py-6,max-w-7xl mx-auto
Logo:「Velorah®」(® 用 <sup className="text-xs"> 表示),text-3xl tracking-tight,Instrument Serif 字体,text-foreground
导航链接(移动端隐藏,md:flex 显示):Home(当前项,text-foreground)、Studio、About、Journal、Reach Us —— 均为 text-sm text-muted-foreground,hover:text-foreground 加 transition-colors
CTA 按钮:「Begin Journey」,液态玻璃 rounded-full px-6 py-2.5 text-sm text-foreground,hover:scale-[1.03]

Hero 区域:

relative z-10,flex column,居中,text-center,px-6 pt-32 pb-40 py-[90px]
H1:「Where dreams rise through the silence.」—— text-5xl sm:text-7xl md:text-8xl,leading-[0.95],tracking-[-2.46px],max-w-7xl,font-normal,Instrument Serif。「dreams」和「through the silence.」两处文字用 <em className="not-italic text-muted-foreground"> 包裹以形成色彩对比
副文本:text-muted-foreground text-base sm:text-lg max-w-2xl mt-8 leading-relaxed —— 「We're designing tools for deep thinkers, bold creators, and quiet rebels. Amid the chaos, we build digital spaces for sharp focus and inspired work.」
CTA 按钮:「Begin Journey」,液态玻璃 rounded-full px-14 py-5 text-base text-foreground mt-12,hover:scale-[1.03] cursor-pointer

液态玻璃效果(CSS 类 .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;
}

动画(CSS 关键帧加类名):

@keyframes fade-rise {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-rise { animation: fade-rise 0.8s ease-out both; }
.animate-fade-rise-delay { animation: fade-rise 0.8s ease-out 0.2s both; }
.animate-fade-rise-delay-2 { animation: fade-rise 0.8s ease-out 0.4s both; }

H1 使用 animate-fade-rise
副文本使用 animate-fade-rise-delay
Hero CTA 按钮使用 animate-fade-rise-delay-2

布局:不要装饰性色块、放射状渐变或叠加层。极简、电影感、垂直居中的 Hero。所有视觉深度都由视频本身提供。
≡溯源 · 已核对已发布案例的 prompt 均经人工核对与原帖一致;平台逆向重构的 prompt 不予收录。核对原帖 ↗

适用模型与稳定度

建议模型

Lovable · Nano Banana · Veo 3
稳定度
80 / 100
成本
中
对应 Skill3D / 动效 Hero ↗

独立复测证据

同一段 Prompt,在我们的测试里实际生成了什么。

复测生成 · 非作者原作
UI生成证据AI 自动评分同模型独立运行 · 第 3/3 次

gpt-5.6-sol

2026年8月9日

复测分64.3
桌面截图模型生成 UI 的桌面截图手机截图模型生成 UI 的手机截图
下载生成 HTML ↓
claude-sonnet-5 · 51.9gpt-5.6-sol · 76.6分歧 · 24.7
  • 跨模型复测:建议模型是 Lovable · Nano Banana · Veo 3,这次复测用的是 gpt-5.6-sol。结果说明这段 Prompt 换到 gpt-5.6-sol 上的表现,不代表作者用原模型做出的效果。
  • 复测分是两个 AI 裁判对这一次生成各自打分(0–100)后的均分;没有经过人工判定,也不能当成功率看。
gpt-5.6-sol 共 3 次独立运行 · 展开前 2 次
UI生成证据同模型独立运行 · 第 2/3 次

gpt-5.6-sol

2026年8月7日

桌面截图模型生成 UI 的桌面截图
下载生成 HTML ↓
  • 跨模型复测:建议模型是 Lovable · Nano Banana · Veo 3,这次复测用的是 gpt-5.6-sol。结果说明这段 Prompt 换到 gpt-5.6-sol 上的表现,不代表作者用原模型做出的效果。
UI生成证据同模型独立运行 · 第 1/3 次

gpt-5.6-sol

2026年8月6日

桌面截图模型生成 UI 的桌面截图
下载生成 HTML ↓
  • 跨模型复测:建议模型是 Lovable · Nano Banana · Veo 3,这次复测用的是 gpt-5.6-sol。结果说明这段 Prompt 换到 gpt-5.6-sol 上的表现,不代表作者用原模型做出的效果。

多人复现

2 个人用同一段 Prompt 跑出了自己的作品。

复现作品 · 非作者原作
MO
复现者MotionSites
2026年8月19日
MotionSites 的复现作品

同款 Prompt 自动聚类归并(相似度 0.97,原独立 Case velorah)

复现出处 ↗
@exploraX_ 的头像
复现者@exploraX_
2026年7月28日
你的浏览器不支持视频播放。
Qwen 3.8

同款 Prompt 自动聚类归并(相似度 0.96,原独立 Case qwen-3-8-hero-18f0e6ce84d1,模型 Qwen 3.8)

复现出处 ↗

继续探索

继续看相关 Case。

查看全部 AI 编程(UI) Case →
AntiGravity + Gemini 3.1 落地页
AI 编程(UI)X收录 2026/07/28

AntiGravity + Gemini 3.1 落地页

@viktoroddy 使用 AntiGravity · Gemini 3.1 Pro完成的网页案例,包含公开结果、完整 Prompt 与原始来源。

Skill · 3D / 动效 HeroSkill · 落地页信息结构

提示语

提示词: 构建一个 Hero 区域,具体规格如下: 整体布局: 全宽版块,背景色 #000000(纯黑) overflow hidden 所有内容背后播放背景视频(详情见下) 背景视频: 来源: 自动播放、循环、静音、playsInline 缩放到容器的 120%(宽度和高度均为 120%) 水平居中,焦点锚定在底部 位于所有内容之下(最低层级) 模糊背景元素: 绝对定位,水平居中,顶部偏移约 215px 尺寸:宽 801px × 高 384px,完全圆角(药丸

来源热度 · X
97
稳定度
89
查看 Case →
Nano Banana + Kling + Claude 电影感 Hero
AI 编程(UI)X收录 2026/07/28

Nano Banana + Kling + Claude 电影感 Hero

@viktoroddy 使用 Nano Banana · Kling · Claude完成的网页案例,包含公开结果、完整 Prompt 与原始来源。

Skill · 3D / 动效 HeroSkill · 网页区块像素复刻

提示语

一键获取所有令人惊艳动效网站的提示词: 提示词:电影感 Hero 区域,带循环视频背景 用 React + Vite + Tailwind CSS + TypeScript 创建一个全屏单页 Hero 区域,具体规格如下: 字体: 展示文字(标题、Logo):Instrument Serif 正文(导航、描述):Inter 在 /src/styles/fonts.css 中引入这两种字体 视频背景: URL: 位置:`top: '300px'`,`inset: 'au

来源热度 · X
97
稳定度
66
查看 Case →
Gemini 3.1 一次生成动效网站
AI 编程(UI)X收录 2026/07/28

Gemini 3.1 一次生成动效网站

@viktoroddy 使用 Gemini 3.1完成的网页案例,包含公开结果、完整 Prompt 与原始来源。

Skill · 3D / 动效 HeroSkill · 落地页信息结构

提示语

提示词: 构建一个高级电动车落地页,具有深色电影感美学。整个网站使用黑色背景(hsl(0,0%,0%)),配浅色文字(主色 hsl(0,0%,95%))和橙色强调色(hsl(25,100%,50%))。不使用默认字体——保持极简和编辑感。使用 shadcn/ui 设计令牌。以下是按顺序排列的各版块: 设计系统(index.css) --background: 0 0% 0% --foreground: 0 0% 12%(用于 CTA 按钮内圆等深色元素) --primar

来源热度 · X
94
稳定度
66
查看 Case →

同作者

同作者更多 · viktoroddy →

  • Gemini vs Claude:Velorah 电动房车落地页AI 编程(UI) · Gemini · Claude · 2026-07-28
  • Google Stitch 对比 Claude 网页生成AI 编程(UI) · Google Stitch · Claude · 2026-07-28
  • Nano Banana + Flow + AntiGravity 动效网站AI 编程(UI) · Nano Banana · Flow · AntiGravity · 2026-07-28
  • GPT Image 2 + Veo 3 + Lovable 营销站AI 编程(UI) · GPT Image 2 · Veo 3 · Lovable · 2026-07-28
  • 应式3D角色轮播动画UIAI 编程(UI) · Claude Sonnet · 2026-07-13
  • Grok Imagine + Grok Build:Veldara HeroAI 编程(UI) · Grok Imagine · Grok Build · 2026-07-28

Case 详情页把原帖效果、Prompt 与复测证据放在同一条阅读路径里。