How to Create a Motion Video Landing Page
What if you could type one sentence and get a fully built landing page with a cinematic looping video hero? That’s exactly what we did here using a custom CreativeClaw skill inside Claude Code.
The prompt
We used a custom /create-landing-page skill and typed:
I’m building a landing page for “Verdant” — an AI-powered garden planning app. Title: “Grow Smarter”. I want lush green hills with super detailed wildflowers and a golden hour sky. Warm earthy color palette.
That’s it. One prompt. CreativeClaw and Claude handled the rest.
What happened behind the scenes
Step 1: Generate the hero background image
Claude picked Nano Banana 2 as the best model for this job — it excels at photorealistic, highly detailed scenes with rich color palettes. But we didn’t write the image prompt ourselves.
CreativeClaw’s skill automatically crafted a professional prompt optimized for Nano Banana 2, translating our casual description into a detailed generation prompt that specified composition, lighting, depth of field, color grading, and negative space for the title overlay. The result: a stunning golden-hour landscape with lush wildflower fields, perfectly composed to work as a hero background.
Step 2: Animate the image into a looping video
Next, Claude sent that generated image to Veo 3.1 Lite to create a smooth, cinematic motion video. Again, CreativeClaw generated the motion prompt behind the scenes — specifying gentle camera movement, parallax depth, swaying flowers, and drifting clouds to bring the scene to life without making it feel artificial.
Veo 3.1 Lite was chosen for its balance of quality and speed — it produces beautiful results at half the cost of Veo 3.1, which is perfect for background videos where subtle motion is the goal.
Step 3: Build the landing page
Finally, Claude built the complete landing page with the video as a full-bleed looping hero background. The video autoplays, loops seamlessly, and is muted — exactly what you want for a hero section. The page includes the title, subtitle, and CTA, all styled to match the warm earthy palette from our original prompt.
The result
A production-ready landing page with a cinematic video hero, built entirely inside Claude Code in about a minute. No Figma, no stock footage, no video editing software.
Models used
| Model | Role | Why this model |
|---|---|---|
| Nano Banana 2 | Hero background image | Best-in-class for photorealistic scenes with rich detail and color |
| Veo 3.1 Lite | Image-to-video animation | High quality motion at half the cost of Veo 3.1, ideal for subtle background loops |
Try it yourself
You can recreate this workflow with any landing page concept. Connect CreativeClaw to Claude Code and use the /create-landing-page skill, or just ask Claude to generate a hero image and animate it step by step.
