diff --git a/docs/app/app.config.ts b/docs/app/app.config.ts
index 800cf823..b4800680 100644
--- a/docs/app/app.config.ts
+++ b/docs/app/app.config.ts
@@ -18,6 +18,7 @@ export default defineAppConfig({
       { label: 'Plugins', sections: ['plugins'], link: 'section' as const },
       { label: 'Examples', sections: ['examples'], link: 'section' as const },
       { label: 'Playground', to: '/play' },
+      { label: 'Ecosystem', to: '/ecosystem' },
     ],
   },
 
diff --git a/docs/app/components/prose/EcosystemCta.vue b/docs/app/components/prose/EcosystemCta.vue
new file mode 100644
index 00000000..545664f8
--- /dev/null
+++ b/docs/app/components/prose/EcosystemCta.vue
@@ -0,0 +1,33 @@
+<template>
+  <div
+    class="not-prose mt-14 flex flex-col gap-4 rounded-lg border border-default bg-muted p-6 md:flex-row md:items-center md:justify-between"
+  >
+    <div>
+      <p
+        v-if="$slots.title"
+        class="text-base font-semibold text-highlighted"
+      >
+        <slot
+          name="title"
+          unwrap="p"
+        />
+      </p>
+      <p
+        v-if="$slots.description"
+        class="mt-1 text-sm text-muted"
+      >
+        <slot
+          name="description"
+          unwrap="p"
+        />
+      </p>
+    </div>
+
+    <div
+      v-if="$slots.ctas"
+      class="flex shrink-0 items-center gap-3"
+    >
+      <slot name="ctas" />
+    </div>
+  </div>
+</template>
diff --git a/docs/app/components/prose/EcosystemList.vue b/docs/app/components/prose/EcosystemList.vue
new file mode 100644
index 00000000..17384658
--- /dev/null
+++ b/docs/app/components/prose/EcosystemList.vue
@@ -0,0 +1,255 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+import { refDebounced } from '@vueuse/core'
+
+interface EcosystemPackage {
+  name: string
+  description: string
+  author: string
+  category: 'Renderers' | 'Plugins' | 'Integrations' | 'Tooling'
+  /** Tooling only: UI, Extensions, Templates, CLI, Agents. Shown in the badge instead of the category. */
+  subcategory?: string
+  /** "owner/name" — powers the row link and the author avatar. */
+  repo?: string
+  /** Link fallback for entries without a public repo. */
+  url?: string
+  official?: boolean
+  icon?: string
+  /** Tints the icon and its hover glow. Omitted entries fall back to a neutral tile. */
+  color?: string
+}
+
+const props = defineProps<{ packages: EcosystemPackage[] }>()
+
+const categories = ['All', 'Renderers', 'Plugins', 'Integrations', 'Tooling'] as const
+
+const route = useRoute()
+const router = useRouter()
+
+const query = ref('')
+const officialOnly = ref(false)
+const category = ref<(typeof categories)[number]>('All')
+
+// Content is ISR-cached, so the query string can't drive the first render
+onMounted(() => {
+  const q = route.query.q
+  if (typeof q === 'string') query.value = q
+  if (route.query.official === '1') officialOnly.value = true
+  const cat = route.query.category
+  if (typeof cat === 'string') {
+    const match = categories.find((c) => c.toLowerCase() === cat)
+    if (match) category.value = match
+  }
+})
+
+const debouncedQuery = refDebounced(query, 200)
+
+watch([debouncedQuery, officialOnly, category], ([q, official, cat]) => {
+  const next = { ...route.query }
+  if (q) next.q = q
+  else delete next.q
+  if (official) next.official = '1'
+  else delete next.official
+  if (cat !== 'All') next.category = cat.toLowerCase()
+  else delete next.category
+  router.replace({ query: next })
+})
+
+const searchPool = computed(() => {
+  const q = debouncedQuery.value.trim().toLowerCase()
+  return props.packages.filter((pkg) => {
+    if (officialOnly.value && !pkg.official) return false
+    if (!q) return true
+    return (
+      pkg.name.toLowerCase().includes(q) ||
+      pkg.description.toLowerCase().includes(q) ||
+      pkg.author.toLowerCase().includes(q)
+    )
+  })
+})
+
+const counts = computed(() => {
+  const map = new Map<string, number>([['All', searchPool.value.length]])
+  for (const cat of categories.slice(1)) {
+    map.set(cat, searchPool.value.filter((pkg) => pkg.category === cat).length)
+  }
+  return map
+})
+
+const visible = computed(() => {
+  const pool =
+    category.value === 'All' ? searchPool.value : searchPool.value.filter((pkg) => pkg.category === category.value)
+  return [...pool].sort((a, b) => {
+    if (!!a.official !== !!b.official) return a.official ? -1 : 1
+    return a.name.localeCompare(b.name)
+  })
+})
+
+function href(pkg: EcosystemPackage) {
+  return pkg.url ?? (pkg.repo ? `https://github.com/${pkg.repo}` : undefined)
+}
+
+function avatarUrl(pkg: EcosystemPackage) {
+  return `https://github.com/${pkg.author}.png?size=64`
+}
+
+function tag(pkg: EcosystemPackage) {
+  return pkg.category === 'Tooling' && pkg.subcategory ? pkg.subcategory : pkg.category
+}
+
+function monogram(name: string) {
+  const cleaned = name.replace(/^@[^/]+\//, '').replace(/^comark-?/i, '')
+  return (cleaned || name).slice(0, 2).toUpperCase()
+}
+</script>
+
+<template>
+  <div class="not-prose">
+    <div class="flex gap-3">
+      <UInput
+        v-model="query"
+        icon="i-lucide-search"
+        size="lg"
+        placeholder="Search packages…"
+        class="flex-1"
+        :ui="{ base: 'rounded-lg' }"
+      />
+      <button
+        type="button"
+        role="switch"
+        :aria-checked="officialOnly"
+        class="flex shrink-0 items-center gap-2 rounded-lg border border-default px-3 text-sm font-medium text-toned transition-colors hover:text-highlighted"
+        @click="officialOnly = !officialOnly"
+      >
+        <span
+          class="flex size-3.5 items-center justify-center rounded-xs border border-default transition-colors"
+          :class="officialOnly ? 'border-inverted bg-inverted' : 'bg-default'"
+        >
+          <UIcon
+            v-if="officialOnly"
+            name="i-lucide-check"
+            class="size-2.5 text-inverted"
+          />
+        </span>
+        Official only
+      </button>
+    </div>
+
+    <div class="mt-4 flex flex-wrap gap-2">
+      <button
+        v-for="cat in categories"
+        :key="cat"
+        type="button"
+        :aria-pressed="category === cat"
+        class="flex h-8 items-center gap-1.5 rounded-full px-3 text-sm font-medium transition-colors"
+        :class="
+          category === cat ? 'bg-inverted text-inverted' : 'border border-default text-toned hover:border-accented'
+        "
+        @click="category = cat"
+      >
+        {{ cat }}
+        <span
+          class="font-mono text-xs"
+          :class="category === cat ? 'text-inverted/60' : 'text-dimmed'"
+        >
+          {{ counts.get(cat) }}
+        </span>
+      </button>
+    </div>
+
+    <UCard
+      variant="outline"
+      class="mt-6"
+      :ui="{ body: 'p-0 sm:p-0 divide-y divide-default' }"
+    >
+      <a
+        v-for="pkg in visible"
+        :key="pkg.name"
+        :href="href(pkg)"
+        target="_blank"
+        rel="noopener"
+        :class="pkg.color ? 'eco-row' : 'hover:bg-muted'"
+        :style="pkg.color ? { '--eco-color': pkg.color } : undefined"
+        class="grid grid-cols-[2.25rem_minmax(0,1fr)_auto] items-center gap-x-4 px-4 py-3.5 transition-colors md:grid-cols-[2.25rem_minmax(0,1fr)_7rem_1.25rem]"
+      >
+        <div
+          class="eco-tile flex size-9 shrink-0 items-center justify-center rounded-lg border border-default bg-muted"
+          :style="pkg.color ? { color: pkg.color } : undefined"
+        >
+          <UIcon
+            v-if="pkg.icon"
+            :name="pkg.icon"
+            class="size-5"
+            :class="!pkg.color && 'text-toned'"
+          />
+          <span
+            v-else
+            class="font-mono text-xs font-medium"
+            :class="!pkg.color && 'text-toned'"
+            >{{ monogram(pkg.name) }}</span
+          >
+        </div>
+
+        <div class="min-w-0">
+          <div class="flex flex-wrap items-center gap-x-2 gap-y-0.5">
+            <span class="text-sm font-medium text-highlighted">{{ pkg.name }}</span>
+            <span
+              v-if="pkg.official"
+              class="rounded-xs bg-primary-50 px-1.5 py-px text-xs font-medium text-primary-700 dark:bg-primary-900/15 dark:text-primary-400"
+            >
+              Official
+            </span>
+            <span class="inline-flex min-w-0 items-center gap-1.5 text-xs text-muted">
+              <img
+                :src="avatarUrl(pkg)"
+                :alt="pkg.author"
+                width="16"
+                height="16"
+                loading="lazy"
+                class="size-4 shrink-0 rounded-full"
+              />
+              <span class="truncate">{{ pkg.author }}</span>
+            </span>
+          </div>
+          <p class="mt-0.5 truncate text-sm text-muted">{{ pkg.description }}</p>
+        </div>
+
+        <span class="justify-self-end rounded-md border border-default px-2 py-0.5 font-mono text-xs text-muted">
+          {{ tag(pkg) }}
+        </span>
+
+        <UIcon
+          name="i-lucide-arrow-up-right"
+          class="hidden size-4 text-dimmed md:block"
+        />
+      </a>
+
+      <p
+        v-if="!visible.length"
+        class="py-10 text-center text-sm text-muted"
+      >
+        No packages match.
+      </p>
+    </UCard>
+  </div>
+</template>
+
+<style scoped>
+.eco-tile {
+  transition:
+    background-color 0.2s,
+    border-color 0.2s,
+    box-shadow 0.2s;
+}
+
+.eco-row:hover {
+  background-color: color-mix(in oklab, var(--eco-color) 6%, transparent);
+}
+
+.eco-row:hover .eco-tile {
+  border-color: color-mix(in oklab, var(--eco-color) 45%, var(--ui-border));
+  box-shadow:
+    0 0 0 3px color-mix(in oklab, var(--eco-color) 10%, transparent),
+    0 6px 16px -8px color-mix(in oklab, var(--eco-color) 35%, transparent);
+}
+</style>
diff --git a/docs/app/components/prose/EcosystemShowcase.vue b/docs/app/components/prose/EcosystemShowcase.vue
new file mode 100644
index 00000000..9f3b77b6
--- /dev/null
+++ b/docs/app/components/prose/EcosystemShowcase.vue
@@ -0,0 +1,110 @@
+<script setup lang="ts">
+interface EcosystemSite {
+  name: string
+  description: string
+  author: string
+  url: string
+  screenshot: string
+}
+
+defineProps<{ sites: EcosystemSite[] }>()
+</script>
+
+<template>
+  <div class="not-prose mt-14">
+    <div
+      v-if="$slots.title || $slots.description"
+      class="flex items-baseline justify-between gap-4"
+    >
+      <h2
+        v-if="$slots.title"
+        class="text-2xl font-semibold tracking-tight text-highlighted"
+      >
+        <slot
+          name="title"
+          unwrap="p"
+        />
+      </h2>
+      <span
+        v-if="$slots.description"
+        class="text-sm text-muted"
+      >
+        <slot
+          name="description"
+          unwrap="p"
+        />
+      </span>
+    </div>
+
+    <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      <UPageCard
+        v-for="site in sites"
+        :key="site.name"
+        :to="site.url"
+        target="_blank"
+        :title="site.name"
+        :description="site.description"
+        :ui="{
+          root: 'overflow-hidden',
+          container: 'p-0 sm:p-0 gap-0',
+          wrapper: 'items-stretch',
+          header: 'mb-0',
+          body: 'p-4',
+          title: 'text-sm font-medium',
+          description: 'mt-1 text-sm leading-relaxed',
+          footer: 'mt-auto px-4 pb-4 pt-0',
+        }"
+      >
+        <template #header>
+          <img
+            :src="site.screenshot"
+            :alt="`${site.name} screenshot`"
+            width="960"
+            height="540"
+            loading="lazy"
+            class="aspect-video w-full object-cover"
+          />
+        </template>
+
+        <template #footer>
+          <div class="flex items-center gap-1.5 text-xs text-muted">
+            <img
+              :src="`https://github.com/${site.author}.png?size=64`"
+              :alt="site.author"
+              width="16"
+              height="16"
+              loading="lazy"
+              class="size-4 rounded-full"
+            />
+            {{ site.author }}
+          </div>
+        </template>
+      </UPageCard>
+
+      <UPageCard
+        to="https://github.com/comarkdown/comark/edit/main/docs/content/9.ecosystem.md"
+        target="_blank"
+        title="Your project"
+        description="Shipping something with Comark? Add a card and it shows up here."
+        :ui="{
+          root: 'overflow-hidden border-dashed',
+          container: 'p-0 sm:p-0 gap-0',
+          wrapper: 'items-stretch',
+          header: 'mb-0',
+          body: 'p-4',
+          title: 'text-sm font-medium',
+          description: 'mt-1 text-sm leading-relaxed',
+        }"
+      >
+        <template #header>
+          <div class="flex aspect-video w-full items-center justify-center bg-muted">
+            <UIcon
+              name="i-lucide-plus"
+              class="size-8 text-dimmed"
+            />
+          </div>
+        </template>
+      </UPageCard>
+    </div>
+  </div>
+</template>
diff --git a/docs/content/9.ecosystem.md b/docs/content/9.ecosystem.md
index 78b1d438..821b986a 100644
--- a/docs/content/9.ecosystem.md
+++ b/docs/content/9.ecosystem.md
@@ -1,14 +1,218 @@
 ---
 title: Ecosystem
