docs: revert the breakout hero, keep the motion

At this column width the breakout rendered 968px and dominated the page instead
of supporting it. The film is back inside a Frame at the column width. The part
worth keeping was the motion, not the size: it still autoplays muted on a loop
rather than sitting behind a play button, so the page is already moving when it
loads. Removed the now-unused wrapper CSS rather than leaving a dead rule.

Author: ukimsanov

docs/custom.css

@@ -173,45 +173,11 @@ h3 {
   max-width: none;
 }
 
-/* ── Hero media ──
- *
- * For the one visual on a page that is the argument, not an illustration.
- * Reaches into the shell's horizontal padding so the frame reads as edge to
- * edge rather than as a figure inside an article. Deliberately not 100vw: this
- * column is not centred in the viewport (the sidebar is a flex sibling), so
- * the usual `margin-left: calc(50% - 50vw)` trick would push it off-centre. */
-.hf-hero {
-  margin: 0 -1.25rem 0.75rem;
-  overflow: hidden;
-  border-radius: 12px;
-  background: #000;
-  line-height: 0;
-}
-
-.hf-hero video,
-.hf-hero img {
-  display: block;
-  width: 100%;
-  height: auto;
-  /* The theme's prose styles put a 2em margin on media, which showed up as a
-   * 64px black band above and below the film inside this wrapper. */
-  margin: 0;
-}
-
-@media (min-width: 1280px) {
-  .hf-hero {
-    margin-left: -2.5rem;
-    margin-right: -2.5rem;
-    border-radius: 14px;
-  }
-}
-
-/* Caption for a hero: quiet, and it sits with the media rather than boxed. */
-.hf-hero-caption {
-  margin: 0 0 2rem;
-  font-size: 0.875rem;
-  color: var(--hf-text-muted, #8b8b8b);
-}
+/* A breakout hero wrapper was tried here and reverted: at this column width it
+ * rendered 968px wide and overwhelmed the page rather than supporting it. The
+ * film stays inside a Frame at the column width. Motion was the part worth
+ * keeping — the hero autoplays muted on a loop instead of waiting behind a play
+ * button — and that lives on the element, not in CSS. */
 
 /* Code font — IBM Plex Mono (loaded via Google Fonts above).
  *

docs/introduction.mdx

@@ -4,8 +4,9 @@ sidebarTitle: "What HyperFrames is"
 description: "Tell an AI agent what you want. It builds a real, editable video project — you refine it in Studio and export the film."
 ---
 
-<div className="hf-hero">
+<Frame caption="Made with HyperFrames, from a single request.">
   <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/hyperframes-launch-preview.mp4"
     poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/hyperframes-launch-poster.jpg"
     autoPlay
@@ -15,9 +16,7 @@ description: "Tell an AI agent what you want. It builds a real, editable video p
     controls
     preload="metadata"
   />
-</div>
-
-<p className="hf-hero-caption">Made with HyperFrames, from a single request.</p>
+</Frame>
 
 Start from an idea, a website, a script, a recording, a pull request, or a song. The agent does the first build. You keep control of the result.