how we supercharged prism's site with midjourney video (and how you can, too)
Stunning motion doesn't have to drain your budget—if you know the right AI tools.
TL;DR
- Midjourney's new video model lets small teams create studio-grade motion graphics for about $10 per month.
- Start with a static Midjourney image, then choose Animate → High Motion (or Low Motion) to get four video variants.
- Follow a divergent-to-convergent workflow: explore broadly, then refine one hero asset.
- When embedding, keep file sizes small and lazy-load off-screen clips so motion delights users without hurting performance.
- A full tutorial video link is at the end of this post.
Why Motion Matters
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.
AI generation flips the script: we now prototype, iterate, and ship micro-animations in hours, not weeks—freeing budget for growth experiments elsewhere.
Midjourney Video in a Nutshell
Old workflow: design → storyboard → animate → render.
New workflow: prompt a single image → click Animate → download.
Steps:
- Prompt a static image (example: "Howl's Moving Castle-inspired watercolor cityscape at dusk").
- Pick your favorite of the four divergent results.
- Click Animate and choose High Motion or Low Motion.
- Download the short video loop.
Midjourney's UX mirrors good design thinking: diverge widely, then converge decisively.
Case Study: Our Revamped Hero Section
Before: static gradient and generic stock art.
After: a gently looping AI video that signals creativity and technical mastery.
Early results:
- Average time-on-page up 18% in the first two weeks.
- Client demos now open with "How did you make that header?!"
Our Step-by-Step Workflow
- Seed inspiration by dragging a reference frame into Midjourney as an image prompt.
- Iterate prompts until one variation nails the feel.
- Animate: High Motion for bold hero sections, Low Motion for subtle secondary spots.
- Compress with ffmpeg or HandBrake; aim for files under 1 MB above the fold.
- Embed autoplaying, muted, looping video set to
object-fit: cover. - Run Lighthouse or PageSpeed Insights; keep Core Web Vitals at 90 or higher.
- Add an alt fallback and a static poster frame for accessibility and SEO.
Practical Tips
Do
- Batch-generate several prompts and A/B test your favorites.
- Encode both WebM and MP4 for broad browser support.
- Store prompts and seeds in Notion so you can reproduce assets later.
Don't
- Set every section to High Motion; visual fatigue is real.
- Autoplay video with sound turned on.
- Ignore Core Web Vitals—Google definitely won't.
What's Next?
Look out for future deep dives on:
- Dynamic prompt chaining, so your CMS can generate motion assets automatically.
- AI-driven video sprites for in-app micro-interactions.
- Performance budgeting for motion-heavy landing pages.
Send us your creations—DM @design_prism on Instagram—and let us know what you'd like to learn next.
Tutorial Video
Watch the full step-by-step walk-through below:
Happy creating!
— The Prism Team