创作者viktoroddy →@viktoroddy 使用 Gemini · Claude完成的网页案例，包含公开结果、完整 Prompt 与原始来源。
查看原始来源 ↗Prompt
一键获取所有令人惊艳动效网站的提示词：
构建一个 Velorah 落地页——一个面向电动房车 / 露营车品牌的高级深色主题单页网站。使用 React、TypeScript、Tailwind CSS 和 hls.js 库。页面纵向堆叠 6 个版块。整个页面背景为纯黑（hsl(0,0%,0%)）。所有标题和展示文字使用 Instrument Serif 字体（在 index.html 中通过 <link> 从 Google Fonts 加载），正文使用 Inter。
全局样式（index.css）：
在顶部引入 Google Fonts：
@import url('');
CSS 自定义属性（仅暗色，无浅色模式）：
--background: 201 100% 13%
--foreground: 0 0% 100%（白色）
--card: 0 0% 6%
--card-foreground: 0 0% 100%
--primary: 0 0% 100%
--primary-foreground: 0 0% 4%
--secondary: 0 0% 10%
--secondary-foreground: 0 0% 100%
--muted: 0 0% 10%
--muted-foreground: 240 4% 66%
--accent: 0 0% 10%
--accent-foreground: 0 0% 100%
--destructive: 0 84.2% 60.2%
--destructive-foreground: 0 0% 100%
--border: 0 0% 18%
--input: 0 0% 18%
--ring: 0 0% 100%
--radius: 0.5rem
Body 使用 font-family: var(--font-body)，映射到 Inter。
液态玻璃 CSS 类（.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
::before 伪元素创建渐变边框效果：
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 加 xor 合成和 mask-composite: exclude 来创建仅边框的效果
动画：
@keyframes fade-rise: 从 opacity:0; translateY(24px) 到 opacity:1; translateY(0)
.animate-fade-rise: animation: fade-rise 0.8s ease-out both
.animate-fade-rise-delay: 相同但延迟 0.2 秒
.animate-fade-rise-delay-2: 相同但延迟 0.4 秒
index.html：
通过 <link> 标签从 Google Fonts 加载 Instrument Serif：
<link rel="preconnect" href="" />
<link rel="preconnect" href="" crossorigin />
<link href="" rel="stylesheet" />
HLS 视频组件：
创建一个接受 src 属性的 HlsVideo 组件。使用 hls.js——如果 Hls.isSupported()，创建一个 HLS 实例，加载资源，并绑定到一个 <video> 元素。否则回退到浏览器原生对 application/vnd.apple.mpegurl 的支持。video 元素类名为：absolute inset-0 w-full h-full object-cover z-0，属性为：autoPlay loop muted playsInline。
视频 URL（使用这些精确地址）：
Hero 背景：
功能版块右侧卡片：
Big Statement 版块（HLS 流）：
CTA/Join 版块：
版块 1 —— HERO：
全屏版块（min-h-screen，relative，overflow-hidden）
背景：<video> 标签（非 HLS 组件），使用 Hero URL，配 autoPlay loop muted playsInline，类名 absolute inset-0 w-full h-full object-cover z-0
底部渐变叠加层：absolute inset-x-0 bottom-0 h-[40%] bg-gradient-to-t from-black via-black/60 to-transparent z-[1]
导航栏（relative z-10，flex items-center justify-between，px-8 py-6，max-w-7xl mx-auto）：
左侧：品牌名「Velorah」，带注册商标上标，text-foreground text-3xl tracking-tight，字体 'Instrument Serif', serif
中间：导航链接（Home、Studio、About、Journal、Reach Us）—— hidden md:flex items-center gap-10 text-sm text-white。所有链接为 text-white，配 hover:text-white/80 transition-colors
右侧：「Begin Journey」按钮，液态玻璃 rounded-full px-6 py-2.5 text-sm text-foreground transition-transform hover:scale-[1.03]
Hero 内容（relative z-10 flex flex-col items-center justify-center text-center px-6 pt-[28px] pb-40）：
标题：animate-fade-rise text-foreground text-5xl sm:text-7xl md:text-8xl leading-[0.95] tracking-[-2.46px] max-w-7xl font-normal，字体 'Instrument Serif', serif。文字：Where dreams rise through the silence.——「dreams」和「through the silence.」用 <em className="not-italic text-white"> 包裹
段落：animate-fade-rise-delay text-white 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.」
按钮：animate-fade-rise-delay-2 liquid-glass rounded-full px-14 py-5 text-base text-foreground mt-12 transition-transform hover:scale-[1.03] cursor-pointer。文字：「Begin Journey」
版块 2 —— 标语：
flex items-center justify-center min-h-[70vh] px-6 bg-[hsl(0,0%,0%)]
标题：text-foreground text-4xl sm:text-6xl md:text-7xl leading-[1.05] tracking-[-1.5px] text-center max-w-4xl，字体 'Instrument Serif', serif。文字：「So you can feel at home,
anywhere.」
版块 3 —— 功能分栏：
px-6 md:px-12 max-w-7xl mx-auto py-0
网格：grid md:grid-cols-2 gap-4 rounded-2xl overflow-hidden min-h-[520px]
左侧卡片（bg-card rounded-2xl p-10 md:p-14 flex flex-col justify-between）：
顶部：小圆形图标（inline-block w-8 h-8 rounded-full border border-border mb-8），标题「100% Electric」（text-foreground text-3xl sm:text-5xl tracking-[-1px] mb-6，Instrument Serif），段落「No more fossil fuels, buzzing generators, and propane tanks. Velorah has power for days.」（text-muted-foreground text-sm sm:text-base leading-relaxed max-w-sm）
底部：功能标签数组：[{label:"Living Electric",id:"electric"},{label:"Charge Faster",id:"charge"},{label:"Sleep Well",id:"sleep"},{label:"Acoustic Comfort",id:"acoustic"},{label:"5+ Seasons",id:"seasons"}]。每个标签是一个 <button>，text-xs px-4 py-2 rounded-full border transition-colors。激活状态：bg-foreground text-primary-foreground border-foreground。未激活：border-border text-muted-foreground hover:text-foreground。使用 useState("electric") 管理当前激活标签。
进度条：w-full h-0.5 bg-border rounded-full mb-6，内部 div h-full bg-foreground rounded-full，宽度为 35%
按钮：liquid-glass rounded-full px-8 py-3 text-sm text-foreground transition-transform hover:scale-[1.03]。文字：「Explore the Velorah Flow」
右侧卡片（relative rounded-2xl overflow-hidden min-h-[400px]）：<video> 使用功能版块 URL，absolute inset-0 w-full h-full object-cover，autoPlay loop muted playsInline
版块 4 —— BIG STATEMENT：
relative flex flex-col items-center justify-center min-h-[90vh] px-6 overflow-hidden
背景：<HlsVideo> 组件，使用 Mux 的 HLS URL
内容（relative z-10 flex flex-col items-center text-center max-w-5xl）：
标签：text-muted-foreground text-xs sm:text-sm tracking-[0.3em] uppercase mb-6。文字：「Intelligent Companion」
标题：text-foreground text-4xl sm:text-6xl md:text-7xl leading-[1.05] tracking-[-1.5px]，Instrument Serif。文字：「Adventure inspired.
App driven.」
段落：text-muted-foreground text-base sm:text-lg max-w-2xl mt-8 leading-relaxed。文字：「One app to control climate, lighting, navigation, and energy. Monitor every system in real time, automate your routines, and let Velorah learn how you live on the road.」
统计数据网格：grid grid-cols-2 sm:grid-cols-4 gap-8 sm:gap-12 mt-14。四项（OTA / 「Over-the-air updates」，360 度 / 「System visibility」，AI / 「Adaptive routines」，24/7 / 「Remote monitoring」）。每个数值为 text-foreground text-3xl sm:text-4xl font-light，Instrument Serif，标签为 text-muted-foreground text-xs sm:text-sm
按钮：liquid-glass rounded-full px-10 py-4 text-sm text-foreground mt-12 transition-transform hover:scale-[1.03]。文字：「Discover the App」
版块 5 —— CTA / JOIN：
relative min-h-[90vh] flex flex-col items-center justify-center text-center px-6 overflow-hidden
背景：<video> 使用 CTA URL，absolute inset-0 w-full h-full object-cover z-0，autoPlay loop muted playsInline
内容（relative z-10 flex flex-col items-center max-w-4xl）：
价格标签：text-muted-foreground text-xs sm:text-sm tracking-[0.3em] uppercase mb-4。文字：「Starting at $99,000」
标题：text-foreground text-5xl sm:text-7xl md:text-8xl leading-[0.95] tracking-[-2px]，Instrument Serif。文字：「Join the ride」
段落：text-muted-foreground text-base sm:text-lg max-w-xl mt-6 leading-relaxed。文字：「Reserve your Velorah today with a fully refundable $500 deposit. Early adopters receive priority delivery and exclusive founding-member benefits.」
两个按钮，flex flex-col sm:flex-row items-center gap-4 mt-10：
「Preorder Now」：liquid-glass rounded-full px-10 py-4 text-sm text-foreground transition-transform hover:scale-[1.03]
「Schedule a Tour」：rounded-full px-10 py-4 text-sm text-muted-foreground border border-border hover:text-foreground hover:border-foreground/30 transition-colors
版块 6 —— 页脚：
bg-[hsl(0,0%,0%)] border-t border-border px-6 md:px-12 py-16 max-w-7xl mx-auto
网格：grid grid-cols-1 md:grid-cols-3 gap-12 mb-16
第一栏：标题「Where home
meets the road.」（text-foreground text-2xl sm:text-3xl leading-tight，Instrument Serif）
第二栏：链接列表——product、app、company、community、press、preorder。每个为 text-sm text-muted-foreground hover:text-foreground transition-colors capitalize
第三栏：文字「Subscribe for the latest
Velorah updates.」（text-sm text-muted-foreground mb-4），加一个「Subscribe」按钮（liquid-glass rounded-full px-6 py-2.5 text-sm text-foreground transition-transform hover:scale-[1.03]）
底部栏：flex flex-col md:flex-row items-center justify-between gap-4 pt-8 border-t border-border text-xs text-muted-foreground。左侧：「Velorah」加注册商标（text-foreground text-xl tracking-tight，Instrument Serif，<sup className="text-[8px]">）。右侧：「Privacy Policy」和「Terms & Conditions」链接（hover:text-foreground transition-colors）
TAILWIND 配置：标准 shadcn/ui 的 Tailwind 配置，映射所有 HSL 颜色变量，darkMode: ["class"]，tailwindcss-animate 插件，以及 accordion 关键帧 / 动画。
依赖项：React 18、react-router-dom、Tailwind CSS、shadcn/ui 基础组件、hls.js、lucide-react、@tanstack/react-query、tailwindcss-animate。复用方法
关键决定
关键决定是给普通视频和 HLS 流媒体分别使用不同的播放方案：常规版块用原生 <video> 标签，Big Statement 版块单独封装一个 HlsVideo 组件处理 Mux 的 HLS 流并提供浏览器原生回退；六个版块的视频、统计数据和功能标签都逐项写死，让电动房车的科技感和产品事实同时具备说服力。
换到你的题材
换到你的题材时可以替换品牌名、六个视频素材、统计数据项和功能标签内容，骨架是导航加 Hero 加标语加功能分栏加大陈述加 CTA 加页脚的六段式深色单页结构，以及液态玻璃工具类贯穿全站。换成其他电动出行或大宗商品品牌时保留功能标签的可切换交互和统计数据网格这两个转化关键点。
容易翻车
容易翻车的是 HLS 视频在不支持的浏览器上如果没有正确回退会导致 Big Statement 版块黑屏，功能分栏的标签切换状态也可能没有真正联动右侧视频或内容；复测时先在不同浏览器验证 HLS 回退逻辑是否生效，再点击五个功能标签确认激活态样式和进度条百分比是否正确更新。
建议模型
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 友好的结构。整体美