Add demo GIF to README and website

Claude.md

@@ -10,19 +10,25 @@ You are working with many other agents. Make sure there is effective cooperation
 ## Coding Rules
 
 - **Zero duplication - TOP PRIORITY** - Always search for existing code before adding. Move; don't copy files. Add assertions to tests rather than duplicating tests. AIM FOR LESS CODE!
-- **TypeScript strict mode** - No `any`, no implicit types, turn all lints up to error
 - **Functional style** - Prefer pure functions, avoid classes where possible
 - **No suppressing warnings** - Fix them properly
 - **No REGEX** It is absolutely ⛔️ illegal
-- **Ignoring lints = ⛔️ illegal** - Fix violations immediately
 - **Don't run long runnings tasks** like docker builds, tests. Ask the user to do it!!
-- **No throwing** - Only return `Result<T,E>`
 - **Expressions over assignments** - Prefer const and immutable patterns
 - **Named parameters** - Use object params for functions with 3+ args
 - **Keep files under 450 LOC and functions under 20 LOC**
 - **No commented-out code** - Delete it
 - **No placeholders** - If incomplete, leave LOUD compilation error with TODO
 
+### Typescript
+- **TypeScript strict mode** - No `any`, no implicit types, turn all lints up to error
+- **Ignoring lints = ⛔️ illegal** - Fix violations immediately
+- **No throwing** - Only return `Result<T,E>`
+
+### CSS
+- **Minimize duplication** - fewer classes is better
+- **Don't include section in class name** - name them after what they are - not the section they sit in
+
 ## Testing
 
 ⚠️ NEVER KILL VSCODE PROCESSES

README.md

@@ -1,6 +1,10 @@
 # CommandTree
 
-One sidebar. Every command in your workspace.
+**One sidebar. Every command in your workspace.**
+
+<p align="center">
+  <img src="website/src/assets/images/CommandTree.gif" alt="CommandTree in action" width="780">
+</p>
 
 CommandTree scans your project and surfaces all runnable commands in a single tree view: shell scripts, npm scripts, Makefile targets, VS Code tasks, launch configurations, and Python scripts. Filter by text or tag, run in terminal or debugger.
 

website/src/assets/css/styles.css

@@ -211,7 +211,7 @@ a:hover { color: var(--color-primary-hover); }
 /* --- Hero Section --- */
 .hero {
   background: var(--gradient-hero);
-  padding: 5rem 2rem 6rem;
+  padding: 5rem 2rem 2rem;
   text-align: center;
   color: white;
   position: relative;
@@ -314,6 +314,70 @@ a:hover { color: var(--color-primary-hover); }
 }
 .install-cmd .prompt { color: var(--color-leaf); user-select: none; }
 
+/* --- Demo Showcase --- */
+.demo-section {
+  background: var(--gradient-hero);
+  padding: 2.5rem 2rem 2.5rem;
+  position: relative;
+}
+.demo-inner {
+  max-width: 780px;
+  margin: 0 auto;
+}
+.demo-window {
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  box-shadow:
+    0 30px 80px rgba(0, 0, 0, 0.35),
+    0 10px 24px rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  animation: fadeInUp 0.8s ease-out 0.6s both;
+}
+.demo-titlebar {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.6rem 0.9rem;
+  background: #252526;
+}
+.demo-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+.demo-dot-close { background: #ff5f57; }
+.demo-dot-min { background: #febc2e; }
+.demo-dot-max { background: #28c840; }
+.demo-titlebar-text {
+  flex: 1;
+  text-align: center;
+  color: #7a7a7a;
+  font-size: 0.75rem;
+  font-weight: 500;
+  font-family: var(--font-sans);
+  margin-right: 2rem;
+}
+.demo-gif {
+  display: block;
+  width: 100%;
+  height: auto;
+  background: #1e1e1e;
+}
+.demo-caption {
+  text-align: center;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 0.875rem;
+  margin-top: 1rem;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+}
+
+@media (max-width: 768px) {
+  .demo-section { padding: 0 1rem 2rem; }
+  .demo-window { border-radius: var(--radius); }
+  .demo-inner { max-width: 100%; }
+}
+
 /* --- Feature Grid --- */
 .features-section {
   max-width: var(--max-width);

website/src/index.njk

@@ -25,6 +25,21 @@ title: CommandTree - One Sidebar, Every Command
   </div>
 </section>
 
+<section class="demo-section">
+  <div class="demo-inner">
+    <div class="demo-window">
+      <div class="demo-titlebar">
+        <span class="demo-dot demo-dot-close"></span>
+        <span class="demo-dot demo-dot-min"></span>
+        <span class="demo-dot demo-dot-max"></span>
+        <span class="demo-titlebar-text">CommandTree &mdash; VS Code</span>
+      </div>
+      <img src="/assets/images/CommandTree.gif" alt="CommandTree discovering and running commands in VS Code" class="demo-gif" loading="lazy">
+    </div>
+    <p class="demo-caption">Discover, filter, and run every command in your workspace from one panel.</p>
+  </div>
+</section>
+
 <section class="features-section">
   <div class="section-header">
     <h2>Everything you need</h2>