website-to-video: URL in, video out
What it does
Section titled “What it does”Takes a URL and produces a video from the site itself. It captures the real page, then builds a HyperFrames composition around the capture: a promo, a product tour, a social ad, a scroll-through with copy laid over it.
It is an input adapter, not a third video stack. It gets a website into the video pipeline; hyperframes does the rendering.
The advantage over describing your product in a video: the video shows the actual thing, at the actual current state of the site, without a designer rebuilding your page inside a video tool.
When to reach for it
Section titled “When to reach for it”- You have a good page and want a video of it.
- Product tour for a site, app or tool.
- Social ad built from a landing page you already have.
- A client sends a link and asks for “something for social.”
- You need a before-and-after where one side is a live site.
Where it runs
Section titled “Where it runs”Needs local capture plus rendering, so desktop app and ffmpeg.
How to run it
Section titled “How to run it”Often just the link is enough:
“Make a video from examplebrand.com”
“/um-toolkit:website-to-video examplebrand.com/pricing, 15s vertical product tour”
What it needs from you
Section titled “What it needs from you”- The URL.
- (Helpful) Length, aspect ratio and the angle. A 15-second vertical ad and a 60-second product tour are different edits of the same capture.
- Any copy you want laid over it, locked.
What you get back
Section titled “What you get back”- The captured site, at real fidelity.
- A rendered MP4 at your target ratio.
- The composition source on disk, so the copy overlay is editable without re-capturing.
A worked example
Section titled “A worked example”You: “Turn examplebrand.com into a 15-second vertical ad.”
Captures the page at mobile width, builds a scroll-through composition, lays the locked headline over the fold moment and the CTA over the pricing section, renders 9:16 MP4 with captions. Site changes next month? Re-capture and re-render against the same composition.
Tips & gotchas
Section titled “Tips & gotchas”- The video is only as good as the page. If the page is weak, fix the page first with page-architect, then capture it.
- Capture after any redesign. A video of last quarter’s site is a credibility problem, not an asset.
- Watch the fold moment. The first second is the hook, so make sure the capture opens on something worth stopping for.
- Captions still mandatory for paid social.
Related skills
Section titled “Related skills”Feeds hyperframes. Sits under motion-video as an input path. Pairs naturally with page-architect, which builds the page in the first place.