feat(docs): add template gallery page with visual previews

.github/workflows/regression.yml

@@ -23,7 +23,6 @@ jobs:
               - "packages/core/**"
               - "packages/producer/**"
               - "packages/engine/**"
-              - "scripts/**"
               - "Dockerfile*"
 
   regression-shards:

docs/concepts/compositions.mdx

@@ -133,7 +133,7 @@ Compositions can expose variables for dynamic content:
 <div data-composition-id="card" data-var-title="string" data-var-color="color">
 ```
 
-Variables make compositions reusable as [templates](/guides/templates) -- the same composition can render different content by injecting variable values at render time.
+Variables make compositions reusable as [templates](/templates) -- the same composition can render different content by injecting variable values at render time.
 
 ## Listing Compositions
 
@@ -152,7 +152,7 @@ npx hyperframes compositions
   <Card title="GSAP Animation" icon="wand-magic-sparkles" href="/guides/gsap-animation">
     Add animations to your compositions with GSAP timelines
   </Card>
-  <Card title="Templates" icon="grid-2" href="/guides/templates">
+  <Card title="Templates" icon="grid-2" href="/templates">
     Start from built-in templates for common video patterns
   </Card>
   <Card title="HTML Schema Reference" icon="book" href="/reference/html-schema">

docs/docs.json

@@ -36,7 +36,7 @@
         "groups": [
           {
             "group": "Getting Started",
-            "pages": ["introduction", "quickstart"]
+            "pages": ["introduction", "quickstart", "templates"]
           },
           {
             "group": "Concepts",
@@ -51,7 +51,6 @@
             "group": "Guides",
             "pages": [
               "guides/gsap-animation",
-              "guides/templates",
               "guides/rendering",
               "guides/common-mistakes",
               "guides/troubleshooting"

docs/guides/troubleshooting.mdx

@@ -9,7 +9,7 @@ If your issue is about a specific coding mistake (animations not working, video
   <Accordion title='"No composition found"'>
     Your directory needs an `index.html` with a valid [composition](/concepts/compositions). The root element must have a [`data-composition-id`](/concepts/data-attributes#composition-attributes) attribute.
 
-    **Fix:** Run `npx hyperframes init` to create a composition from a [template](/guides/templates), or verify your `index.html` has the correct structure:
+    **Fix:** Run `npx hyperframes init` to create a composition from a [template](/templates), or verify your `index.html` has the correct structure:
 
     ```html index.html
     <div id="root" data-composition-id="my-video"

docs/packages/cli.mdx

@@ -100,7 +100,7 @@ This is suppressed in CI environments, non-TTY shells, and when `HYPERFRAMES_NO_
     ```bash
     npx hyperframes init my-video --template warm-grain
     ```
-    See [Templates](/guides/templates) for all available templates.
+    See [Templates](/templates) for all available templates.
   </Step>
   <Step title="Preview in browser">
     Start the development server with live hot reload:
@@ -172,7 +172,7 @@ This is suppressed in CI environments, non-TTY shells, and when `HYPERFRAMES_NO_
 
     After scaffolding, the CLI installs AI coding skills for Claude Code, Gemini CLI, and Codex CLI (use `--skip-skills` to disable). See [`skills`](#skills) command.
 
-    See [Templates](/guides/templates) for full details.
+    See [Templates](/templates) for full details.
 
     ### `compositions`
 

docs/quickstart.mdx

@@ -68,7 +68,7 @@ A 1920x1080 video with an animated title that fades in from above — rendered t
     npx hyperframes init my-video --non-interactive --template blank
     ```
 
-    See [Templates](/guides/templates) for all available templates.
+    See [Templates](/templates) for all available templates.
 
     This generates a project structure like:
 
@@ -183,7 +183,7 @@ A 1920x1080 video with an animated title that fades in from above — rendered t
   <Card title="GSAP Animation" icon="wand-magic-sparkles" href="/guides/gsap-animation">
     Add fade, slide, scale, and custom animations to your videos
   </Card>
-  <Card title="Templates" icon="grid-2" href="/guides/templates">
+  <Card title="Templates" icon="grid-2" href="/templates">
     Start from built-in templates like Warm Grain and Swiss Grid
   </Card>
   <Card title="Rendering" icon="film" href="/guides/rendering">

docs/snippets/TemplateCard.jsx

@@ -0,0 +1,59 @@
+export function TemplateCard({ id, title, description, href, portrait }) {
+  const [hovering, setHovering] = React.useState(false);
+
+  const imgSrc = `/images/templates/${id}.png`;
+  const videoSrc = `/images/templates/${id}.mp4`;
+
+  return (
+    <a
+      href={href}
+      className="not-prose group block rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden transition-shadow hover:shadow-lg no-underline"
+      onMouseEnter={() => setHovering(true)}
+      onMouseLeave={() => setHovering(false)}
+    >
+      <div
+        className="relative overflow-hidden bg-gray-100 dark:bg-gray-800"
+        style={{ aspectRatio: portrait ? "9/16" : "16/9" }}
+      >
+        <img
+          src={imgSrc}
+          alt={`${title} template`}
+          className="absolute inset-0 w-full h-full object-cover"
+          style={{
+            opacity: hovering ? 0 : 1,
+            transition: "opacity 0.2s ease",
+          }}
+        />
+        {hovering && (
+          <video
+            src={videoSrc}
+            autoPlay
+            muted
+            loop
+            playsInline
+            className="absolute inset-0 w-full h-full object-cover"
+          />
+        )}
+      </div>
+      <div className="p-4">
+        <h3 className="text-base font-semibold text-gray-900 dark:text-white m-0">
+          {title}
+        </h3>
+        <p className="text-sm text-gray-500 dark:text-gray-400 mt-1 mb-0">
+          {description}
+        </p>
+      </div>
+    </a>
+  );
+}
+
+export function TemplateGrid({ children }) {
+  return (
+    <div
+      className="not-prose grid gap-4"
+      style={{ gridTemplateColumns: "repeat(2, 1fr)" }}
+    >
+      {children}
+    </div>
+  );
+}

docs/template-gallery.css

@@ -0,0 +1,25 @@
+.tpl-card video {
+  width: 100%;
+  aspect-ratio: 16/9;
+  object-fit: cover;
+  display: block;
+}
+
+.tpl-card.portrait video {
+  aspect-ratio: 9/16;
+}
+
+.tpl-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
+}
+
+.tpl-label {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 2.5rem 0.75rem 0.75rem;
+  background: linear-gradient(transparent, rgba(0,0,0,0.75));
+  pointer-events: none;
+}