From 4fdee975e6f969b7d316839867c57609b0d8e217 Mon Sep 17 00:00:00 2001
From: Glary-Bot <glary-bot@users.noreply.github.com>
Date: Sun, 3 May 2026 06:19:18 +0000
Subject: [PATCH 1/9] feat(website): add responsive video component and url
 helper

Adds <SiteVideo> Vue component that renders a multi-source <video> tag, plus a buildVideoSources() helper for URL construction. Component pairs with media.comfy.org assets named <name>-<width>.<format> to give marketing pages proper webm + mp4 fallbacks via <source>.
---
 .../src/components/common/SiteVideo.vue       | 62 +++++++++++++++++++
 apps/website/src/utils/video.test.ts          | 62 +++++++++++++++++++
 apps/website/src/utils/video.ts               | 38 ++++++++++++
 3 files changed, 162 insertions(+)
 create mode 100644 apps/website/src/components/common/SiteVideo.vue
 create mode 100644 apps/website/src/utils/video.test.ts
 create mode 100644 apps/website/src/utils/video.ts

diff --git a/apps/website/src/components/common/SiteVideo.vue b/apps/website/src/components/common/SiteVideo.vue
new file mode 100644
index 00000000000..1a3a656cb9f
--- /dev/null
+++ b/apps/website/src/components/common/SiteVideo.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
+
+import { buildVideoSources } from '../../utils/video'
+import type { VideoFormat } from '../../utils/video'
+
+const {
+  name,
+  baseUrl,
+  width = 1280,
+  formats = ['webm', 'mp4'],
+  poster,
+  alt,
+  autoplay = false,
+  loop = false,
+  muted = autoplay,
+  controls = false,
+  preload = autoplay ? 'auto' : 'metadata',
+  containerClass,
+  videoClass
+} = defineProps<{
+  name: string
+  baseUrl: string
+  width?: number
+  formats?: VideoFormat[]
+  poster?: string
+  alt?: string
+  autoplay?: boolean
+  loop?: boolean
+  muted?: boolean
+  controls?: boolean
+  preload?: 'auto' | 'metadata' | 'none'
+  containerClass?: string
+  videoClass?: string
+}>()
+
+const sources = buildVideoSources({ name, baseUrl, width, formats })
+</script>
+
+<template>
+  <div :class="cn('relative', containerClass)">
+    <video
+      :class="cn('size-full', videoClass)"
+      :poster
+      :preload
+      :autoplay
+      :loop
+      :muted
+      :controls
+      :aria-label="alt"
+      :aria-hidden="alt ? undefined : true"
+      playsinline
+    >
+      <source
+        v-for="source in sources"
+        :key="source.type"
+        :src="source.src"
+        :type="source.type"
+      />
+    </video>
+  </div>
+</template>
diff --git a/apps/website/src/utils/video.test.ts b/apps/website/src/utils/video.test.ts
new file mode 100644
index 00000000000..48aa21b616b
--- /dev/null
+++ b/apps/website/src/utils/video.test.ts
@@ -0,0 +1,62 @@
+import { describe, expect, it } from 'vitest'
+
+import { buildVideoSources } from './video'
+
+describe('buildVideoSources', () => {
+  it('builds a source per requested format', () => {
+    const sources = buildVideoSources({
+      name: 'hero',
+      baseUrl: 'https://media.comfy.org/website/marketing',
+      width: 1280,
+      formats: ['webm', 'mp4']
+    })
+
+    expect(sources).toEqual([
+      {
+        src: 'https://media.comfy.org/website/marketing/hero-1280.webm',
+        type: 'video/webm',
+        format: 'webm'
+      },
+      {
+        src: 'https://media.comfy.org/website/marketing/hero-1280.mp4',
+        type: 'video/mp4',
+        format: 'mp4'
+      }
+    ])
+  })
+
+  it('preserves caller-supplied format order', () => {
+    const sources = buildVideoSources({
+      name: 'clip',
+      baseUrl: 'https://cdn.example.com/v',
+      width: 960,
+      formats: ['mp4', 'webm']
+    })
+
+    expect(sources.map((s) => s.format)).toEqual(['mp4', 'webm'])
+  })
+
+  it('strips a single trailing slash from baseUrl', () => {
+    const sources = buildVideoSources({
+      name: 'reel',
+      baseUrl: 'https://media.comfy.org/website/marketing/',
+      width: 1920,
+      formats: ['webm']
+    })
+
+    expect(sources[0]?.src).toBe(
+      'https://media.comfy.org/website/marketing/reel-1920.webm'
+    )
+  })
+
+  it('returns an empty list when no formats are requested', () => {
+    const sources = buildVideoSources({
+      name: 'x',
+      baseUrl: 'https://example.com',
+      width: 640,
+      formats: []
+    })
+
+    expect(sources).toEqual([])
+  })
+})
diff --git a/apps/website/src/utils/video.ts b/apps/website/src/utils/video.ts
new file mode 100644
index 00000000000..eda4105e208
--- /dev/null
+++ b/apps/website/src/utils/video.ts
@@ -0,0 +1,38 @@
+export type VideoFormat = 'webm' | 'mp4'
+
+export type VideoSource = {
+  src: string
+  type: `video/${VideoFormat}`
+  format: VideoFormat
+}
+
+const MIME_TYPES: Record<VideoFormat, VideoSource['type']> = {
+  webm: 'video/webm',
+  mp4: 'video/mp4'
+}
+
+type BuildArgs = {
+  name: string
+  baseUrl: string
+  width: number
+  formats: VideoFormat[]
+}
+
+/**
+ * Expects assets named `${name}-${width}.${format}` under `${baseUrl}/`,
+ * matching the output of `apps/website/scripts/process-videos.sh`.
+ */
+export function buildVideoSources({
+  name,
+  baseUrl,
+  width,
+  formats
+}: BuildArgs): VideoSource[] {
+  const base = baseUrl.endsWith('/') ? baseUrl.slice(0, -1) : baseUrl
+
+  return formats.map((format) => ({
+    src: `${base}/${name}-${width}.${format}`,
+    type: MIME_TYPES[format],
+    format
+  }))
+}

