cote-star · cote-star · Mar 16, 2026 · Mar 16, 2026 · Mar 16, 2026 · Mar 16, 2026
diff --git a/README.md b/README.md
@@ -11,7 +11,7 @@ Let local agents use real tools without turning your shell into a generic creden
 
 > If you use local coding agents with real credentials, `latchkeyd` gives you a narrower, auditable trust gate between wrapper and tool.
 
-![latchkeyd before and after](docs/assets/before-after.gif)
+![latchkeyd before and after](docs/assets/before-after-anim.webp)
 
 ```bash
 LATCHKEYD_BIN="$PWD/.build/debug/latchkeyd" ./examples/bin/example-wrapper demo
@@ -150,6 +150,8 @@ What `latchkeyd` does is narrow the blast radius once an agent is already allowe
 - broad inherited env state is replaced with explicit handoff
 - a tool name alone is not trusted; the real path and hash must match
 
+![latchkeyd attack surface protection](docs/assets/attack-surface-anim.webp?v=2)
+
 This is defense in depth for approved local workflows, not a blanket claim of secure agents.
 
 ## How It Works
@@ -161,7 +163,7 @@ This is defense in depth for approved local workflows, not a blanket claim of se
 5. `latchkeyd` resolves only the secret entries approved by policy.
 6. `latchkeyd` injects only the approved environment variables and `exec`s the command.
 
-![Architecture flow](docs/assets/architecture-flow.svg)
+![Architecture flow](docs/assets/architecture-flow.png?v=2)
 
 **Tenets:**
 

diff --git a/docs/assets/animation.html b/docs/assets/animation.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Latchkeyd Defense Animation</title>
+    <style>
+        body { 
+            margin: 0; 
+            background: #FDFCF8; 
+            display: flex; 
+            justify-content: center; 
+            align-items: center; 
+            height: 100vh;
+        }
+        .anim-container {
+            width: 1080px;
+            height: 530px;
+            overflow: hidden;
+            position: relative;
+        }
+        .frame {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 1080px;
+            height: auto;
+            opacity: 0;
+        }
+        .active {
+            opacity: 1;
+        }
+    </style>
+</head>
+<body>
+    <div class="anim-container">
+        <!-- Frame 1: Before -->
+        <img class="frame active" src="oq0qv.png" alt="Before" />
+        <!-- Frame 2: After -->
+        <img class="frame" src="gxOAw.png" alt="After" />
+    </div>
+
+    <script>
+        const frames = document.querySelectorAll('.frame');
+        let currentFrame = 0;
+
+        function cycle() {
+            // Because there's a quick flash, let's just abruptly switch visibility
+            frames[currentFrame].classList.remove('active');
+
+            // Move to next frame
+            currentFrame = (currentFrame + 1) % frames.length;
+
+            // Show new frame
+            frames[currentFrame].classList.add('active');
+        }
+
+        // Cycle every 2 seconds
+        setInterval(cycle, 2000);
+    </script>
+</body>
+</html>
diff --git a/docs/assets/architecture-flow.png b/docs/assets/architecture-flow.png
diff --git a/docs/assets/architecture-flow.svg b/docs/assets/architecture-flow.svg
diff --git a/docs/assets/attack-surface-anim.webp b/docs/assets/attack-surface-anim.webp
diff --git a/docs/assets/before-after-anim.webp b/docs/assets/before-after-anim.webp
diff --git a/docs/assets/before-after.gif b/docs/assets/before-after.gif
diff --git a/docs/assets/gxOAw.png b/docs/assets/gxOAw.png
diff --git a/docs/assets/oq0qv.png b/docs/assets/oq0qv.png
diff --git a/docs/assets/qr-code.png b/docs/assets/qr-code.png