Draftly Motion Pass Guide: Creating Cinematic Video Hero Sections

A static hero image makes a first impression. A cinematic hero video that fills the screen with movement, depth, and atmosphere makes a lasting one. Draftly's Motion Pass feature generates a custom video background from your hero image using AI video generation — no camera crew, no stock footage, no compromise on brand identity.

What Motion Pass Does

Motion Pass takes your hero image and generates a 5–8 second looping video where the scene comes alive with realistic camera movement, parallax depth, environmental effects (light shafts, particle movement, atmospheric haze), and natural motion. The result is hosted on Draftly's CDN and served as a seamless background video in your hero section.

The video is generated to match your exact image — it is not generic stock footage. If your hero shows a coffee shop, the steam from the cups moves. If it shows a city skyline at dusk, the lights twinkle. If it shows a person in an office, their background has natural depth.

Accessing Motion Pass

• In the Draftly builder, click on your hero section
• Open the Media panel in the right sidebar
• Ensure your hero image is uploaded and set
• Click Generate Motion Video (requires a Basic plan or above)
• Select your aspect ratio (16:9 for standard landscape, 9:16 for mobile portrait)
• Add an optional motion prompt (see guidance below)
• Click Generate — video is ready within 2–5 minutes

Writing an Effective Motion Prompt

The motion prompt is a short description of how you want the scene to move. Without a prompt, Draftly uses a default cinematic movement. With a prompt, you direct the exact nature of the animation.

Effective prompt examples:

• "Slow upward camera drift with warm light rays moving through the scene"


• "Gentle parallax movement, foreground elements shift right, background stays still"


• "Subtle atmosphere: dust particles floating in shafts of natural light"


• "Camera slowly pulls back to reveal the full space, soft depth of field"

First Frame and Last Frame Mode

For pro users, Motion Pass supports a First-to-Last frame mode: you specify an opening image and a closing image, and the AI generates a smooth transition between them. This creates a dramatic reveal effect or a visual story arc within the hero section.

To use FL mode:

• Upload your start frame under Start Frame


• Upload your end frame under End Frame


• Click Generate FL Motion

Fallback for Slower Devices

On older mobile devices or slow connections, Draftly automatically serves your original hero image instead of the video. This ensures users on any device see a high-quality hero — the video is a progressive enhancement, not a dependency.

Replacing or Regenerating

If the generated video does not match your vision, click Regenerate to create a new version. You can generate multiple versions and select the best one. Previously generated videos are saved in your Media Library so you do not lose them when regenerating.

Motion Pass and SEO

Hero videos do not affect text-based SEO content — all your text, headings, and schema markup are in the HTML layer above the video. However, video background load time affects Core Web Vitals. Draftly manages this by serving the static hero image as the LCP element and loading the video only after the critical rendering path is complete. Read Core Web Vitals for 3D Websites Guide for more detail.