Shironex · Sep 27, 2026 · Sep 27, 2026 · Sep 27, 2026 · Sep 27, 2026 · Sep 27, 2026
diff --git a/README.md b/README.md
@@ -1,3 +1,8 @@
+<p align="center">
+  <img src="https://noctcore.github.io/showcase-kit/gallery/hero.webp" width="100%" alt="A banner showcase-kit rendered for Nightjar, the made-up observing planner in its docs gallery: the crescent logo, the name and the tagline on the left, and the Gear, Log and Tonight windows stacked and tilted on the right." />
+  <br /><sub>A banner the kit rendered for Nightjar, the fixture app of the <a href="https://noctcore.github.io/showcase-kit/gallery/">docs gallery</a>.</sub>
+</p>
+
 # @noctcore/showcase-kit
 
 Capture, frame and export showcase images of desktop and web apps for READMEs and portfolios.
@@ -11,13 +16,41 @@ Protocol, or a terminal app in a pseudo terminal) and captures the same pixels o
 From one config it produces:
 
 - **raw captures**: pixel-exact PNGs at a fixed viewport and device scale factor, in every UI language;
-- **framed README images**: each capture in a window frame on a solid or gradient background, as WebP or PNG;
+- **framed README images**: each capture in a window, browser or terminal frame (six styles) on a solid, gradient,
+  mesh, dotted, grainy or transparent background, as WebP or PNG;
 - **portfolio images**: exact-size 16:9 images with the framed window contained, a thumbnail and a gallery JSON;
-- **a README table**: an HTML table of the framed images with captions;
-- **a hero banner**: logo, name, tagline and a stack of tilted framed shots;
+- **a README snippet**: the framed images with captions as HTML, in one of five layouts (a table, rows, a featured
+  image, collapsible details or a list);
+- **a hero banner**: logo, name, tagline and framed shots in one of six layouts (stack, spotlight, split, row,
+  mosaic or centered);
 - **terminal clips**: animated WebP and GIF recordings of a terminal app (MP4 opt-in);
 - **app icons**: web, Electron or Tauri icon sets from one square image.
 
