docs(demo): swap btop for htop and outline the window

btop needs more rows than the 1200x750 recording gives it, so the
monitor tab showed a cramped, half-drawn layout; htop fills the same
space with its meters, process list and key bar intact. Dropping btop
also drops the setcap workaround its capabilities needed.

Stroke a 2px #30363D edge around the window in the same imagemagick
pass that cuts out the transparent margin, so the window reads as a
window against GitHub's dark background instead of bleeding into it.

commit: 032a4f034d381aad9e420d312787ead00e987502
author: brice · 3mo ago · 2026-07-24 22:29 UTC
parent: bcb097b
signature: GPG VerifiedCD88F9E564E0102646FB6077A1A07C7C7C3E349D · arch-gpg Verified for the committer email

4 files · +8 -4

M Makefile +5 -0


@@ -35,8 +35,13 @@ demo:
35	35		docker run --rm --entrypoint magick -v "$(CURDIR)/scripts/demo/out:/out" vev-demo \
36	36		-size 1200x750 xc:black -fill white \
37	37		-draw "roundrectangle 20,20 1179,729 10,10" /out/mask.png
	38	+	# The 2px edge is stroked before the mask is applied so the mask clips the
	39	+	# stroke's antialiased overflow; drawing it after would leave partly
	40	+	# transparent pixels, which a GIF's 1-bit alpha cannot represent.
38	41		docker run --rm --entrypoint magick -v "$(CURDIR)/scripts/demo/out:/out" vev-demo \
39	42		-limit memory 8GiB -limit map 12GiB /out/demo.gif -coalesce \
	43	+	-fill none -stroke "#30363D" -strokewidth 2 \
	44	+	-draw "roundrectangle 21,21 1178,728 9,9" \
40	45		null: $ /out/mask.png -alpha off $ -compose CopyOpacity \
41	46		-layers composite /out/demo-masked.gif
42	47		# --lossy above 30 smears the near-identical darks of the window chrome


@@ -35,8 +35,13 @@ demo:
35	docker run --rm --entrypoint magick -v "$(CURDIR)/scripts/demo/out:/out" vev-demo \	35		docker run --rm --entrypoint magick -v "$(CURDIR)/scripts/demo/out:/out" vev-demo \
36	-size 1200x750 xc:black -fill white \	36		-size 1200x750 xc:black -fill white \
37	-draw "roundrectangle 20,20 1179,729 10,10" /out/mask.png	37		-draw "roundrectangle 20,20 1179,729 10,10" /out/mask.png
		38	+	# The 2px edge is stroked before the mask is applied so the mask clips the
		39	+	# stroke's antialiased overflow; drawing it after would leave partly
		40	+	# transparent pixels, which a GIF's 1-bit alpha cannot represent.
38	docker run --rm --entrypoint magick -v "$(CURDIR)/scripts/demo/out:/out" vev-demo \	41		docker run --rm --entrypoint magick -v "$(CURDIR)/scripts/demo/out:/out" vev-demo \
39	-limit memory 8GiB -limit map 12GiB /out/demo.gif -coalesce \	42		-limit memory 8GiB -limit map 12GiB /out/demo.gif -coalesce \
		43	+	-fill none -stroke "#30363D" -strokewidth 2 \
		44	+	-draw "roundrectangle 21,21 1178,728 9,9" \
40	null: $ /out/mask.png -alpha off $ -compose CopyOpacity \	45		null: $ /out/mask.png -alpha off $ -compose CopyOpacity \
41	-layers composite /out/demo-masked.gif	46		-layers composite /out/demo-masked.gif
42	# --lossy above 30 smears the near-identical darks of the window chrome	47		# --lossy above 30 smears the near-identical darks of the window chrome

M docs/assets/demo.gif +0 -0 binary file: no text diff

binary file: no text diff

M scripts/demo/Dockerfile +1 -2


@@ -14,13 +14,12 @@ RUN pacman -Sy --noconfirm archlinux-keyring \
14	14		&& sed -i '/^NoExtract.*usr\/share\/man/d' /etc/pacman.conf \
15	15		&& pacman -Syu --noconfirm \
16	16		vhs ttyd ffmpeg chromium \
17		-	btop fastfetch gifsicle imagemagick \
	17	+	htop fastfetch gifsicle imagemagick \
18	18		eza neovim man-db man-pages coreutils \
19	19		nodejs npm ncurses \
20	20		ttf-jetbrains-mono-nerd \
21	21		&& pacman -Scc --noconfirm
22	22		RUN npm install -g --allow-scripts=@anthropic-ai/claude-code @anthropic-ai/claude-code
23		-	RUN setcap -r /usr/sbin/btop
24	23		RUN useradd -m -u 1000 demo
25	24		COPY --from=build /out/vev /usr/local/bin/vev
26	25		COPY scripts/demo/ticker.sh /usr/local/bin/ticker

     && sed -i '/^NoExtract.*usr\/share\/man/d' /etc/pacman.conf \
     && pacman -Syu --noconfirm \
       vhs ttyd ffmpeg chromium \
-      btop fastfetch gifsicle imagemagick \
+      htop fastfetch gifsicle imagemagick \
       eza neovim man-db man-pages coreutils \
       nodejs npm ncurses \
       ttf-jetbrains-mono-nerd \
     && pacman -Scc --noconfirm
 RUN npm install -g --allow-scripts=@anthropic-ai/claude-code @anthropic-ai/claude-code
-RUN setcap -r /usr/sbin/btop
 RUN useradd -m -u 1000 demo
 COPY --from=build /out/vev /usr/local/bin/vev
 COPY scripts/demo/ticker.sh /usr/local/bin/ticker

M scripts/demo/demo.tape +2 -2


@@ -116,7 +116,7 @@ Sleep 550ms
116	116		Alt+f
117	117		Sleep 500ms
118	118
119		-	# ── Session "monitor": fastfetch + btop, each full-width,
	119	+	# ── Session "monitor": fastfetch + htop, each full-width,
120	120		# never split. ─────────────────────────────────────────
121	121		Alt+" "
122	122		Sleep 550ms

@@ -135,7 +135,7 @@ Sleep 550ms
135	135		Type "CNT"
136	136		Enter
137	137		Sleep 550ms
138		-	Type@90ms "btop"
	138	+	Type@90ms "htop"
139	139		Enter
140	140		Sleep 1.9s
141	141		Alt+"1"


@@ -116,7 +116,7 @@ Sleep 550ms
116		Alt+f	116		Alt+f
117		Sleep 500ms	117		Sleep 500ms
118			118
119	-	# ── Session "monitor": fastfetch + btop, each full-width,	119	+	# ── Session "monitor": fastfetch + htop, each full-width,
120		# never split. ─────────────────────────────────────────	120		# never split. ─────────────────────────────────────────
121		Alt+" "	121		Alt+" "
122		Sleep 550ms	122		Sleep 550ms

@@ -135,7 +135,7 @@ Sleep 550ms
135		Type "CNT"	135		Type "CNT"
136		Enter	136		Enter
137		Sleep 550ms	137		Sleep 550ms
138	-	Type@90ms "btop"	138	+	Type@90ms "htop"
139		Enter	139		Enter
140		Sleep 1.9s	140		Sleep 1.9s
141		Alt+"1"	141		Alt+"1"