How to Create Stunning Hero Sections with Midjourney Videos and Bolt AI
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.
1. Finding the Perfect Midjourney Video
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:
- Look for videos with smooth motion and consistent lighting
- Choose videos that loop well (the beginning should flow into the end)
- Consider your brand colors and mood
- Download the video in the highest quality available
2. Creating the Perfect Bolt Prompt
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
3. Using Bolt AI for UI Generation
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:
- A fully functional HTML/CSS hero section
- Responsive design that works on all devices
- Proper video integration with autoplay and looping
- Typography that matches your specifications
- Interactive elements with hover effects
- Clean, modern code structure
4. Customizing for Your Brand
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
5. Technical Implementation Tips
Video Optimization:
- Compress your Midjourney video for faster loading
- Use WebM format for better compression
- Add a poster image for the video element
- Implement lazy loading for better performance
Responsive Design:
- Test on mobile, tablet, and desktop
- Adjust font sizes for different screen sizes
- Ensure the video scales properly on all devices
Performance:
- Optimize images and videos
- Use modern image formats (WebP, AVIF)
- Implement proper caching strategies
6. Advanced Customizations
Adding Animations:
- Implement scroll-triggered animations
- Add parallax effects to text elements
- Create smooth transitions between sections
Interactive Elements:
- Add hover effects to buttons and links
- Implement smooth scrolling navigation
- Create loading animations
Accessibility:
- Add proper ARIA labels
- Ensure keyboard navigation works
- Maintain good color contrast ratios
Summary
This workflow combines the best of AI tools:
- Midjourney for stunning video content
- Bolt AI for intelligent UI generation
- Custom prompts for precise control over the output
The result is a professional, modern hero section that would typically take hours to code manually, generated in minutes with AI assistance.
Key Benefits:
- Rapid prototyping and iteration
- Consistent design quality
- Reduced development time
- Easy customization and updates
Resources
Tools Used:
- Midjourney - AI video generation
- Bolt AI - UI generation
- Lovable - Alternative UI generator
- My Prompt Generator - Custom prompt builder
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.
Need a build partner?
Launch your AI landing page design with DreamLaunch
We deliver production-grade products in 28 days with research, design, engineering, and launch support handled end-to-end. Our team blends MVP marketing site with senior founders so you can stay focused on growth.
Ready to Build Your MVP?
Turn your idea into a revenue-ready product in just 28 days.
