Add animated demo GIF to README and docs (#29)

- New demo.gif showing the complete mask/unmask flow
- Embed in README hero section
- Add to docs introduction page

diff --git a/README.md b/README.md
index 973550eee5ce23cb6f8df9ee1eddcd7185f68f28..df5ef043d9287df2c8c7f788cdf700ee98a19f50 100644 (file)
--- a/README.md
+++ b/README.md
@@ -19,7 +19,14 @@
 
 <br/>
 
-<img src="assets/dashboard.png" width="100%" alt="PasteGuard Dashboard">
+<p align="center">
+  <img src="assets/demo.gif" width="720" alt="PasteGuard Demo">
+</p>
+<p align="center">
+  <em>Your App → PasteGuard → OpenAI — PII never reaches external servers</em>
+</p>
+
+<br/>
 
 ## What is PasteGuard?
 
@@ -74,6 +81,9 @@ Point your app to `http://localhost:3000/openai/v1` instead of `https://api.open
 
 Dashboard: [http://localhost:3000/dashboard](http://localhost:3000/dashboard)
 
+<img src="assets/dashboard.png" width="100%" alt="PasteGuard Dashboard">
+<p><em>Every request logged with masked content preview</em></p>
+
 For multiple languages, configuration options, and more: **[Read the docs →](https://pasteguard.com/docs/quickstart)**
 
 ## Integrations

diff --git a/assets/demo.gif b/assets/demo.gif
new file mode 100644 (file)
index 0000000..33e1c3e
Binary files /dev/null and b/assets/demo.gif differ

diff --git a/docs/images/demo.gif b/docs/images/demo.gif
new file mode 100644 (file)
index 0000000..33e1c3e
Binary files /dev/null and b/docs/images/demo.gif differ

diff --git a/docs/introduction.mdx b/docs/introduction.mdx
index a075b9cc025c755d4c53f097c089e9cf2aac806c..89b285a6edef0b8a13dade1082351894c04d3174 100644 (file)
--- a/docs/introduction.mdx
+++ b/docs/introduction.mdx
@@ -15,9 +15,9 @@ When using LLM APIs, every prompt is sent to external servers - including custom
 
 PasteGuard sits between your app and the LLM API:
 
-```
-Your App → PasteGuard → LLM API
-```
+<Frame>
+  <img src="/images/demo.gif" alt="PasteGuard Demo" />
+</Frame>
 
 Two privacy modes: