mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-01 19:42:03 +00:00
ukimsanov
ad4c6a9b6e
**Nine guide videos rebuilt in the light house style.** They were dark — a reader clicking between sibling guides watched the theme flip. mcp, performance, rendering, skills, html-in-canvas and remove-background were restyled to the bone field; faceless-explainer, product-launch and voice-and-audio were re-narrated with River, the house voice the user-journey films use. Measured luma is 177-230, matching the journey films, and every one carries audio. The restyle also surfaced a real bug in the frame itself: the house coral #D96A4F is 2.95:1 on bone, under the WCAG large-text floor, and `hyperframes check` failed on it. Darkened to #B44E33 (4.43:1) before any of these rendered. **canary-rollouts trimmed from 2,443 words to 520.** The statistical-calibration essay — pre-registered experiment design, a probability formula, rejected hardware-fingerprinting alternatives — was never documentation for someone shipping a staged rollout. Cut to Add one / Override one / Remove one / Where it lives, the part that was already good. **thirty-days now shows the films.** It was 431 words and 30 links to x.com for a series entirely about videos, with no thumbnails. It now leads with real preview clips where a film exists and marks the rest with a visual placeholder rather than a dead off-site link.
85 lines
3.7 KiB
Plaintext
85 lines
3.7 KiB
Plaintext
---
|
|
title: "Create a product or website video"
|
|
sidebarTitle: "Product or website"
|
|
description: "Turn a product URL or launch brief into a promo, product tour, or social video."
|
|
---
|
|
|
|
import { DocsVideo } from "/snippets/docs-video.jsx";
|
|
|
|
Give HyperFrames the real URL when the product, website, or brand should appear in the result.
|
|
|
|
<DocsVideo
|
|
title="A launch film built by this workflow from huly.io, end to end"
|
|
src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/product-launch-huly-v5.mp4"
|
|
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/product-launch-huly-v5.jpg"
|
|
/>
|
|
|
|
Built by running this workflow on a real site. The screens are captured from
|
|
huly.io, not mocked — which is the point: you give it a URL and it works from
|
|
what is actually there.
|
|
|
|
## Make the request
|
|
|
|
Give the agent the real product URL and the result you want:
|
|
|
|
```text
|
|
Using /hyperframes, make a 30-second launch video for https://example.com.
|
|
```
|
|
|
|
The agent inspects the product, proposes a direction, and confirms anything
|
|
important that the request did not settle. Add an audience, required claim, or
|
|
final action when one must be exact; you do not need to specify every scene.
|
|
|
|
## What should the video do?
|
|
|
|
- **Launch video** — turn real product evidence into a persuasive story with one clear action at the end.
|
|
- **Product tour** — show one complete task through the product's real screens, from the first action to the result.
|
|
- **Short social video** — prove one useful point quickly, show the evidence, and stop after the payoff.
|
|
|
|
A tour features the product as it exists. A launch video rearranges the same evidence into a persuasive story. A social video proves one point and ends.
|
|
|
|
If you already have approved wording, paste the script and say whether it must remain verbatim. Say **do not capture the website** when the video should use only the supplied brief.
|
|
|
|
Use a [faceless explainer](/guides/faceless-explainer) instead when there is no product to show and the visuals should be invented.
|
|
|
|
## What HyperFrames builds from
|
|
|
|
<div className="my-5 grid gap-3 sm:grid-cols-3">
|
|
<div className="border-b border-zinc-200 pb-3 dark:border-zinc-800">
|
|
<div className="font-medium">Real screens</div>
|
|
<div className="mt-1 text-sm text-zinc-500">
|
|
The interface and product states worth showing.
|
|
</div>
|
|
</div>
|
|
<div className="border-b border-zinc-200 pb-3 dark:border-zinc-800">
|
|
<div className="font-medium">Product language</div>
|
|
<div className="mt-1 text-sm text-zinc-500">Claims, features, proof, and the final action.</div>
|
|
</div>
|
|
<div className="border-b border-zinc-200 pb-3 dark:border-zinc-800">
|
|
<div className="font-medium">Brand system</div>
|
|
<div className="mt-1 text-sm text-zinc-500">Color, type, imagery, motion, and sound.</div>
|
|
</div>
|
|
</div>
|
|
|
|
HyperFrames can animate captured product material or rebuild only the part that needs to move. A raw screen recording is not the default.
|
|
|
|
## Review the result
|
|
|
|
- Every product claim is current.
|
|
- The shown states are realistic and use no private material.
|
|
- The important interface remains readable while the video plays.
|
|
- The opening proves the product quickly and the ending asks for one clear action.
|
|
|
|
Ask the agent for a broader story revision. Use Studio for a direct visual or
|
|
timing change. Render from the agent, Studio, or the CLI when the result is ready.
|
|
|
|
<Card title="Finish and share" icon="circle-check" href="/guides/export-and-share">
|
|
Check the final project, render it from your preferred surface, and review the file.
|
|
</Card>
|
|
|
|
## Related topics
|
|
|
|
- [Create a faceless explainer when there is no product to show](/guides/faceless-explainer)
|
|
- [Edit the finished project in Studio](/studio)
|
|
- [Prompt for product-launch videos](/prompting/product-launch)
|