feat(website): Motion animation system + interactive polish

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",

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>
   );
 }

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[] }) {

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>

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 />

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>
   );

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>
   );
 }

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>
   );

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>
   );