Hi! I'm Harshil, founder of Dream Launch Studios. Today I want to share my process for creating breathtaking hero sections using Midjourney videos and Bolt AI. This tutorial will show you how to combine AI-generated video content with intelligent UI generation to create modern, engaging landing pages.
The first step is finding the right video content. For this tutorial, I'll show you how I created a hero section for a super fast cars concept.
Step 1: Go to Midjourney and search for videos that match your brand aesthetic. I found a perfect cyberpunk-style video that fits the high-speed, futuristic theme:
Video Link: https://cdn.midjourney.com/video/dabef41e-5440-441b-8b17-254c376da33e/0.mp4
Pro Tips:
Once you have your video, it's time to craft a detailed prompt for Bolt AI. I've created a custom prompt generator tool to help with this process.
Try my Prompt Generator: https://www.dreamlaunch.studio/tools/prompt-generator
Here's the prompt I used for the super fast cars hero section:
š
Hero Section Layout (Fullscreen Landing Page)
š³ Overall Layout
Full-screen section: min-h-screen w-screen covering the entire viewport
Background: dark gradient overlay + video/image layer
Non-scrollable: overflow-hidden on <body> and <html>
š½ļø Background Media Layer
<video src="https://cdn.midjourney.com/video/dabef41e-5440-441b-8b17-254c376da33e/0.mp4" class="absolute inset-0 w-full h-full object-cover" autoplay muted loop playsinline controls={false} />
Covers entire background using absolute inset-0 and object-cover
Place inside a relative container div
Make sure the page's <body> has: overflow-hidden
š¤ Fonts Used
Title: Libre Caslon Text
Font size: text-6xl
Font weight: font-light
Letter spacing: tracking-tight
Subtitle/Paragraph: Manrope
Font size: text-sm to text-base
Font weight: font-normal
Button: Also uses Manrope, text-sm, font-medium
You can include fonts from Google Fonts:
<link href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:wght@300;400;700&family=Manrope:wght@400;500;600&display=swap" rel="stylesheet">
š§ Navbar
Position: absolute top-0 left-0 right-0 z-50
px-8 py-6 flex justify-between items-center
Font: Manrope
Font weight: font-normal, color text-white/80
Links: Origins, Records, Community
Right corner: Language selector (e.g. EN ā)
Left icon: Small, minimalist icon (SVG)
šļø Main Text Section (Left Aligned)
<div class="z-10 relative max-w-2xl px-8 pt-32 text-white">
<h1 class="font-libre-caslon text-6xl font-light tracking-tight leading-[1.1]">Into the Quiet Unknown</h1>
<p class="mt-4 font-manrope text-base font-normal text-white/80">The unknown isn't always loud. Sometimes it whispers. And if you pause long enough, you'll hear where it wants to take you.</p>
<button class="mt-6 bg-white text-black px-5 py-2 rounded-lg font-manrope text-sm font-medium hover:bg-gray-100 transition">Walk With Us ā</button>
</div>
š¦ Decorative Right Side
Floating/fixed label text on the right: FIELD ENTRY, CHAPTER ONE
Use vertical writing or rotate-90 with tracking-widest
uppercase text-sm
Small Ā© Luna label at bottom-right (text-xs, text-white/80)
šø Flowers, butterflies Imagery
flowers, butterflies are part of the background video or animated overlay
Should have subtle animations and gentle movements
Integrate naturally with the overall composition
š Footer Label
Bottom-left corner: ⦠Founded in Stillness, 2025
Font: Manrope, text-xs, text-white/80
šØ Style Notes
Layout Style: minimal
Color Scheme: dark
Ensure responsive design with proper mobile breakpoints
Add subtle hover effects and micro-interactions
Maintain accessibility with proper contrast ratios
Make it about Super Fast Cars and make the logo to be the image attached
You can basically give it some kind of idea that what kind of SEO content you want. I just told it to make it about superfast car. Once you're done with this step, you can go to bolt.new or lovable.Dev and input the same prompt and it will create such a banger UI within single prompt
Now comes the exciting part! Take your crafted prompt and input it into Bolt AI.
Step 1: Go to bolt.new or lovable.dev
Step 2: Paste your detailed prompt into the AI interface
Step 3: Let Bolt AI generate your hero section
What You'll Get:
Once Bolt generates your hero section, you can customize it for your specific needs:
Logo Integration: Replace the placeholder logo with your brand logo Color Adjustments: Modify the color scheme to match your brand palette Content Updates: Change the headline, description, and call-to-action text Video Swapping: Replace the Midjourney video with your own content
Video Optimization:
Responsive Design:
Performance:
Adding Animations:
Interactive Elements:
Accessibility:
This workflow combines the best of AI tools:
The result is a professional, modern hero section that would typically take hours to code manually, generated in minutes with AI assistance.
Key Benefits:
Tools Used:
Video Example: https://cdn.midjourney.com/video/dabef41e-5440-441b-8b17-254c376da33e/0.mp4
Next Steps: Try this workflow with your own brand and share your results! The combination of AI-generated content and intelligent UI generation is revolutionizing how we build modern websites.
Turn Your Idea Into a Revenue-Ready MVP in 4 Weeks