创作者Kashberg_0 →@Kashberg_0 使用 Grok Imagine 1.5 · Grok Build完成的网页案例，包含公开结果、完整 Prompt 与原始来源。
查看原始来源 ↗Prompt
我只用一个 Prompt 就构建了这个动画 3D 网站。
Grok Imagine 1.5 + Grok Build。
Prompt：
为名为 “SynapseX” 的品牌制作一个单页全屏 Hero 区块，使用 React、Vite、Tailwind CSS v4 和 Framer Motion（motion/react）。桌面端使用 lenis 库实现平滑滚动。页面是一个由视频作为背景、带滚动驱动动画和文字扰动效果的深色电影感全屏落地页。
--- 技术栈：
- React 19、Vite、TypeScript
- Tailwind CSS v4（通过 @tailwindcss/vite 插件）
- motion（Framer Motion v12+，从 motion/react 导入）
- lenis，仅桌面端使用平滑滚动
- 字体：来自 Google Fonts 的 Space Mono 等宽字体（所有字体族 sans、serif、mono 均使用它）
- Bootstrap Icons CDN，用于 Apple 图标（bi bi-apple）
--- 字体 / CSS 设置（index.css）：
- 导入 Google Fonts：Space Mono 的 400、700 和斜体变体
- 从 jsdelivr 导入 Bootstrap Icons CSS
- 导入 tailwindcss
- 将所有 Tailwind 字体主题变量（--font-sans、--font-serif、--font-inter、--font-mono）覆盖为 “Space Mono”, monospace
- html、body 使用 font-family var(--font-sans)，黑色背景、白色文字、无 margin/padding、overflow-x hidden、overflow-y auto
- Lenis 兼容类（.lenis.lenis-smooth、.lenis.lenis-stopped、.lenis.lenis-scrolling iframe）
--- 背景视频（关键，请仔细阅读）：
- URL：
- 在 LiquidVideoCanvas 组件中渲染：一个固定全屏的 video 元素（loop、muted、playsInline、preload="auto"、object-cover）
- 重要：不要暗色叠加层。视频容器不得有暗色叠加、半透明黑层、bg-black/50、带 opacity 的 ::after 伪元素，也不得在视频上加渐变层。视频必须以自然亮度完全可见。唯一的容器背景只能是包装器 div 上的 bg-black（仅在视频加载前可见）。不要添加任何变暗滤镜、叠加层 div 或色调。
- 重要：必须严格遵循以下 Z-Index 分层：
- 视频容器：fixed inset-0 z-[1]，这是最低层
- 渐进模糊：fixed bottom-0 z-30
- 主内容（文字、标题）：z-10（位于视频上方、Header 下方）
- Header：z-50（最上层）
- 根包装器为 relative，并设置 overflow-x-hidden。主内容区域不得设置会遮挡视频的背景色。视频必须始终透过内容层可见。不要在位于视频容器上方的任何元素上设置 bg-black。
- 视频滚动擦除（关键，帧定位逻辑）：
- 视频不自动播放。其 currentTime 通过 requestAnimationFrame 根据滚动进度驱动，并使用 0.12 的 LERP 平滑。
- 通过 if (!video.seeking) 守卫实现精确帧定位：只有浏览器完全完成上一帧渲染后，才请求新的视频帧定位。这可以防止跳帧、卡顿和黑闪。模式如下：
if (!isSeeking && !video.seeking) { isSeeking = true; video.currentTime = clampedTime; } else { nextSeekTime = clampedTime; // 在当前定位完成后排队处理 }
我们是在告诉浏览器：只有上一帧完全绘制后才更新视频帧。这对所有设备上的顺滑播放都很重要。没有这个守卫，多个重叠定位会让视频出现黑帧或卡顿。
- 在 video 元素上监听 seeking 和 seeked 事件。在 seeked 时检查是否有排队的 nextSeekTime，然后执行它。
- 入场动画：
- 从 scale 1.12、opacity 0 开始。当视频 readyState >= 3 时，用 1.4 秒的 cubic ease-out 动画到 scale 1.0、opacity 1。设置 3.5 秒安全超时作为回退。
- 滚动驱动视觉效果（直接通过 ref 操作 DOM，不要使用 React state）：
- 渐进模糊：根据滚动进度从 0 到 55px（前半段保持 0 到 5px 的轻微基础模糊，后半段从 5px 激增到 55px）。复用方法
关键决定
关键决定是把 SynapseX 的视觉层级写成可验收的工程约束：视频 z-[1]、主内容 z-10、模糊 z-30、Header z-50，并明确主内容不能盖住视频；这比只说做一个电影感 Hero 更能保证背景真的成为页面主体。
换到你的题材
可替换的是品牌名、背景视频、标题文案和滚动时的模糊曲线；不能动的骨架是 React/Vite/Tailwind 技术栈、固定全屏视频、滚动 currentTime 驱动、seeking/seeked 排队机制，以及通过 ref 直接更新视觉效果。换题材时应保留视频与内容的穿透关系。
容易翻车
复测先拖动滚动条观察视频是否按帧顺序更新、是否在 seek 未完成时排队，随后检查视频自然亮度和图层顺序。最容易翻车的是加黑色 overlay、在内容层设置 bg-black、跳过 video.seeking 守卫，或让 React state 驱动每一帧而造成卡顿和黑闪。
建议模型
Derived Skill
Skill 只从多个已发布 Case 的重复模式中派生，不是另一套投稿内容。
创作者
Kashberg_0 长期扎根X，交付可运行的界面，《早期互联网风个人档案页》配了完整实现思路。
继续探索
@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 友好的结构。整体美