From 057c52cdd2c74d5c2268a802f1707863fd7ab210 Mon Sep 17 00:00:00 2001
From: Devin <jon.syla@postman.com>
Date: Thu, 6 Aug 2026 01:07:19 +0000
Subject: [PATCH] Make Swift and Rust clickable in the landing page SDK
 animation

---
 fern/assets/styles.css               | 65 ++++++++++++++++++++++++++++
 fern/products/home/pages/welcome.mdx | 12 +++++
 fern/rive-animation.js               | 22 ++++++----
 3 files changed, 90 insertions(+), 9 deletions(-)

diff --git a/fern/assets/styles.css b/fern/assets/styles.css
index 7f7c9bbbc4..3d96ac7eb3 100644
--- a/fern/assets/styles.css
+++ b/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) */
diff --git a/fern/products/home/pages/welcome.mdx b/fern/products/home/pages/welcome.mdx
index 0de8f47702..fa43f2e59f 100644
--- a/fern/products/home/pages/welcome.mdx
+++ b/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>
 
diff --git a/fern/rive-animation.js b/fern/rive-animation.js
index 24b8489c21..900c115058 100644
--- a/fern/rive-animation.js
+++ b/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();