Make Swift and Rust clickable in the landing page SDK animation

fern/assets/styles.css

@@ -1084,6 +1084,71 @@ h1, h2, h3 {
   display: inline-block;
 }
 
+/* Live Swift and Rust tabs layered over the SDK animation.
+   Positions and sizes are percentages of the 369x93 Rive artboard, so they track the canvas as it scales. */
+.sdk-rive .rive-container {
+  container-type: inline-size;
+}
+
+.rive-tab-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  pointer-events: none;
+}
+
+.rive-tab {
+  position: absolute;
+  top: 34.34%;
+  height: 28.6%;
+  width: 10.46%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.92cqw;
+  text-decoration: none;
+  background-color: #fcfcfd;
+  pointer-events: auto;
+}
+
+.dark .rive-tab {
+  background-color: #111113;
+}
+
+.rive-tab-swift {
+  left: 76.53%;
+}
+
+.rive-tab-rust {
+  left: 86.99%;
+}
+
+.rive-tab-icon {
+  width: 2.88cqw;
+  height: 2.88cqw;
+  margin: 0;
+  object-fit: contain;
+}
+
+.rive-tab-label {
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-size: 1.73cqw;
+  line-height: 1;
+  color: #4a4a4a;
+}
+
+.dark .rive-tab-label {
+  color: #a9a9a9;
+}
+
+.rive-tab:hover .rive-tab-label {
+  color: #21201c;
+}
+
+.dark .rive-tab:hover .rive-tab-label {
+  color: #fcfcfd;
+}
+
 /*** END -- LANDING PAGE STYLING ***/
 
 /* HACK: add a slash to markdown snippet documentation (otherwise it gets parsed by CLI) */

fern/products/home/pages/welcome.mdx

@@ -45,6 +45,18 @@ layout: custom
         <div className="sdk-rive">
           <div className="rive-container">
             <canvas id="sdk-rive-canvas"></canvas>
+            {/* The Rive file renders Swift and Rust as inert grey artwork, so they are covered with live tabs */}
+            <div className="rive-tab-overlay">
+              <a className="rive-tab rive-tab-swift" href="/sdks/generators/swift/quickstart">
+                <img src="./images/swift-logo.svg" alt="" className="rive-tab-icon" noZoom />
+                <span className="rive-tab-label">Swift</span>
+              </a>
+              <a className="rive-tab rive-tab-rust" href="/sdks/generators/rust/quickstart">
+                <img src="./images/rust-light-mode.svg" alt="" className="rive-tab-icon dark:hidden" noZoom />
+                <img src="./images/rust-dark-mode.svg" alt="" className="rive-tab-icon hidden dark:block" noZoom />
+                <span className="rive-tab-label">Rust</span>
+              </a>
+            </div>
           </div>
         </div>
 

fern/rive-animation.js

@@ -45,15 +45,18 @@
 
         try {
             // Set container aspect ratio while respecting existing layout
-            const currentWidth = riveContainer.offsetWidth || riveContainer.clientWidth;
-            if (currentWidth > 0) {
-                // Use existing width, set height based on aspect ratio
-                riveContainer.style.height = (currentWidth / aspectRatio) + 'px';
-            } else {
-                // Fallback: use CSS aspect-ratio if container has no initial width
-                riveContainer.style.aspectRatio = aspectRatio.toString();
-                riveContainer.style.width = '100%';
-            }
+            const syncContainerHeight = () => {
+                const currentWidth = riveContainer.offsetWidth || riveContainer.clientWidth;
+                if (currentWidth > 0) {
+                    // Use existing width, set height based on aspect ratio
+                    riveContainer.style.height = (currentWidth / aspectRatio) + 'px';
+                } else {
+                    // Fallback: use CSS aspect-ratio if container has no initial width
+                    riveContainer.style.aspectRatio = aspectRatio.toString();
+                    riveContainer.style.width = '100%';
+                }
+            };
+            syncContainerHeight();
 
             // Let Rive handle canvas sizing internally - much simpler!
             const r = new rive.Rive({
@@ -107,6 +110,7 @@
 
             // Simple resize handling (following Rive best practices)
             const windowResizeHandler = () => {
+                syncContainerHeight();
                 // Let Rive handle the canvas sizing internally
                 if (r && r.resizeDrawingSurfaceToCanvas) {
                     r.resizeDrawingSurfaceToCanvas();