Grok Imagine + Grok Build：Veldara Hero

Prompt

❤️‍🔥 一键获取令人惊艳动效网站的完整提示词：

用 React、Tailwind CSS 和 Lucide React 图标为一个名为「Veldara」的产品创建一个全视口 Hero 区域。页面应是单屏落地页，不需要滚动。

> **视频背景：**
> - 使用这个确切的视频 URL，不要替换成任何其他地址：``
> - 视频容器为 `position: absolute; inset: 0; z-index: 0`（不是负 z-index，也不是 fixed），作为根容器内的第一个子元素
> - 根容器（`relative h-screen overflow-hidden`）不能设置任何背景色（保持透明），这样视频才能透出来
> - `<video>` 元素带有：`muted`、`loop`、`playsInline`、`autoPlay`、`preload="auto"`，类名为 `absolute inset-0 w-full h-full object-cover`
> - 不要在视频上添加 `crossOrigin` 属性（它可能在某些 CDN 上阻止播放）
> - 所有内容层都必须使用大于 0 的正 z-index 值（粒子 z-[3]，导航 z-50，Hero 内容 z-[2]）
> - 关键：不要对视频使用 `z-index: -1` 或 `position: fixed`——它必须处于堆叠上下文之内，而不是背后

**漂浮粒子：**
- 渲染一个全屏 canvas（fixed，`pointer-events-none`，`z-index: 3`），带有动画漂浮粒子
- 粒子数量：`(canvas.width * canvas.height) / 12000`
- 每个粒子：随机大小 0.5-2px，白色，随机透明度 0.2-0.8，以 0.3px/帧 的速度向随机方向漂移
- 粒子在边缘环绕

**导航栏（固定，顶部，z-50）：**
- 左侧：粗体白色 Logo 文字「veldara」（移动端 text-lg，桌面端 text-xl，字间距收紧），后接移动端隐藏的导航链接（「Guides」「Journal」），text-sm text-gray-300，hover:text-white 过渡
- 右侧：三个内联 SVG 社交图标（GitHub、Discord、Twitter/X），text-gray-300，hover:text-white 过渡，每个 20x20px
- 内边距：px-4 sm:px-6 md:px-10，py-4 sm:py-5
- Logo 与链接间距：gap-4 sm:gap-8
- 社交图标间距：gap-3 sm:gap-4

**Hero 内容（居中，视口内底部对齐）：**
- 容器：relative z-[2]，全高，flex 纵向
- 版块上的渐变叠加层：`bg-gradient-to-t from-black/60 via-transparent to-transparent`
- 内容为 flex-col，items-center，justify-end，底部内边距 6rem（sm 为 7rem）
- 小标签：「Our Purpose:」，text-sm md:text-base，text-gray-400，字间距宽松，下外边距 0.75rem sm:1rem
- 主标题：「Instantly craft immersive 3D worlds on the web.」
- 字号：text-2xl sm:text-3xl md:text-5xl lg:text-6xl，font-semibold，行高紧凑，最大宽度 max-w-3xl，白色
- 「3D worlds」这两个词带有内联下划线效果：一个定位的 span，`absolute bottom-1 left-0 w-full h-[10px] bg-[#2C5C88] rounded-sm`，位于文字后方（文字本身 `position: relative` 位于其上）
- 标题下方的 CTA 组（上外边距 2rem sm:2.5rem），flex-col sm:flex-row，gap-3 sm:gap-4：
1. 终端风格安装框：`bg-[#1a1a1a]`，`border border-gray-700/50`，圆角 rounded-lg，内边距 px-6 sm:px-8，py-3.5 sm:py-4，内含一个 `>` 提示符（`text-[#2C5C88] font-mono text-sm`）和代码文字「npm i @veldara/core」（`text-xs sm:text-sm text-gray-200 font-mono`）
2. 带右箭头的「Get Started」按钮：`bg-[#2C5C88] hover:bg-[#3a7aad]`，白色文字，中等字重，圆角 rounded-lg，px-8，py-3.5 sm:py-4，text-sm，带颜色过渡

**滚动指示器：**
- 位于视口底部（pb-8），居中，一个 Lucide 的 `ChevronDown` 图标（w-6 h-6，text-gray-500），带 Tailwind 的 `animate-bounce` 类

**字体：**
- Google Fonts「Inter」（400、500、600、700 字重），通过 HTML head 中的 preconnect 加载
- Body 字体：`'Inter', sans-serif`

**全局样式：**
- `html, body`：overflow-x hidden
- Body 背景：`#010101`，颜色：白色
- 通用重置：margin 0，padding 0，box-sizing border-box

**页面结构：**
- 根容器：`relative h-screen overflow-hidden`（防止任何滚动）
- Hero 之外不再有其他版块

**配色方案：**
- 主强调色：`#2C5C88`（钢蓝色）
- 悬停强调色：`#3a7aad`
- 背景：`#010101` / `#0a0a0a`
- 卡片 / 终端背景：`#1a1a1a`
- 边框：`gray-700/50`
- 文字：白色、gray-200、gray-300、gray-400、gray-500

