加载中…
创作者 · viktoroddy
查看原始来源 ↗复刻提示词保留原文,另附运行环境、素材与验收要求;附加说明不是原作者原话。
一键获取所有令人惊艳动效网站的提示词:
创建一个单页 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。所有视觉深度都由视频本身提供。适用模型与稳定度
建议模型
独立复测证据
2026年8月9日
2026年8月7日
2026年8月6日
多人复现
继续探索
@viktoroddy 使用 AntiGravity · Gemini 3.1 Pro完成的网页案例,包含公开结果、完整 Prompt 与原始来源。
提示语
提示词: 构建一个 Hero 区域,具体规格如下: 整体布局: 全宽版块,背景色 #000000(纯黑) overflow hidden 所有内容背后播放背景视频(详情见下) 背景视频: 来源: 自动播放、循环、静音、playsInline 缩放到容器的 120%(宽度和高度均为 120%) 水平居中,焦点锚定在底部 位于所有内容之下(最低层级) 模糊背景元素: 绝对定位,水平居中,顶部偏移约 215px 尺寸:宽 801px × 高 384px,完全圆角(药丸
@viktoroddy 使用 Nano Banana · Kling · Claude完成的网页案例,包含公开结果、完整 Prompt 与原始来源。
提示语
一键获取所有令人惊艳动效网站的提示词: 提示词:电影感 Hero 区域,带循环视频背景 用 React + Vite + Tailwind CSS + TypeScript 创建一个全屏单页 Hero 区域,具体规格如下: 字体: 展示文字(标题、Logo):Instrument Serif 正文(导航、描述):Inter 在 /src/styles/fonts.css 中引入这两种字体 视频背景: URL: 位置:`top: '300px'`,`inset: 'au
提示语
提示词: 构建一个高级电动车落地页,具有深色电影感美学。整个网站使用黑色背景(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
Case 详情页把原帖效果、Prompt 与复测证据放在同一条阅读路径里。