-description: Testing the `page` layout for a content page — a plain container with no docs sidebar.
+description: Renderers, plugins, integrations and tooling built around Comark by the community and the core team.
 navigation:
   layout: page
+seo:
+  title: "Comark ecosystem: community renderers, plugins, and integrations"
+  description: "Browse community renderers, plugins, integrations, and tooling built around Comark, plus real products running it in production."
 ---
 
-## Ecosystem
+::ecosystem-list
+---
+packages:
+  - name: comark-solid
+    description: SolidJS renderer for Comark
+    author: shiguri-01
+    repo: shiguri-01/comark-solid
+    category: Renderers
+    icon: i-logos-solidjs-icon
+    color: "#2c4f7c"
+  - name: preact-comark
+    description: Preact renderer for Comark
+    author: aleclarson
+    repo: aleclarson/preact-comark
+    category: Renderers
+    icon: i-logos-preact
+    color: "#673ab8"
+  - name: "@comark/markdown-it"
+    description: Comark syntax as a markdown-it plugin
+    author: comarkdown
+    repo: comarkdown/markdown-it-comark
+    category: Plugins
+    icon: i-simple-icons-markdown
+    official: true
+  - name: comark-strip
+    description: Strips Markdown and Comark syntax to plain text
+    author: aa900031
+    repo: aa900031/comark-strip
+    category: Plugins
+    icon: i-lucide-eraser
+  - name: comark-toml
+    description: TOML frontmatter and block props
+    author: caelyreth
+    repo: caelyreth/comark-toml
+    category: Plugins
+    icon: i-vscode-icons-file-type-toml
+    color: "#9c4221"
+  - name: comark-knap
+    description: Renders Knap templates before parsing
+    author: atinux
+    repo: atinux/comark-knap
+    category: Plugins
+    icon: i-lucide-zap
+    color: "#f59e0b"
+  - name: "@leandown/comark"
+    description: Lean 4 highlighting via the language server
+    author: mzhang28
+    repo: mzhang28/leandown
+    category: Plugins
+    icon: i-lucide-sigma
+    color: "#0ea5e9"
+  - name: comark-etiket
+    description: Barcode and QR directives as inline SVG or PNG
+    author: miguelrk
+    repo: miguelrk/comark-etiket
+    category: Plugins
+    icon: i-lucide-qr-code
+    color: "#f0db4f"
+  - name: "@red-glare/astro"
+    description: Astro integration for USWDS documentation sites
+    author: IHIutch
+    repo: IHIutch/red-glare
+    category: Integrations
+    icon: i-simple-icons-astro
+    color: "#bc52ee"
+  - name: "@sit-onyx/comark"
+    description: Comark wrapped in the Onyx design system
+    author: SchwarzIT
+    repo: SchwarzIT/onyx
+    category: Tooling
+    subcategory: UI
+    icon: i-lucide-component
+  - name: vue-stream-markdown
+    description: Vue components for streaming LLM output
+    author: jinghaihan
+    repo: jinghaihan/vue-stream-markdown
+    category: Tooling
+    subcategory: UI
+    icon: i-logos-vue
+    color: "#42b883"
+  - name: comark-tiptap
+    description: Lossless TipTap, Comark AST and Markdown round-trip
+    author: sandros94
+    repo: sandros94/comark-tiptap
+    category: Tooling
+    subcategory: UI
+    icon: i-lucide-pen-tool
+    color: "#6a00f5"
+  - name: vscode-comark
+    description: Syntax highlighting and colon matching in VS Code
+    author: comarkdown
+    repo: comarkdown/vscode-comark
+    category: Tooling
+    subcategory: Extensions
+    icon: i-vscode-icons-file-type-vscode
+    color: "#007acc"
+    official: true
+  - name: comark-webext
+    description: Renders Comark syntax on GitHub and GitLab
+    author: comarkdown
+    repo: comarkdown/comark-webext
+    category: Tooling
+    subcategory: Extensions
+    icon: i-simple-icons-googlechrome
+    color: "#4285f4"
+    official: true
+  - name: comark-docs
+    description: The Nuxt docs layer powering comark.dev
+    author: comarkdown
+    repo: comarkdown/comark-docs
+    category: Tooling
+    subcategory: Templates
+    icon: i-lucide-book-open
+    color: "#eab308"
+    official: true
+  - name: comark-plugin-template
+    description: Starter repo for building a Comark plugin
+    author: comarkdown
+    repo: comarkdown/comark-plugin-template
+    category: Tooling
+    subcategory: Templates
+    icon: i-lucide-blocks
+    official: true
+  - name: comark-cat
+    description: Renders Markdown in the terminal, like bat
+    author: Norbiros
+    repo: Norbiros/comark-cat
+    category: Tooling
+    subcategory: CLI
+    icon: i-lucide-cat
+    color: "#f97316"
+  - name: docster
+    description: Agent skill for writing Comark documentation
+    author: atinux
+    repo: atinux/docster
+    category: Tooling
+    subcategory: Agents
+    icon: i-lucide-graduation-cap
+    color: "#eab308"
+---
+::
+
+::ecosystem-showcase
+---
+sites:
+  - name: comark.dev
+    description: This documentation site, built with the comark-docs Nuxt layer.
+    author: comarkdown
+    url: https://comark.dev
+    screenshot: /ecosystem-images/comark-dev.webp
+  - name: unifont.dev
+    description: "Font metadata from every CDN in one lookup: catalogue, specimens, and a public HTTP API, all rendered with Comark."
+    author: danielroe
+    url: https://unifont.dev
+    screenshot: /ecosystem-images/unifont-dev.webp
+  - name: Graphs demo
+    description: "Markdown as a templating engine: a component block resolves to a live chart at render time."
+    author: atinux
+    url: https://comark-graphs-demo.vercel.app
+    screenshot: /ecosystem-images/graphs-demo.webp
+  - name: Kitchen sink
+    description: Next.js reference implementation covering every Comark component, prop, and slot pattern.
+    author: remiconnesson
+    url: https://v0-kitchen-sink-demo.vercel.app
+    screenshot: /ecosystem-images/kitchen-sink.webp
+  - name: roe.dev
+    description: "Daniel Roe's personal site: notes stored as markdown records in his own AT Protocol repo, parsed with Comark via airspace's markdown plugin."
+    author: danielroe
+    url: https://roe.dev
+    screenshot: /ecosystem-images/roe-dev.webp
+---
+
+#title
+Built with Comark
+
+#description
+Sites and demos running Comark in production
+::
+
+::ecosystem-cta
+#title
+Add your project
+
+#description
+Building on Comark? Open a pull request adding a card, or open an issue first if you aren't sure it fits.
 
