From 8f80bee97bb57337991e4f8420a4306d1a4e965a Mon Sep 17 00:00:00 2001
From: Iwo Plaza <iwoplaza@gmail.com>
Date: Sat, 1 Aug 2026 18:57:15 +0200
Subject: [PATCH] docs: Animate code section buttons on the new homepage

---
 .../src/components/CodeButton.astro           |  6 +--
 .../src/components/CodeShowcase.astro         | 48 ++++++++-----------
 apps/typegpu-docs/src/tailwind.css            |  2 +
 3 files changed, 24 insertions(+), 32 deletions(-)

diff --git a/apps/typegpu-docs/src/components/CodeButton.astro b/apps/typegpu-docs/src/components/CodeButton.astro
index 8f3f4793e9..e201c7b9d0 100644
--- a/apps/typegpu-docs/src/components/CodeButton.astro
+++ b/apps/typegpu-docs/src/components/CodeButton.astro
@@ -9,13 +9,13 @@ const { title, message, icon: Icon } = Astro.props as Props;
 ---
 
 <div
-  class="relative isolate box-border flex aspect-square flex-col items-start bg-gradient-to-tl p-6 lg:p-8"
+  class="group relative isolate box-border flex aspect-square w-72 flex-shrink-0 cursor-pointer flex-col items-start bg-gradient-to-tl p-6 md:w-auto lg:p-8"
 >
   <div
-    class="from-gradient-blue to-gradient-purple absolute inset-0 -z-10 bg-gradient-to-tl"
+    class="from-gradient-blue to-gradient-purple absolute inset-0 -z-10 overflow-hidden bg-gradient-to-tl perspective-near"
   >
     <div
-      class="bg-tameplum-80 absolute inset-0 scale-100 transition-all duration-200 ease-out will-change-transform in-[[data-active=true]]:scale-[98.5%] dark:bg-[#30354A]"
+      class="bg-tameplum-80 in-[[data-active=true]]:next-group-hover:rotate-y-2 in-[[data-active=true]]:prev-group-hover:-rotate-y-2 in-[[data-active=true]]:next-group-hover:rounded in-[[data-active=true]]:next-group-hover:scale-[99%] in-[[data-active=true]]:prev-group-hover:rounded in-[[data-active=true]]:prev-group-hover:scale-[99%] absolute inset-0 scale-100 transform-gpu transition-all duration-300 ease-[cubic-bezier(0.5,1.8,0.3,0.8)] will-change-transform in-[[data-active=true]]:scale-[98.5%] in-[[data-active=true]]:group-hover:scale-[97.5%] dark:bg-[#30354A] dark:group-hover:bg-[#32384D]"
     >
     </div>
   </div>
diff --git a/apps/typegpu-docs/src/components/CodeShowcase.astro b/apps/typegpu-docs/src/components/CodeShowcase.astro
index 37b829fe9d..5af0f24fc8 100644
--- a/apps/typegpu-docs/src/components/CodeShowcase.astro
+++ b/apps/typegpu-docs/src/components/CodeShowcase.astro
@@ -10,37 +10,25 @@ const sectionId = 'interactive-code-section';
 
 <div class="flex flex-col self-stretch" id={sectionId}>
   <div
-    class="horizontal-scroll box-border flex max-w-screen gap-4 overflow-x-auto px-6 pb-2 md:grid md:grid-cols-3 md:overflow-visible"
+    class="code-button-container horizontal-scroll box-border flex max-w-screen gap-4 overflow-x-auto px-6 pb-2 md:grid md:grid-cols-3 md:overflow-visible"
     role="tablist"
     aria-label="TypeGPU use cases"
   >
-    <div
-      class="code-button-wrapper w-72 flex-shrink-0 cursor-pointer md:w-auto"
-    >
-      <CodeButton
-        title="As a foundation"
-        message="TypeGPU smooths out the tough parts of WebGPU without boxing you in."
-        icon={Brackets}
-      />
-    </div>
-    <div
-      class="code-button-wrapper w-72 flex-shrink-0 cursor-pointer md:w-auto"
-    >
-      <CodeButton
-        title="As a puzzle piece"
-        message="Pick and choose the APIs you need, and plug them into your code however you want."
-        icon={PlusCircle}
-      />
-    </div>
-    <div
-      class="code-button-wrapper w-72 flex-shrink-0 cursor-pointer md:w-auto"
-    >
-      <CodeButton
-        title="For libraries"
-        message="Simplify library internals, and make your user-facing API type-safe by default."
-        icon={BookOpened}
-      />
-    </div>
+    <CodeButton
+      title="As a foundation"
+      message="TypeGPU smooths out the tough parts of WebGPU without boxing you in."
+      icon={Brackets}
+    />
+    <CodeButton
+      title="As a puzzle piece"
+      message="Pick and choose the APIs you need, and plug them into your code however you want."
+      icon={PlusCircle}
+    />
+    <CodeButton
+      title="For libraries"
+      message="Simplify library internals, and make your user-facing API type-safe by default."
+      icon={BookOpened}
+    />
   </div>
 
   <div class="codepen-container px-6">
@@ -153,7 +141,9 @@ function frame() {
 
 <script define:vars={{ sectionId }}>
   const section = document.getElementById(sectionId);
-  const buttons = Array.from(section.querySelectorAll('.code-button-wrapper'));
+  const buttons = Array.from(
+    section.querySelectorAll('.code-button-container > *'),
+  );
   const codePens = Array.from(
     section.querySelectorAll('.codepen-container > *'),
   );
diff --git a/apps/typegpu-docs/src/tailwind.css b/apps/typegpu-docs/src/tailwind.css
index aa2a99fd0d..978e666f77 100644
--- a/apps/typegpu-docs/src/tailwind.css
+++ b/apps/typegpu-docs/src/tailwind.css
@@ -74,6 +74,8 @@
 }
 
 @custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
+@custom-variant next-group-hover (&:is(:where(.group):has(~ .group:hover) *));
+@custom-variant prev-group-hover (&:is(.group:hover ~ :where(.group) *));
 
 body {
   /* causes the font weights to reflect how they appear on Figma */