From 36186c2ae740087dfc453148504937a78425bc61 Mon Sep 17 00:00:00 2001
From: Glary-Bot <glary-bot@users.noreply.github.com>
Date: Sun, 3 May 2026 06:21:21 +0000
Subject: [PATCH 2/9] feat(website): add ffmpeg helper for marketing video
 encoding

Local developer tool that produces multi-resolution VP9/WebM + H.264/MP4 variants and a poster JPG for source videos. Naming matches buildVideoSources() so outputs drop straight into media.comfy.org and pair with <SiteVideo>. Not wired into CI by design; the team uploads to media.comfy.org out-of-band.
---
 apps/website/scripts/README.md         | 70 +++++++++++++++++++
 apps/website/scripts/process-videos.sh | 96 ++++++++++++++++++++++++++
 2 files changed, 166 insertions(+)
 create mode 100644 apps/website/scripts/README.md
 create mode 100755 apps/website/scripts/process-videos.sh

diff --git a/apps/website/scripts/README.md b/apps/website/scripts/README.md
new file mode 100644
index 00000000000..f1188e86398
--- /dev/null
+++ b/apps/website/scripts/README.md
@@ -0,0 +1,70 @@
+# Website Scripts
+
+## `refresh-ashby-snapshot.ts`
+
+Pulls the latest job postings from Ashby and writes
+`src/data/ashby-roles.snapshot.json`. Invoked by the `Release: Website`
+GitHub Actions workflow; also runnable locally via
+`pnpm --filter @comfyorg/website ashby:refresh-snapshot`.
+
+## `process-videos.sh`
+
+Generates multi-resolution VP9/WebM + H.264/MP4 variants and a poster
+frame for marketing videos using `ffmpeg`. Run **locally** before
+uploading the outputs to `media.comfy.org`; this is not wired into CI.
+
+```sh
+apps/website/scripts/process-videos.sh \
+  ./video-sources \
+  ./dist/videos \
+  "640 960 1280 1920"
+```
+
+### Output
+
+For each source video at `./video-sources/foo.mp4`, you get:
+
+```
+foo-640.webm   foo-640.mp4
+foo-960.webm   foo-960.mp4
+foo-1280.webm  foo-1280.mp4
+foo-1920.webm  foo-1920.mp4
+foo-poster.jpg
+```
+
+The naming convention is enforced by `buildVideoSources()` in
+`src/utils/video.ts`, which the `<SiteVideo>` Vue component uses to
+emit `<source>` URLs.
+
+### Pairing with `<SiteVideo>`
+
+Once the assets are uploaded, render them with:
+
+```vue
+<SiteVideo
+  name="foo"
+  base-url="https://media.comfy.org/website/marketing"
+  :width="1280"
+  :formats="['webm', 'mp4']"
+  poster="https://media.comfy.org/website/marketing/foo-poster.jpg"
+  autoplay
+  loop
+/>
+```
+
+### Encoder choices
+
+- **VP9/WebM** at CRF 32 — preferred by Chrome and Firefox; smaller files.
+- **H.264/MP4** at CRF 23, High profile, `+faststart` — universal fallback,
+  required for Safari iOS.
+- **Poster JPG** at q4 — extracted from t=1s, scaled to 1280w. Use this as
+  the `poster` attribute so the video shows something while loading.
+
+### Why a single resolution per video
+
+`<source media="...">` inside `<video>` is unreliable across browsers
+(Safari ignores it). The simplest correct strategy is to ship one
+well-sized resolution and let CSS scale it down on smaller viewports.
+The script generates multiple widths so you can pick a different one
+per page (e.g. 1280w for a hero, 640w for a thumbnail), or wire up
+JavaScript-based selection later if metrics demand it.
diff --git a/apps/website/scripts/process-videos.sh b/apps/website/scripts/process-videos.sh
new file mode 100755
index 00000000000..b43af44d9aa
--- /dev/null
+++ b/apps/website/scripts/process-videos.sh
@@ -0,0 +1,96 @@
+#!/usr/bin/env bash
+#
+# Generate multi-resolution VP9/WebM + H.264/MP4 variants and a poster frame
+# for every source video in a given directory. Intended to be run locally
+# before uploading the outputs to media.comfy.org.
+#
+# Usage:
+#   apps/website/scripts/process-videos.sh <input-dir> <output-dir> [widths]
+#
+# Example:
+#   apps/website/scripts/process-videos.sh \
+#     ./video-sources \
+#     ./dist/videos \
+#     "640 960 1280 1920"
+#
+# Defaults to widths "1280" if omitted.
+#
+# Output naming matches buildVideoSources() in src/utils/video.ts:
+#   <name>-<width>.webm
+#   <name>-<width>.mp4
+#   <name>-poster.jpg          (single 1280w poster, suitable for SiteVideo)
+#
+# Requires ffmpeg on PATH. Tested with ffmpeg 6.x and 7.x.
+
+set -euo pipefail
+
+if [[ $# -lt 2 ]]; then
+  cat <<USAGE >&2
+Usage: $0 <input-dir> <output-dir> [widths]
+  widths: space-separated list, e.g. "640 1280 1920" (default: "1280")
+USAGE
+  exit 64
+fi
+
+input_dir=$1
+output_dir=$2
+widths=${3:-1280}
+
+if ! command -v ffmpeg >/dev/null 2>&1; then
+  echo "error: ffmpeg not found on PATH" >&2
+  exit 127
+fi
+
+if [[ ! -d $input_dir ]]; then
+  echo "error: input dir not found: $input_dir" >&2
+  exit 66
+fi
+
+mkdir -p "$output_dir"
+
+shopt -s nullglob
+sources=("$input_dir"/*.{mp4,mov,webm,mkv})
+shopt -u nullglob
+
+if [[ ${#sources[@]} -eq 0 ]]; then
+  echo "error: no source videos in $input_dir (looked for .mp4 .mov .webm .mkv)" >&2
+  exit 66
+fi
+
+for src in "${sources[@]}"; do
+  name=$(basename "$src")
+  name=${name%.*}
+  echo "==> $name"
+
+  for w in $widths; do
+    webm_out="$output_dir/${name}-${w}.webm"
+    mp4_out="$output_dir/${name}-${w}.mp4"
+
+    echo "    encoding ${w}w VP9/WebM -> $webm_out"
+    ffmpeg -y -hide_banner -loglevel error \
+      -i "$src" \
+      -vf "scale=${w}:-2:flags=lanczos" \
+      -c:v libvpx-vp9 -b:v 0 -crf 32 -row-mt 1 -tile-columns 2 \
+      -c:a libopus -b:a 96k \
+      -f webm "$webm_out"
+
+    echo "    encoding ${w}w H.264/MP4 -> $mp4_out"
+    ffmpeg -y -hide_banner -loglevel error \
+      -i "$src" \
+      -vf "scale=${w}:-2:flags=lanczos" \
+      -c:v libx264 -crf 23 -preset slow -profile:v high -pix_fmt yuv420p \
+      -c:a aac -b:a 128k \
+      -movflags +faststart \
+      "$mp4_out"
+  done
+
+  poster_out="$output_dir/${name}-poster.jpg"
+  echo "    extracting poster -> $poster_out"
+  ffmpeg -y -hide_banner -loglevel error \
+    -ss 00:00:01 -i "$src" \
+    -vframes 1 -vf "scale=1280:-2:flags=lanczos" \
+    -q:v 4 \
+    "$poster_out"
+done
+
+echo "done. upload contents of $output_dir to media.comfy.org."

From 8c2218be93ad41399c1bd459a73d16d395c5cc83 Mon Sep 17 00:00:00 2001
From: Glary-Bot <glary-bot@users.noreply.github.com>
Date: Sun, 3 May 2026 06:22:02 +0000
Subject: [PATCH 3/9] feat(website): document marketing image conventions for
 astro:assets

Adds shared MARKETING_FORMATS / MARKETING_WIDTHS constants and a README for src/assets/marketing/. Pages render local marketing images via Astro's built-in <Picture> with these defaults; a custom wrapper is intentionally avoided because Astro's LocalImageProps | RemoteImageProps discriminated union does not survive a thin wrapper without unsafe casts.
---
 apps/website/src/assets/marketing/README.md | 51 +++++++++++++++++++++
 apps/website/src/utils/marketingImage.ts    |  3 ++
 2 files changed, 54 insertions(+)
 create mode 100644 apps/website/src/assets/marketing/README.md
 create mode 100644 apps/website/src/utils/marketingImage.ts

diff --git a/apps/website/src/assets/marketing/README.md b/apps/website/src/assets/marketing/README.md
new file mode 100644
index 00000000000..5638b82e836
--- /dev/null
+++ b/apps/website/src/assets/marketing/README.md
@@ -0,0 +1,51 @@
+# Marketing Assets
+
+Source images committed here are processed by Astro at build time and emitted
+as multiple formats (AVIF, WebP) at multiple widths (640w, 960w, 1280w, 1920w).
+
+## Usage
+
+Drop a high-resolution source image (PNG or JPG) here, then render it with
+Astro's built-in `<Picture>` component plus the shared defaults:
+
+```astro
+---
+import { Picture } from 'astro:assets'
+import {
+  MARKETING_FORMATS,
+  MARKETING_WIDTHS
+} from '../utils/marketingImage'
+import hero from '../assets/marketing/hero.png'
+---
+<Picture
+  src={hero}
+  alt="ComfyUI workflow preview"
+  formats={[...MARKETING_FORMATS]}
+  widths={[...MARKETING_WIDTHS]}
+  sizes="(max-width: 768px) 100vw, 50vw"
+/>
+```
+
+The component generates a `<picture>` element with `<source>` tags for AVIF
+and WebP, plus an `<img>` fallback. Output files are hashed and emitted under
+`dist/_website/` for long-term caching.
+
+A custom Astro wrapper component is intentionally not provided: Astro's
+discriminated union `LocalImageProps | RemoteImageProps` for `<Picture>` makes
+a thin wrapper that mutates `widths` / `formats` impractical to type safely
+without `as` casts. The shared constants give us the same consistency benefit
+without that cost.
+
+## When to use this vs. `media.comfy.org`
+
+- **Use `src/assets/marketing/`** for static marketing images that are part of
+  page content (hero shots, product imagery, illustrations). Build-time
+  processing gives you AVIF/WebP variants automatically.
+- **Use `media.comfy.org`** for video content, large/changing image libraries
+  (gallery), and anything shared across properties.
+
+## Source image guidelines
+
+- Provide the largest size you'll ever need (≥1920px wide).
+- PNG for screenshots/illustrations with sharp edges; JPG for photographs.
+- Astro will downscale; it will not upscale. Always supply at least 1920w.
diff --git a/apps/website/src/utils/marketingImage.ts b/apps/website/src/utils/marketingImage.ts
new file mode 100644
index 00000000000..9f7afaf835e
--- /dev/null
+++ b/apps/website/src/utils/marketingImage.ts
@@ -0,0 +1,3 @@
+export const MARKETING_FORMATS = ['avif', 'webp'] as const
+
+export const MARKETING_WIDTHS = [640, 960, 1280, 1920] as const

From 7941ce14a399a9be5f790d806f71ccfc1cbcf59c Mon Sep 17 00:00:00 2001
From: Glary-Bot <glary-bot@users.noreply.github.com>
Date: Sun, 3 May 2026 06:36:34 +0000
Subject: [PATCH 4/9] fix(website): make SiteVideo reactive and a11y-correct

Wraps source list in computed() so prop changes propagate. Keys the <video> element on the joined source URLs to force a remount when the source set changes (browsers do not reload <video> when nested <source> children mutate). Restricts aria-hidden=true to the decorative case (no alt and no controls) to avoid hiding interactive controls from assistive tech. Adds videoKey() helper plus tests.
---
 .../src/components/common/SiteVideo.vue       | 14 +++--
 apps/website/src/utils/video.test.ts          | 51 ++++++++++++++++++-
 apps/website/src/utils/video.ts               |  9 ++++
 3 files changed, 69 insertions(+), 5 deletions(-)

diff --git a/apps/website/src/components/common/SiteVideo.vue b/apps/website/src/components/common/SiteVideo.vue
index 1a3a656cb9f..ea149d0cfc2 100644
--- a/apps/website/src/components/common/SiteVideo.vue
+++ b/apps/website/src/components/common/SiteVideo.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { cn } from '@comfyorg/tailwind-utils'
+import { computed } from 'vue'
 
-import { buildVideoSources } from '../../utils/video'
+import { buildVideoSources, videoKey } from '../../utils/video'
 import type { VideoFormat } from '../../utils/video'
 
 const {
@@ -34,12 +35,17 @@ const {
   videoClass?: string
 }>()
 
-const sources = buildVideoSources({ name, baseUrl, width, formats })
+const sources = computed(() =>
+  buildVideoSources({ name, baseUrl, width, formats })
+)
+const remountKey = computed(() => videoKey(sources.value))
+const decorative = computed(() => !alt && !controls)
 </script>
 
 <template>
   <div :class="cn('relative', containerClass)">
     <video
+      :key="remountKey"
       :class="cn('size-full', videoClass)"
       :poster
       :preload
@@ -48,12 +54,12 @@ const sources = buildVideoSources({ name, baseUrl, width, formats })
       :muted
       :controls
       :aria-label="alt"
-      :aria-hidden="alt ? undefined : true"
+      :aria-hidden="decorative ? true : undefined"
       playsinline
     >
       <source
         v-for="source in sources"
-        :key="source.type"
+        :key="source.src"
         :src="source.src"
         :type="source.type"
       />
diff --git a/apps/website/src/utils/video.test.ts b/apps/website/src/utils/video.test.ts
index 48aa21b616b..114765cf512 100644
--- a/apps/website/src/utils/video.test.ts
+++ b/apps/website/src/utils/video.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 
-import { buildVideoSources } from './video'
+import { buildVideoSources, videoKey } from './video'
 
 describe('buildVideoSources', () => {
   it('builds a source per requested format', () => {
@@ -60,3 +60,52 @@ describe('buildVideoSources', () => {
     expect(sources).toEqual([])
   })
 })
+
+describe('videoKey', () => {
+  it('changes when the source URL list changes', () => {
+    const at1280 = buildVideoSources({
+      name: 'hero',
+      baseUrl: 'https://media.comfy.org/m',
+      width: 1280,
+      formats: ['webm', 'mp4']
+    })
+    const at640 = buildVideoSources({
+      name: 'hero',
+      baseUrl: 'https://media.comfy.org/m',
+      width: 640,
+      formats: ['webm', 'mp4']
+    })
+
+    expect(videoKey(at1280)).not.toBe(videoKey(at640))
+  })
+
+  it('is stable across repeated calls with the same inputs', () => {
+    const args = {
+      name: 'hero',
+      baseUrl: 'https://media.comfy.org/m',
+      width: 1280,
+      formats: ['webm', 'mp4'] as const
+    }
+
+    expect(
+      videoKey(buildVideoSources({ ...args, formats: [...args.formats] }))
+    ).toBe(videoKey(buildVideoSources({ ...args, formats: [...args.formats] })))
+  })
+
+  it('reflects format-order changes', () => {
+    const webmFirst = buildVideoSources({
+      name: 'hero',
+      baseUrl: 'https://media.comfy.org/m',
+      width: 1280,
+      formats: ['webm', 'mp4']
+    })
+    const mp4First = buildVideoSources({
+      name: 'hero',
+      baseUrl: 'https://media.comfy.org/m',
+      width: 1280,
+      formats: ['mp4', 'webm']
+    })
+
+    expect(videoKey(webmFirst)).not.toBe(videoKey(mp4First))
+  })
+})
diff --git a/apps/website/src/utils/video.ts b/apps/website/src/utils/video.ts
index eda4105e208..f0c75af1229 100644
--- a/apps/website/src/utils/video.ts
+++ b/apps/website/src/utils/video.ts
@@ -36,3 +36,12 @@ export function buildVideoSources({
     format
   }))
 }
+
+/**
+ * Stable identifier for a list of video sources, suitable as a Vue `key`.
+ * Browsers do not reload a `<video>` when nested `<source>` children change;
+ * keying the parent forces a remount when the source set changes.
+ */
+export function videoKey(sources: VideoSource[]): string {
+  return sources.map((s) => s.src).join('|')
+}

From d1d1be8568124e2ccbd6c9cb7797158325d56b7a Mon Sep 17 00:00:00 2001
From: Glary-Bot <glary-bot@users.noreply.github.com>
Date: Sun, 3 May 2026 06:37:31 +0000
Subject: [PATCH 5/9] fix(website): make process-videos.sh handle short clips
 and uppercase extensions

Probe duration with ffprobe and fall back to t=0 when the clip is shorter than 1s; the previous fixed -ss 00:00:01 aborted the script under set -e for short clips. Enable nocaseglob so camera-exported files like CLIP.MP4 are picked up. Documents the new ffprobe dependency.
---
 apps/website/scripts/process-videos.sh | 27 +++++++++++++++++---------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/apps/website/scripts/process-videos.sh b/apps/website/scripts/process-videos.sh
index b43af44d9aa..e8a0b7245ce 100755
--- a/apps/website/scripts/process-videos.sh
+++ b/apps/website/scripts/process-videos.sh
@@ -20,7 +20,7 @@
 #   <name>-<width>.mp4
 #   <name>-poster.jpg          (single 1280w poster, suitable for SiteVideo)
 #
-# Requires ffmpeg on PATH. Tested with ffmpeg 6.x and 7.x.
+# Requires ffmpeg and ffprobe on PATH. Tested with ffmpeg 6.x and 7.x.
 
 set -euo pipefail
 
@@ -36,10 +36,12 @@ input_dir=$1
 output_dir=$2
 widths=${3:-1280}
 
-if ! command -v ffmpeg >/dev/null 2>&1; then
-  echo "error: ffmpeg not found on PATH" >&2
-  exit 127
-fi
+for tool in ffmpeg ffprobe; do
+  if ! command -v "$tool" >/dev/null 2>&1; then
+    echo "error: $tool not found on PATH" >&2
+    exit 127
+  fi
+done
 
 if [[ ! -d $input_dir ]]; then
   echo "error: input dir not found: $input_dir" >&2
@@ -48,9 +50,9 @@ fi
 
 mkdir -p "$output_dir"
 
-shopt -s nullglob
+shopt -s nullglob nocaseglob
 sources=("$input_dir"/*.{mp4,mov,webm,mkv})
-shopt -u nullglob
+shopt -u nullglob nocaseglob
 
 if [[ ${#sources[@]} -eq 0 ]]; then
   echo "error: no source videos in $input_dir (looked for .mp4 .mov .webm .mkv)" >&2
@@ -85,9 +87,16 @@ for src in "${sources[@]}"; do
   done
 
   poster_out="$output_dir/${name}-poster.jpg"
-  echo "    extracting poster -> $poster_out"
+  duration=$(ffprobe -v error -show_entries format=duration \
+    -of default=noprint_wrappers=1:nokey=1 "$src" 2>/dev/null || echo 0)
+  if awk "BEGIN { exit !($duration >= 1.0) }"; then
+    poster_seek=1
+  else
+    poster_seek=0
+  fi
+  echo "    extracting poster (t=${poster_seek}s) -> $poster_out"
   ffmpeg -y -hide_banner -loglevel error \
-    -ss 00:00:01 -i "$src" \
+    -ss "$poster_seek" -i "$src" \
     -vframes 1 -vf "scale=1280:-2:flags=lanczos" \
     -q:v 4 \
     "$poster_out"

From de2932c1240dfecc6c7bb2ebac20bb23e0cdc724 Mon Sep 17 00:00:00 2001
From: Glary-Bot <glary-bot@users.noreply.github.com>
Date: Sun, 3 May 2026 06:37:40 +0000
Subject: [PATCH 6/9] docs(website): clarify SiteVideo vs VideoPlayer in
 scripts README

Adds a section explaining when to use the lightweight multi-source SiteVideo vs the full-featured VideoPlayer with controls, captions, and scrubber. Updates the poster note to reflect the new short-clip fallback behavior.
---
 apps/website/scripts/README.md | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/apps/website/scripts/README.md b/apps/website/scripts/README.md
index f1188e86398..ed226653de7 100644
--- a/apps/website/scripts/README.md
+++ b/apps/website/scripts/README.md
@@ -52,13 +52,26 @@ Once the assets are uploaded, render them with:
 />
 ```
 
+### `<SiteVideo>` vs `<VideoPlayer>`
+
+- **`SiteVideo`** — lightweight multi-source `<video>` for decorative or
+  autoplay marketing clips. No custom controls, no captions UI.
+- **`VideoPlayer`** — full-featured player with custom scrubber, mute,
+  fullscreen, and caption toggles. Use this for content with subtitles or
+  user-driven playback.
+
+If you need both responsive sources and the rich `VideoPlayer` chrome, the
+two are not yet combined; either pick one or extend `VideoPlayer` to accept
+a source list.
+
 ### Encoder choices
 
 - **VP9/WebM** at CRF 32 — preferred by Chrome and Firefox; smaller files.
 - **H.264/MP4** at CRF 23, High profile, `+faststart` — universal fallback,
   required for Safari iOS.
-- **Poster JPG** at q4 — extracted from t=1s, scaled to 1280w. Use this as
-  the `poster` attribute so the video shows something while loading.
+- **Poster JPG** at q4 — extracted from t=1s when the clip is long enough,
+  otherwise t=0; scaled to 1280w. Use this as the `poster` attribute so
+  the video shows something while loading.
 
 ### Why a single resolution per video
 

From b62248ff5196696733b50a649e3984258cc05b0c Mon Sep 17 00:00:00 2001
From: Glary-Bot <glary-bot@users.noreply.github.com>
Date: Sun, 3 May 2026 06:59:09 +0000
Subject: [PATCH 7/9] chore(website): silence knip for unused-but-staged media
 tooling

SiteVideo, marketingImage, and the VideoFormat / VideoSource type exports are intentionally unreferenced until follow-up PRs adopt them. Mark the files in knip.config ignore (matching the existing 'Pending integration in stacked PR' pattern) and tag the unused type exports with @knipIgnoreUsedByStackedPR.
---
 apps/website/src/utils/video.ts | 2 ++
 knip.config.ts                  | 3 +++
 2 files changed, 5 insertions(+)

diff --git a/apps/website/src/utils/video.ts b/apps/website/src/utils/video.ts
index f0c75af1229..c8c72c8e7f8 100644
--- a/apps/website/src/utils/video.ts
+++ b/apps/website/src/utils/video.ts
@@ -1,5 +1,7 @@
+/** @knipIgnoreUsedByStackedPR */
 export type VideoFormat = 'webm' | 'mp4'
 
+/** @knipIgnoreUsedByStackedPR */
 export type VideoSource = {
   src: string
   type: `video/${VideoFormat}`
diff --git a/knip.config.ts b/knip.config.ts
index 5eb302a8099..b204587958e 100644
--- a/knip.config.ts
+++ b/knip.config.ts
@@ -54,6 +54,9 @@ const config: KnipConfig = {
     '.github/workflows/ci-oss-assets-validation.yaml',
     // Pending integration in stacked PR
     'src/components/sidebar/tabs/nodeLibrary/CustomNodesPanel.vue',
+    // Marketing media tooling — adopted by pages in a follow-up PR
+    'apps/website/src/components/common/SiteVideo.vue',
+    'apps/website/src/utils/marketingImage.ts',
     // Agent review check config, not part of the build
     '.agents/checks/eslint.strict.config.js',
     // Devtools extensions, included dynamically

From 0b7de9d2f8c80386d2ed00146fffed8e9f1d6f79 Mon Sep 17 00:00:00 2001
From: Glary-Bot <glary-bot@users.noreply.github.com>
Date: Mon, 4 May 2026 06:16:03 +0000
Subject: [PATCH 8/9] docs(website): label process-videos.sh README output
 block

Adds a 'text' language identifier to the bare fenced code block listing the script's output files. Satisfies markdownlint MD040 (no markdownlint enforcement in this repo, but small improvement; flagged by CodeRabbit on PR #11869).
---
 apps/website/scripts/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/website/scripts/README.md b/apps/website/scripts/README.md
index ed226653de7..3420245b118 100644
--- a/apps/website/scripts/README.md
+++ b/apps/website/scripts/README.md
@@ -24,7 +24,7 @@ apps/website/scripts/process-videos.sh \
 
 For each source video at `./video-sources/foo.mp4`, you get:
 
-```
+```text
 foo-640.webm   foo-640.mp4
 foo-960.webm   foo-960.mp4
 foo-1280.webm  foo-1280.mp4

From cbb897ca47a7678a25ff25e6a0b433ccc7068e52 Mon Sep 17 00:00:00 2001
From: Glary-Bot <glary-bot@users.noreply.github.com>
Date: Mon, 4 May 2026 06:22:41 +0000
Subject: [PATCH 9/9] fix(website): validate ffprobe duration before awk
 comparison

If ffprobe succeeds but emits a non-numeric value (e.g. N/A for unreadable streams, or empty for containers without duration metadata), the previous `awk "BEGIN { exit !($duration >= 1.0) }"` was a syntax error and aborted the whole script under set -euo pipefail. Validate the raw output against a numeric regex and fall back to 0 otherwise; pass duration into awk via -v to avoid eval-style interpolation. Flagged by CodeRabbit on #11869.
---
 apps/website/scripts/process-videos.sh | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/apps/website/scripts/process-videos.sh b/apps/website/scripts/process-videos.sh
index e8a0b7245ce..ae2ef4d3052 100755
--- a/apps/website/scripts/process-videos.sh
+++ b/apps/website/scripts/process-videos.sh
@@ -87,9 +87,14 @@ for src in "${sources[@]}"; do
   done
 
   poster_out="$output_dir/${name}-poster.jpg"
-  duration=$(ffprobe -v error -show_entries format=duration \
-    -of default=noprint_wrappers=1:nokey=1 "$src" 2>/dev/null || echo 0)
-  if awk "BEGIN { exit !($duration >= 1.0) }"; then
+  duration_raw=$(ffprobe -v error -show_entries format=duration \
+    -of default=noprint_wrappers=1:nokey=1 "$src" 2>/dev/null || true)
+  if [[ $duration_raw =~ ^[0-9]+([.][0-9]+)?$ ]]; then
+    duration="$duration_raw"
+  else
+    duration=0
+  fi
+  if awk -v d="$duration" 'BEGIN { exit !(d >= 1.0) }'; then
     poster_seek=1
   else
     poster_seek=0