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

# What is HyperFrames?

> See what an AI agent can make with ordinary web technology.

export const ShowcaseWall = () => {
  const CDN = "https://static.heygen.ai/hyperframes-oss/docs/images/showcase";
  const FILMS = [{
    id: "grading",
    tile: "tile-grading-v2",
    full: "full-grading-4k-v2",
    title: "Colour grading and media effects",
    note: "Real footage graded with LUTs, curves, and scopes — inside Studio.",
    length: "48s"
  }, {
    id: "variables",
    title: "One shoot, many cuts",
    note: "The same footage rendered as several vertical videos from one project.",
    length: "44s"
  }, {
    id: "music",
    title: "Cut to the music",
    note: "A track analysed for beats and sections, then everything snapped to that grid.",
    length: "90s"
  }, {
    id: "prvideo",
    title: "A pull request, explained",
    note: "A code change turned into a review anyone on the team can watch.",
    length: "32s"
  }, {
    id: "timeline",
    title: "Editing on a timeline",
    note: "Trimming, splitting, and retiming a project by hand.",
    length: "34s"
  }, {
    id: "hypecard",
    title: "A year in review",
    note: "Personal data turned into a shareable card, generated per person.",
    length: "27s"
  }];
  const [openId, setOpenId] = useState(null);
  const [reduced, setReduced] = useState(false);
  useEffect(() => {
    const q = window.matchMedia("(prefers-reduced-motion: reduce)");
    setReduced(q.matches);
    const onChange = e => setReduced(e.matches);
    q.addEventListener("change", onChange);
    return () => q.removeEventListener("change", onChange);
  }, []);
  const open = FILMS.find(f => f.id === openId) || null;
  if (open) {
    return <div style={{
      margin: "1.5rem 0"
    }}>
        <video key={open.id} src={`${CDN}/${open.full || `full-${open.id}`}.mp4`} poster={`${CDN}/${open.tile || `tile-${open.id}`}.jpg`} controls autoPlay playsInline style={{
      width: "100%",
      display: "block",
      borderRadius: "12px",
      background: "#000",
      margin: 0
    }} />
        <div style={{
      display: "flex",
      alignItems: "baseline",
      justifyContent: "space-between",
      gap: "1rem",
      marginTop: "0.6rem",
      flexWrap: "wrap"
    }}>
          <span style={{
      fontSize: "0.875rem",
      opacity: 0.75
    }}>
            <strong>{open.title}</strong> · {open.length} · made with HyperFrames
          </span>
          <button type="button" onClick={() => setOpenId(null)} style={{
      fontSize: "0.8125rem",
      padding: "0.35rem 0.7rem",
      borderRadius: "7px",
      border: "1px solid currentColor",
      background: "transparent",
      color: "inherit",
      opacity: 0.7,
      cursor: "pointer"
    }}>
            ← Back to all films
          </button>
        </div>
      </div>;
  }
  return <div style={{
    display: "grid",
    gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))",
    gap: "0.85rem",
    margin: "1.5rem 0"
  }}>
      {FILMS.map(film => <button key={film.id} type="button" onClick={() => setOpenId(film.id)} aria-label={`Play ${film.title}, ${film.length}, with sound`} style={{
    display: "block",
    width: "100%",
    padding: 0,
    border: "1px solid rgba(128,128,128,0.28)",
    borderRadius: "11px",
    overflow: "hidden",
    background: "transparent",
    color: "inherit",
    textAlign: "left",
    cursor: "pointer"
  }}>
          <video src={reduced ? undefined : `${CDN}/${film.tile || `tile-${film.id}`}.mp4`} poster={`${CDN}/${film.tile || `tile-${film.id}`}.jpg`} autoPlay={!reduced} muted loop={!reduced} playsInline preload="metadata" style={{
    width: "100%",
    aspectRatio: "16 / 9",
    objectFit: "cover",
    display: "block",
    background: "#000",
    margin: 0
  }} />
          <span style={{
    display: "block",
    padding: "0.7rem 0.85rem 0.85rem"
  }}>
            <span style={{
    display: "block",
    fontWeight: 600,
    fontSize: "0.9375rem"
  }}>
              {film.title}
            </span>
            <span style={{
    display: "block",
    fontSize: "0.8125rem",
    opacity: 0.7,
    marginTop: "0.15rem"
  }}>
              {film.note}
            </span>
            <span style={{
    display: "block",
    fontSize: "0.75rem",
    opacity: 0.55,
    marginTop: "0.35rem"
  }}>
              ▶ Play with sound · {film.length}
            </span>
          </span>
        </button>)}
    </div>;
};

<Frame>
  <video alt="An introduction to how an agent turns an editable HyperFrames project into 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/journey-introduction-v5.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/journey-introduction-v5.jpg" playsInline controls preload="metadata" />
</Frame>

HyperFrames is an open-source framework that turns HTML into video. You make the request; an AI agent builds an editable project; HyperFrames plays or renders it.

## What can it make?

Every tile below is a finished HyperFrames film. Open one to watch it with sound.

<ShowcaseWall />

## Three things to know

**Agent-built.** The layouts, type, interfaces, motion, transitions, and effects are ordinary HTML, CSS, and JavaScript authored by an AI agent.

**Editable.** The result is a project folder, not a flattened black box. An agent, Studio, and your own tools can work on the same files.

**Deterministic.** HyperFrames can seek the project to an exact frame and render the same result reliably.

## Make one

<Card title="Make your first video" icon="play" href="/quickstart" horizontal arrow>
  Install the skills, make one short request, and choose how you want to continue.
</Card>

[Go further →](/go-further) · [Build on HyperFrames →](/developers)