+## Layouts
+
+The [gallery](https://noctcore.github.io/showcase-kit/gallery/) shows every hero layout, frame style, background and
+README layout, each with the config that made it. A few of them below, for Nightjar, the made-up app the gallery
+captures (not the kit's own UI). The table is what `showcase readme` printed for them.
+
+<table>
+  <tr>
+    <td width="50%"><img src="https://noctcore.github.io/showcase-kit/gallery/layouts/hero-spotlight.webp" alt="A banner for Nightjar, the made-up app in showcase-kit&#39;s docs gallery, in the spotlight layout: the logo, name and tagline on the left, one large Tonight window running off the right edge." /></td>
+    <td width="50%"><img src="https://noctcore.github.io/showcase-kit/gallery/layouts/hero-row.webp" alt="The Nightjar banner in the row layout: the logo, name and tagline centered at the top, the Gear, Log and Tonight windows side by side under them." /></td>
+  </tr>
+  <tr>
+    <td align="center"><sub>Hero layout spotlight, for Nightjar (the gallery fixture app)</sub></td>
+    <td align="center"><sub>Hero layout row</sub></td>
+  </tr>
+  <tr>
+    <td width="50%"><img src="https://noctcore.github.io/showcase-kit/gallery/layouts/hero-mosaic.webp" alt="The Nightjar banner in the mosaic layout: the text on the left, a tilted wall of Nightjar windows fading out towards it." /></td>
+    <td width="50%"><img src="https://noctcore.github.io/showcase-kit/gallery/layouts/tonight-browser.webp" alt="Nightjar&#39;s Tonight view in the browser frame: a toolbar with back, forward and reload, and nightjar.app/tonight in the address bar." /></td>
+  </tr>
+  <tr>
+    <td align="center"><sub>Hero layout mosaic</sub></td>
+    <td align="center"><sub>Frame style browser, with an address bar</sub></td>
+  </tr>
+</table>
+
 ## Install
 
 ```sh
@@ -67,9 +100,9 @@ export default defineConfig({
 | [Terminal determinism](https://noctcore.github.io/showcase-kit/guides/terminal-determinism/) | What the kit pins down, and what a TUI should offer |
 | [Clips](https://noctcore.github.io/showcase-kit/guides/clips/) | Animated recordings of a terminal app |
 | [Frames](https://noctcore.github.io/showcase-kit/guides/frames/) | Window styles, backgrounds, formats and sizes |
-| [README table](https://noctcore.github.io/showcase-kit/guides/readme-table/) | `showcase readme` and its options |
+| [README table](https://noctcore.github.io/showcase-kit/guides/readme-table/) | `showcase readme`, its options and its five layouts |
 | [Portfolio](https://noctcore.github.io/showcase-kit/guides/portfolio/) | Exact-size images, the thumbnail and the gallery JSON |
-| [Hero banner](https://noctcore.github.io/showcase-kit/guides/hero/) | The README banner and social preview |
+| [Hero banner](https://noctcore.github.io/showcase-kit/guides/hero/) | The README banner and social preview, in six layouts |
 | [Icons](https://noctcore.github.io/showcase-kit/guides/icons/) | Web, Electron and Tauri icon sets |
 | [Config reference](https://noctcore.github.io/showcase-kit/reference/config/) | Every config key, its type and default |
 | [CLI reference](https://noctcore.github.io/showcase-kit/reference/cli/) | Every command and option |

diff --git a/site/gallery/gallery.manifest.json b/site/gallery/gallery.manifest.json
@@ -27,6 +27,120 @@
     "width": 512,
     "height": 512
   },
+  "layouts/hero-centered.webp": {
+    "bytes": 23008,
+    "sha256": "fd4d3067b1e991726205757055fbd8062288f8a191a9050fddd28928906c9822",
+    "width": 1280,
+    "height": 640
+  },
+  "layouts/hero-dots.webp": {
+    "bytes": 46254,
+    "sha256": "3a9fd1b1b5fe8664e4d6fc61855710a586aa8bae2765631ceaf3c04690227c3c",
+    "width": 1280,
+    "height": 640
+  },
+  "layouts/hero-mesh.webp": {
+    "bytes": 41004,
+    "sha256": "6c63e699bd1fd0c2bef1b7ab9890bc5fc007bd258d1f15be2093e38db45be069",
+    "width": 1280,
+    "height": 640
+  },
+  "layouts/hero-mosaic.webp": {
+    "bytes": 62384,
+    "sha256": "31aefc7c1d14f7c0e742688d7677fe774c2415cfe8cdd342b404432278c20614",
+    "width": 1280,
+    "height": 640
+  },
+  "layouts/hero-noise.webp": {
+    "bytes": 46084,
+    "sha256": "6d3df9f322a13ad1938a3397b0764a1879c13c6bbe3546cc72e04060a70591fc",
+    "width": 1280,
+    "height": 640
+  },
+  "layouts/hero-row.webp": {
+    "bytes": 30680,
+    "sha256": "8ca0d9fa2c00abfff28f4b77e9de0a864bba47f89b9e03aa91089870d1a1b7f1",
+    "width": 1280,
+    "height": 640
+  },
+  "layouts/hero-split.webp": {
+    "bytes": 27188,
+    "sha256": "68357ce8b5f8c7a89d2db20859fda6c597f83f77c8a08fb3e9cb8180cae57760",
+    "width": 1280,
+    "height": 640
+  },
+  "layouts/hero-spotlight.webp": {
+    "bytes": 29646,
+    "sha256": "32bdc538ce116559e75dfb71605b2b07920ac410bf9362fd943590f798774452",
+    "width": 1280,
+    "height": 640
+  },
+  "layouts/queue-terminal.webp": {
+    "bytes": 82066,
+    "sha256": "768e2f7d9782f6a2f696fc062fbbcc1d59888dce2b78a8801568d390b00d6d06",
+    "width": 2040,
+    "height": 1188
+  },
+  "layouts/queue-windows.webp": {
+    "bytes": 81074,
+    "sha256": "0865d57c918ab5a498d580f538005d58aec33e6760d762b69d2917c0f463386d",
+    "width": 2040,
+    "height": 1184
+  },
+  "layouts/tonight-browser.webp": {
+    "bytes": 33656,
+    "sha256": "421c7299e80c128681da0863a84959beb200d937a09d4545506f2c81c2435e57",
+    "width": 1200,
+    "height": 760
+  },
+  "layouts/tonight-dots.webp": {
+    "bytes": 37050,
+    "sha256": "710ef31572a5e574178130d43ef7b2a0800acfda8898389dac7b5941d8929d2e",
+    "width": 1200,
+    "height": 757
+  },
+  "layouts/tonight-mesh.webp": {
+    "bytes": 33804,
+    "sha256": "31bccf9ac03db192d9b183ab70f59727ed702de5978d09a1bd566fa3c4edb09a",
+    "width": 1200,
+    "height": 757
+  },
+  "layouts/tonight-minimal.webp": {
+    "bytes": 32324,
+    "sha256": "909fb7793bef805aa89c3fa549aecbe12ee20dc5f92aa49f794af1ae40c19961",
+    "width": 1200,
+    "height": 747
+  },
+  "layouts/tonight-noise.webp": {
+    "bytes": 32900,
+    "sha256": "3603caac55b081a56b4e2c9df0e81ed5748c7cce4156574f03b04991121b1a8e",
+    "width": 1200,
+    "height": 757
+  },
+  "layouts/tonight-none.webp": {
+    "bytes": 31926,
+    "sha256": "331238da379691695edd84441d63cba1380b4d659d004531185410628639253b",
+    "width": 1200,
+    "height": 723
+  },
+  "layouts/tonight-solid.webp": {
+    "bytes": 32280,
+    "sha256": "98ba29628b99b180aba967d118d24ed2b3b7411dcedeb3e559c15a6573726fe1",
+    "width": 1200,
+    "height": 757
+  },
+  "layouts/tonight-terminal.webp": {
+    "bytes": 33216,
+    "sha256": "deaa48f6b326cca377e7432f118a70ee8198548e09b40c3d7b25291f12ce877b",
+    "width": 1200,
+    "height": 752
+  },
+  "layouts/tonight-windows.webp": {
+    "bytes": 32514,
+    "sha256": "5f1dc938990152803661f8eb1b5e896787a46d5b281a108ac7785bc6a2ce7fc9",
+    "width": 1200,
+    "height": 750
+  },
   "portfolio/gear.webp": {
     "bytes": 39490,
     "sha256": "06265706035004f4b97fc384c0a298fbebaad0f4fbae62b228c0a5e3d130fc13",

diff --git a/site/gallery/readme.config.mjs b/site/gallery/readme.config.mjs
@@ -0,0 +1,34 @@
+// Not a capture config: the kit's own README shows a few gallery images, and `showcase readme` prints the table
+// for them. That command only reads `shots` and `outputs.readme`, so each shot here names an image one of the
+// configs in variants/ wrote. Nothing is captured with this file and its target never starts.
+export default {
+  name: 'Nightjar',
+  target: { mode: 'url', url: 'http://127.0.0.1:47219/' },
+  shots: [
+    {
+      id: 'hero-spotlight',
+      title: 'Hero: spotlight',
+      caption: 'Hero layout spotlight, for Nightjar (the gallery fixture app)',
+      alt: "A banner for Nightjar, the made-up app in showcase-kit's docs gallery, in the spotlight layout: the logo, name and tagline on the left, one large Tonight window running off the right edge.",
+    },
+    {
+      id: 'hero-row',
+      title: 'Hero: row',
+      caption: 'Hero layout row',
+      alt: "The Nightjar banner in the row layout: the logo, name and tagline centered at the top, the Gear, Log and Tonight windows side by side under them.",
+    },
+    {
+      id: 'hero-mosaic',
+      title: 'Hero: mosaic',
+      caption: 'Hero layout mosaic',
+      alt: 'The Nightjar banner in the mosaic layout: the text on the left, a tilted wall of Nightjar windows fading out towards it.',
+    },
+    {
+      id: 'tonight-browser',
+      title: 'Frame: browser',
+      caption: 'Frame style browser, with an address bar',
+      alt: "Nightjar's Tonight view in the browser frame: a toolbar with back, forward and reload, and nightjar.app/tonight in the address bar.",
+    },
+  ],
+  outputs: { readme: '../public/gallery/layouts/{id}.webp' },
+};
diff --git a/site/gallery/readme/details.html b/site/gallery/readme/details.html
@@ -0,0 +1,12 @@
+<details open>
+  <summary><b>Tonight</b>: Plan the night: conditions, targets and a sky chart.</summary>
+  <p align="center"><img width="100%" src="site/public/gallery/readme/en/tonight.webp" alt="Nightjar&#39;s Tonight view: four condition cards, a table of six targets with altitude bars, and a sky chart." /></p>
+</details>
+<details>
+  <summary><b>Log</b>: Every session, with seeing and notes.</summary>
+  <p align="center"><img width="100%" src="site/public/gallery/readme/en/log.webp" alt="Nightjar&#39;s Log view: session totals and a table of eight observations with seeing dots, star ratings and notes." /></p>
+</details>
+<details>
+  <summary><b>Gear</b>: The kit that goes in the car.</summary>
+  <p align="center"><img width="100%" src="site/public/gallery/readme/en/gear.webp" alt="Nightjar&#39;s Gear view: six equipment cards with their specs, and a packing checklist." /></p>
+</details>
diff --git a/site/gallery/readme/featured.html b/site/gallery/readme/featured.html
@@ -0,0 +1,14 @@
+<p align="center">
+  <img width="100%" src="site/public/gallery/readme/en/tonight.webp" alt="Nightjar&#39;s Tonight view: four condition cards, a table of six targets with altitude bars, and a sky chart." />
+  <br /><sub>Plan the night: conditions, targets and a sky chart.</sub>
+</p>
+<table>
+  <tr>
+    <td width="50%"><img src="site/public/gallery/readme/en/log.webp" alt="Nightjar&#39;s Log view: session totals and a table of eight observations with seeing dots, star ratings and notes." /></td>
+    <td width="50%"><img src="site/public/gallery/readme/en/gear.webp" alt="Nightjar&#39;s Gear view: six equipment cards with their specs, and a packing checklist." /></td>
+  </tr>
+  <tr>
+    <td align="center"><sub>Every session, with seeing and notes.</sub></td>
+    <td align="center"><sub>The kit that goes in the car.</sub></td>
+  </tr>
+</table>
diff --git a/site/gallery/readme/kit-readme.html b/site/gallery/readme/kit-readme.html
@@ -0,0 +1,18 @@
+<table>
+  <tr>
+    <td width="50%"><img src="site/public/gallery/layouts/hero-spotlight.webp" alt="A banner for Nightjar, the made-up app in showcase-kit&#39;s docs gallery, in the spotlight layout: the logo, name and tagline on the left, one large Tonight window running off the right edge." /></td>
+    <td width="50%"><img src="site/public/gallery/layouts/hero-row.webp" alt="The Nightjar banner in the row layout: the logo, name and tagline centered at the top, the Gear, Log and Tonight windows side by side under them." /></td>
+  </tr>
+  <tr>
+    <td align="center"><sub>Hero layout spotlight, for Nightjar (the gallery fixture app)</sub></td>
+    <td align="center"><sub>Hero layout row</sub></td>
+  </tr>
+  <tr>
+    <td width="50%"><img src="site/public/gallery/layouts/hero-mosaic.webp" alt="The Nightjar banner in the mosaic layout: the text on the left, a tilted wall of Nightjar windows fading out towards it." /></td>
+    <td width="50%"><img src="site/public/gallery/layouts/tonight-browser.webp" alt="Nightjar&#39;s Tonight view in the browser frame: a toolbar with back, forward and reload, and nightjar.app/tonight in the address bar." /></td>
+  </tr>
+  <tr>
+    <td align="center"><sub>Hero layout mosaic</sub></td>
+    <td align="center"><sub>Frame style browser, with an address bar</sub></td>
+  </tr>
+</table>
diff --git a/site/gallery/readme/list.html b/site/gallery/readme/list.html
@@ -0,0 +1,12 @@
+<p align="center">
+  <img width="100%" src="site/public/gallery/readme/en/tonight.webp" alt="Nightjar&#39;s Tonight view: four condition cards, a table of six targets with altitude bars, and a sky chart." />
+  <br /><sub>Plan the night: conditions, targets and a sky chart.</sub>
+</p>
+<p align="center">
+  <img width="100%" src="site/public/gallery/readme/en/log.webp" alt="Nightjar&#39;s Log view: session totals and a table of eight observations with seeing dots, star ratings and notes." />
+  <br /><sub>Every session, with seeing and notes.</sub>
+</p>
+<p align="center">
+  <img width="100%" src="site/public/gallery/readme/en/gear.webp" alt="Nightjar&#39;s Gear view: six equipment cards with their specs, and a packing checklist." />
+  <br /><sub>The kit that goes in the car.</sub>
+</p>
diff --git a/site/gallery/readme/rows.html b/site/gallery/readme/rows.html
@@ -0,0 +1,18 @@
+<table>
+  <tr>
+    <td width="60%"><img src="site/public/gallery/readme/en/tonight.webp" alt="Nightjar&#39;s Tonight view: four condition cards, a table of six targets with altitude bars, and a sky chart." /></td>
+    <td width="40%"><h3>Tonight</h3><p>Plan the night: conditions, targets and a sky chart.</p></td>
+  </tr>
+</table>
+<table>
+  <tr>
+    <td width="40%"><h3>Log</h3><p>Every session, with seeing and notes.</p></td>
+    <td width="60%"><img src="site/public/gallery/readme/en/log.webp" alt="Nightjar&#39;s Log view: session totals and a table of eight observations with seeing dots, star ratings and notes." /></td>
+  </tr>
+</table>
+<table>
+  <tr>
+    <td width="60%"><img src="site/public/gallery/readme/en/gear.webp" alt="Nightjar&#39;s Gear view: six equipment cards with their specs, and a packing checklist." /></td>
+    <td width="40%"><h3>Gear</h3><p>The kit that goes in the car.</p></td>
+  </tr>
+</table>
diff --git a/site/gallery/readme/table.html b/site/gallery/readme/table.html
@@ -0,0 +1,16 @@
+<table>
+  <tr>
+    <td width="50%"><img src="site/public/gallery/readme/en/tonight.webp" alt="Nightjar&#39;s Tonight view: four condition cards, a table of six targets with altitude bars, and a sky chart." /></td>
+    <td width="50%"><img src="site/public/gallery/readme/en/log.webp" alt="Nightjar&#39;s Log view: session totals and a table of eight observations with seeing dots, star ratings and notes." /></td>
+  </tr>
+  <tr>
+    <td align="center"><sub>Plan the night: conditions, targets and a sky chart.</sub></td>
+    <td align="center"><sub>Every session, with seeing and notes.</sub></td>
+  </tr>
+  <tr>
+    <td width="50%"><img src="site/public/gallery/readme/en/gear.webp" alt="Nightjar&#39;s Gear view: six equipment cards with their specs, and a packing checklist." /></td>
+  </tr>
+  <tr>
+    <td align="center"><sub>The kit that goes in the car.</sub></td>
+  </tr>
+</table>
diff --git a/site/gallery/variants/background-dots.mjs b/site/gallery/variants/background-dots.mjs
@@ -0,0 +1,20 @@
+// The web config's README image in another frame, for the gallery's frame section. `frame` renders from the
+// raw captures `showcase all` wrote for showcase.config.mjs, so nothing is captured again; `root: '..'`
+// keeps every path resolving from site/gallery/. One language, sized for a docs tile rather than a README.
+import web from '../showcase.config.mjs';
+
+export default {
+  ...web,
+  root: '..',
+  langs: ['en'],
+  frame: {
+    ...web.frame,
+    background: { type: 'dots', color: '#0d1224' },
+    maxWidth: 1200,
+    quality: 80,
+  },
+  outputs: {
+    raw: web.outputs.raw,
+    readme: '../public/gallery/layouts/{id}-dots.webp',
+  },
+};
diff --git a/site/gallery/variants/background-mesh.mjs b/site/gallery/variants/background-mesh.mjs
@@ -0,0 +1,20 @@
+// The web config's README image in another frame, for the gallery's frame section. `frame` renders from the
+// raw captures `showcase all` wrote for showcase.config.mjs, so nothing is captured again; `root: '..'`
+// keeps every path resolving from site/gallery/. One language, sized for a docs tile rather than a README.
+import web from '../showcase.config.mjs';
+
+export default {
+  ...web,
+  root: '..',
+  langs: ['en'],
+  frame: {
+    ...web.frame,
+    background: { type: 'mesh', colors: ['#0b1026', '#6d28d9', '#0e7490', '#1e3a8a', '#be185d'] },
+    maxWidth: 1200,
+    quality: 80,
+  },
+  outputs: {
+    raw: web.outputs.raw,
+    readme: '../public/gallery/layouts/{id}-mesh.webp',
+  },
+};
diff --git a/site/gallery/variants/background-noise.mjs b/site/gallery/variants/background-noise.mjs
@@ -0,0 +1,20 @@
+// The web config's README image in another frame, for the gallery's frame section. `frame` renders from the
+// raw captures `showcase all` wrote for showcase.config.mjs, so nothing is captured again; `root: '..'`
+// keeps every path resolving from site/gallery/. One language, sized for a docs tile rather than a README.
+import web from '../showcase.config.mjs';
+
+export default {
+  ...web,
+  root: '..',
+  langs: ['en'],
+  frame: {
+    ...web.frame,
+    background: { type: 'noise', from: '#2a1f6b', to: '#0b3b4c' },
+    maxWidth: 1200,
+    quality: 80,
+  },
+  outputs: {
+    raw: web.outputs.raw,
+    readme: '../public/gallery/layouts/{id}-noise.webp',
+  },
+};