Add animations to Docs homepage v2 (#171)

Author: ml-241

fern/assets/styles.css

@@ -873,4 +873,45 @@ a[href*="changelog"] svg {
   }
 }
 
+
+
+.sdk-rive {
+  aspect-ratio: 369/93;
+  width: 100%;
+  display: block;
+  overflow: visible; /* Changed from hidden - was clipping interactive areas */
+  transform: translateY(0px);
+  transition: transform 250ms ease-out !important;
+  will-change: transform;
+  /* Ensure click events can reach the canvas */
+  pointer-events: auto;
+}
+
+.sdk-rive:hover {
+  transform: translateY(-3px) !important;
+}
+
+/* Ensure the canvas can receive clicks and is properly layered */
+.rive-container {
+  width: 100%;
+  height: 100%;
+  display: block;
+  position: relative;
+  /* Ensure container doesn't block events */
+  pointer-events: none;
+}
+
+.rive-container canvas {
+  width: 100%;
+  height: 100%;
+  vertical-align: baseline;
+  display: inline-block;
+  /* Allow canvas to receive events while container doesn't */
+  pointer-events: auto !important;
+  position: relative;
+  z-index: 1;
+  vertical-align: baseline;
+  display: inline-block;
+}
+
 /*** END -- LANDING PAGE STYLING ***/

fern/docs.yml

@@ -147,6 +147,8 @@ layout:
 js:
   - path: ./footer-dist/output.js
     strategy: beforeInteractive
+  - path: ./rive-animation.js
+    strategy: afterInteractive
 
 analytics:
   # posthog:

fern/products/home/pages/welcome.mdx

@@ -58,20 +58,12 @@ import { FernFooter } from "../../../components/FernFooter";
           </p>
         </div>
 
-        <a className="sdks-preview" href="/sdks/overview/introduction">
-          <img
-            src="./images/sdks-preview-light.svg"
-            alt="SDK Generation Preview"
-            className="sdks-preview-img dark:hidden"
-            noZoom
-          />
-          <img
-            src="./images/sdks-preview-dark.svg"
-            alt="SDK Generation Preview"
-            className="sdks-preview-img hidden dark:block"
-            noZoom
-          />
-        </a>
+        {/* Rive Animation */}
+        <div className="sdk-rive">
+          <div className="rive-container">
+            <canvas id="sdk-rive-canvas"></canvas>
+          </div>
+        </div>
 
         {/* Language Icons */}
         <div className="language-icons">
@@ -139,8 +131,10 @@ import { FernFooter } from "../../../components/FernFooter";
           </p>
         </div>
 
-        <img src="./images/docs-preview-light.svg" alt="Docs Preview" className="docs-preview-img dark:hidden" noZoom />
-        <img src="./images/docs-preview-dark.svg" alt="Docs Preview" className="docs-preview-img hidden dark:block" noZoom />
+        {/* Rive Animation */}
+        <div class="rive-container">
+          <canvas id="docs-rive-canvas"></canvas>
+        </div>
 
         <div className="action-buttons-vertical">
           <a className="fern-button filled normal primary gap-1 w-fit a-btn" href="/docs/getting-started/overview">
@@ -190,8 +184,10 @@ import { FernFooter } from "../../../components/FernFooter";
           </p>
         </div>
 
-        <img src="./images/ai-search-preview-light.svg" alt="AI Search Mockup" className="ai-search-preview-img dark:hidden" noZoom />
-        <img src="./images/ai-search-preview-dark.svg" alt="AI Search Mockup" className="ai-search-preview-img hidden dark:block" noZoom />
+        {/* Rive Animation */}
+        <div class="rive-container">
+          <canvas id="ai-rive-canvas"></canvas>
+        </div>
 
         <div className="action-buttons">
           <a className="fern-button filled normal primary gap-1 a-btn" href="/ask-fern/getting-started/what-is-ask-fern">