-This page uses `navigation.layout: page` in its frontmatter instead of the default `docs` layout, so it renders without the sidebar navigation.
+#ctas
+  :::u-button
+  ---
+  to: https://github.com/comarkdown/comark/edit/main/docs/content/9.ecosystem.md
+  icon: i-lucide-plus
+  target: _blank
+  color: neutral
+  ---
+  Add your project
+  :::
 
-- [GitHub](https://github.com/comarkdown/comark)
-- [Comark Content](https://github.com/comarkdown/comark-content)
-- [Comark Docs](https://github.com/comarkdown/comark-docs)
+  :::u-button
+  ---
+  to: https://github.com/comarkdown/comark/issues/new
+  target: _blank
+  color: neutral
+  variant: outline
+  ---
+  Open an issue
+  :::
+::
+</content>
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index b2495240..6c26d4d8 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -84,6 +84,7 @@ export default defineNuxtConfig({
       '/examples/**': { isr: 300 },
       '/kb': { isr: 300 },
       '/kb/**': { isr: 300 },
+      '/ecosystem': { isr: 300 },
     },
   },
 })
diff --git a/docs/public/ecosystem-images/comark-dev.webp b/docs/public/ecosystem-images/comark-dev.webp
new file mode 100644
index 00000000..139e9ff7
Binary files /dev/null and b/docs/public/ecosystem-images/comark-dev.webp differ
diff --git a/docs/public/ecosystem-images/graphs-demo.webp b/docs/public/ecosystem-images/graphs-demo.webp
new file mode 100644
index 00000000..0d43b257
Binary files /dev/null and b/docs/public/ecosystem-images/graphs-demo.webp differ
diff --git a/docs/public/ecosystem-images/kitchen-sink.webp b/docs/public/ecosystem-images/kitchen-sink.webp
new file mode 100644
index 00000000..e766bd6d
Binary files /dev/null and b/docs/public/ecosystem-images/kitchen-sink.webp differ
diff --git a/docs/public/ecosystem-images/roe-dev.webp b/docs/public/ecosystem-images/roe-dev.webp
new file mode 100644
index 00000000..958cb916
Binary files /dev/null and b/docs/public/ecosystem-images/roe-dev.webp differ
diff --git a/docs/public/ecosystem-images/unifont-dev.webp b/docs/public/ecosystem-images/unifont-dev.webp
new file mode 100644
index 00000000..5f51ac1f
Binary files /dev/null and b/docs/public/ecosystem-images/unifont-dev.webp differ
diff --git a/docs/scripts/ecosystem-images.mjs b/docs/scripts/ecosystem-images.mjs
new file mode 100644
index 00000000..9d5fe990
--- /dev/null
+++ b/docs/scripts/ecosystem-images.mjs
@@ -0,0 +1,49 @@
+#!/usr/bin/env node
+// Regenerates the "Built with Comark" screenshots on the ecosystem page.
+// Requires the Playwright browsers to be installed (`npx playwright install chromium`)
+// and `cwebp` (from libwebp) on PATH.
+import { execFileSync } from 'node:child_process'
+import { mkdirSync, rmSync } from 'node:fs'
+import { dirname, join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const outDir = join(__dirname, '../public/ecosystem-images')
+mkdirSync(outDir, { recursive: true })
+
+// 16:9 to match the UBlogPost card header; downscaled 2x for a sharp retina capture.
+const VIEWPORT = '1280,720'
+const OUT_SIZE = ['960', '540']
+
+const shots = [
+  { name: 'comark-dev', url: 'https://comark.dev' },
+  { name: 'unifont-dev', url: 'https://unifont.dev' },
+  { name: 'graphs-demo', url: 'https://comark-graphs-demo.vercel.app' },
+  { name: 'kitchen-sink', url: 'https://v0-kitchen-sink-demo.vercel.app' },
+  { name: 'roe-dev', url: 'https://roe.dev' },
+]
+
+for (const { name, url } of shots) {
+  const png = join(outDir, `${name}.png`)
+  const webp = join(outDir, `${name}.webp`)
+  console.log(`Capturing ${url}`)
+  execFileSync(
+    'npx',
+    [
+      'playwright',
+      'screenshot',
+      '--viewport-size',
+      VIEWPORT,
+      '--color-scheme',
+      'dark',
+      '--wait-for-timeout',
+      '2500',
+      url,
+      png,
+    ],
+    { stdio: 'inherit' }
+  )
+  execFileSync('cwebp', ['-q', '78', '-resize', ...OUT_SIZE, png, '-o', webp], { stdio: 'inherit' })
+  rmSync(png)
+  console.log(`-> ${webp}`)
+}