> ## 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.

# Turn a pull request into a video

> Show what changed, why it matters, and what happens next.

export const PrAudienceChooser = () => {
  const audiences = [{
    id: "users",
    label: "Users",
    prompt: `/hyperframes Turn https://github.com/owner/repo/pull/123 into a 45-second release video for existing users.

Lead with the visible change. Show the before and after, then any action users must take.`
  }, {
    id: "contributors",
    label: "Contributors",
    prompt: `/hyperframes Explain https://github.com/owner/repo/pull/123 to contributors.

Show the architecture change, the important tradeoff, and the code path reviewers should understand.`
  }, {
    id: "social",
    label: "Social audience",
    prompt: `/hyperframes Turn https://github.com/owner/repo/pull/123 into a short feature reveal.

One clear change, visible proof, and a direct ending. Keep implementation detail out unless it explains the result.`
  }];
  const [selectedId, setSelectedId] = useState("users");
  const selected = audiences.find(audience => audience.id === selectedId) || audiences[0];
  return <div style={{
    margin: "1rem 0 1.5rem"
  }}>
      <div role="group" aria-label="Choose the audience" style={{
    display: "flex",
    flexWrap: "wrap",
    gap: "0.5rem",
    marginBottom: "0.75rem"
  }}>
        {audiences.map(audience => {
    const active = audience.id === selected.id;
    return <button key={audience.id} type="button" aria-pressed={active} onClick={() => setSelectedId(audience.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
    }}>
                {audience.label}
              </span>
            </button>;
  })}
      </div>

      <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}
        </code>
      </pre>
    </div>;
};

Give HyperFrames a pull request. It reads the diff, commits, files, and contributors—there is no website capture.

<Frame caption="A real pull request becomes a 32-second explanation with code, before-and-after behavior, and sound.">
  <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/full-prvideo.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/wfv2-pr.jpg" controls playsInline preload="metadata" />
</Frame>

## Who needs to understand it?

<PrAudienceChooser />

The same pull request needs a different story for users, contributors, or a social audience.

## Before it builds

Confirm:

* the intended pull request and audience;
* whether the angle is a changelog, feature reveal, fix, or refactor;
* whether the change is proposed, merged, or released;
* the visible before and after;
* any breaking change or migration step.

The video should explain the change, not read the pull request description aloud.

## Verify the proof

* The pull request and target branch are correct.
* Proposed, merged, and released are not confused.
* User-facing claims match the actual behavior.
* Code excerpts show only the relevant lines and remain readable.
* Tests and refactoring are not presented as product features.
* Contributor names and release details are accurate.

Use [Storyboard](/studio/storyboard) to check the explanation. Use [Studio](/studio) for timing, code framing, captions, and export.

<Card title="Review in Studio" icon="palette" href="/studio">
  Check the complete explanation and export the version.
</Card>