**技术栈：**
- React 18 配 TypeScript
- Vite
- Tailwind CSS 3
- Lucide React（用于 ChevronDown 图标）
- 不需要其他依赖

复用方法

关键决定

关键决定是对 z-index 层级和视频定位方式给出反例式的强调，明确写出不能用负 z-index 或 fixed 定位这类容易踩坑的做法，并让根容器保持透明而不是黑色背景；这种正面要求加反面排除的写法，专门用来堵住模型在层叠上下文上最常犯的错误。

换到你的题材

换到你的题材时可以替换背景视频、产品名称、标题文案和强调色 #2C5C88，骨架是单屏无滚动布局、透明根容器加视频背景、漂浮粒子层、以及终端安装框加行动按钮的 CTA 组合。换成其他开发者工具落地页时保留终端风格代码框这一元素，它比普通按钮更贴近技术受众。

容易翻车

容易翻车的是粒子系统在低性能设备上会拖慢帧率，视频加了不该有的 crossOrigin 属性也可能导致播放失败；复测时先在移动设备上检查页面是否保持单屏不滚动，再确认粒子数量是否随窗口尺寸变化重新计算，避免大屏幕上出现粒子稀疏或性能卡顿。

建议模型

Grok Imagine · Grok Build

稳定度
成本: 中

创作者

viktoroddy

viktoroddy 在X输出 UI 工程化实践，《应式3D角色轮播动画UI》搭 Claude Sonnet 出方案，带可复现代码。

值得学习AI 编程(UI)稳定输出来源互动高

查看创作者 →

AI 编程(UI)X@Oluwaphilemon1 →

3D 超市包装式创意机构官网

@Oluwaphilemon1 使用 Claude Fable 5 · Three.js · Blender · GSAP完成的网页案例，包含公开结果、完整 Prompt 与原始来源。

Skill · 3D / 动效 Hero Skill · 个人作品集叙事

提示语

Claude Fable 5 和 GPT-5.6 很强🥵🥵🥵 下面是我如何使用 Claude 构建的 👇 提示词：「设计一个机构网站，把服务以 3D 超市商品包装的形式呈现」使用 Three.js 和 WebGL 在浏览器中实时渲染所有产品使用 Blender 制作包装模型，然后导出为 GLTF 以加载到 Three.js 中使用 GSAP 实现流畅的产品旋转和悬停交互如果你想做一个让客户感觉像是在购买高级商品的作品集，请保存这条 🛒

来源热度

稳定度

查看 Case →

AI 编程(UI)X@uxsweta →

3D 发票打印机 SaaS 组件

@uxsweta 使用 AI UI Builder完成的网页案例，包含公开结果、完整 Prompt 与原始来源。

Skill · 3D / 动效 Hero Skill · 产品与电商转化页

提示语

有几个人询问提示词，所以放在这里 👇 附言：根据你的使用场景进行调整。创建一个现代、极简的 3D 发票生成器机器组件，采用高级 SaaS 风格美学。视觉设计 - 设计一台宽幅横向的发票打印机，灵感来自小票打印机，但外观未来感十足且干净利落。 - 使用细微的灰色线条、柔和阴影和极少细节。 - 机器应显得高级、轻盈而现代，而不是写实或工业化。 - 保持整体设计足够干净，使其可以放入仪表盘或落地页的 Hero 区域。 - 直接在机器上添加一个醒目的 Print Inv

来源热度

稳定度

查看 Case →

AI 编程(UI)X@shushant_l →

极简 AI 顾问个人作品集

@shushant_l 使用 AI Website Builder完成的网页案例，包含公开结果、完整 Prompt 与原始来源。

Skill · 个人作品集叙事 Skill · 产品与电商转化页

提示语

下面介绍如何用 AI 以极简设计风格创建你的网站。使用这条提示：为一位数字创作者和 AI 顾问设计一个现代极简作品集网站。采用干净的黑、白和中性色调，不使用渐变、玻璃拟态或过度的视觉效果。注重简洁、留白、强有力的排版、清晰的层级和快速加载性能。加入首屏介绍与行动号召、关于版块、精选项目作品集、服务版块、客户评价、博客/文章预览、技能与工具展示、客户 Logo、联系表单和页脚。加入细微动效、平滑滚动、优雅的卡片布局、移动端优先的响应式设计，以及对 SEO 友好的结构。整体美

来源热度

稳定度

查看 Case →

Prompt

❤️‍🔥 一键获取令人惊艳动效网站的完整提示词：

用 React、Tailwind CSS 和 Lucide React 图标为一个名为「Veldara」的产品创建一个全视口 Hero 区域。页面应是单屏落地页，不需要滚动。

