diff --git a/website/package-lock.json b/website/package-lock.json
index 1bc97fb9..c8d5513d 100644
--- a/website/package-lock.json
+++ b/website/package-lock.json
@@ -18,9 +18,9 @@
         "@vercel/analytics": "^2.0.1",
         "@vercel/speed-insights": "^2.0.0",
         "codemirror": "^6.0.2",
-        "framer-motion": "^12.36.0",
         "fuse.js": "^7.1.0",
         "gray-matter": "^4.0.3",
+        "motion": "^12.36.0",
         "next": "16.1.7",
         "next-mdx-remote": "^6.0.0",
         "react": "19.2.3",
@@ -4417,12 +4417,12 @@
       "license": "MIT"
     },
     "node_modules/framer-motion": {
-      "version": "12.36.0",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.36.0.tgz",
-      "integrity": "sha512-4PqYHAT7gev0ke0wos+PyrcFxI0HScjm3asgU8nSYa8YzJFuwgIvdj3/s3ZaxLq0bUSboIn19A2WS/MHwLCvfw==",
+      "version": "12.38.0",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.38.0.tgz",
+      "integrity": "sha512-rFYkY/pigbcswl1XQSb7q424kSTQ8q6eAC+YUsSKooHQYuLdzdHjrt6uxUC+PRAO++q5IS7+TamgIw1AphxR+g==",
       "license": "MIT",
       "dependencies": {
-        "motion-dom": "^12.36.0",
+        "motion-dom": "^12.38.0",
         "motion-utils": "^12.36.0",
         "tslib": "^2.4.0"
       },
@@ -6327,10 +6327,36 @@
       "integrity": "sha512-EGWKgxALGMgzvxYF1UyGTy0HXX/2vHLkw6+NvDKW2jypWbHpjQuj4UMcqQWXHERJhVGKikolT06G3bcKe4fi7w==",
       "license": "MIT"
     },
