Update rive animations small nits (#272)

Author: ml-241

fern/assets/styles.css

@@ -940,6 +940,12 @@ a[href*="changelog"] svg {
   pointer-events: none;
 }
 
+/* Fade out effect for AI animation */
+.rive-container.fade-bottom {
+  mask: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
+  -webkit-mask: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
+}
+
 .rive-container canvas {
   width: 100%;
   height: 100%;

fern/products/home/pages/welcome.mdx

@@ -132,9 +132,11 @@ import { FernFooter } from "../../../components/FernFooter";
         </div>
 
         {/* Rive Animation */}
-        <div class="rive-container">
-          <canvas id="docs-rive-canvas"></canvas>
-        </div>
+        <a href="/docs/getting-started/overview" style="cursor: pointer; text-decoration: none;">
+          <div class="rive-container fade-bottom">
+            <canvas id="docs-rive-canvas"></canvas>
+          </div>
+        </a>
 
         <div className="action-buttons-vertical">
           <a className="fern-button filled normal primary gap-1 w-fit a-btn" href="/docs/getting-started/overview">
@@ -190,9 +192,11 @@ import { FernFooter } from "../../../components/FernFooter";
         </div>
 
         {/* Rive Animation */}
-        <div class="rive-container">
-          <canvas id="ai-rive-canvas"></canvas>
-        </div>
+        <a href="/ask-fern/getting-started/what-is-ask-fern" style="cursor: pointer; text-decoration: none;">
+          <div class="rive-container fade-bottom">
+            <canvas id="ai-rive-canvas"></canvas>
+          </div>
+        </a>
 
         <div className="action-buttons">
           <a className="fern-button filled normal primary gap-1 a-btn" href="/ask-fern/getting-started/what-is-ask-fern">

fern/rive-animation.js

@@ -128,6 +128,11 @@
 
     // Setup dynamic cursor changes based on Rive's interactive areas
     function setupDynamicCursor(canvas, riveInstance, stateMachine) {
+        // Skip dynamic cursor if canvas is wrapped in an anchor tag
+        if (canvas.closest('a')) {
+            return;
+        }
+        
         canvas.addEventListener('mousemove', (event) => {
             try {
                 const rect = canvas.getBoundingClientRect();
@@ -255,7 +260,7 @@
         // Docs Animation
         createRiveAnimation({
             canvasSelector: '#docs-rive-canvas',
-            riveUrl: 'https://cdn.prod.website-files.com/67880ff570cdb1a85eee946f/68825994c55f0eece04ce4e2_d261956a0f627eb6b94c39aa9fcc26f0_docs_animation.riv',
+            riveUrl: 'https://cdn.prod.website-files.com/67880ff570cdb1a85eee946f/68825994c55f0eece04ce4e2_9a50e77828a014e927d67fa21d3edf9d_docs_animation.riv',
             aspectRatio: 404/262,
             stateMachine: "State Machine 1",
             fallbackImages: [
@@ -276,7 +281,7 @@
         // AI Animation with custom event handling
         createRiveAnimation({
             canvasSelector: '#ai-rive-canvas',
-            riveUrl: 'https://cdn.prod.website-files.com/67880ff570cdb1a85eee946f/68825e97fd6225e1c8a7488c_c2966309b38902c92adfe24c2dc8ba5a_ai_animation.riv',
+            riveUrl: 'https://cdn.prod.website-files.com/67880ff570cdb1a85eee946f/68825e97fd6225e1c8a7488c_c1ab3eed9babdbd0f2333f092d16e2d1_ai_animation.riv',
             aspectRatio: 371/99,
             stateMachine: "State Machine 1",
             fallbackImages: [
@@ -291,13 +296,13 @@
                     alt: 'AI Animation Preview'
                 }
             ],
-            eventHandlers: {
+            /* eventHandlers: {
                 'Open URL': (eventData) => {
                     // Custom URL handling for AI animation, URL is defined in the Rive file
                     console.log('AI animation URL event:', eventData.url);
                     window.open(eventData.url, '_blank', 'noopener,noreferrer');
                 }
-            }
+            } */
         });
 
         // Add additional Rive animations by calling createRiveAnimation() with your config