> ## Documentation Index
> Fetch the complete documentation index at: https://hyperframes-codex-docs-human-first-refactor.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Create a product or website video

> Turn a product URL or launch brief into a promo, product tour, or social video.

export const ProductVideoChooser = () => {
  const purposes = [{
    id: "sell",
    label: "Sell it",
    prompt: source => `/hyperframes Create a 45-second launch video for ${source}.

Market the product to independent designers. Lead with the outcome, prove it with the real workflow, and end with “Try it free.”`
  }, {
    id: "show",
    label: "Show it",
    prompt: source => `/hyperframes Create a product tour for ${source}.

Feature the site’s real screens. Show one complete task from beginning to result, without turning it into a sales pitch.`
  }, {
    id: "social",
    label: "Make one social point",
    prompt: source => `/hyperframes Create a short social video for ${source}.

Make one point: how quickly someone can share a first result. Show visible proof and end after the payoff.`
  }];
  const [selectedId, setSelectedId] = useState("sell");
  const [source, setSource] = useState("https://example.com");
  const selected = purposes.find(purpose => purpose.id === selectedId) || purposes[0];
  const sourceValue = source.trim() || "https://example.com";
  return <div style={{
    margin: "1rem 0 1.5rem"
  }}>
      <div role="group" aria-label="Choose the purpose of the video" style={{
    display: "flex",
    flexWrap: "wrap",
    gap: "0.5rem",
    marginBottom: "0.9rem"
  }}>
        {purposes.map(purpose => {
    const active = purpose.id === selected.id;
    return <button key={purpose.id} type="button" aria-pressed={active} onClick={() => setSelectedId(purpose.id)} style={{
      border: "1px solid currentColor",
      borderRadius: "999px",
      padding: "0.4rem 0.75rem",
      background: active ? "#d8ff5f" : "transparent",
      color: "inherit",
      cursor: "pointer",
      opacity: active ? 1 : 0.7
    }}>
              <span style={{
      color: active ? "#111111" : "inherit",
      fontSize: "0.8125rem",
      fontWeight: 600
    }}>
                {purpose.label}
              </span>
            </button>;
  })}
      </div>

      <label htmlFor="product-video-source" style={{
    display: "block",
    marginBottom: "0.35rem",
    fontSize: "0.8125rem",
    fontWeight: 600
  }}>
        Product URL
      </label>
      <input id="product-video-source" type="url" value={source} onChange={event => setSource(event.target.value)} style={{
    boxSizing: "border-box",
    width: "100%",
    marginBottom: "0.75rem",
    border: "1px solid currentColor",
    borderRadius: "0.5rem",
    padding: "0.6rem 0.75rem",
    background: "transparent",
    color: "inherit",
    opacity: 0.85
  }} />

      <pre aria-live="polite" style={{
    margin: 0,
    whiteSpace: "pre-wrap",
    overflowWrap: "anywhere"
  }}>
        <code style={{
    display: "block",
    maxWidth: "100%",
    whiteSpace: "inherit",
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
          {selected.prompt(sourceValue)}
        </code>
      </pre>
    </div>;
};

Give HyperFrames the real URL when the product, website, or brand should appear in the result.

<Frame caption="A real product-launch film, built from the product itself.">
  <video className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/product-launch-huly-v1.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/product-launch-huly-v1.jpg" aria-label="A narrated Huly product-launch film created with HyperFrames" controls playsInline preload="metadata" />
</Frame>

## What should the video do?

<ProductVideoChooser />

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.

## You stay in the loop

1. **Story** — approve what the video says and in what order.
2. **Rough layouts** — see the composition before the detailed build.
3. **Studio** — watch the result and change visible details.
4. **Export** — render the approved version.

Before export, confirm that every product claim is current, the shown states are realistic, and no private material appears.

<Card title="Review in Studio" icon="palette" href="/studio">
  Check the story, product screens, timing, and final version.
</Card>