Dreamlaunch
HomeBlog
How to Make Hero Section using bolt and midjourney

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:

  1. Midjourney for stunning video content
  2. Bolt AI for intelligent UI generation
  3. 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:

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.

Dreamlaunch

Turn Your Idea Into a Revenue-Ready MVP in 4 Weeks

Ā© DreamLaunch LLC