Build Cinematic Heroes with Video and 3D Assets

Understand what makes a cinematic hero

A video or 3D asset can still look like something dropped into a template. MotionSites Web Builder studies related design examples, chooses media by looking at contact sheets, then specifies the typography, layers and animation before building and reviewing screenshots.

The author’s roughly 13-second showcase above combines several website designs. Watch how:

• Media leaves room for content: large characters, products or footage create a focal point, with text placed away from the subject.
• Type creates depth: oversized headlines sit in front of or behind the subject, while supporting information stays restrained.
• Motion supports the composition: media movement, text entrances and interactions draw attention to one main visual.

The free package includes 40 design examples, contact sheets for videos and transparent assets, and animation recipes with code. It can build a page or write a detailed prompt for another AI website builder.

Choose the workflow that fits

• MotionSites Web Builder suits heroes built around video, dimensional assets and motion. It chooses media before writing a precise design spec and reviewing the result visually.
• Hallmark chooses a visual theme around the page’s purpose and also provides workflows for auditing or redesigning existing pages.
• landing-page-design starts with the audience, offer, copy and main action, then builds the landing page section by section.

Install the skill and prepare screenshot tools

This exercise uses Claude Code, a macOS or Linux terminal, Python 3 and an installed copy of Chrome. You will make a travel photographer’s portfolio hero with slow landscape footage, a headline and a booking button. Chrome is used to check video playback; Playwright controls the browser to capture screenshots and inspect the page.

1. Enter these plugin commands in Claude Code, one at a time:

/plugin marketplace add Motionsites-AI/claude-skill
/plugin install motionsites-web-builder@motionsites

2. Start a new conversation. Ask it to read motionsites-web-builder and confirm that it can find examples/INDEX.md, media/MEDIA.md, references/spec-template.md and scripts/shoot.py. It should be able to read those files and describe the sequence: choose media, write a spec, then capture and revise.
3. Create a folder for the website. From a terminal in that folder, prepare a separate Python environment:

python3 -m venv .venv
source .venv/bin/activate
python -m pip install playwright
python -m playwright install chromium

Once installation finishes successfully, keep .venv/. The screenshot request below tells the agent to use its Python interpreter.

Turn your brief into a design spec

1. Create brief.md in the working folder. Include the photographer’s name, specialism, target clients, intended headline message and real booking URL.
2. Put photographs, a logo or footage in assets/. If you have no suitable video, ask the agent to choose from the skill’s media shelf: a list with contact sheets and exact asset URLs.
3. Open this folder in Claude Code and send this tutorial exercise:

Use motionsites-web-builder to make a portfolio hero for the travel photographer described in brief.md.
Build only the hero, as a single index.html. The audience is clients seeking travel and outdoor photography; the main action opens the booking URL in brief.md.
Mood: quiet, expansive, cinematic. Use one slow landscape video as the main visual, with text in its empty area.
Inspect assets/ first, then read the 2–3 closest design examples. If using the media shelf, view its contact sheets and use the exact listed URLs.
First provide a design spec: actual copy, media sources and framing, fonts and sizes, colors, headline and button positions, and the trigger, duration and easing of entrance animations.
Specify mobile framing and layout, plus the reduced-motion presentation. Wait for my approval of the spec before coding.

Review the service and button destination first. Then check whether the subject and text compete for space. Choose one main motion idea, such as a line-by-line headline entrance, and let the other elements support it.

A 3D-looking subject on the page may come from pre-rendered video or a transparent image. For an object visitors can actually rotate, choose the real 3D-model and Three.js route and specify the model file and interaction.

Build the hero and revise it from screenshots

Once you approve the spec, continue with:

Build index.html from the approved spec, with pinned CDN dependencies.
Locate scripts/shoot.py inside the loaded motionsites-web-builder skill. Run it with this project's .venv/bin/python, targeting index.html and saving screenshots to the project's shots/ folder.
Open the desktop, mobile and early-frame screenshots and read the script's QA output. Check video, fonts, buttons, text overlap and horizontal overflow on mobile.
Use the skill's review rubric to identify and fix the three weakest areas, then capture and compare again, for up to three rounds.
Deliver the actual page and screenshot paths, opening instructions and any remaining issues.

The script is in the skill’s installation folder; the page and .venv/ are in your working folder. Have the agent use the actual paths and return the command you can rerun.

Result	What to inspect
shots/desktop.png	Whether the headline, subject and booking button form a clear reading order
shots/mobile.png	Whether the crop works and the headline and button remain fully visible
shots/desktop-early.png	Background and text during the first moments of loading
The script’s QA output	Failed requests, fonts, video state and horizontal overflow

The report appears in the command output. It helps locate loading and layout problems. Also open index.html, watch a complete video loop, click the booking button and enable your system’s reduced-motion preference to inspect the static presentation.

Make a focused change, then use your own brief

If the mobile headline covers the landscape’s subject, request a focused revision:

Change only the mobile layout: move the headline into the video's empty area, adjust the video crop and keep the booking button fully visible.
Retain the desktop layout, copy, fonts and main color. Show the mobile screenshots before and after, then confirm that the desktop layout is unaffected.

Review the video crop and text position together. A replacement clip may have empty space in a different place. A transparent dimensional image also needs a new size and position in the layer stack.

Replace the brackets below to make your next page:

Use motionsites-web-builder to make a [hero/full landing page] for [brand/portfolio/product].
Source material: [brief, logo, photograph, video or model paths].
Audience and main action: [who will visit and where they should click, with the real URL].
Mood: [three words]. Main visual or interaction: [one focus].
Output: [single HTML file/existing project stack/prompt only for Lovable or another builder].
Choose related examples and media first, then provide a precise spec.
For a page, build after approval and check desktop, mobile and reduced motion. For prompt-only output, adapt the spec to the target builder and deliver it.

For a full page, name the sections you need, such as work, services and contact, and retain the hero’s typography and colors. In prompt-only mode, the deliverable is a design spec adapted to the target builder; paste it into that tool to make the page.

Instructions, references and scripts use the MIT license. You may use the examples and media in websites built with this skill, including client work, but may not resell or redistribute them as prompt or media collections. See the repository license for the terms.