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 + Kling + Claude 电影感 Hero

创作者 · viktoroddy

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

Prompt

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

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

提示词:电影感 Hero 区域,带循环视频背景

用 React + Vite + Tailwind CSS + TypeScript 创建一个全屏单页 Hero 区域,具体规格如下:

字体:
展示文字(标题、Logo):Instrument Serif
正文(导航、描述):Inter
在 /src/styles/fonts.css 中引入这两种字体

视频背景:
URL:
位置:`top: '300px'`,`inset: 'auto 0 0 0'`
用 React 的 useEffect 和 useRef 实现自定义的淡入淡出循环逻辑:
用 requestAnimationFrame 持续监控 currentTime 和 duration
开头 0.5 秒内淡入(opacity 0 到 1)
结尾前 0.5 秒内淡出(opacity 1 到 0)
在 ended 事件时:将 opacity 设为 0,等待 100ms,重置 currentTime = 0,然后再次 play()
这样就能实现无缝的手动循环,并带平滑的淡入淡出过渡
加入渐变叠加层:absolute inset-0 bg-gradient-to-b from-background via-transparent to-background,覆盖在视频之上

导航栏:
Logo:「Aethera®」(注册商标符号为上标)
Logo 样式:text-3xl,字间距收紧,Instrument Serif,颜色 #000000
菜单项:Home(颜色 #000000),Studio、About、Journal、Reach Us(其余均为 #6F6F6F)
菜单项:text-sm,带颜色过渡
CTA 按钮:「Begin Journey」,圆角,px-6 py-2.5,text-sm,黑色背景(#000000),白色文字,悬停缩放 1.03
布局:flex justify-between,px-8 py-6,max-w-7xl mx-auto

Hero 区域:
定位:paddingTop: 'calc(8rem - 75px)',pb-40
布局:居中(flex flex-col items-center justify-center text-center),px-6
标题:
文字:「Beyond silence, we build the eternal.」
样式:text-5xl sm:text-7xl md:text-8xl,max-w-7xl,font-normal
字体:Instrument Serif
行高:0.95
字间距:-2.46px
颜色:主文字为 #000000,斜体强调词(「silence,」和「the eternal.」)为 #6F6F6F
动画:animate-fade-rise

描述:
文字:「Building platforms for brilliant minds, fearless makers, and thoughtful souls. Through the noise, we craft digital havens for deep work and pure flows.」
样式:text-base sm:text-lg,max-w-2xl,mt-8,leading-relaxed
颜色:#6F6F6F
动画:animate-fade-rise-delay

Hero CTA 按钮:
文字:「Begin Journey」
样式:圆角,px-14 py-5,text-base,mt-12
颜色:黑色背景(#000000),白色文字(#FFFFFF)
悬停:缩放 1.03
动画:animate-fade-rise-delay-2

配色:
背景:白色(#FFFFFF)
标题 / Logo / 按钮:黑色(#000000)
描述 / 菜单项:灰色(#6F6F6F)
按钮文字:白色(#FFFFFF)

动画(写在 /src/styles/theme.css 中):
fade-rise:opacity 0 到 1,translateY 20px 到 0,时长 0.8 秒,缓动 ease-out
fade-rise-delay:与 fade-rise 相同,但延迟 0.2 秒
fade-rise-delay-2:与 fade-rise 相同,但延迟 0.4 秒

布局结构:
容器:relative min-h-screen w-full overflow-hidden
背景视频层(z-0)
视频上的渐变叠加层
导航栏(z-10)
Hero 区域(z-10)
所有元素都应具备响应式,并保持指定的内边距、定位和平滑动画所构成的玻璃拟态美学。
≡溯源 · 已核对已发布案例的 prompt 均经人工核对与原帖一致;平台逆向重构的 prompt 不予收录。核对原帖 ↗

适用模型与稳定度

建议模型

Nano Banana · Kling · Claude
稳定度
66 / 100
成本
中
对应 Skill3D / 动效 Hero ↗网页区块像素复刻 ↗

独立复测证据

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

复测生成 · 非作者原作
UI生成证据AI 自动评分

gpt-5.6-sol

2026年8月9日

复测分72.7
桌面截图模型生成 UI 的桌面截图手机截图模型生成 UI 的手机截图
下载生成 HTML ↓
claude-sonnet-5 · 57.8gpt-5.6-sol · 87.6分歧 · 29.8
  • 跨模型复测:建议模型是 Nano Banana · Kling · Claude,这次复测用的是 gpt-5.6-sol。结果说明这段 Prompt 换到 gpt-5.6-sol 上的表现,不代表作者用原模型做出的效果。
  • 复测分是两个 AI 裁判对这一次生成各自打分(0–100)后的均分;没有经过人工判定,也不能当成功率看。

多人复现

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

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

同款 Prompt 自动聚类归并(相似度 0.98,原独立 Case aethera-studio)

复现出处 ↗

继续探索

继续看相关 Case。

查看全部 AI 编程(UI) Case →
Grok Imagine + Grok Build:Veldara Hero
AI 编程(UI)X收录 2026/07/28

Grok Imagine + Grok Build:Veldara Hero

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

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

提示语

❤️‍🔥 一键获取令人惊艳动效网站的完整提示词: 用 React、Tailwind CSS 和 Lucide React 图标为一个名为「Veldara」的产品创建一个全视口 Hero 区域。页面应是单屏落地页,不需要滚动。 > **视频背景:** > - 使用这个确切的视频 URL,不要替换成任何其他地址:`` > - 视频容器为 `position: absolute; inset: 0; z-index: 0`(不是负 z-index,也不是 fixed),作为根

来源热度 · X
74
稳定度
70
查看 Case →
Claude Mythos:Lithos 地质品牌 Hero
AI 编程(UI)X收录 2026/07/28

Claude Mythos:Lithos 地质品牌 Hero

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

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

提示语

❤️‍🔥 一键获取所有令人惊艳的动效网站提示词: http:// 用 React 18 + TypeScript + Vite + Tailwind CSS 和 lucide-react 图标,为一个名为 Lithos 的地质品牌构建一个全屏深色主题 Hero 区域。招牌功能是一个跟随光标的聚光灯效果,通过一个柔和的圆形遮罩,在底图之上揭示出第二张图片。请精确匹配以下每一处细节。 ### 字体 在 `src/index.css` 顶部加入以下内容,然后写 `@tailw

来源热度 · X
61
稳定度
76
查看 Case →
太空旅行全屏动画 Hero
AI 编程(UI)X收录 2026/07/28

太空旅行全屏动画 Hero

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

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

提示语

无限量的动画 AI Hero —— 这是我使用的确切提示词: 用 React、Vite、TypeScript、Tailwind CSS 和 motion/react(Framer Motion)库为一个太空旅行网站构建一个全屏电影感 Hero 区域。严格按照下面的每一处细节还原。 1. 字体 从 Google Fonts 引入 Instrument Serif(斜体)和 Barlow(300、400、500、600 字重): @import url(''); 在 ta

来源热度 · X
9
稳定度
79
查看 Case →

同作者

同作者更多 · viktoroddy →

  • Gemini vs Claude:Velorah 电动房车落地页AI 编程(UI) · Gemini · Claude · 2026-07-28
  • Nano Banana + Veo 3 + Lovable 动效站AI 编程(UI) · Lovable · Nano Banana · Veo 3 · 2026-07-28
  • Google Stitch 对比 Claude 网页生成AI 编程(UI) · Google Stitch · Claude · 2026-07-28
  • AntiGravity + Gemini 3.1 落地页AI 编程(UI) · AntiGravity · Gemini 3.1 Pro · 2026-07-28
  • Nano Banana + Flow + AntiGravity 动效网站AI 编程(UI) · Nano Banana · Flow · AntiGravity · 2026-07-28
  • Gemini 3.1 一次生成动效网站AI 编程(UI) · Gemini 3.1 · 2026-07-28

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