diff --git a/fern/assets/styles.css b/fern/assets/styles.css
index 7f7c9bbbc4..fbc6d68a7b 100644
--- a/fern/assets/styles.css
+++ b/fern/assets/styles.css
@@ -1037,6 +1037,375 @@ h1, h2, h3 {
   min-height: 213px;
 }
 
+/*** START -- DOCS HTML/CSS ANIMATION (replaces docs Rive) ***/
+/* Coordinate space mirrors the original 404x262 Rive artboard.
+   1em == 1 artboard unit, scaled fluidly to the container width. */
+.docs-mockup-link {
+  display: block;
+  cursor: pointer;
+  text-decoration: none;
+  pointer-events: auto;
+}
+
+.docs-rive {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 404 / 262;
+  container-type: inline-size;
+  overflow: hidden;
+}
+
+.docs-mockup {
+  position: absolute;
+  inset: 0;
+  font-size: calc(100cqw / 404); /* 1em == 1 artboard unit */
+  line-height: 0;
+  color: transparent;
+  --dm-line: rgba(0, 0, 0, 0.3);
+  --dm-fill: rgba(0, 0, 0, 0.05);
+  --dm-fill-soft: rgba(0, 0, 0, 0.035);
+  --dm-border: rgba(0, 0, 0, 0.12);
+  --dm-icon: rgba(0, 0, 0, 0.28);
+}
+
+.dark .docs-mockup {
+  --dm-line: rgba(255, 255, 255, 0.34);
+  --dm-fill: rgba(255, 255, 255, 0.08);
+  --dm-fill-soft: rgba(255, 255, 255, 0.05);
+  --dm-border: rgba(255, 255, 255, 0.16);
+  --dm-icon: rgba(255, 255, 255, 0.32);
+}
+
+.docs-mockup .dm-line {
+  position: absolute;
+  height: 1.46em;
+  border-radius: 0.73em;
+  background: var(--dm-line);
+}
+
+/* Top bar */
+.dm-brand {
+  position: absolute;
+  left: 13em;
+  top: 6.5em;
+  display: flex;
+  align-items: center;
+  gap: 3.2em;
+}
+.dm-logo {
+  width: 9em;
+  height: 9em;
+  border-radius: 50%;
+  background: radial-gradient(circle at 50% 45%, var(--dm-icon) 0 22%, transparent 26%),
+    conic-gradient(from 0deg, var(--dm-icon) 0 10%, transparent 10% 25%,
+      var(--dm-icon) 25% 35%, transparent 35% 50%,
+      var(--dm-icon) 50% 60%, transparent 60% 75%,
+      var(--dm-icon) 75% 85%, transparent 85% 100%);
+  opacity: 0.75;
+}
+.dm-brand-text {
+  font-size: 8.4em;
+  line-height: 1;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  color: var(--dm-line);
+}
+
+.dm-search {
+  position: absolute;
+  left: 105.2em;
+  top: 3.75em;
+  width: 162.2em;
+  height: 17.7em;
+  border-radius: 3.2em;
+  background: var(--dm-fill);
+  border: 0.6em solid var(--dm-border);
+  display: flex;
+  align-items: center;
+  gap: 4em;
+  padding-left: 8em;
+  box-sizing: border-box;
+}
+.dm-search-icon {
+  width: 5.4em;
+  height: 5.4em;
+  border-radius: 50%;
+  border: 1.1em solid var(--dm-icon);
+  position: relative;
+  flex: none;
+}
+.dm-search-icon::after {
+  content: "";
+  position: absolute;
+  right: -2.2em;
+  bottom: -1.4em;
+  width: 2.6em;
+  height: 1.1em;
+  border-radius: 1em;
+  background: var(--dm-icon);
+  transform: rotate(45deg);
+}
+.dm-search-text {
+  font-size: 8.4em;
+  line-height: 1;
+  color: var(--dm-line);
+}
+
+.dm-topbar-right {
+  position: absolute;
+  left: 302.7em;
+  top: 6.3em;
+  width: 96em;
+  height: 12.5em;
+}
+.dm-nav-dash {
+  top: 5.6em;
+}
+.dm-topbar-right .dm-nav-dash:nth-child(1) { left: 0; width: 17.5em; }
+.dm-topbar-right .dm-nav-dash:nth-child(2) { left: 27.1em; width: 17.5em; }
+.dm-btn {
+  position: absolute;
+  left: 52.9em;
+  top: 0;
+  width: 23.5em;
+  height: 12.5em;
+  border-radius: 3em;
+  border: 0.6em solid var(--dm-border);
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.dm-btn-dash {
+  position: static;
+  width: 17.5em;
+}
+.dm-toggle {
+  position: absolute;
+  left: 87em;
+  top: 2.5em;
+  width: 7.5em;
+  height: 7.5em;
+  border-radius: 50%;
+  border: 1em solid var(--dm-icon);
+  box-shadow:
+    0 -5em 0 -3.6em var(--dm-icon), 0 5em 0 -3.6em var(--dm-icon),
+    -5em 0 0 -3.6em var(--dm-icon), 5em 0 0 -3.6em var(--dm-icon),
+    -3.5em -3.5em 0 -3.6em var(--dm-icon), 3.5em -3.5em 0 -3.6em var(--dm-icon),
+    -3.5em 3.5em 0 -3.6em var(--dm-icon), 3.5em 3.5em 0 -3.6em var(--dm-icon);
+}
+
+/* Dividers */
+.dm-divider-h {
+  position: absolute;
+  left: 0;
+  top: 42.4em;
+  width: 100%;
+  height: 0.4em;
+  background: var(--dm-border);
+}
+.dm-divider-v {
+  position: absolute;
+  left: 119.8em;
+  top: 42.4em;
+  width: 0.4em;
+  height: 216.7em;
+  background: var(--dm-border);
+}
+
+/* Tabs */
+.dm-tabs {
+  position: absolute;
+  left: 17.2em;
+  top: 32.8em;
+  width: 110em;
+  height: 9.6em;
+}
+.dm-tab {
+  top: 0;
+  width: 17.5em;
+}
+.dm-tabs .dm-tab:nth-child(1) { left: 0; }
+.dm-tabs .dm-tab:nth-child(2) { left: 27.1em; }
+.dm-tabs .dm-tab:nth-child(3) { left: 54.3em; }
+.dm-tabs .dm-tab:nth-child(4) { left: 84.6em; }
+.dm-tab-active::after {
+  content: "";
+  position: absolute;
+  left: -3em;
+  top: 8.5em;
+  width: 23.5em;
+  height: 1.1em;
+  border-radius: 1em;
+  background: var(--dm-line);
+}
+
+/* Sidebar */
+.dm-side-label { left: 10.7em; width: 17.5em; }
+.dm-side-label-1 { top: 53.7em; }
+.dm-side-label-2 { top: 130.9em; }
+
+.dm-nav-row {
+  position: absolute;
+  left: 5.9em;
+  width: 109em;
+  height: 14.5em;
+  display: flex;
+  align-items: center;
+  gap: 6.2em;
+  padding-left: 8.4em;
+  box-sizing: border-box;
+  border-radius: 3.2em;
+}
+.dm-nav-1 { top: 61.7em; }
+.dm-nav-2 { top: 76.2em; }
+.dm-nav-3 { top: 90.7em; }
+.dm-nav-4 { top: 105.2em; }
+.dm-nav-active { background: var(--dm-fill-soft); }
+.dm-nav-row .dm-nav-text { position: static; width: 17.5em; }
+.dm-icon {
+  width: 8em;
+  height: 8em;
+  border-radius: 1.6em;
+  background: var(--dm-icon);
+  opacity: 0.55;
+  flex: none;
+}
+.dm-icon-accent {
+  background: #6366f1;
+  opacity: 0.7;
+}
+.dm-icon-dots {
+  background: transparent;
+  border-radius: 0;
+  opacity: 1;
+  background-image: radial-gradient(var(--dm-icon) 40%, transparent 45%);
+  background-size: 3em 3em;
+  background-repeat: repeat-x;
+  background-position: 0 center;
+  width: 8em;
+  height: 3em;
+}
+
+.dm-expand {
+  position: absolute;
+  left: 10.7em;
+  top: 143.5em;
+  width: 104em;
+  height: 6em;
+  display: flex;
+  align-items: center;
+}
+.dm-expand .dm-nav-text { position: static; width: 17.5em; }
+.dm-chevron {
+  width: 3.2em;
+  height: 3.2em;
+  border-right: 1em solid var(--dm-icon);
+  border-bottom: 1em solid var(--dm-icon);
+  transform: rotate(45deg);
+  margin-left: 12em;
+  margin-top: -1.6em;
+}
+
+.dm-method {
+  position: absolute;
+  left: 10.7em;
+  height: 6.4em;
+  display: flex;
+  align-items: center;
+  gap: 4.4em;
+}
+.dm-method-1 { top: 157.5em; }
+.dm-method-2 { top: 172em; }
+.dm-method-3 { top: 186.5em; }
+.dm-method-4 { top: 201em; }
+.dm-method .dm-nav-text { position: static; width: 17.5em; }
+.dm-badge {
+  font-size: 3.6em;
+  line-height: 1;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  padding: 0.7em 1.1em;
+  border-radius: 0.6em;
+  flex: none;
+  opacity: 0.7;
+}
+.dm-get { color: #3b82f6; background: rgba(59, 130, 246, 0.14); }
+.dm-post { color: #10b981; background: rgba(16, 185, 129, 0.14); }
+.dark .dm-get { color: #93b4fb; }
+.dark .dm-post { color: #6ee7b7; }
+
+/* Content */
+.dm-title { left: 134.3em; top: 56.9em; width: 58.2em; }
+.dm-hero {
+  position: absolute;
+  left: 134.3em;
+  top: 72.8em;
+  width: 217.7em;
+  height: 72.8em;
+  border-radius: 2.9em;
+  overflow: hidden;
+}
+.dm-hero-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center 65%;
+  display: block;
+  margin: 0;
+}
+.dm-hero::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: rgba(255, 255, 255, 0.5);
+}
+.dark .dm-hero::after { background: rgba(10, 10, 12, 0.42); }
+.dm-para { left: 134.3em; }
+.dm-para-1 { top: 160.1em; width: 95.4em; }
+.dm-para-2 { top: 167.6em; width: 160.2em; }
+.dm-para-3 { top: 175.1em; width: 89.6em; }
+
+/* Build-in animation (mirrors the Rive intro's staggered fade + rise) */
+@keyframes dm-in {
+  from { opacity: 0; transform: translateY(6em); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.docs-mockup .dm-anim {
+  opacity: 0;
+  animation: dm-in 0.5s cubic-bezier(0.22, 0.7, 0.28, 1) both;
+}
+.dm-brand { animation-delay: 0.02s; }
+.dm-search { animation-delay: 0.1s; }
+.dm-topbar-right { animation-delay: 0.16s; }
+.dm-divider-h { animation-delay: 0.2s; }
+.dm-divider-v { animation-delay: 0.2s; }
+.dm-tabs { animation-delay: 0.22s; }
+.dm-side-label-1 { animation-delay: 0.26s; }
+.dm-nav-1 { animation-delay: 0.3s; }
+.dm-nav-2 { animation-delay: 0.34s; }
+.dm-nav-3 { animation-delay: 0.38s; }
+.dm-nav-4 { animation-delay: 0.42s; }
+.dm-side-label-2 { animation-delay: 0.44s; }
+.dm-expand { animation-delay: 0.47s; }
+.dm-method-1 { animation-delay: 0.5s; }
+.dm-method-2 { animation-delay: 0.54s; }
+.dm-method-3 { animation-delay: 0.58s; }
+.dm-method-4 { animation-delay: 0.62s; }
+.dm-title { animation-delay: 0.34s; }
+.dm-hero { animation-delay: 0.46s; }
+.dm-para-1 { animation-delay: 0.62s; }
+.dm-para-2 { animation-delay: 0.68s; }
+.dm-para-3 { animation-delay: 0.74s; }
+
+@media (prefers-reduced-motion: reduce) {
+  .docs-mockup .dm-anim {
+    opacity: 1;
+    animation: none;
+  }
+}
+/*** END -- DOCS HTML/CSS ANIMATION ***/
+
 .ask-fern-rive {
   min-height: 114px;
 }
diff --git a/fern/products/home/pages/images/docs-hero.png b/fern/products/home/pages/images/docs-hero.png
new file mode 100644
index 0000000000..a90cd774f9
Binary files /dev/null and b/fern/products/home/pages/images/docs-hero.png differ
diff --git a/fern/products/home/pages/welcome.mdx b/fern/products/home/pages/welcome.mdx
index d2df33fa04..930d1baa20 100644
--- a/fern/products/home/pages/welcome.mdx
+++ b/fern/products/home/pages/welcome.mdx
@@ -121,10 +121,91 @@ layout: custom
           </p>
         </div>
         
-        {/* Rive Animation */}
-        <a href="/docs/getting-started/overview" style="cursor: pointer; text-decoration: none;">
-          <div class="docs-rive rive-container fade-bottom">
-            <canvas id="docs-rive-canvas"></canvas>
+        {/* Docs Animation (HTML/CSS) */}
+        <a href="/docs/getting-started/overview" className="docs-mockup-link">
+          <div className="docs-rive rive-container fade-bottom">
+            <div className="docs-mockup" aria-hidden="true">
+              {/* Top bar */}
+              <div className="dm-brand dm-anim">
+                <span className="dm-logo"></span>
+                <span className="dm-brand-text">Your company</span>
+              </div>
+              <div className="dm-search dm-anim">
+                <span className="dm-search-icon"></span>
+                <span className="dm-search-text">Search</span>
+              </div>
+              <div className="dm-topbar-right dm-anim">
+                <span className="dm-line dm-nav-dash"></span>
+                <span className="dm-line dm-nav-dash"></span>
+                <span className="dm-btn"><span className="dm-line dm-btn-dash"></span></span>
+                <span className="dm-toggle"></span>
+              </div>
+
+              {/* Dividers */}
+              <span className="dm-divider-h dm-anim"></span>
+              <span className="dm-divider-v dm-anim"></span>
+
+              {/* Tabs */}
+              <div className="dm-tabs dm-anim">
+                <span className="dm-line dm-tab"></span>
+                <span className="dm-line dm-tab"></span>
+                <span className="dm-line dm-tab dm-tab-active"></span>
+                <span className="dm-line dm-tab"></span>
+              </div>
+
+              {/* Sidebar */}
+              <span className="dm-line dm-side-label dm-side-label-1 dm-anim"></span>
+
+              <div className="dm-nav-row dm-nav-1 dm-nav-active dm-anim">
+                <span className="dm-icon dm-icon-accent"></span>
+                <span className="dm-line dm-nav-text"></span>
+              </div>
+              <div className="dm-nav-row dm-nav-2 dm-anim">
+                <span className="dm-icon"></span>
+                <span className="dm-line dm-nav-text"></span>
+              </div>
+              <div className="dm-nav-row dm-nav-3 dm-anim">
+                <span className="dm-icon"></span>
+                <span className="dm-line dm-nav-text"></span>
+              </div>
+              <div className="dm-nav-row dm-nav-4 dm-anim">
+                <span className="dm-icon dm-icon-dots"></span>
+                <span className="dm-line dm-nav-text"></span>
+              </div>
+
+              <span className="dm-line dm-side-label dm-side-label-2 dm-anim"></span>
+
+              <div className="dm-expand dm-anim">
+                <span className="dm-line dm-nav-text"></span>
+                <span className="dm-chevron"></span>
+              </div>
+
+              <div className="dm-method dm-method-1 dm-anim">
+                <span className="dm-badge dm-get">GET</span>
+                <span className="dm-line dm-nav-text"></span>
+              </div>
+              <div className="dm-method dm-method-2 dm-anim">
+                <span className="dm-badge dm-get">GET</span>
+                <span className="dm-line dm-nav-text"></span>
+              </div>
+              <div className="dm-method dm-method-3 dm-anim">
+                <span className="dm-badge dm-post">POST</span>
+                <span className="dm-line dm-nav-text"></span>
+              </div>
+              <div className="dm-method dm-method-4 dm-anim">
+                <span className="dm-badge dm-post">POST</span>
+                <span className="dm-line dm-nav-text"></span>
+              </div>
+
+              {/* Content */}
+              <span className="dm-line dm-title dm-anim"></span>
+              <span className="dm-hero dm-anim">
+                <img src="./images/docs-hero.png" alt="" className="dm-hero-img" noZoom />
+              </span>
+              <span className="dm-line dm-para dm-para-1 dm-anim"></span>
+              <span className="dm-line dm-para dm-para-2 dm-anim"></span>
+              <span className="dm-line dm-para dm-para-3 dm-anim"></span>
+            </div>
           </div>
         </a>
 
diff --git a/fern/rive-animation.js b/fern/rive-animation.js
index 24b8489c21..2b22875240 100644
--- a/fern/rive-animation.js
+++ b/fern/rive-animation.js
@@ -257,26 +257,7 @@
             // No eventHandlers - this animation only uses native interactions
         });
 
-        // Docs Animation
-        createRiveAnimation({
-            canvasSelector: '#docs-rive-canvas',
-            riveUrl: 'https://cdn.prod.website-files.com/67880ff570cdb1a85eee946f/68825994c55f0eece04ce4e2_9a50e77828a014e927d67fa21d3edf9d_docs_animation.riv',
-            aspectRatio: 404/262,
-            stateMachine: "State Machine 1",
-            fallbackImages: [
-                {
-                    src: './images/docs-preview-light.svg',
-                    className: 'docs-preview-img dark:hidden',
-                    alt: 'Docs Animation Preview'
-                },
-                {
-                    src: './images/docs-preview-dark.svg',
-                    className: 'docs-preview-img hidden dark:block',
-                    alt: 'Docs Animation Preview'
-                }
-            ]
-            // No eventHandlers - this animation only uses native interactions
-        });
+        // Docs Animation is now an HTML/CSS implementation (see welcome.mdx + styles.css)
 
         // AI Animation with custom event handling
         createRiveAnimation({