创作者viktoroddy →@viktoroddy 使用 Nano Banana · Kling · Claude完成的网页案例，包含公开结果、完整 Prompt 与原始来源。
查看原始来源 ↗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） 所有元素都应具备响应式，并保持指定的内边距、定位和平滑动画所构成的玻璃拟态美学。
复用方法
关键决定
关键决定是用原生 JS 手写视频循环的淡入淡出逻辑，在开头 0.5 秒淡入、结尾 0.5 秒淡出、ended 时重置并延迟 100ms 再播放，让循环边界完全被黑场过渡掩盖；这比直接用 video loop 属性生硬跳转更接近电影感开场。
换到你的题材
换到你的题材时可以替换背景视频、Logo 文字、标题文案和黑白灰的配色比例，骨架是视频淡入淡出循环、黑白极简配色系统、以及标题加描述加 CTA 按钮按 0、0.2、0.4 秒错位淡入的节奏。换成别的品牌单页 Hero 时保留这套渐进式淡入节奏，只调整具体延迟数值。
容易翻车
容易翻车的是视频的 timeupdate 事件在不同浏览器上触发频率不稳定，可能导致淡出窗口被跳过而出现生硬切黑；复测时反复观察视频首尾衔接处是否平滑，再检查标题、描述和按钮三个错位淡入的元素在慢网络下是否仍按预期顺序出现，而不是同时跳出。
建议模型
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 友好的结构。整体美
