Create a full-screen cinematic hero section for a space exploration…

Create a full-screen cinematic hero section for a space exploration company with these exact specifications: Background: Full-screen looping, muted, autoplay video background (/videos/hero_bg.mp4) with a JPEG poster image (/images/hero_bg.jpeg). Both should be preloaded in the HTML head. Video covers the entire viewport with object-cover. Add a subtle bg-black/5 overlay on top. Navbar (fixed, top): Fixed at top with horizontal padding, z-50. Left: square logo icon (48x48). Center: a "liquid glass" pill containing nav links ("Home", "Voyages", "Worlds", "Innovation", "Plan Launch") as plain text links, plus a solid white button with black text "Claim a Spot" with an ArrowUpRight icon. Hidden on mobile. Liquid Glass Effect (CSS): Two variants: .liquid-glass (light, 4px blur) and .liquid-glass-strong (heavy, 50px blur with box-shadow). Both use background: rgba(255,255,255,0.01), background-blend-mode: luminosity, no border. Each has a ::before pseudo-element with padding: 1.4px creating a gradient border effect using a vertical linear gradient (white at 0%/100%, transparent in middle) with mask-composite: exclude to show only the border outline. The strong variant has slightly higher opacity values and adds box-shadow: 4px 4px 4px rgba(0,0,0,0.05), inset 0 1px 1px rgba(255,255,255,0.15). Hero Content (centered, vertically): Badge: A liquid-glass rounded-full pill containing a solid white "New" tag (black text) and text "Maiden Crewed Voyage to Mars Arrives 2026". Heading: "Venture Past Our Sky Across the Universe" — using Instrument Serif italic, sizes text-6xl md:text-7xl lg:text-[5.5rem], leading-[0.8], tracking-[-4px], max-w-2xl. Animated word-by-word from bottom using a custom BlurText component (blur 10px → 5px → 0px, opacity 0 → 0.5 → 1, y 50 → -5 → 0) with 100ms stagger delay per word, 0.35s step duration. Subheading: One-liner description in Barlow font-light, text-sm md:text-base, white, max-w-2xl, leading-tight. Animates in as a single block with framer-motion blur-in (blur 10px→0, opacity 0→1, y 20→0) at 0.8s delay. CTA Buttons: Two buttons side by side, animated as a block at 1.1s delay with same blur-in effect. First: liquid-glass-strong rounded-full pill "Start Your Voyage" with ArrowUpRight icon. Second: plain text "View Liftoff" with a filled Play icon. Partners Bar: A row of partner logos at the bottom of the viewport. Typography: Instrument Serif (italic) for headings, Barlow (300-600 weights) for body. Import from Google Fonts. Color System: All white foreground (--foreground: 0 0% 100%), background is a muted blue (--background: 213 45% 67%). Border radius set to 9999px globally. All colors defined as HSL CSS variables. Animation Sequence: Badge appears instantly → Heading blurs in word-by-word from bottom → Subheading fades in at 0.8s → CTAs fade in at 1.1s. All use easeOut easing.
808 48 32,517
AI Video AI video generated from this prompt

Shared by Viktor Oddy on 2026-03-06

How to use this AI Video prompt

Use this prompt as a starting point: keep the scene structure and swap in your own subject, style, and camera direction.

Found a video whose style you want to recreate? Our video to prompt tool analyzes any clip and writes a production-ready prompt for AI Video and other AI video models — free to try.

Turn your video into a prompt

More trending AI Video prompts