diff --git a/docs/demos/.gitignore b/docs/demos/.gitignore
new file mode 100644
index 0000000..8d7839d
--- /dev/null
+++ b/docs/demos/.gitignore
@@ -0,0 +1,139 @@
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+### Node Patch ###
+# Serverless Webpack directories
+.webpack/
+
+# Optional stylelint cache
+
+# SvelteKit build / generate output
+.svelte-kit
diff --git a/docs/demos/kingfisher-usage-01.tape b/docs/demos/kingfisher-usage-01.tape
new file mode 100644
index 0000000..1dadb55
--- /dev/null
+++ b/docs/demos/kingfisher-usage-01.tape
@@ -0,0 +1,18 @@
+Output ../kingfisher-usage-01.gif
+Set Width 1200
+Set Height 700
+Set FontSize 16
+Set TypingSpeed 60ms
+Set Framerate 60
+Set PlaybackSpeed 1.0
+
+Type "kingfisher scan ~/tmp/secretsdemo | less -R"
+Enter
+
+Wait+Screen@30s /(report|findings|summary|kingfisher)/
+
+Sleep 1200ms
+Space@1000ms 8
+Sleep 800ms
+Sleep 1200ms
+Type "q"
diff --git a/docs/demos/kingfisher-usage-access-map-01.tape b/docs/demos/kingfisher-usage-access-map-01.tape
new file mode 100644
index 0000000..8047bcb
--- /dev/null
+++ b/docs/demos/kingfisher-usage-access-map-01.tape
@@ -0,0 +1,14 @@
+Output ../kingfisher-usage-access-map-01.gif
+Set Width 1200
+Set Height 700
+Set FontSize 16
+Set TypingSpeed 60ms
+Set Framerate 60
+Set PlaybackSpeed 1.0
+
+Type "kingfisher scan --git-url https://github.com/leaktk/fake-leaks.git --access-map --view-report"
+Enter
+
+Wait+Screen@30s /(report|findings|summary|kingfisher)/
+
+Sleep 7000ms
diff --git a/docs/demos/make_demos.sh b/docs/demos/make_demos.sh
new file mode 100755
index 0000000..8a1d9b4
--- /dev/null
+++ b/docs/demos/make_demos.sh
@@ -0,0 +1,9 @@
+#!/usr/bin/env bash
+
+vhs ./kingfisher-usage-01.tape
+vhs ./kingfisher-usage-access-map-01.tape
+echo "Demos generated. Preparing browser recording in 5 seconds..."
+sleep 5
+#npm i -D playwright
+#npx playwright install
+node ./record.mjs
\ No newline at end of file
diff --git a/docs/demos/merge.sh b/docs/demos/merge.sh
new file mode 100755
index 0000000..d230858
--- /dev/null
+++ b/docs/demos/merge.sh
@@ -0,0 +1,28 @@
+GIF_IN="../kingfisher-usage-access-map-01.gif"
+WEBM_IN="pw-out/066d10b5ae5d3603dacd69417a8227c6.webm"
+OUT_GIF="../kingfisher-usage-access-map-01+accessmap.gif"
+
+# 1) Normalize GIF -> MP4 (H.264, fixed fps/size)
+ffmpeg -y -i "$GIF_IN" \
+  -vf "fps=12,scale=960:-2:flags=lanczos" \
+  -an -c:v libx264 -pix_fmt yuv420p -crf 18 -preset veryfast \
+  gif_part.mp4
+
+# 2) Normalize WEBM -> MP4 (same settings)
+ffmpeg -y -i "$WEBM_IN" \
+  -vf "fps=12,scale=960:-2:flags=lanczos" \
+  -an -c:v libx264 -pix_fmt yuv420p -crf 18 -preset veryfast \
+  webm_part.mp4
+
+# 3) Concatenate via filter (video-only; reliable)
+ffmpeg -y -i gif_part.mp4 -i webm_part.mp4 \
+  -filter_complex "[0:v][1:v]concat=n=2:v=1:a=0[v]" \
+  -map "[v]" -c:v libx264 -pix_fmt yuv420p -crf 18 -preset veryfast \
+  combined.mp4
+
+# 4) Convert combined MP4 -> GIF (single palette across whole thing)
+ffmpeg -y -i combined.mp4 \
+  -vf "fps=12,scale=960:-1:flags=lanczos,split[s0][s1];[s0]palettegen=max_colors=256[p];[s1][p]paletteuse=dither=bayer" \
+  "$OUT_GIF"
+
+echo "Wrote: $OUT_GIF"
diff --git a/docs/demos/record.mjs b/docs/demos/record.mjs
new file mode 100644
index 0000000..30ab60a
--- /dev/null
+++ b/docs/demos/record.mjs
@@ -0,0 +1,32 @@
+import { chromium } from "playwright";
+import fs from "node:fs";
+
+const outDir = "pw-out";
+fs.mkdirSync(outDir, { recursive: true });
+
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+
+(async () => {
+  const browser = await chromium.launch({ headless: false });
+
+  const context = await browser.newContext({
+    viewport: { width: 1280, height: 720 },
+    recordVideo: { dir: outDir, size: { width: 1280, height: 720 } },
+  });
+
+  const page = await context.newPage();
+
+  await page.goto("http://127.0.0.1:7890", { waitUntil: "networkidle" });
+  await sleep(25000);
+
+//   await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
+//   await sleep(800);
+
+//   await page.evaluate(() => window.scrollTo(0, 0));
+//   await sleep(800);
+
+  await context.close(); // finalizes video
+  await browser.close();
+
+  console.log("Done. Video saved under:", outDir);
+})();