提示词
❤️🔥 一键获取令人惊艳动效网站的完整提示词：
用 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 图标）
- 不需要其他依赖原文提示词（English）
❤️🔥 Access Full prompt for stunning animated websites in one click:
Create a full-viewport hero section for a product called "Veldara" using React, Tailwind CSS, and Lucide React icons. The page should be a single-screen landing with no scrolling.
> **Video Background:**
> - Use this exact video URL, do NOT replace it with any other URL: ``
> - The video wrapper is `position: absolute; inset: 0; z-index: 0` (NOT negative z-index, NOT fixed) placed as the first child inside the root container
> - The root container (`relative h-screen overflow-hidden`) must have NO background-color set (transparent) so the video shows through
> - The `<video>` element has: `muted`, `loop`, `playsInline`, `autoPlay`, `preload="auto"`, class `absolute inset-0 w-full h-full object-cover`
> - Do NOT add `crossOrigin` attribute on the video (it can block playback on some CDNs)
> - All content layers must use positive z-index values above 0 (particles z-[3], nav z-50, hero content z-[2])
> - CRITICAL: Do NOT use `z-index: -1` or `position: fixed` for the video -- it must be inside the stacking context, not behind it
**Floating Particles:**
- Render a full-screen canvas (fixed, `pointer-events-none`, `z-index: 3`) with animated floating particles
- Particle count: `(canvas.width * canvas.height) / 12000`
- Each particle: random size 0.5-2px, white with random opacity 0.2-0.8, drifting at velocity 0.3px/frame in random directions
- Particles wrap around edges
**Navigation Bar (fixed, top, z-50):**
- Left side: Bold white logo text "veldara" (text-lg on mobile, text-xl on desktop, tracking-tight), followed by hidden-on-mobile nav links ("Guides", "Journal") in text-sm text-gray-300 with hover:text-white transitions
- Right side: Three inline SVG social icons (GitHub, Discord, Twitter/X) in text-gray-300 with hover:text-white transitions, each 20x20px
- Padding: px-4 sm:px-6 md:px-10, py-4 sm:py-5
- Gap between logo and links: gap-4 sm:gap-8
- Gap between social icons: gap-3 sm:gap-4
**Hero Content (centered, bottom-aligned within viewport):**
- Container: relative z-[2], full height, flex column
- A gradient overlay on the section: `bg-gradient-to-t from-black/60 via-transparent to-transparent`
- Content is flex-col, items-center, justify-end, with padding-bottom 6rem (sm: 7rem)
- Small label: "Our Purpose:" in text-sm md:text-base, text-gray-400, tracking-wide, margin-bottom 0.75rem sm:1rem
- Main heading: "Instantly craft immersive 3D worlds on the web."
- Font sizes: text-2xl sm:text-3xl md:text-5xl lg:text-6xl, font-semibold, leading-tight, max-w-3xl, text-white
- The words "3D worlds" have an inline underline effect: a positioned span with `absolute bottom-1 left-0 w-full h-[10px] bg-[#2C5C88] rounded-sm` behind the text (text is `position: relative` above it)
- CTA group below heading (margin-top 2rem sm:2.5rem), flex-col sm:flex-row, gap-3 sm:gap-4:
1. Terminal-style install box: `bg-[#1a1a1a]`, `border border-gray-700/50`, rounded-lg, px-6 sm:px-8, py-3.5 sm:py-4, containing a `>` prompt character in `text-[#2C5C88] font-mono text-sm` and code text "npm i @veldara/core" in `text-xs sm:text-sm text-gray-200 font-mono`
2. "Get Started" button with right arrow: `bg-[#2C5C88] hover:bg-[#3a7aad]`, text-white, font-medium, rounded-lg, px-8, py-3.5 sm:py-4, text-sm, with transition-colors
**Scroll Indicator:**
- At the bottom of the viewport (pb-8), centered, a Lucide `ChevronDown` icon (w-6 h-6, text-gray-500) with Tailwind's `animate-bounce` class
**Font:**
- Google Fonts "Inter" (weights 400, 500, 600, 700), loaded via preconnect in the HTML head
- Body font-family: `'Inter', sans-serif`
**Global Styles:**
- `html, body`: overflow-x hidden
- Body background: `#010101`, color: white
- Universal reset: margin 0, padding 0, box-sizing border-box
**Page Structure:**
- Root container: `relative h-screen overflow-hidden` (prevents any scrolling)
- No additional sections beyond the hero
**Color Palette:**
- Primary accent: `#2C5C88` (steel blue)
- Hover accent: `#3a7aad`
- Background: `#010101` / `#0a0a0a`
- Card/terminal bg: `#1a1a1a`
- Border: `gray-700/50`
- Text: white, gray-200, gray-300, gray-400, gray-500
**Tech Stack:**
- React 18 with TypeScript
- Vite
- Tailwind CSS 3
- Lucide React (for ChevronDown icon)
- No other dependencies needed建议模型
Grok Imagine · Grok Build
视频地址
https://media.goodcase.ai/media/video/grok-imagine-grok-build-veldara-hero-d38c65fbe7af.mp4
