Add gif of vitals monitor to README

prouast · prouast · commit b9e552f9b01b · 2025-11-05T10:25:18.000+11:00
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 <div align="center">
   <a href="https://www.rouast.com/api/">
-    <img src="./assets/logo.svg" alt="VitalLens API Logo" height="80px" width="80px"/>
+    <img src="https://raw.githubusercontent.com/Rouast-Labs/vitallens.js/main/assets/logo.svg" alt="VitalLens API Logo" height="80px" width="80px"/>
   </a>
   <h1>vitallens.js</h1>
   <p align="center">
@@ -16,6 +16,10 @@
 
 `vitallens.js` is the official JavaScript client for the [**VitalLens API**](https://www.rouast.com/api/), a service for estimating physiological vital signs like heart rate, respiratory rate, and heart rate variability (HRV) from facial video.
 
+<div align="center">
+  <img src="./assets/demo.gif" alt="vitallens.js demo" width="500">
+</div>
+
 Using a different language or platform? We also have a [Python client](https://github.com/Rouast-Labs/vitallens-python) and [iOS app](https://apps.apple.com/us/app/vitallens/id6472757649).
 
 ## Features
diff --git a/assets/demo.gif b/assets/demo.gif
diff --git a/examples/browser/vitals_monitor.html b/examples/browser/vitals_monitor.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8">
     <title>VitalLens Vitals Monitor</title>
-    <style>body { background: black; }</style>
+    <style>body { background: black; display: flex; align-items: center; justify-content: center;}</style>
     <script type="module" src="../vitallens.browser.js"></script>
     <link rel="preconnect" href="https://api.rouast.com" crossorigin>
   </head>
diff --git a/src/web-components/vitals-monitor.html b/src/web-components/vitals-monitor.html
@@ -2,7 +2,7 @@
   :host {
     display: block;
     width: 320px;
-    height: 180px;
+    min-height: 180px;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
     background-color: #1a1a1a;
     color: #ffffff;
