创作者viktoroddy →@viktoroddy 使用 Claude完成的网页案例，包含公开结果、完整 Prompt 与原始来源。
查看原始来源 ↗Prompt
一键获取所有令人惊艳的动效网站提示词：
提示词：
用 React + TypeScript + Vite + Tailwind CSS + framer-motion + lucide-react 构建一个单页落地页。整个页面背景为 bg-black。通过 Google Fonts 加载的字体是 Instrument Serif（斜体和常规体）。在 index.css 中引入它：
@import url('');
液态玻璃 CSS（写在 index.css 的 @layer components 中）
创建一个可复用的 .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;
}
版块 1 —— HERO（全视口，写在 Index.tsx 中）
全屏（min-h-screen）容器，overflow-hidden relative flex flex-col。
背景视频：绝对定位，铺满整个视口（absolute inset-0 w-full h-full object-cover object-bottom）。URL：
属性：muted、autoPlay、playsInline、preload="auto"。初始 opacity: 0。
视频淡入淡出逻辑（通过 ref 用原生 JS 实现，不使用 CSS transition）：
canplay 时：播放视频，然后用 requestAnimationFrame 在 500ms 内把 opacity 从 0 动画到 1。
timeupdate 时：当剩余时间 <= 0.55 秒，在 500ms 内把 opacity 从当前值动画到 0。
ended 时：把 opacity 设为 0，等待 100ms，把 currentTime 重置为 0，再次播放，在 500ms 内淡回 1。
这样就能在两次播放之间做出无缝循环，并带平滑的黑场交叉淡入淡出。
导航栏（relative z-20，px-6 py-6）：
一个液态玻璃圆角药丸，max-w-5xl mx-auto，px-6 py-3，左右两端对齐布局。
左侧：地球图标（24px，白色）加「Asme」文字（白色，font-semibold，text-lg）。移动端隐藏：导航链接「Features」「Pricing」「About」（text-white/80 hover:text-white text-sm font-medium，gap-8 ml-8）。
右侧：「Sign Up」文字按钮（白色，text-sm，font-medium）加「Login」按钮（液态玻璃 rounded-full px-6 py-2，白色 text-sm font-medium）。
Hero 内容（relative z-10，flex-1 flex flex-col items-center justify-center，px-6 py-12 text-center，-translate-y-[20%]）：
标题：text-7xl md:text-8xl lg:text-9xl，白色，tracking-tight whitespace-nowrap，字体 'Instrument Serif', serif。文字：Know it then <em>all</em>.
邮箱输入框：max-w-xl w-full。一个液态玻璃圆角药壳，pl-6 pr-2 py-2 flex items-center gap-3。内部：透明的 <input>，占位符「Enter your email」（text-white placeholder:text-white/40）。一个白色圆形提交按钮（bg-white rounded-full p-3 text-black），内含 ArrowRight 图标（20px）。
副标题：text-white text-sm leading-relaxed px-4。文字：「Stay updated with the latest news and insights. Subscribe to our newsletter today and never miss out on exciting updates.」
Manifesto 按钮：液态玻璃 rounded-full px-8 py-3 text-white text-sm font-medium hover:bg-white/5 transition-colors。
社交图标页脚（relative z-10，flex justify-center gap-4 pb-12）：
三个液态玻璃圆角 p-4 按钮，分别对应 Instagram、Twitter、Globe 图标（20px）。text-white/80 hover:text-white hover:bg-white/5 transition-all。
版块 2 —— ABOUT 版块（独立组件 AboutSection.tsx）
使用 framer-motion 的 useInView（ref, { once: true, margin: "-100px" }）。
bg-black pt-32 md:pt-44 pb-10 md:pb-14 px-6 overflow-hidden。
细微的放射状渐变叠加层：bg-[radial-gradient(ellipse_at_top,_rgba(255,255,255,0.03)_0%,_transparent_70%)]。
标签：「About Us」—— text-white/40 text-sm tracking-widest uppercase。动画：opacity: 0, y: 20 -> opacity: 1, y: 0，时长 0.6。
标题：text-4xl md:text-6xl lg:text-7xl text-white leading-[1.1] tracking-tight。动画：opacity: 0, y: 40 -> opacity: 1, y: 0，时长 0.8，延迟 0.1。文字结构：
Pioneering then ideas（Instrument Serif 斜体，text-white/60）for
换行（移动端隐藏）
minds that then create, build, and inspire.（全部为 Instrument Serif 斜体，text-white/60）
版块 3 —— 精选视频（独立组件 FeaturedVideoSection.tsx）
bg-black pt-6 md:pt-10 pb-20 md:pb-32 px-6 overflow-hidden。最大宽度 6xl。
一个 rounded-3xl overflow-hidden aspect-video 容器，动画为 opacity: 0, y: 60 -> opacity: 1, y: 0，时长 0.9。
视频：w-full h-full object-cover，muted、autoPlay、loop、playsInline、preload="auto"。URL：
视频上的渐变叠加层：bg-gradient-to-t from-black/60 via-transparent to-transparent。
底部叠加内容（absolute bottom-0 left-0 right-0 p-6 md:p-10）：
桌面端为横向排列，移动端为纵向排列。
左侧：一个液态玻璃 rounded-2xl p-6 md:p-8 max-w-md 卡片。标签「Our Approach」（text-white/50 text-xs tracking-widest uppercase mb-3）。正文（text-white text-sm md:text-base leading-relaxed）：「We believe in the power of curiosity-driven exploration. Every project starts with a question, and every answer opens a new door to innovation.」
右侧：「Explore more」按钮（液态玻璃 rounded-full px-8 py-3，白色 text-sm font-medium），配 whileHover={{ scale: 1.05 }} 和 whileTap={{ scale: 0.95 }}。复用方法
关键决定
关键决定是用原生 JS 手写视频淡入淡出循环逻辑，在 canplay、timeupdate、ended 三个事件节点精确控制 opacity 变化时机，而不是依赖 CSS loop 属性；这让视频在两次播放之间的黑场过渡完全可控，是整个页面电影感的技术支点。
换到你的题材
换到你的题材时可以替换首屏和精选视频的素材、品牌名称、标题文案和 About 版块的文字内容，骨架是液态玻璃工具类贯穿全站、首屏视频加无缝循环逻辑、以及 About 与精选视频两个滚动触发版块。换成别的品牌单页站时保留这套视频淡入淡出机制和液态玻璃视觉语言。
容易翻车
容易翻车的是 timeupdate 事件触发频率因浏览器而异，0.55 秒的淡出窗口可能被跳过导致视频生硬切黑；复测时反复观看视频循环边界，确认淡出淡入衔接平滑，再检查 About 和精选视频版块的 useInView 触发时机是否只在滚动到可视区域时才播放动画。
建议模型
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 友好的结构。整体美