Skip to content

docs: replace editor screenshot with demo video#149

Merged
hashiiiii merged 2 commits into
mainfrom
docs/editor-demo-video
Jul 15, 2026
Merged

docs: replace editor screenshot with demo video#149
hashiiiii merged 2 commits into
mainfrom
docs/editor-demo-video

Conversation

@hashiiiii

Copy link
Copy Markdown
Owner

Summary

Replaces the static screenshot on the site's Unity Editor page with an MP4 conversion of the README's editor demo GIF, played as an autoplaying, looping, muted <video> inside the existing window frame.

Motivation

The editor page's only visual was one static frame while the README already shows the full animated flow. The GIF itself is 7 MB — too heavy for GitHub Pages — and GitHub's markdown sanitizer strips <video> tags, so the README keeps the GIF while the site gets the MP4 (734 KB, ~10× smaller).

Closes #148

Changes

  • Add site/images/editor-01.mp4 (one-off ffmpeg conversion: H.264, yuv420p, +faststart, no audio, 1087×750 → 1086×750 for even dimensions)
  • site/static/editor.html: swap the <img class="window-shot"> for <video autoplay loop muted playsinline> with the same accessibility text as an aria-label
  • site/build.mjs: copy site/images/ into dist/images/; drop editor-window.png from the static copy list
  • Delete site/static/editor-window.png (no remaining references)

Testing

$ ffprobe -v error -show_entries stream=codec_name,width,height,pix_fmt -of default=nw=1 site/images/editor-01.mp4
codec_name=h264
width=1086
height=750
pix_fmt=yuv420p

$ node site/build.mjs
site built at /Users/hashiiiii/workspace/PrefabLens/site/dist

$ ls -la site/dist/images/editor-01.mp4 && grep -n "editor-01.mp4" site/dist/editor.html
.rw-r--r--@ 734k hashiiiii 15 Jul 16:52 site/dist/images/editor-01.mp4
43:            src="images/editor-01.mp4"

Browser check against the built dist/ (Playwright, http://localhost:8321/editor.html): the video autoplays inside the window frame (paused=false, currentTime 8.65 → 9.85 over 1.2 s), loops, and fills the frame width.

@github-actions github-actions Bot added the site Demo site (GitHub Pages) label Jul 15, 2026
@hashiiiii
hashiiiii merged commit 6d36c3f into main Jul 15, 2026
13 checks passed
@hashiiiii
hashiiiii deleted the docs/editor-demo-video branch July 15, 2026 07:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

site Demo site (GitHub Pages)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Show the editor demo video on the site's editor page

1 participant