Add VHS-based demo GIF recording and show both themes in README

Record demo GIFs using VHS (xterm.js via headless Chromium), which
renders Unicode fractional block characters algorithmically instead of
via font glyph outlines. Uses zenwritten dark/light themes for good
ANSI color contrast. Both demos shown side by side in the README.

Author: smm-h

CLAUDE.md

@@ -9,7 +9,7 @@ bin/cli.js           CLI entry point, flag routing, --install/--uninstall
 lib/statusline.js    Core: stdin parsing, OAuth, usage API, git info, bar rendering
 lib/demo.js          --demo animation (sawtooth waves, standalone)
 config.example.json  JSONC example with all 4 gradient combos
-assets/              demo.cast (asciinema) and demo.gif
+assets/              demo-dark.gif and demo-light.gif (recorded via VHS)
 ```
 
 ## How the statusline protocol works

README.md

@@ -7,7 +7,9 @@
 
 Pixel-perfect progress bars for your Claude Code statusline. See how much context and usage you have left at a glance.
 
-![Demo](./assets/demo.gif)
+| Dark | Light |
+|---|---|
+| ![Dark mode demo](./assets/demo-dark.gif) | ![Light mode demo](./assets/demo-light.gif) |
 
 ## What you get
 
@@ -19,7 +21,7 @@ Three bars with sub-cell precision using Unicode fractional block characters:
 | 5-hour usage | Rolling rate limit utilization | Time until reset, git branch/changes, lines added/removed |
 | Weekly usage | Rolling 7-day rate limit utilization | Time until reset, current directory |
 
-Bars shift green → yellow → orange → red as usage increases. Stale data (API unreachable) is prefixed with `~`. Works with Pro, Max 5x, Max 20x, and Team subscriptions. API key users see an "API" label with context bar only.
+Bars shift green to red as usage increases. Stale data (API unreachable) is prefixed with `~`. Works with Pro, Max 5x, Max 20x, and Team subscriptions. API key users see an "API" label with context bar only.
 
 ## Install
 
@@ -37,7 +39,7 @@ howmuchleft --install ~/.claude-personal
 
 ## Configuration
 
-Config file: `~/.config/howmuchleft.json` (JSONC — comments and trailing commas are allowed).
+Config file: `~/.config/howmuchleft.json` (JSONC -- comments and trailing commas are allowed).
 
 ```jsonc
 {
@@ -56,7 +58,7 @@ Config file: `~/.config/howmuchleft.json` (JSONC — comments and trailing comma
 
 | Field | Default | Description |
 |---|---|---|
-| `progressLength` | `12` | Bar width in characters (3–40) |
+| `progressLength` | `12` | Bar width in characters (3--40) |
 | `colorMode` | `"auto"` | `"auto"` (detect via `COLORTERM`), `"truecolor"`, or `"256"` |
 | `colors` | built-in | Array of color entries (see below) |
 
@@ -66,12 +68,12 @@ Each entry in the `colors` array is matched against the current terminal. First
 
 | Field | Required | Description |
 |---|---|---|
-| `gradient` | Yes | Color stops: `[R,G,B]` arrays for truecolor, or integers (0–255) for 256-color |
-| `bg` | No | Empty bar background: `[R,G,B]` for truecolor, or integer (0–255) for 256-color |
+| `gradient` | Yes | Color stops: `[R,G,B]` arrays for truecolor, or integers (0--255) for 256-color |
+| `bg` | No | Empty bar background: `[R,G,B]` for truecolor, or integer (0--255) for 256-color |
 | `dark-mode` | No | Match dark (`true`) or light (`false`) terminals only |
 | `true-color` | No | Match truecolor (`true`) or 256-color (`false`) terminals only |
 
-Truecolor gradients are smoothly interpolated between stops — 3 stops (green, yellow, red) is enough for a smooth bar. 256-color gradients snap to the nearest stop.
+Truecolor gradients are smoothly interpolated between stops -- 3 stops (green, yellow, red) is enough for a smooth bar. 256-color gradients snap to the nearest stop.
 
 To preview your current gradient: `howmuchleft --test-colors`
 

assets/demo-dark.gif

@@ -0,0 +1,71 @@
+#!/usr/bin/env bash
+# Record demo GIFs for both dark and light modes using VHS.
+#
+# Usage: ./scripts/record-gif.sh [duration_seconds]
+# Output: assets/demo-dark.gif, assets/demo-light.gif
+#
+# Prerequisites:
+#   - vhs (go install github.com/charmbracelet/vhs@latest)
+#   - ffmpeg
+#   - ttyd (https://github.com/tsl0922/ttyd/releases)
+
+set -euo pipefail
+
+DURATION="${1:-15}"
+
+SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
+PROJECT_DIR="$(cd "$SCRIPT_DIR/.." && pwd)"
+ASSETS_DIR="$PROJECT_DIR/assets"
+
+mkdir -p "$ASSETS_DIR"
+
+record_gif() {
+  local mode="$1"
+  local dark_val theme
+
+  if [ "$mode" = "dark" ]; then
+    dark_val=1
+    theme="zenwritten_dark"
+  else
+    dark_val=0
+    theme="zenwritten_light"
+  fi
+
+  local gif_file="$ASSETS_DIR/demo-${mode}.gif"
+  local tape_file="$ASSETS_DIR/.demo-${mode}.tape"
+
+  # Generate tape file for VHS
+  cat > "$tape_file" <<TAPE
+Output "${gif_file}"
+Set FontSize 36
+Set FontFamily "Adwaita Mono"
+Set Height 250
+Set Width 1400
+Set Padding 20
+Set Framerate 30
+Set Theme "${theme}"
+Env COLORTERM "truecolor"
+Env HOWMUCHLEFT_DARK "${dark_val}"
+Hide
+Type "node ${PROJECT_DIR}/bin/cli.js --demo ${DURATION}"
+Enter
+Sleep 500ms
+Show
+Sleep ${DURATION}s
+TAPE
+
+  echo "Recording $mode mode demo (${DURATION}s)..."
+  vhs "$tape_file"
+
+  # Clean up tape file
+  rm -f "$tape_file"
+
+  local size
+  size=$(du -h "$gif_file" | cut -f1)
+  echo "  -> $gif_file ($size)"
+}
+
+record_gif dark
+record_gif light
+
+echo "Done."