mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-11 06:30:03 +00:00
ukimsanov
b4648e0e5a
Product launch, colour grading, faceless explainer, captions and recuts, motion graphics, and voice and audio. Five of these led with a six-to-eight second teaser. A six-second clip on the page that teaches you to make explainers does not teach anything — it is a placeholder that looks like content. Colour grading, the most visual feature in the product, had no video at all. The new films are 34 to 41 seconds and each shows a RANGE rather than one look: four ways to tell the same idea with no footage; five caption treatments on one untouched clip; correction, presets, curves, selective colour, all four scopes and a LUT; narration with music ducking under it and effects on the beat. The launch film is built by running the workflow on huly.io for real, so the page that sells the workflow is showing its actual output. They share one visual system, measured from HyperFrames own light-theme launch films rather than invented: bone field, near-black type, coral accent, and the product always a dark panel inset on the light field. Every one carries audio at about -20 dB and is 1-2 MB. The old teasers are removed from the three pages where they became a duplicate. They stay in the workflow picker, which is where a six-second tile belongs. Guides with nothing to look at: 15 at the start of this work, 5 now.
93 lines
4.2 KiB
Plaintext
93 lines
4.2 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.
|
|
|
|
<Frame caption="Made from huly.io with this workflow — the product's own screens, its type and color, cut into a launch film.">
|
|
<DocsVideo
|
|
title="A Huly product-launch film created with HyperFrames from the live site"
|
|
src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/product-launch-huly-v3.mp4"
|
|
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/product-launch-huly-v2.jpg"
|
|
/>
|
|
</Frame>
|
|
|
|
<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-v4.mp4"
|
|
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/product-launch-huly-v4.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)
|