Start with the work. Trace it back to the maker and method.

❤️‍🔥 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