docs: make the introduction hero the argument, not an illustration

The film now reaches into the shell padding so it reads edge to edge, and it
autoplays muted on a loop instead of waiting behind a play button. Motion is
pre-attentive - the eye goes to it before any text is read - so a page that is
already moving answers 'what is this?' faster than a poster the reader has to
decide to click. Controls stay available for scrubbing and for unmuting once a
film with a real audio track is hosted.

Not implemented as 100vw: this column is not centred in the viewport because the
sidebar is a flex sibling, so the usual margin-left: calc(50% - 50vw) breakout
would sit off-centre. Noted in the CSS.

Author: ukimsanov

docs/custom.css

@@ -173,6 +173,43 @@ 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;
+}
+
+@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);
+}
+
 /* Code font — IBM Plex Mono (loaded via Google Fonts above).
  *
  * Deliberately scoped to real code elements. The previous rule also matched

docs/introduction.mdx

@@ -4,16 +4,20 @@ 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."
 ---
 
-<Frame caption="Made with HyperFrames, from a single request.">
+<div className="hf-hero">
   <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"
-    controls
+    autoPlay
+    muted
+    loop
     playsInline
+    controls
     preload="metadata"
   />
-</Frame>
+</div>
+
+<p className="hf-hero-caption">Made with HyperFrames, from a single request.</p>
 
 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.