+    "node_modules/motion": {
+      "version": "12.38.0",
+      "resolved": "https://registry.npmjs.org/motion/-/motion-12.38.0.tgz",
+      "integrity": "sha512-uYfXzeHlgThchzwz5Te47dlv5JOUC7OB4rjJ/7XTUgtBZD8CchMN8qEJ4ZVsUmTyYA44zjV0fBwsiktRuFnn+w==",
+      "license": "MIT",
+      "dependencies": {
+        "framer-motion": "^12.38.0",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/motion-dom": {
-      "version": "12.36.0",
-      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.36.0.tgz",
-      "integrity": "sha512-Ep1pq8P88rGJ75om8lTCA13zqd7ywPGwCqwuWwin6BKc0hMLkVfcS6qKlRqEo2+t0DwoUcgGJfXwaiFn4AOcQA==",
+      "version": "12.38.0",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.38.0.tgz",
+      "integrity": "sha512-pdkHLD8QYRp8VfiNLb8xIBJis1byQ9gPT3Jnh2jqfFtAsWUA3dEepDlsWe/xMpO8McV+VdpKVcp+E+TGJEtOoA==",
       "license": "MIT",
       "dependencies": {
         "motion-utils": "^12.36.0"
diff --git a/website/package.json b/website/package.json
index 697f875b..30c3d921 100644
--- a/website/package.json
+++ b/website/package.json
@@ -22,7 +22,7 @@
     "@vercel/analytics": "^2.0.1",
     "@vercel/speed-insights": "^2.0.0",
     "codemirror": "^6.0.2",
-    "framer-motion": "^12.36.0",
+    "motion": "^12.36.0",
     "fuse.js": "^7.1.0",
     "gray-matter": "^4.0.3",
     "next": "16.1.7",
diff --git a/website/src/app/benchmarks/BenchmarksContent.tsx b/website/src/app/benchmarks/BenchmarksContent.tsx
index f847cfe6..80ac936a 100644
--- a/website/src/app/benchmarks/BenchmarksContent.tsx
+++ b/website/src/app/benchmarks/BenchmarksContent.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useState } from 'react';
+import { motion, AnimatePresence } from 'motion/react';
 import { FadeIn } from '@/components/ui/FadeIn';
 import { GlassCard } from '@/components/ui/GlassCard';
 import { Button } from '@/components/ui/Button';
@@ -41,22 +42,33 @@ function RawDataToggle({ id, children }: { id: string; children: React.ReactNode
         aria-expanded={open}
         aria-controls={`raw-data-${id}`}
       >
-        <svg
-          className={`w-3 h-3 transition-transform duration-200 ${open ? 'rotate-90' : ''}`}
+        <motion.svg
+          className="w-3 h-3"
           fill="none"
           viewBox="0 0 24 24"
           stroke="currentColor"
           strokeWidth={2}
+          animate={{ rotate: open ? 90 : 0 }}
+          transition={{ duration: 0.2 }}
         >
           <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
-        </svg>
+        </motion.svg>
         {open ? 'Hide' : 'View'} raw data
       </button>
-      {open && (
-        <div id={`raw-data-${id}`} className="mt-3">
-          {children}
-        </div>
-      )}
+      <AnimatePresence>
+        {open && (
+          <motion.div
+            id={`raw-data-${id}`}
+            className="mt-3 overflow-hidden"
+            initial={{ opacity: 0, height: 0 }}
+            animate={{ opacity: 1, height: 'auto' }}
+            exit={{ opacity: 0, height: 0 }}
+            transition={{ duration: 0.25, ease: [0.25, 0.1, 0.25, 1] }}
+          >
+            {children}
+          </motion.div>
+        )}
+      </AnimatePresence>
     </div>
   );
 }
diff --git a/website/src/app/blog/BlogList.tsx b/website/src/app/blog/BlogList.tsx
index 181f1099..e7e23198 100644
--- a/website/src/app/blog/BlogList.tsx
+++ b/website/src/app/blog/BlogList.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import Link from 'next/link';
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import type { BlogPost } from '@/lib/blog';
 
 export function BlogList({ posts }: { posts: BlogPost[] }) {
diff --git a/website/src/app/docs/page.tsx b/website/src/app/docs/page.tsx
index c124627e..0aaf9ad6 100644
--- a/website/src/app/docs/page.tsx
+++ b/website/src/app/docs/page.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from 'next';
 import Link from 'next/link';
 import { DOCS_SIDEBAR } from '@/lib/constants';
 import { DocsSearchTrigger } from '@/components/docs/DocsSearchTrigger';
+import { FadeIn } from '@/components/ui/FadeIn';
 
 export const metadata: Metadata = {
   title: 'Documentation',
@@ -43,30 +44,31 @@ export default function DocsPage() {
       <DocsSearchTrigger />
 
       <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
-        {DOCS_SIDEBAR.map((group) => (
-          <Link
-            key={group.category}
-            href={`/docs/${group.items[0].slug}`}
-            className="glass glass-hover block rounded-xl p-6 transition-colors"
-          >
-            <div className="mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-accent-indigo/10">
-              <svg className="h-5 w-5 text-accent-indigo" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
-                <path strokeLinecap="round" strokeLinejoin="round" d={CATEGORY_ICONS[group.category] || CATEGORY_ICONS['Core']} />
-              </svg>
-            </div>
-            <h2 className="text-lg font-semibold text-white">{group.category}</h2>
-            <p className="mt-1 text-sm text-zinc-500">
-              {group.items.length} {group.items.length === 1 ? 'article' : 'articles'}
-            </p>
-            <ul className="mt-3 space-y-1">
-              {group.items.slice(0, 3).map((item) => (
-                <li key={item.slug} className="text-sm text-zinc-400">{item.label}</li>
-              ))}
-              {group.items.length > 3 && (
-                <li className="text-sm text-zinc-600">+{group.items.length - 3} more</li>
-              )}
-            </ul>
-          </Link>
+        {DOCS_SIDEBAR.map((group, i) => (
+          <FadeIn viewport key={group.category} delay={i * 0.06}>
+            <Link
+              href={`/docs/${group.items[0].slug}`}
+              className="glass glass-hover block rounded-xl p-6 transition-colors h-full"
+            >
+              <div className="mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-accent-indigo/10">
+                <svg className="h-5 w-5 text-accent-indigo" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d={CATEGORY_ICONS[group.category] || CATEGORY_ICONS['Core']} />
+                </svg>
+              </div>
+              <h2 className="text-lg font-semibold text-white">{group.category}</h2>
+              <p className="mt-1 text-sm text-zinc-500">
+                {group.items.length} {group.items.length === 1 ? 'article' : 'articles'}
+              </p>
+              <ul className="mt-3 space-y-1">
+                {group.items.slice(0, 3).map((item) => (
+                  <li key={item.slug} className="text-sm text-zinc-400">{item.label}</li>
+                ))}
+                {group.items.length > 3 && (
+                  <li className="text-sm text-zinc-600">+{group.items.length - 3} more</li>
+                )}
+              </ul>
+            </Link>
+          </FadeIn>
         ))}
       </div>
     </main>
diff --git a/website/src/app/layout.tsx b/website/src/app/layout.tsx
index c2597a7e..03ac377d 100644
--- a/website/src/app/layout.tsx
+++ b/website/src/app/layout.tsx
@@ -3,6 +3,7 @@ import { spaceGrotesk, inter, jetbrainsMono } from '@/lib/fonts';
 import { Navbar } from '@/components/layout/Navbar';
 import { Footer } from '@/components/layout/Footer';
 import { ServiceWorkerRegister } from '@/components/ServiceWorkerRegister';
+import { ScrollProgressBar } from '@/components/ui/ScrollProgressBar';
 import { Analytics } from '@vercel/analytics/next';
 import { SpeedInsights } from '@vercel/speed-insights/next';
 import './globals.css';
@@ -96,6 +97,7 @@ export default function RootLayout({
             }),
           }}
         />
+        <ScrollProgressBar />
         <Navbar />
         <main id="main-content" className="pt-16">{children}</main>
         <Footer />
diff --git a/website/src/app/not-found.tsx b/website/src/app/not-found.tsx
index 37099d3f..bc479522 100644
--- a/website/src/app/not-found.tsx
+++ b/website/src/app/not-found.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from 'next';
 import Link from 'next/link';
+import { FadeIn } from '@/components/ui/FadeIn';
 
 export const metadata: Metadata = {
   title: '404 - Page Not Found',
@@ -11,19 +12,27 @@ export default function NotFound() {
   return (
     <div className="min-h-screen flex items-center justify-center">
       <div className="text-center">
-        <p className="text-sm font-semibold text-emerald-400 uppercase tracking-wider mb-4">404</p>
-        <h1 className="text-4xl font-bold tracking-tight text-white mb-4">
-          Page not found
-        </h1>
-        <p className="text-lg text-zinc-400 mb-8">
-          The page you&apos;re looking for doesn&apos;t exist.
-        </p>
-        <Link
-          href="/"
-          className="inline-flex items-center gap-2 rounded-lg bg-emerald-500 px-5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-emerald-400 transition-colors"
-        >
-          Back to Home
-        </Link>
+        <FadeIn>
+          <p className="text-sm font-semibold text-emerald-400 uppercase tracking-wider mb-4">404</p>
+        </FadeIn>
+        <FadeIn delay={0.1}>
+          <h1 className="text-4xl font-bold tracking-tight text-white mb-4">
+            Page not found
+          </h1>
+        </FadeIn>
+        <FadeIn delay={0.2}>
+          <p className="text-lg text-zinc-400 mb-8">
+            The page you&apos;re looking for doesn&apos;t exist.
+          </p>
+        </FadeIn>
+        <FadeIn delay={0.3}>
+          <Link
+            href="/"
+            className="inline-flex items-center gap-2 rounded-lg bg-emerald-500 px-5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-emerald-400 transition-colors"
+          >
+            Back to Home
+          </Link>
+        </FadeIn>
       </div>
     </div>
   );
diff --git a/website/src/components/docs/CopyButton.tsx b/website/src/components/docs/CopyButton.tsx
index 878570dc..78920486 100644
--- a/website/src/components/docs/CopyButton.tsx
+++ b/website/src/components/docs/CopyButton.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useState } from 'react';
+import { motion, AnimatePresence } from 'motion/react';
 
 export function CopyButton({ text }: { text: string }) {
   const [copied, setCopied] = useState(false);
@@ -16,26 +17,41 @@ export function CopyButton({ text }: { text: string }) {
     });
   };
 
+  const iconKey = failed ? 'failed' : copied ? 'copied' : 'copy';
+
   return (
-    <button
+    <motion.button
       onClick={copy}
-      className="absolute right-2 top-2 flex h-8 w-8 items-center justify-center rounded-md bg-white/10 text-zinc-400 opacity-0 transition-all hover:bg-white/15 hover:text-white group-hover:opacity-100"
+      className="absolute right-2 top-2 flex h-8 w-8 items-center justify-center rounded-md bg-white/10 text-zinc-400 opacity-0 transition-opacity hover:bg-white/15 hover:text-white group-hover:opacity-100"
       aria-label={failed ? 'Copy failed - try Ctrl+C' : copied ? 'Copied' : 'Copy code'}
       title={failed ? 'Clipboard access denied. Try Ctrl+C to copy.' : undefined}
+      whileTap={{ scale: 0.85 }}
+      transition={{ type: 'spring', stiffness: 400, damping: 17 }}
     >
-      {copied ? (
-        <svg className="h-4 w-4 text-accent-green" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-          <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
-        </svg>
-      ) : failed ? (
-        <svg className="h-4 w-4 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-          <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
-        </svg>
-      ) : (
-        <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-          <path strokeLinecap="round" strokeLinejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
-        </svg>
-      )}
-    </button>
+      <AnimatePresence mode="wait" initial={false}>
+        <motion.span
+          key={iconKey}
+          initial={{ scale: 0, opacity: 0 }}
+          animate={{ scale: 1, opacity: 1 }}
+          exit={{ scale: 0, opacity: 0 }}
+          transition={{ duration: 0.15 }}
+          className="block"
+        >
+          {copied ? (
+            <svg className="h-4 w-4 text-accent-green" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+            </svg>
+          ) : failed ? (
+            <svg className="h-4 w-4 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          ) : (
+            <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+            </svg>
+          )}
+        </motion.span>
+      </AnimatePresence>
+    </motion.button>
   );
 }
diff --git a/website/src/components/home/CodeExamples.tsx b/website/src/components/home/CodeExamples.tsx
index 6099317f..977bef9d 100644
--- a/website/src/components/home/CodeExamples.tsx
+++ b/website/src/components/home/CodeExamples.tsx
@@ -1,9 +1,9 @@
 'use client';
 
 import { useState } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
+import { motion, AnimatePresence } from 'motion/react';
 import { GlassCard } from '@/components/ui/GlassCard';
-import { FadeInCSS } from '@/components/ui/FadeInCSS';
+import { FadeIn } from '@/components/ui/FadeIn';
 
 type Segment = { text: string; cls: string };
 type CodeLine = Segment[];
@@ -103,12 +103,12 @@ export function CodeExamples() {
   return (
     <section className="py-20 border-t border-white/[0.06]">
       <div className="max-w-3xl mx-auto px-4">
-        <FadeInCSS>
+        <FadeIn viewport>
           <h2 className="text-3xl font-bold text-white text-center mb-10">
             Simple, Powerful API
           </h2>
-        </FadeInCSS>
-        <FadeInCSS delay={0.1}>
+        </FadeIn>
+        <FadeIn viewport delay={0.1}>
           <div className="flex flex-wrap gap-1 mb-4">
             {tabs.map((tab, i) => (
               <button
@@ -150,7 +150,7 @@ export function CodeExamples() {
               </AnimatePresence>
             </div>
           </GlassCard>
-        </FadeInCSS>
+        </FadeIn>
       </div>
     </section>
   );
diff --git a/website/src/components/home/CtaBanner.tsx b/website/src/components/home/CtaBanner.tsx
index 33484e8a..60f7b3f6 100644
--- a/website/src/components/home/CtaBanner.tsx
+++ b/website/src/components/home/CtaBanner.tsx
@@ -1,4 +1,4 @@
-import { FadeInCSS } from '@/components/ui/FadeInCSS';
+import { FadeIn } from '@/components/ui/FadeIn';
 import { Button } from '@/components/ui/Button';
 
 export function CtaBanner() {
@@ -12,7 +12,7 @@ export function CtaBanner() {
       </div>
 
       <div className="max-w-6xl mx-auto px-4 text-center">
-        <FadeInCSS>
+        <FadeIn viewport>
           <h2 className="text-3xl md:text-4xl font-bold text-white mb-6">
             Ready to parse SQL at the speed of Go?
           </h2>
@@ -24,7 +24,7 @@ export function CtaBanner() {
               Try Playground
             </Button>
           </div>
-        </FadeInCSS>
+        </FadeIn>
       </div>
     </section>
   );
diff --git a/website/src/components/home/DialectShowcase.tsx b/website/src/components/home/DialectShowcase.tsx
index 26646f85..418d86fd 100644
--- a/website/src/components/home/DialectShowcase.tsx
+++ b/website/src/components/home/DialectShowcase.tsx
@@ -1,5 +1,5 @@
 import { GlassCard } from '@/components/ui/GlassCard';
-import { FadeInCSS } from '@/components/ui/FadeInCSS';
+import { FadeIn } from '@/components/ui/FadeIn';
 
 interface Dialect {
   name: string;
@@ -40,17 +40,17 @@ export function DialectShowcase() {
   return (
     <section className="py-20 border-t border-white/[0.06]">
       <div className="max-w-6xl mx-auto px-4">
-        <FadeInCSS>
+        <FadeIn viewport>
           <h2 className="text-3xl font-bold text-white text-center mb-2">
             8 SQL Dialects, One Parser
           </h2>
           <p className="text-zinc-300 text-center mb-12 text-lg">
             From PostgreSQL to ClickHouse — parse them all
           </p>
-        </FadeInCSS>
+        </FadeIn>
         <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
           {DIALECTS.map((dialect, i) => (
-            <FadeInCSS key={dialect.name} delay={i * 0.08}>
+            <FadeIn viewport key={dialect.name} delay={i * 0.08}>
               <GlassCard className="p-5 h-full text-center">
                 <div
                   className={`w-11 h-11 rounded-full ${dialect.bgColor} ${dialect.color} flex items-center justify-center mx-auto mb-3 text-sm font-bold`}
@@ -72,7 +72,7 @@ export function DialectShowcase() {
                   {dialect.status}
                 </span>
               </GlassCard>
-            </FadeInCSS>
+            </FadeIn>
           ))}
         </div>
       </div>
diff --git a/website/src/components/home/FeatureGrid.tsx b/website/src/components/home/FeatureGrid.tsx
index 8f058451..69fd2d24 100644
--- a/website/src/components/home/FeatureGrid.tsx
+++ b/website/src/components/home/FeatureGrid.tsx
@@ -1,5 +1,5 @@
 import { GlassCard } from '@/components/ui/GlassCard';
-import { FadeInCSS } from '@/components/ui/FadeInCSS';
+import { FadeIn } from '@/components/ui/FadeIn';
 import { FEATURES } from '@/lib/constants';
 
 const icons: Record<string, React.ReactNode> = {
@@ -48,14 +48,14 @@ export function FeatureGrid() {
   return (
     <section className="py-20 border-t border-white/[0.06]">
       <div className="max-w-6xl mx-auto px-4">
-        <FadeInCSS>
+        <FadeIn viewport>
           <h2 className="text-3xl font-bold text-white text-center mb-12">
             Built for Production
           </h2>
-        </FadeInCSS>
+        </FadeIn>
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
           {FEATURES.map((feature, i) => (
-            <FadeInCSS key={feature.title} delay={i * 0.1}>
+            <FadeIn viewport key={feature.title} delay={i * 0.1}>
               <GlassCard className="p-6 h-full">
                 <div className={`w-10 h-10 rounded-lg flex items-center justify-center mb-4 ${colorMap[feature.color] || 'bg-white/10 text-white'}`}>
                   {icons[feature.icon]}
@@ -63,7 +63,7 @@ export function FeatureGrid() {
                 <h3 className="text-lg font-semibold text-white mb-1">{feature.title}</h3>
                 <p className="text-sm text-zinc-200">{feature.description}</p>
               </GlassCard>
-            </FadeInCSS>
+            </FadeIn>
           ))}
         </div>
       </div>
diff --git a/website/src/components/home/GitHubStarButton.tsx b/website/src/components/home/GitHubStarButton.tsx
index 26e630a4..ec78a425 100644
--- a/website/src/components/home/GitHubStarButton.tsx
+++ b/website/src/components/home/GitHubStarButton.tsx
@@ -1,6 +1,9 @@
 'use client';
 
 import { useState, useEffect } from 'react';
+import { motion } from 'motion/react';
+
+const spring = { type: 'spring' as const, stiffness: 400, damping: 17 };
 
 export function GitHubStarButton() {
   const [stars, setStars] = useState<number | null>(null);
@@ -15,11 +18,14 @@ export function GitHubStarButton() {
   }, []);
 
   return (
-    <a
+    <motion.a
       href="https://github.com/ajitpratap0/GoSQLX"
       target="_blank"
       rel="noopener noreferrer"
       className="inline-flex items-center gap-2 px-4 py-2.5 rounded-lg border border-white/10 bg-white/5 hover:bg-white/10 transition-colors text-sm font-medium text-zinc-200"
+      whileHover={{ scale: 1.03 }}
+      whileTap={{ scale: 0.97 }}
+      transition={spring}
     >
       <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
         <path d="M8 .25a7.75 7.75 0 1 0 0 15.5A7.75 7.75 0 0 0 8 .25ZM6.5 13.5v-2.1a2.9 2.9 0 0 1-.8.1c-.6 0-1-.3-1.2-.8-.2-.4-.5-.8-.9-.9l-.1-.1c-.1-.1-.1-.2 0-.2l.1-.1c.5-.2.9.1 1.2.6.2.4.5.6.8.6.3 0 .5-.1.7-.2.1-.6.4-1 .8-1.3-2-.2-3.3-1-3.3-3.1 0-.7.3-1.4.7-1.9-.1-.3-.3-1 0-2 0 0 .6-.2 2 .7a6.8 6.8 0 0 1 3.6 0c1.4-.9 2-.7 2-.7.3 1 .1 1.7 0 2 .4.5.7 1.2.7 1.9 0 2.1-1.3 2.9-3.3 3.1.4.4.7 1 .7 1.9v2.5c0 .1 0 .2.1.2C10.7 14.9 12.5 12 12.5 8A4.5 4.5 0 0 0 8 3.5" />
@@ -33,6 +39,6 @@ export function GitHubStarButton() {
           {stars >= 1000 ? `${(stars / 1000).toFixed(1)}k` : stars}
         </span>
       )}
-    </a>
+    </motion.a>
   );
 }
diff --git a/website/src/components/home/Hero.tsx b/website/src/components/home/Hero.tsx
index 425976e6..131f6ded 100644
--- a/website/src/components/home/Hero.tsx
+++ b/website/src/components/home/Hero.tsx
@@ -1,4 +1,4 @@
-import { FadeInCSS } from '@/components/ui/FadeInCSS';
+import { FadeIn } from '@/components/ui/FadeIn';
 import { GlassCard } from '@/components/ui/GlassCard';
 import { GradientText } from '@/components/ui/GradientText';
 import { VersionBadge } from '@/components/ui/VersionBadge';
@@ -41,31 +41,31 @@ export function Hero() {
       {/* Content */}
       <div className="relative z-10 max-w-5xl mx-auto px-6 py-24 text-center">
         {/* Version badge */}
-        <FadeInCSS delay={0}>
+        <FadeIn viewport delay={0}>
           <div className="mb-6">
             <VersionBadge version="v1.14.0 - Multi-Dialect SQL Parser" />
           </div>
-        </FadeInCSS>
+        </FadeIn>
 
         {/* Headline */}
-        <FadeInCSS delay={0.1}>
+        <FadeIn viewport delay={0.1}>
           <h1
             className="text-3xl sm:text-5xl md:text-6xl lg:text-7xl font-bold mb-6 break-words hyphens-auto w-full max-w-full px-4 sm:px-0"
             style={{ letterSpacing: '-0.03em' }}
           >
             <GradientText>Parse SQL at the speed of Go</GradientText>
           </h1>
-        </FadeInCSS>
+        </FadeIn>
 
         {/* Subtitle */}
-        <FadeInCSS delay={0.2}>
+        <FadeIn viewport delay={0.2}>
           <p className="text-lg md:text-xl max-w-2xl mx-auto mb-10 text-zinc-300">
             Production-ready SQL parsing with zero-copy tokenization, object pooling, and multi-dialect support
           </p>
-        </FadeInCSS>
+        </FadeIn>
 
         {/* Buttons */}
-        <FadeInCSS delay={0.3}>
+        <FadeIn viewport delay={0.3}>
           <div className="flex flex-wrap items-center justify-center gap-3 mb-14">
             <Button variant="primary" href="/docs/getting-started">
               Get Started
@@ -75,14 +75,14 @@ export function Hero() {
             </Button>
             <GitHubStarButton />
           </div>
-        </FadeInCSS>
+        </FadeIn>
 
         {/* Live mini playground */}
-        <FadeInCSS delay={0.4}>
+        <FadeIn viewport delay={0.4}>
           <GlassCard hover={false} className="p-0 overflow-hidden shadow-2xl shadow-indigo-500/5">
             <MiniPlayground />
           </GlassCard>
-        </FadeInCSS>
+        </FadeIn>
 
       </div>
     </section>
diff --git a/website/src/components/home/McpSection.tsx b/website/src/components/home/McpSection.tsx
index 9aa4cef3..97bf9221 100644
--- a/website/src/components/home/McpSection.tsx
+++ b/website/src/components/home/McpSection.tsx
@@ -1,5 +1,5 @@
 import Link from 'next/link';
-import { FadeInCSS } from '@/components/ui/FadeInCSS';
+import { FadeIn } from '@/components/ui/FadeIn';
 import { TerminalMockup } from '@/components/ui/TerminalMockup';
 
 const tools = [
@@ -16,21 +16,21 @@ export function McpSection() {
   return (
     <section className="py-20 border-t border-white/[0.06]">
       <div className="max-w-3xl mx-auto px-4 text-center">
-        <FadeInCSS>
+        <FadeIn viewport>
           <h2 className="text-3xl font-bold text-white mb-4">
             AI-Ready SQL Tools
           </h2>
           <p className="text-zinc-300 mb-10 max-w-xl mx-auto">
             Connect 7 SQL tools to Claude, Cursor, or any MCP client — no installation, no API key.
           </p>
-        </FadeInCSS>
-        <FadeInCSS delay={0.15}>
+        </FadeIn>
+        <FadeIn viewport delay={0.15}>
           <TerminalMockup
             command="claude mcp add --transport http gosqlx https://mcp.gosqlx.dev/mcp"
             output="✓ Added gosqlx (7 tools available)"
           />
-        </FadeInCSS>
-        <FadeInCSS delay={0.25}>
+        </FadeIn>
+        <FadeIn viewport delay={0.25}>
           <div className="mt-6 flex flex-wrap justify-center gap-2">
             {tools.map((tool) => (
               <span
@@ -41,8 +41,8 @@ export function McpSection() {
               </span>
             ))}
           </div>
-        </FadeInCSS>
-        <FadeInCSS delay={0.35}>
+        </FadeIn>
+        <FadeIn viewport delay={0.35}>
           <div className="mt-8">
             <Link
               href="/docs/mcp-guide"
@@ -51,7 +51,7 @@ export function McpSection() {
               Learn more →
             </Link>
           </div>
-        </FadeInCSS>
+        </FadeIn>
       </div>
     </section>
   );
diff --git a/website/src/components/home/PerformanceSection.tsx b/website/src/components/home/PerformanceSection.tsx
index 8a16397e..b510d89f 100644
--- a/website/src/components/home/PerformanceSection.tsx
+++ b/website/src/components/home/PerformanceSection.tsx
@@ -1,5 +1,5 @@
 import { GlassCard } from '@/components/ui/GlassCard';
-import { FadeInCSS } from '@/components/ui/FadeInCSS';
+import { FadeIn } from '@/components/ui/FadeIn';
 import { AnimatedCounter } from '@/components/ui/AnimatedCounter';
 import { AnimatedBars } from './AnimatedBars';
 
@@ -23,16 +23,16 @@ export function PerformanceSection() {
   return (
     <section className="py-20">
       <div className="max-w-6xl mx-auto px-4">
-        <FadeInCSS>
+        <FadeIn viewport>
           <h2 className="text-2xl sm:text-3xl font-bold text-center text-white mb-12">
             Performance That Speaks for Itself
           </h2>
-        </FadeInCSS>
+        </FadeIn>
 
         {/* Stat cards */}
         <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 md:gap-8">
           {stats.map((stat, i) => (
-            <FadeInCSS key={stat.label} delay={i * 0.1}>
+            <FadeIn viewport key={stat.label} delay={i * 0.1}>
               <GlassCard className="p-6 text-center w-full">
                 <div className="flex items-baseline justify-center gap-0.5">
                   {stat.prefix && (
@@ -42,19 +42,19 @@ export function PerformanceSection() {
                 </div>
                 <p className="text-sm text-zinc-200 mt-1">{stat.label}</p>
               </GlassCard>
-            </FadeInCSS>
+            </FadeIn>
           ))}
         </div>
 
         {/* Bar chart */}
-        <FadeInCSS delay={0.5}>
+        <FadeIn viewport delay={0.5}>
           <GlassCard className="mt-12 p-6 sm:p-8" hover={false}>
             <AnimatedBars benchmarks={benchmarks} maxOps={maxOps} />
             <p className="text-xs text-zinc-400 mt-6 text-center">
               Based on BenchmarkParse, Apple M4, Go 1.26
             </p>
           </GlassCard>
-        </FadeInCSS>
+        </FadeIn>
       </div>
     </section>
   );
diff --git a/website/src/components/home/SocialProof.tsx b/website/src/components/home/SocialProof.tsx
index 2d28d90e..488887e6 100644
--- a/website/src/components/home/SocialProof.tsx
+++ b/website/src/components/home/SocialProof.tsx
@@ -1,5 +1,5 @@
 import Image from 'next/image';
-import { FadeInCSS } from '@/components/ui/FadeInCSS';
+import { FadeIn } from '@/components/ui/FadeIn';
 
 const badges = [
   {
@@ -32,7 +32,7 @@ export function SocialProof() {
   return (
     <section className="py-8 border-t border-white/[0.06]">
       <div className="max-w-6xl mx-auto px-4">
-        <FadeInCSS>
+        <FadeIn viewport>
           <div className="flex flex-wrap items-center justify-center gap-4">
             {badges.map((badge) => (
               <Image
@@ -47,7 +47,7 @@ export function SocialProof() {
               />
             ))}
           </div>
-        </FadeInCSS>
+        </FadeIn>
       </div>
     </section>
   );
diff --git a/website/src/components/home/StatsBar.tsx b/website/src/components/home/StatsBar.tsx
index 9f34afbc..1bc112fe 100644
--- a/website/src/components/home/StatsBar.tsx
+++ b/website/src/components/home/StatsBar.tsx
@@ -1,5 +1,5 @@
 import { GlassCard } from '@/components/ui/GlassCard';
-import { FadeInCSS } from '@/components/ui/FadeInCSS';
+import { FadeIn } from '@/components/ui/FadeIn';
 import { AnimatedCounter } from '@/components/ui/AnimatedCounter';
 
 const stats = [
@@ -15,7 +15,7 @@ export function StatsBar() {
       <div className="max-w-6xl mx-auto px-4">
         <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 md:gap-8">
           {stats.map((stat, i) => (
-            <FadeInCSS key={stat.label} delay={i * 0.1}>
+            <FadeIn viewport key={stat.label} delay={i * 0.1}>
               <GlassCard className="p-6 text-center w-full">
                 <div className="flex items-baseline justify-center gap-0.5">
                   {stat.prefix && (
@@ -25,7 +25,7 @@ export function StatsBar() {
                 </div>
                 <p className="text-sm text-zinc-200 mt-1">{stat.label}</p>
               </GlassCard>
-            </FadeInCSS>
+            </FadeIn>
           ))}
         </div>
       </div>
diff --git a/website/src/components/home/TrustSection.tsx b/website/src/components/home/TrustSection.tsx
index b86a2c33..45a824da 100644
--- a/website/src/components/home/TrustSection.tsx
+++ b/website/src/components/home/TrustSection.tsx
@@ -1,4 +1,4 @@
-import { FadeInCSS } from '@/components/ui/FadeInCSS';
+import { FadeIn } from '@/components/ui/FadeIn';
 import { GitHubStarCount } from './GitHubStarCount';
 
 /* ── Inline SVG icons (Heroicons-style, 20x20) ────────────────────────── */
@@ -94,16 +94,16 @@ export function TrustSection() {
     <section className="py-16 border-t border-white/[0.06]">
       <div className="max-w-5xl mx-auto px-4">
         {/* Heading */}
-        <FadeInCSS>
+        <FadeIn viewport>
           <h2 className="text-center text-sm font-semibold uppercase tracking-widest text-zinc-300 mb-10">
             Trusted by Developers
           </h2>
-        </FadeInCSS>
+        </FadeIn>
 
         {/* Metric cards */}
         <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3">
           {metrics.map((m, i) => (
-            <FadeInCSS key={m.id} delay={i * 0.07}>
+            <FadeIn viewport key={m.id} delay={i * 0.07}>
               <div className="glass text-center px-4 py-5 flex flex-col items-center gap-2">
                 {m.icon}
                 <span className="text-lg font-bold text-zinc-100">
@@ -111,20 +111,20 @@ export function TrustSection() {
                 </span>
                 <span className="text-xs text-zinc-300">{m.label}</span>
               </div>
-            </FadeInCSS>
+            </FadeIn>
           ))}
         </div>
 
         {/* Integrations */}
-        <FadeInCSS delay={0.4}>
+        <FadeIn viewport delay={0.4}>
           <p className="text-center text-sm font-medium text-zinc-300 mt-12 mb-5">
             Integrates with
           </p>
-        </FadeInCSS>
+        </FadeIn>
 
         <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 max-w-xl mx-auto">
           {integrations.map((item, i) => (
-            <FadeInCSS key={item.name} delay={0.5 + i * 0.07}>
+            <FadeIn viewport key={item.name} delay={0.5 + i * 0.07}>
               <div className="glass text-center px-5 py-4">
                 <span className="block text-base font-semibold text-zinc-100">
                   {item.name}
@@ -133,7 +133,7 @@ export function TrustSection() {
                   {item.detail}
                 </span>
               </div>
-            </FadeInCSS>
+            </FadeIn>
           ))}
         </div>
       </div>
diff --git a/website/src/components/home/VscodeSection.tsx b/website/src/components/home/VscodeSection.tsx
index c8b912b7..77f59a29 100644
--- a/website/src/components/home/VscodeSection.tsx
+++ b/website/src/components/home/VscodeSection.tsx
@@ -1,4 +1,4 @@
-import { FadeInCSS } from '@/components/ui/FadeInCSS';
+import { FadeIn } from '@/components/ui/FadeIn';
 import { GlassCard } from '@/components/ui/GlassCard';
 import { Button } from '@/components/ui/Button';
 
@@ -9,7 +9,7 @@ export function VscodeSection() {
         <div className="flex flex-col md:flex-row items-center gap-6 md:gap-10">
           {/* Left: Copy */}
           <div className="md:w-1/2">
-            <FadeInCSS>
+            <FadeIn viewport>
               <h2 className="text-3xl font-bold text-white mb-4">
                 IDE Integration
               </h2>
@@ -26,12 +26,12 @@ export function VscodeSection() {
                 </svg>
                 Install Extension
               </Button>
-            </FadeInCSS>
+            </FadeIn>
           </div>
 
           {/* Right: VS Code Mockup */}
           <div className="md:w-1/2 w-full">
-            <FadeInCSS delay={0.2}>
+            <FadeIn viewport delay={0.2}>
               <GlassCard hover={false} className="p-0 overflow-hidden">
                 {/* Title bar */}
                 <div className="flex items-center gap-2 px-4 py-3 border-b border-white/[0.06] bg-white/[0.02]">
@@ -100,7 +100,7 @@ export function VscodeSection() {
                   <span className="text-zinc-500">0 issues</span>
                 </div>
               </GlassCard>
-            </FadeInCSS>
+            </FadeIn>
           </div>
         </div>
       </div>
diff --git a/website/src/components/layout/Navbar.tsx b/website/src/components/layout/Navbar.tsx
index 5a7005d5..938239dd 100644
--- a/website/src/components/layout/Navbar.tsx
+++ b/website/src/components/layout/Navbar.tsx
@@ -3,7 +3,7 @@ import Link from 'next/link';
 import Image from 'next/image';
 import { useState, useEffect } from 'react';
 import { usePathname } from 'next/navigation';
-import { motion, AnimatePresence, useScroll, useTransform } from 'framer-motion';
+import { motion, AnimatePresence, useScroll, useTransform } from 'motion/react';
 import { NAV_LINKS } from '@/lib/constants';
 import { Button } from '@/components/ui/Button';
 import { SearchModal, useSearchShortcut } from '@/components/ui/SearchModal';
diff --git a/website/src/components/playground/Playground.tsx b/website/src/components/playground/Playground.tsx
index fd2a1ab0..5fbb7e23 100644
--- a/website/src/components/playground/Playground.tsx
+++ b/website/src/components/playground/Playground.tsx
@@ -1,6 +1,6 @@
 'use client';
 import React, { useState, useEffect, useCallback, useRef, Suspense } from "react";
-import { motion } from "framer-motion";
+import { motion } from 'motion/react';
 import { useWasm } from "./WasmLoader";
 import SqlEditor from "./SqlEditor";
 import AstTab from "./AstTab";
diff --git a/website/src/components/ui/AnimatedCounter.tsx b/website/src/components/ui/AnimatedCounter.tsx
index 7068346b..7ad26178 100644
--- a/website/src/components/ui/AnimatedCounter.tsx
+++ b/website/src/components/ui/AnimatedCounter.tsx
@@ -1,5 +1,5 @@
 'use client';
-import { useMotionValue, useSpring } from 'framer-motion';
+import { useMotionValue, useSpring } from 'motion/react';
 import { useRef, useEffect, useState } from 'react';
 
 export function AnimatedCounter({ value, suffix = '', color = 'text-white' }: { value: number; suffix?: string; color?: string }) {
diff --git a/website/src/components/ui/Button.tsx b/website/src/components/ui/Button.tsx
index db13715b..1e2e956f 100644
--- a/website/src/components/ui/Button.tsx
+++ b/website/src/components/ui/Button.tsx
@@ -1,4 +1,6 @@
+'use client';
 import Link from 'next/link';
+import { motion } from 'motion/react';
 
 type ButtonProps = {
   variant?: 'primary' | 'ghost';
@@ -9,15 +11,46 @@ type ButtonProps = {
   'aria-label'?: string;
 };
 
+const spring = { type: 'spring' as const, stiffness: 400, damping: 17 };
+
 export function Button({ variant = 'primary', href, children, className = '', external, 'aria-label': ariaLabel }: ButtonProps) {
   const base = variant === 'primary'
     ? 'bg-white text-zinc-950 hover:bg-zinc-200'
     : 'bg-white/[0.06] border border-white/[0.1] text-zinc-300 hover:bg-white/[0.1] hover:text-white';
-  const cls = `inline-flex items-center gap-2 px-5 py-2.5 rounded-lg font-medium text-sm transition-all duration-200 ${base} ${className}`;
+  const cls = `inline-flex items-center gap-2 px-5 py-2.5 rounded-lg font-medium text-sm transition-colors duration-200 ${base} ${className}`;
 
   if (href) {
-    if (external) return <a href={href} target="_blank" rel="noopener noreferrer" className={cls} aria-label={ariaLabel}>{children}</a>;
-    return <Link href={href} className={cls} aria-label={ariaLabel}>{children}</Link>;
+    if (external) {
+      return (
+        <motion.a
+          href={href}
+          target="_blank"
+          rel="noopener noreferrer"
+          className={cls}
+          aria-label={ariaLabel}
+          whileHover={{ scale: 1.02 }}
+          whileTap={{ scale: 0.97 }}
+          transition={spring}
+        >
+          {children}
+        </motion.a>
+      );
+    }
+    return (
+      <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.97 }} transition={spring} className="inline-flex">
+        <Link href={href} className={cls} aria-label={ariaLabel}>{children}</Link>
+      </motion.div>
+    );
   }
-  return <button className={cls} aria-label={ariaLabel}>{children}</button>;
+  return (
+    <motion.button
+      className={cls}
+      aria-label={ariaLabel}
+      whileHover={{ scale: 1.02 }}
+      whileTap={{ scale: 0.97 }}
+      transition={spring}
+    >
+      {children}
+    </motion.button>
+  );
 }
diff --git a/website/src/components/ui/FadeIn.tsx b/website/src/components/ui/FadeIn.tsx
index ce1b4096..50917e5f 100644
--- a/website/src/components/ui/FadeIn.tsx
+++ b/website/src/components/ui/FadeIn.tsx
@@ -1,29 +1,54 @@
 'use client';
-import { motion, useReducedMotion } from 'framer-motion';
+import { motion, useReducedMotion } from 'motion/react';
 import { ReactNode, useState, useEffect, memo } from 'react';
+import { fadeInUp, defaultTransition } from '@/lib/motion-variants';
 
-export const FadeIn = memo(function FadeIn({ children, delay = 0, className = '' }: { children: ReactNode; delay?: number; className?: string }) {
+interface FadeInProps {
+  children: ReactNode;
+  delay?: number;
+  className?: string;
+  /** Use whileInView (scroll-triggered) instead of animate-on-mount */
+  viewport?: boolean;
+}
+
+export const FadeIn = memo(function FadeIn({ children, delay = 0, className = '', viewport = false }: FadeInProps) {
   const shouldReduce = useReducedMotion();
   const [isMounted, setIsMounted] = useState(false);
 
-  // Defer Framer Motion's initial state until after hydration. Without this,
-  // Framer Motion applies initial={{ opacity: 0 }} before React hydrates, causing
-  // the server-rendered HTML (opacity:1) to mismatch the client DOM (opacity:0).
   useEffect(() => {
     setIsMounted(true);
   }, []);
 
   if (!isMounted) {
-    // Server + hydration pass: render without Framer Motion so the DOM matches
-    // the server HTML exactly. No opacity/transform styles applied.
     return <div className={className}>{children}</div>;
   }
 
+  const transition = {
+    ...defaultTransition,
+    duration: shouldReduce ? 0 : 0.5,
+    delay: shouldReduce ? 0 : delay,
+  };
+
+  if (viewport) {
+    return (
+      <motion.div
+        initial="hidden"
+        whileInView="visible"
+        viewport={{ once: true, amount: 0.1 }}
+        variants={fadeInUp}
+        transition={transition}
+        className={className}
+      >
+        {children}
+      </motion.div>
+    );
+  }
+
   return (
     <motion.div
       initial={{ opacity: 0, y: shouldReduce ? 0 : 16 }}
       animate={{ opacity: 1, y: 0 }}
-      transition={{ duration: shouldReduce ? 0 : 0.5, delay: shouldReduce ? 0 : delay, ease: 'easeOut' }}
+      transition={transition}
       className={className}
     >
       {children}
diff --git a/website/src/components/ui/GlassCard.tsx b/website/src/components/ui/GlassCard.tsx
index 1d3dd1e1..f3254ec2 100644
--- a/website/src/components/ui/GlassCard.tsx
+++ b/website/src/components/ui/GlassCard.tsx
@@ -1,12 +1,16 @@
 'use client';
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import { ReactNode } from 'react';
 
+const spring = { type: 'spring' as const, stiffness: 400, damping: 17 };
+
 export function GlassCard({ children, className = '', hover = true }: { children: ReactNode; className?: string; hover?: boolean }) {
   return (
     <motion.div
-      className={`glass ${hover ? 'glass-hover transition-all duration-300' : ''} relative overflow-hidden ${className}`}
-      whileHover={hover ? { scale: 1.02 } : undefined}
+      className={`glass ${hover ? 'glass-hover transition-colors duration-300' : ''} relative overflow-hidden ${className}`}
+      whileHover={hover ? { scale: 1.02, y: -2 } : undefined}
+      whileTap={hover ? { scale: 0.99 } : undefined}
+      transition={spring}
     >
       <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
       {children}
diff --git a/website/src/components/ui/ScrollProgressBar.tsx b/website/src/components/ui/ScrollProgressBar.tsx
new file mode 100644
index 00000000..a6830072
--- /dev/null
+++ b/website/src/components/ui/ScrollProgressBar.tsx
@@ -0,0 +1,25 @@
+'use client';
+import { motion, useScroll, useReducedMotion } from 'motion/react';
+
+export function ScrollProgressBar() {
+  const { scrollYProgress } = useScroll();
+  const shouldReduce = useReducedMotion();
+
+  if (shouldReduce) return null;
+
+  return (
+    <motion.div
+      style={{
+        scaleX: scrollYProgress,
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        height: 3,
+        zIndex: 9999,
+        transformOrigin: '0%',
+        background: 'linear-gradient(90deg, #6366f1, #8b5cf6, #a78bfa)',
+      }}
+    />
+  );
+}
diff --git a/website/src/components/ui/SearchModal.tsx b/website/src/components/ui/SearchModal.tsx
index 508cc3ff..b647166a 100644
--- a/website/src/components/ui/SearchModal.tsx
+++ b/website/src/components/ui/SearchModal.tsx
@@ -2,6 +2,7 @@
 
 import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
 import { useRouter } from 'next/navigation';
+import { motion, AnimatePresence } from 'motion/react';
 import Fuse from 'fuse.js';
 import { buildSearchIndex, type SearchEntry } from '@/lib/search-index';
 
@@ -93,9 +94,9 @@ export function SearchModal({ open, onClose }: SearchModalProps) {
     setSelectedIndex(0);
   }, [results]);
 
-  if (!open) return null;
-
   return (
+    <AnimatePresence>
+    {open && (
     <div
       ref={overlayRef}
       className="fixed inset-0 z-[100] flex items-start justify-center pt-[min(20vh,10rem)] px-4"
@@ -107,10 +108,23 @@ export function SearchModal({ open, onClose }: SearchModalProps) {
       aria-label="Search documentation"
     >
       {/* Backdrop */}
-      <div className="fixed inset-0 bg-black/60 backdrop-blur-sm" aria-hidden="true" />
+      <motion.div
+        className="fixed inset-0 bg-black/60 backdrop-blur-sm"
+        aria-hidden="true"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        transition={{ duration: 0.15 }}
+      />
 
       {/* Modal */}
-      <div className="relative w-full max-w-lg glass overflow-hidden shadow-2xl shadow-black/40">
+      <motion.div
+        className="relative w-full max-w-lg glass overflow-hidden shadow-2xl shadow-black/40"
+        initial={{ opacity: 0, scale: 0.95, y: 10 }}
+        animate={{ opacity: 1, scale: 1, y: 0 }}
+        exit={{ opacity: 0, scale: 0.95, y: 10 }}
+        transition={{ duration: 0.2, ease: [0.25, 0.1, 0.25, 1] }}
+      >
         {/* Search input */}
         <div className="flex items-center gap-3 border-b border-white/[0.08] px-4">
           <svg
@@ -210,8 +224,10 @@ export function SearchModal({ open, onClose }: SearchModalProps) {
             close
           </span>
         </div>
-      </div>
+      </motion.div>
     </div>
+    )}
+    </AnimatePresence>
   );
 }
 
diff --git a/website/src/components/ui/ThemeToggle.tsx b/website/src/components/ui/ThemeToggle.tsx
index 835bfc90..c0bcdcbd 100644
--- a/website/src/components/ui/ThemeToggle.tsx
+++ b/website/src/components/ui/ThemeToggle.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'motion/react';
 
 function SunIcon({ className = '' }: { className?: string }) {
   return (
@@ -65,17 +66,39 @@ export function ThemeToggle() {
   }
 
   return (
-    <button
+    <motion.button
       type="button"
       onClick={toggle}
-      className="text-zinc-400 hover:text-white transition-colors duration-200 p-2 rounded-lg hover:bg-white/[0.04]"
+      className="text-zinc-400 hover:text-white transition-colors duration-200 p-2 rounded-lg hover:bg-white/[0.04] relative overflow-hidden"
       aria-label={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
+      whileTap={{ scale: 0.9 }}
+      transition={{ type: 'spring', stiffness: 400, damping: 17 }}
     >
-      {theme === 'dark' ? (
-        <SunIcon className="w-5 h-5" />
-      ) : (
-        <MoonIcon className="w-5 h-5" />
-      )}
-    </button>
+      <AnimatePresence mode="wait" initial={false}>
+        {theme === 'dark' ? (
+          <motion.span
+            key="sun"
+            initial={{ rotate: -90, opacity: 0 }}
+            animate={{ rotate: 0, opacity: 1 }}
+            exit={{ rotate: 90, opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            className="block"
+          >
+            <SunIcon className="w-5 h-5" />
+          </motion.span>
+        ) : (
+          <motion.span
+            key="moon"
+            initial={{ rotate: 90, opacity: 0 }}
+            animate={{ rotate: 0, opacity: 1 }}
+            exit={{ rotate: -90, opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            className="block"
+          >
+            <MoonIcon className="w-5 h-5" />
+          </motion.span>
+        )}
+      </AnimatePresence>
+    </motion.button>
   );
 }
diff --git a/website/src/lib/motion-variants.ts b/website/src/lib/motion-variants.ts
new file mode 100644
index 00000000..fac55898
--- /dev/null
+++ b/website/src/lib/motion-variants.ts
@@ -0,0 +1,80 @@
+import type { Variants, Transition } from 'motion/react';
+
+// -- Shared animation variants --
+
+/** Fade in from below -- use for sections, cards, any scroll-triggered content */
+export const fadeInUp: Variants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: { opacity: 1, y: 0 },
+};
+
+/** Fade in from left */
+export const slideInLeft: Variants = {
+  hidden: { opacity: 0, x: -30 },
+  visible: { opacity: 1, x: 0 },
+};
+
+/** Fade in from right */
+export const slideInRight: Variants = {
+  hidden: { opacity: 0, x: 30 },
+  visible: { opacity: 1, x: 0 },
+};
+
+/** Simple opacity fade */
+export const fadeIn: Variants = {
+  hidden: { opacity: 0 },
+  visible: { opacity: 1 },
+};
+
+/** Stagger container -- wraps children that each use fadeInUp/slideIn etc. */
+export const staggerContainer: Variants = {
+  hidden: {},
+  visible: {
+    transition: {
+      staggerChildren: 0.06,
+      delayChildren: 0.1,
+    },
+  },
+};
+
+/** Faster stagger for dense grids (8+ items) */
+export const staggerContainerFast: Variants = {
+  hidden: {},
+  visible: {
+    transition: {
+      staggerChildren: 0.04,
+      delayChildren: 0.05,
+    },
+  },
+};
+
+// -- Shared transitions --
+
+export const defaultTransition: Transition = {
+  duration: 0.4,
+  ease: [0.25, 0.1, 0.25, 1],
+};
+
+export const springTransition: Transition = {
+  type: 'spring',
+  stiffness: 400,
+  damping: 17,
+};
+
+// -- Shared gesture props (spread onto motion components) --
+
+export const hoverLift = {
+  whileHover: { y: -4 },
+  transition: defaultTransition,
+};
+
+export const hoverScale = {
+  whileHover: { scale: 1.02 },
+  whileTap: { scale: 0.98 },
+  transition: springTransition,
+};
+
+export const tapShrink = {
+  whileTap: { scale: 0.97 },
+  transition: springTransition,
+};