> **视频背景：**
> - 使用这个确切的视频 URL，不要替换成任何其他地址：``
> - 视频容器为 `position: absolute; inset: 0; z-index: 0`（不是负 z-index，也不是 fixed），作为根容器内的第一个子元素
> - 根容器（`relative h-screen overflow-hidden`）不能设置任何背景色（保持透明），这样视频才能透出来
> - `<video>` 元素带有：`muted`、`loop`、`playsInline`、`autoPlay`、`preload="auto"`，类名为 `absolute inset-0 w-full h-full object-cover`
> - 不要在视频上添加 `crossOrigin` 属性（它可能在某些 CDN 上阻止播放）
> - 所有内容层都必须使用大于 0 的正 z-index 值（粒子 z-[3]，导航 z-50，Hero 内容 z-[2]）
> - 关键：不要对视频使用 `z-index: -1` 或 `position: fixed`——它必须处于堆叠上下文之内，而不是背后

**漂浮粒子：**
- 渲染一个全屏 canvas（fixed，`pointer-events-none`，`z-index: 3`），带有动画漂浮粒子
- 粒子数量：`(canvas.width * canvas.height) / 12000`
- 每个粒子：随机大小 0.5-2px，白色，随机透明度 0.2-0.8，以 0.3px/帧 的速度向随机方向漂移
- 粒子在边缘环绕

**导航栏（固定，顶部，z-50）：**
- 左侧：粗体白色 Logo 文字「veldara」（移动端 text-lg，桌面端 text-xl，字间距收紧），后接移动端隐藏的导航链接（「Guides」「Journal」），text-sm text-gray-300，hover:text-white 过渡
- 右侧：三个内联 SVG 社交图标（GitHub、Discord、Twitter/X），text-gray-300，hover:text-white 过渡，每个 20x20px
- 内边距：px-4 sm:px-6 md:px-10，py-4 sm:py-5
- Logo 与链接间距：gap-4 sm:gap-8
- 社交图标间距：gap-3 sm:gap-4

**Hero 内容（居中，视口内底部对齐）：**
- 容器：relative z-[2]，全高，flex 纵向
- 版块上的渐变叠加层：`bg-gradient-to-t from-black/60 via-transparent to-transparent`
- 内容为 flex-col，items-center，justify-end，底部内边距 6rem（sm 为 7rem）
- 小标签：「Our Purpose:」，text-sm md:text-base，text-gray-400，字间距宽松，下外边距 0.75rem sm:1rem
- 主标题：「Instantly craft immersive 3D worlds on the web.」
- 字号：text-2xl sm:text-3xl md:text-5xl lg:text-6xl，font-semibold，行高紧凑，最大宽度 max-w-3xl，白色
- 「3D worlds」这两个词带有内联下划线效果：一个定位的 span，`absolute bottom-1 left-0 w-full h-[10px] bg-[#2C5C88] rounded-sm`，位于文字后方（文字本身 `position: relative` 位于其上）
- 标题下方的 CTA 组（上外边距 2rem sm:2.5rem），flex-col sm:flex-row，gap-3 sm:gap-4：
1. 终端风格安装框：`bg-[#1a1a1a]`，`border border-gray-700/50`，圆角 rounded-lg，内边距 px-6 sm:px-8，py-3.5 sm:py-4，内含一个 `>` 提示符（`text-[#2C5C88] font-mono text-sm`）和代码文字「npm i @veldara/core」（`text-xs sm:text-sm text-gray-200 font-mono`）
2. 带右箭头的「Get Started」按钮：`bg-[#2C5C88] hover:bg-[#3a7aad]`，白色文字，中等字重，圆角 rounded-lg，px-8，py-3.5 sm:py-4，text-sm，带颜色过渡

**滚动指示器：**
- 位于视口底部（pb-8），居中，一个 Lucide 的 `ChevronDown` 图标（w-6 h-6，text-gray-500），带 Tailwind 的 `animate-bounce` 类

**字体：**
- Google Fonts「Inter」（400、500、600、700 字重），通过 HTML head 中的 preconnect 加载
- Body 字体：`'Inter', sans-serif`

**全局样式：**
- `html, body`：overflow-x hidden
- Body 背景：`#010101`，颜色：白色
- 通用重置：margin 0，padding 0，box-sizing border-box

**页面结构：**
- 根容器：`relative h-screen overflow-hidden`（防止任何滚动）
- Hero 之外不再有其他版块

**配色方案：**
- 主强调色：`#2C5C88`（钢蓝色）
- 悬停强调色：`#3a7aad`
- 背景：`#010101` / `#0a0a0a`
- 卡片 / 终端背景：`#1a1a1a`
- 边框：`gray-700/50`
- 文字：白色、gray-200、gray-300、gray-400、gray-500

**技术栈：**
- React 18 配 TypeScript
- Vite
- Tailwind CSS 3
- Lucide React（用于 ChevronDown 图标）
- 不需要其他依赖

复用方法

关键决定

换到你的题材

容易翻车

建议模型

Grok Imagine · Grok Build