diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js
index 2b54d756c3..6a65520f6f 100644
--- a/docs/src/pages/index.js
+++ b/docs/src/pages/index.js
@@ -42,7 +42,9 @@ function HomepageHeader() {
       </div>
       <div className={styles.logoContainer}>
         <div className={styles.logoBackground} />
-        <img src={"assets/rio-logo.png"} className={styles.logo} />
+        <video className={styles.logo} autoPlay={true} loop={false} muted={true} playsInline={true} preLoad={true}>
+          <source src={"assets/rio-spinning.webm"} type="video/webm"/>
+        </video>
       </div>
     </header>
   );
diff --git a/docs/src/pages/index.module.css b/docs/src/pages/index.module.css
index 20af54e69a..7b0b8eea24 100644
--- a/docs/src/pages/index.module.css
+++ b/docs/src/pages/index.module.css
@@ -146,8 +146,8 @@
 
 @media (min-width: 960px) {
   .logo {
-    width: 15rem;
-    height: 15rem;
+    width: 25rem;
+    height: 25rem;
   }
 }
 
diff --git a/docs/static/assets/rio-spinning.webm b/docs/static/assets/rio-spinning.webm
new file mode 100644
index 0000000000..46cff4fdb2
Binary files /dev/null and b/docs/static/assets/rio-spinning.webm differ