---
title: 'how we supercharged prism''s site with midjourney video (and how you can, too)'
description: >-
  how we used midjourney video to add motion to the prism homepage without
  slowing performance, plus a simple workflow.
date: '2025-07-05'
category: ai & design
image: 'https://res.cloudinary.com/dhqpqfw6w/image/upload/v1770786137/Prism_rgeypo.png'
gradientClass: bg-gradient-to-br from-indigo-300/30 via-purple-300/30 to-sky-300/30
openGraph:
  title: >-
    how we supercharged prism's site with midjourney video (and how you can,
    too)
  description: >-
    how we used midjourney video to add motion to the prism homepage without
    slowing performance, plus a simple workflow.
  url: >-
    https://www.design-prism.com/blog/how-we-supercharged-prisms-site-with-midjourney-video
  siteName: prism
  images:
    - url: /prism-opengraph.png
      width: 1200
      height: 630
      alt: prism logo on colorful gradient background
  locale: en_US
  type: article
  publishedTime: '2025-07-05T00:00:00.000Z'
  authors:
    - enzo
twitter:
  card: summary_large_image
  title: midjourney video on the prism homepage
  description: see how we added a lightweight ai generated video to our site in minutes
  images:
    - /prism-opengraph.png
canonical: >-
  https://www.design-prism.com/blog/how-we-supercharged-prisms-site-with-midjourney-video
seoTitle: How we supercharged prism's site with midjourney video
seoDescription: >-
  How we used midjourney video to add motion to the prism homepage without
  slowing performance, plus a simple workflow.
---

import YouTubeVideoEmbed from '@/components/youtube-video-embed'

<p class="text-lg leading-relaxed mb-6">
Stunning motion doesn't have to drain your budget - if you know the right AI tools.
</p>

<div class="border-l-4 border-gray-300 pl-6 mb-8">
<h3 class="text-xl font-semibold mb-4">TL;DR</h3>
<ul class="list-disc pl-6 mb-4 space-y-2">
  <li>Midjourney's new video model lets small teams create studio-grade motion graphics for about $10 per month.</li>
  <li>Start with a static Midjourney image, then choose Animate > High Motion (or Low Motion) to get four video variants.</li>
  <li>Follow a divergent-to-convergent workflow: explore broadly, then refine one hero asset.</li>
  <li>When embedding, keep file sizes small and lazy-load off-screen clips so motion delights users without hurting performance.</li>
  <li>A full tutorial video link is at the end of this post.</li>
</ul>
</div>

<h2 class="text-2xl font-bold mt-10 mb-6">Why Motion Matters</h2>

<p class="mb-6">
A scroll-stopping hero section or subtle background loop instantly shows that your brand sweats the details. Until recently that polish required hiring a motion studio, long revision cycles, and thousands of dollars per clip.
</p>

<p class="mb-6">
AI generation flips the script: we now prototype, iterate, and ship micro-animations in hours, not weeks - freeing budget for growth experiments elsewhere.
</p>

<h2 class="text-2xl font-bold mt-10 mb-6">Midjourney Video in a Nutshell</h2>

<p class="mb-6">
<strong>Old workflow:</strong> design > storyboard > animate > render.<br />
<strong>New workflow:</strong> prompt a single image > click Animate > download.
</p>

<p class="mb-4 font-semibold">Steps:</p>
<ol class="list-decimal pl-6 mb-6 space-y-2">
  <li>Prompt a static image (example: "Howl's Moving Castle-inspired watercolor cityscape at dusk").</li>
  <li>Pick your favorite of the four divergent results.</li>
  <li>Click Animate and choose High Motion or Low Motion.</li>
  <li>Download the short video loop.</li>
</ol>

<p class="mb-6">
Midjourney's UX mirrors good design thinking: diverge widely, then converge decisively.
</p>

<h2 class="text-2xl font-bold mt-10 mb-6">Case Study: Our Revamped Hero Section</h2>

<p class="mb-4">
<strong>Before:</strong> static gradient and generic stock art.<br />
<strong>After:</strong> a gently looping AI video that signals creativity and technical mastery.
</p>

<p class="mb-4 font-semibold">Early results:</p>
<ul class="list-disc pl-6 mb-6 space-y-1">
  <li>Average time-on-page up 18% in the first two weeks.</li>
  <li>Client demos now open with "How did you make that header?!"</li>
</ul>

<h2 class="text-2xl font-bold mt-10 mb-6">Our Step-by-Step Workflow</h2>

<ol class="list-decimal pl-6 mb-6 space-y-2">
  <li>Seed inspiration by dragging a reference frame into Midjourney as an image prompt.</li>
  <li>Iterate prompts until one variation nails the feel.</li>
  <li>Animate: High Motion for bold hero sections, Low Motion for subtle secondary spots.</li>
  <li>Compress with ffmpeg or HandBrake; aim for files under 1 MB above the fold.</li>
  <li>Embed autoplaying, muted, looping video set to <code>object-fit: cover</code>.</li>
  <li>Run Lighthouse or PageSpeed Insights; keep Core Web Vitals at 90 or higher.</li>
  <li>Add an alt fallback and a static poster frame for accessibility and SEO.</li>
</ol>

<h2 class="text-2xl font-bold mt-10 mb-6">Practical Tips</h2>

<div class="grid md:grid-cols-2 gap-6 mb-8">
  <div>
    <h3 class="text-lg font-semibold text-green-600 mb-3">Do</h3>
    <ul class="list-disc pl-6 space-y-1">
      <li>Batch-generate several prompts and A/B test your favorites.</li>
      <li>Encode both WebM and MP4 for broad browser support.</li>
      <li>Store prompts and seeds in Notion so you can reproduce assets later.</li>
    </ul>
  </div>
  <div>
    <h3 class="text-lg font-semibold text-red-600 mb-3">Don't</h3>
    <ul class="list-disc pl-6 space-y-1">
      <li>Set every section to High Motion; visual fatigue is real.</li>
      <li>Autoplay video with sound turned on.</li>
      <li>Ignore Core Web Vitals - Google definitely won't.</li>
    </ul>
  </div>
</div>

<h2 class="text-2xl font-bold mt-10 mb-6">What's Next?</h2>

<p class="mb-4">Look out for future deep dives on:</p>
<ol class="list-decimal pl-6 mb-6 space-y-1">
  <li>Dynamic prompt chaining, so your CMS can generate motion assets automatically.</li>
  <li>AI-driven video sprites for in-app micro-interactions.</li>
  <li>Performance budgeting for motion-heavy landing pages.</li>
</ol>

<p class="mb-6">
Send us your creations - DM <a href="https://instagram.com/design_prism" class="text-blue-600 hover:underline">@design_prism</a> on Instagram - and let us know what you'd like to learn next.
</p>

<h2 class="text-2xl font-bold mt-10 mb-6">Tutorial Video</h2>

<p class="mb-4">
Watch the full step-by-step walk-through below:
</p>

<div class="mb-8">
<YouTubeVideoEmbed 
  videoId="iaxQ6Jnf3Io" 
  title="How We Supercharged Prism's Site with Midjourney Video - Complete Tutorial"
  class="max-w-4xl mx-auto"
/>
</div>

<p class="mb-6 text-center font-medium">
Happy creating!<br />
- The Prism Team
</p>