docs(hero): animated demo SVG for the README hero

README.md

@@ -21,7 +21,7 @@ Change less. Break less. Know the blast radius of any file before you touch it.
 # or try it without installing anything:
 npx @alimaandev/ripple analyze src/your-file.ts</code></pre>
 
-  <img src="https://raw.githubusercontent.com/alimaandev/ripple/main/assets/hero.svg" alt="Terminal output of `ripple analyze` — risk, affected files, routes, components, tests, and confidence score" title="ripple analyze" width="100%" />
+  <img src="https://raw.githubusercontent.com/alimaandev/ripple/main/assets/hero-animated.svg" alt="Animated terminal demo of `ripple analyze` — command types in, then the report builds up: risk score with gauge, affected files, routes, components, tests, and confidence" title="ripple analyze" width="100%" />
 
 </div>
 
@@ -388,6 +388,8 @@ A typical agent loop: `impact src/auth/session.ts` before refactoring,
 the gate still passes. Tool results are JSON text; failures return
 `isError` results instead of crashing the session.
 
+  <img src="https://raw.githubusercontent.com/alimaandev/ripple/main/assets/mcp-demo.svg" alt="Flow diagram — an AI agent calls impact on src/auth/session.ts through ripple mcp and gets the blast radius back: 7 affected files, 4 routes, MEDIUM risk" title="ripple mcp flow" width="100%" />
+
 ## Configuration
 
 Ripple discovers `ripple.config.ts`, `.js`, `.cjs`, `.mjs`, or `.json` in the