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

# Go further with HyperFrames

> Take more control of an existing project through your agent, Studio, richer composition tools, and a reliable finish.

export const AdvancedPathGrid = () => {
  const CDN = "https://static.heygen.ai/hyperframes-oss/docs/images/showcase";
  const paths = [{
    title: "Direct the agent better",
    detail: "Change the story, source material, or several scenes with one clear revision.",
    action: "Give better direction",
    href: "/prompting/overview",
    video: `${CDN}/wfv2-product-launch.mp4`,
    poster: `${CDN}/wfv2-product-launch.jpg`
  }, {
    title: "Edit in Studio",
    detail: "Change visible design, text, media, timing, and animation in the live project.",
    action: "Open the Studio guide",
    href: "/studio",
    video: `${CDN}/studio-direct-edit-loop-v2.mp4`,
    poster: `${CDN}/studio-direct-edit-loop-v2.jpg`
  }, {
    title: "Build richer compositions",
    detail: "Use variables, nested compositions, Catalog elements, media, and animation.",
    action: "Learn the core ideas",
    href: "/concepts",
    video: `${CDN}/wfv2-general.mp4`,
    poster: `${CDN}/wfv2-general.jpg`
  }, {
    title: "Check, render, and share",
    detail: "Validate the project, render through Studio, an agent, or the CLI, and review the file.",
    action: "Finish the project",
    href: "/guides/export-and-share",
    video: `${CDN}/studio-check-render-loop-v2.mp4`,
    poster: `${CDN}/studio-check-render-loop-v2.jpg`
  }];
  const [reducedMotion, setReducedMotion] = useState(false);
  useEffect(() => {
    const query = window.matchMedia("(prefers-reduced-motion: reduce)");
    setReducedMotion(query.matches);
    const onChange = event => setReducedMotion(event.matches);
    query.addEventListener("change", onChange);
    return () => query.removeEventListener("change", onChange);
  }, []);
  return <div style={{
    display: "grid",
    gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 260px), 1fr))",
    gap: "1rem",
    margin: "1.5rem 0"
  }}>
      {paths.map(path => <article key={path.href} style={{
    overflow: "hidden",
    border: "1px solid var(--border-color, rgba(128, 128, 128, 0.22))",
    borderRadius: "12px"
  }}>
          <video src={reducedMotion ? undefined : path.video} poster={path.poster} autoPlay={!reducedMotion} muted loop={!reducedMotion} playsInline preload="metadata" aria-hidden="true" style={{
    display: "block",
    width: "100%",
    aspectRatio: "16 / 9",
    objectFit: "cover",
    background: "#000",
    margin: 0
  }} />
          <div style={{
    padding: "0.9rem 1rem 1rem"
  }}>
            <strong style={{
    display: "block",
    fontSize: "1rem",
    lineHeight: 1.35
  }}>
              {path.title}
            </strong>
            <span style={{
    display: "block",
    marginTop: "0.35rem",
    fontSize: "0.875rem",
    lineHeight: 1.5,
    opacity: 0.72
  }}>
              {path.detail}
            </span>
            <a href={path.href} style={{
    display: "inline-block",
    marginTop: "0.75rem",
    fontSize: "0.875rem",
    fontWeight: 600,
    color: "inherit",
    textDecoration: "none"
  }}>
              {path.action} →
            </a>
          </div>
        </article>)}
    </div>;
};

<Frame>
  <video alt="An existing HyperFrames project is revised with an agent, edited in Studio, enriched, checked, and rendered." className="aspect-video w-full bg-zinc-100 object-cover dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/journey-go-further-v2.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/journey-go-further-v2.jpg" controls playsInline preload="metadata" />
</Frame>

The project does not change format as you gain control. Your agent, Studio, the
SDK, the Player, and the renderer all work from the same HTML project.

## Choose the surface by the size of the change

| The change                          | Best first move                      | Example                                                                                     |
| ----------------------------------- | ------------------------------------ | ------------------------------------------------------------------------------------------- |
| Story, structure, or several scenes | Ask the agent                        | “Make the opening reveal the product by three seconds.”                                     |
| One visible detail or moment        | Edit in Studio                       | Change a line, crop, position, clip boundary, or keyframe.                                  |
| The same design needs new content   | Use variables or nested compositions | Produce customer, language, or format variants without duplicating the layout.              |
| The project must finish reliably    | Check, render, and watch the file    | Run the browser gate, render through your preferred surface, then review the actual output. |

Use the highest-level tool that gives you enough control. A one-line agent
revision is usually better than hand-editing five scenes; one precise Studio edit
is usually faster than describing a two-pixel alignment change.

## Work in passes

1. **Fix the story first.** Confirm the order, emphasis, and ending before polishing motion.
2. **Correct what you can point at.** Use Studio for wording, layout, media, timing, and animation.
3. **Extract repeated decisions.** Introduce variables or reusable compositions only when repetition is real.
4. **Finish from the final project.** Run `npx hyperframes check`, render, and watch the exported file once.

The four paths below use those same decisions on a real project.

<AdvancedPathGrid />