feat: enhance dashboard components with framer-motion animations

- Added motion effects to Donut, Gauge, Header, NoData, Sparkline components for improved user experience. - Implemented initial and animate properties for SVG elements to create smooth transitions. - Introduced new motion primitives for reusable animations across components. - Updated UI elements like badges and buttons with hover effects and transitions. - Enhanced skeleton and spinner components for better loading states. - Created a motion library for consistent animation variants and utility constants.
2026-07-23 17:55:57 +07:00
parent e528b6a726
commit 22cdc2e84b
17 changed files with 1500 additions and 486 deletions
@@ -12,6 +12,7 @@
        "cmdk": "^1.1.1",
        "date-fns": "^4.4.0",
        "embla-carousel-react": "^8.6.0",
+        "framer-motion": "^12.42.2",
        "input-otp": "^1.4.2",
        "lucide-react": "^1.26.0",
        "next": "16.2.11",
@@ -542,6 +543,8 @@

    "forwarded": ["forwarded@0.2.0", "", {}, "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow=="],

+    "framer-motion": ["framer-motion@12.42.2", "", { "dependencies": { "motion-dom": "^12.42.2", "motion-utils": "^12.39.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" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-5XY9luDiu0oHfHBjpDthFMh0ES+122w6p/papSJBweMkO8Sn+PW2QaEgRblQBpWFnuvZS5qvarpt/hO2pjGmnw=="],
+
    "fresh": ["fresh@2.0.0", "", {}, "sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A=="],

    "fs-extra": ["fs-extra@11.3.6", "", { "dependencies": { "graceful-fs": "^4.2.0", "jsonfile": "^6.0.1", "universalify": "^2.0.0" } }, "sha512-w8ZNZr2mKIc7qeNaQ9AVPT1+iFaI+Avd4xudVOvdDJ8VytREi1Ft5Ih7hd9jjehod8vAM5GMsfQ/TpPf4EyoEA=="],
@@ -712,6 +715,10 @@

    "minimist": ["minimist@1.2.8", "", {}, "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA=="],

+    "motion-dom": ["motion-dom@12.42.2", "", { "dependencies": { "motion-utils": "^12.39.0" } }, "sha512-5gIMWLp/PycBtJRJWRgjxke5n8dlvkSn2DrYW+tr3XcqAZY1xZh6BJyooJXCM8wdfM7wfMjkBJNLge1CKPUIRA=="],
+
+    "motion-utils": ["motion-utils@12.39.0", "", {}, "sha512-8nadJAJjTtqRkmRF36FoJTrywK9nnFmnPwnSMyxaOCU7GDjN9RTMJIxx9De8ErM+vpPhMccr/6fo5WciyQLnMQ=="],
+
    "ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],

    "nanoid": ["nanoid@3.3.16", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-bzlKTyNJ7+LdGIIwy8ijFpIqEQIvafahV7eYykJ8Cvh42EdJeODoJ6gUJXpQJvej1BddH8OqTXZNE/KfbWAu8Q=="],
@@ -17,6 +17,7 @@
    "cmdk": "^1.1.1",
    "date-fns": "^4.4.0",
    "embla-carousel-react": "^8.6.0",
+    "framer-motion": "^12.42.2",
    "input-otp": "^1.4.2",
    "lucide-react": "^1.26.0",
    "next": "16.2.11",
@@ -1,11 +1,13 @@
 "use client";

+import { motion } from "framer-motion";
 import { useEffect, useState } from "react";
 import { Donut } from "@/components/dashboard/donut";
 import { Gauge } from "@/components/dashboard/gauge";
 import { Sparkline } from "@/components/dashboard/sparkline";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { AnimatedNumber } from "@/components/ui/motion-primitives";
 import {
  type DashboardData,
  gaugeColor,
@@ -13,6 +15,27 @@ import {
  serviceIndicator,
 } from "@/lib/dashboard/types";

+const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.06,
+      delayChildren: 0.08,
+    },
+  },
+};
+
+const cardVariants = {
+  hidden: { opacity: 0, y: 16, scale: 0.98 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    scale: 1,
+    transition: { duration: 0.4, ease: [0.25, 0.1, 0, 1] as const },
+  },
+};
+
 export default function Dashboard() {
  const [data, setData] = useState<DashboardData | null>(null);

@@ -20,7 +43,9 @@ export default function Dashboard() {
    const fetchData = async () => {
      try {
        const res = await fetch("/api/dashboard");
-        if (res.ok) setData(await res.json());
+        if (res.ok) {
+          setData(await res.json());
+        }
      } catch {
        /* ignore */
      }
@@ -40,9 +65,15 @@ export default function Dashboard() {

  return (
    <div className="mx-auto w-full max-w-[1440px] flex-1 px-4 py-3">
-      <div className="grid grid-cols-1 gap-2.5 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
+      <motion.div
+        className="grid grid-cols-1 gap-2.5 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4"
+        variants={containerVariants}
+        initial="hidden"
+        animate="visible"
+      >
        {/* Services */}
-        <Card>
+        <motion.div variants={cardVariants}>
+          <Card className="h-full transition-shadow duration-300 hover:shadow-md hover:shadow-border/20">
            <CardHeader className="flex flex-row items-center justify-between">
              <CardTitle>Services</CardTitle>
              <Badge variant="secondary" className="text-[10px] font-normal">
@@ -52,17 +83,35 @@ export default function Dashboard() {
            <CardContent>
              {data?.services.length ? (
                <div className="flex flex-wrap gap-1">
-                {data.services.map((s) => (
-                  <Badge
+                  {data.services.map((s, i) => (
+                    <motion.div
                      key={s.name}
+                      initial={{ opacity: 0, scale: 0.9 }}
+                      animate={{ opacity: 1, scale: 1 }}
+                      transition={{ duration: 0.25, delay: 0.1 + i * 0.03 }}
+                    >
+                      <Badge
                        variant="outline"
                        className="h-auto gap-1.5 px-2 py-1.5 text-xs font-normal"
                      >
-                    <span
+                        <motion.span
+                          animate={
+                            s.state === "running"
+                              ? {
+                                  opacity: [0.5, 1, 0.5],
+                                }
+                              : {}
+                          }
+                          transition={{
+                            repeat: Number.POSITIVE_INFINITY,
+                            duration: 2.5,
+                            ease: "easeInOut",
+                          }}
                          className={`h-1.5 w-1.5 shrink-0 rounded-full ${serviceIndicator(s.state)}`}
                        />
                        <span className="font-mono text-[10px]">{s.name}</span>
                      </Badge>
+                    </motion.div>
                  ))}
                </div>
              ) : (
@@ -72,9 +121,11 @@ export default function Dashboard() {
              )}
            </CardContent>
          </Card>
+        </motion.div>

        {/* Overview */}
-        <Card>
+        <motion.div variants={cardVariants}>
+          <Card className="h-full transition-shadow duration-300 hover:shadow-md hover:shadow-border/20">
            <CardHeader>
              <CardTitle>Overview</CardTitle>
            </CardHeader>
@@ -85,19 +136,25 @@ export default function Dashboard() {
                  label="Total"
                  color="text-blue-400"
                />
-              <StatBox value={running} label="Healthy" color="text-blue-400" />
+                <StatBox
+                  value={running}
+                  label="Healthy"
+                  color="text-green-400"
+                />
                <StatBox
                  value={data?.traces.length ?? 0}
                  label="Traces"
-                color="text-green-400"
+                  color="text-blue-400"
                />
                <StatBox value={0} label="Errors" color="text-red-400" />
              </div>
            </CardContent>
          </Card>
+        </motion.div>

        {/* Health */}
-        <Card>
+        <motion.div variants={cardVariants}>
+          <Card className="h-full transition-shadow duration-300 hover:shadow-md hover:shadow-border/20">
            <CardHeader>
              <CardTitle>Health</CardTitle>
            </CardHeader>
@@ -105,32 +162,38 @@ export default function Dashboard() {
              <Donut running={running} degraded={degraded} />
            </CardContent>
          </Card>
+        </motion.div>

        {/* Links */}
-        <Card>
+        <motion.div variants={cardVariants}>
+          <Card className="h-full transition-shadow duration-300 hover:shadow-md hover:shadow-border/20">
            <CardHeader>
              <CardTitle>Links</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="flex flex-wrap gap-1">
                {data?.links.map((l) => (
-                <a
+                  <motion.a
                    key={l.url}
                    href={l.url}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="rounded-md border border-border px-2 py-1 text-[10px] text-blue-400 no-underline transition-colors hover:border-blue-400 hover:bg-muted"
+                    whileHover={{ scale: 1.05, y: -1 }}
+                    whileTap={{ scale: 0.95 }}
                  >
                    {l.label}
-                </a>
+                  </motion.a>
                ))}
              </div>
            </CardContent>
          </Card>
+        </motion.div>

        {/* System Resources */}
        {hasNode && (
-          <Card>
+          <motion.div variants={cardVariants}>
+            <Card className="transition-shadow duration-300 hover:shadow-md hover:shadow-border/20">
              <CardHeader className="flex flex-row items-center justify-between">
                <CardTitle>System Resources</CardTitle>
                <Badge
@@ -164,11 +227,13 @@ export default function Dashboard() {
                </div>
              </CardContent>
            </Card>
+          </motion.div>
        )}

        {/* Request Rate */}
        {hasTraffik && (
-          <Card>
+          <motion.div variants={cardVariants}>
+            <Card className="transition-shadow duration-300 hover:shadow-md hover:shadow-border/20">
              <CardHeader className="flex flex-row items-center justify-between">
                <CardTitle>Request Rate</CardTitle>
                <Badge variant="secondary" className="text-[10px] font-normal">
@@ -181,11 +246,13 @@ export default function Dashboard() {
                <Sparkline data={data?.rps ?? []} color="#58a6ff" />
              </CardContent>
            </Card>
+          </motion.div>
        )}

        {/* Latency */}
        {hasTraffik && (
-          <Card>
+          <motion.div variants={cardVariants}>
+            <Card className="transition-shadow duration-300 hover:shadow-md hover:shadow-border/20">
              <CardHeader className="flex flex-row items-center justify-between">
                <CardTitle>Latency</CardTitle>
                <Badge variant="secondary" className="text-[10px] font-normal">
@@ -198,11 +265,13 @@ export default function Dashboard() {
                <Sparkline data={data?.latency ?? []} color="#bc8cff" />
              </CardContent>
            </Card>
+          </motion.div>
        )}

        {/* Error Rate */}
        {hasTraffik && (
-          <Card>
+          <motion.div variants={cardVariants}>
+            <Card className="transition-shadow duration-300 hover:shadow-md hover:shadow-border/20">
              <CardHeader className="flex flex-row items-center justify-between">
                <CardTitle>Error Rate</CardTitle>
                <Badge variant="secondary" className="text-[10px] font-normal">
@@ -215,10 +284,12 @@ export default function Dashboard() {
                <Sparkline data={data?.errors ?? []} color="#f85149" />
              </CardContent>
            </Card>
+          </motion.div>
        )}

        {/* Trace Volume */}
-        <Card>
+        <motion.div variants={cardVariants}>
+          <Card className="transition-shadow duration-300 hover:shadow-md hover:shadow-border/20">
            <CardHeader className="flex flex-row items-center justify-between">
              <CardTitle>Trace Volume</CardTitle>
              <Badge variant="secondary" className="text-[10px] font-normal">
@@ -229,9 +300,11 @@ export default function Dashboard() {
              <Sparkline data={data?.traceVolume ?? []} color="#3fb950" />
            </CardContent>
          </Card>
+        </motion.div>

        {/* Recent Traces */}
-        <Card className="2xl:col-span-2">
+        <motion.div variants={cardVariants} className="2xl:col-span-2">
+          <Card className="transition-shadow duration-300 hover:shadow-md hover:shadow-border/20">
            <CardHeader className="flex flex-row items-center justify-between">
              <CardTitle>Recent Traces</CardTitle>
              <Badge variant="secondary" className="text-[10px] font-normal">
@@ -242,8 +315,12 @@ export default function Dashboard() {
              {data?.traces.length ? (
                <ul className="list-none">
                  {data.traces.map((t, i) => (
-                  <li
+                    <motion.li
+                      // biome-ignore lint/suspicious/noArrayIndexKey: trace data has no unique id
                      key={`${t.service}-${t.operation}-${i}`}
+                      initial={{ opacity: 0, x: -8 }}
+                      animate={{ opacity: 1, x: 0 }}
+                      transition={{ duration: 0.3, delay: 0.1 + i * 0.04 }}
                      className="flex items-center justify-between gap-1.5 border-b border-border py-1.5 text-[11px] last:border-0"
                    >
                      <div className="min-w-0">
@@ -258,22 +335,31 @@ export default function Dashboard() {
                        </span>
                        <span>{t.spans}</span>
                        {t.hasError && (
-                        <span className="rounded-sm bg-red-500/10 px-1.5 py-0.5 text-[9px] text-red-500">
+                          <motion.span
+                            className="rounded-sm bg-red-500/10 px-1.5 py-0.5 text-[9px] text-red-500"
+                            animate={{ opacity: [0.7, 1, 0.7] }}
+                            transition={{
+                              repeat: Number.POSITIVE_INFINITY,
+                              duration: 2,
+                            }}
+                          >
                            err
-                        </span>
+                          </motion.span>
                        )}
                      </div>
-                  </li>
+                    </motion.li>
                  ))}
                </ul>
              ) : (
                <p className="py-4 text-center text-[11px] text-muted-foreground">
-                No traces &mdash; data appears once services send OTel telemetry
+                  No traces &mdash; data appears once services send OTel
+                  telemetry
                </p>
              )}
            </CardContent>
          </Card>
-      </div>
+        </motion.div>
+      </motion.div>
    </div>
  );
 }
@@ -288,13 +374,21 @@ function StatBox({
  color: string;
 }) {
  return (
-    <div className="rounded-lg bg-muted/50 p-2.5 text-center">
+    <motion.div
+      className="rounded-lg bg-muted/50 p-2.5 text-center transition-colors duration-300 hover:bg-muted/80"
+      whileHover={{ y: -2 }}
+      transition={{ duration: 0.2 }}
+    >
      <div className={`font-mono text-lg font-bold leading-tight ${color}`}>
-        {value ?? "-"}
+        {typeof value === "number" ? (
+          <AnimatedNumber value={value} />
+        ) : (
+          (value ?? "-")
+        )}
      </div>
      <p className="mt-0.5 text-[10px] uppercase tracking-wider text-muted-foreground">
        {label}
      </p>
-    </div>
+    </motion.div>
  );
 }
@@ -46,6 +46,75 @@
  --radius-2xl: calc(var(--radius) * 1.8);
  --radius-3xl: calc(var(--radius) * 2.2);
  --radius-4xl: calc(var(--radius) * 2.6);
+
+  /* ── Custom keyframes ── */
+  @keyframes shimmer {
+    0% {
+      background-position: 200% 0;
+    }
+    100% {
+      background-position: -200% 0;
+    }
+  }
+
+  @keyframes glow-pulse {
+    0%,
+    100% {
+      box-shadow: 0 0 6px oklch(0.7 0.15 75 / 0.15);
+    }
+    50% {
+      box-shadow: 0 0 18px oklch(0.7 0.15 75 / 0.3);
+    }
+  }
+
+  @keyframes gradient-shift {
+    0% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
+    100% {
+      background-position: 0% 50%;
+    }
+  }
+
+  @keyframes float {
+    0%,
+    100% {
+      transform: translateY(0px);
+    }
+    50% {
+      transform: translateY(-6px);
+    }
+  }
+
+  @keyframes breathe {
+    0%,
+    100% {
+      opacity: 0.6;
+    }
+    50% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes border-glow {
+    0%,
+    100% {
+      border-color: var(--border);
+    }
+    50% {
+      border-color: oklch(0.7 0.15 75 / 0.4);
+    }
+  }
+
+  --animate-shimmer: shimmer 2.5s ease-in-out infinite;
+  --animate-glow-pulse: glow-pulse 3s ease-in-out infinite;
+  --animate-gradient-shift: gradient-shift 8s ease infinite;
+  --animate-float: float 4s ease-in-out infinite;
+  --animate-breathe: breathe 3s ease-in-out infinite;
+  --animate-border-glow: border-glow 3s ease-in-out infinite;
 }

 :root {
@@ -125,11 +194,65 @@
    @apply bg-background text-foreground;
  }
  html {
-    @apply font-sans;
+    @apply font-sans scroll-smooth;
  }
 }

-/* Signature: glowing "server LED" focus ring */
+/* ── Custom utilities ── */
+
+/* Glass card effect */
+.glass {
+  @apply bg-background/60 backdrop-blur-2xl border border-border/50 shadow-lg shadow-black/5;
+}
+
+/* Gradient text */
+.gradient-text {
+  @apply bg-gradient-to-r from-primary via-accent to-chart-3 bg-clip-text text-transparent bg-[length:200%_100%] animate-gradient-shift;
+}
+
+/* Subtle grid background for hero */
+.bg-grid {
+  background-image: linear-gradient(
+      oklch(0.5 0.02 265 / 0.04) 1px,
+      transparent 1px
+    ),
+    linear-gradient(90deg, oklch(0.5 0.02 265 / 0.04) 1px, transparent 1px);
+  background-size: 40px 40px;
+}
+
+.dark .bg-grid {
+  background-image: linear-gradient(
+      oklch(0.9 0.02 85 / 0.03) 1px,
+      transparent 1px
+    ),
+    linear-gradient(90deg, oklch(0.9 0.02 85 / 0.03) 1px, transparent 1px);
+}
+
+/* Glow accent ring */
+.glow-ring {
+  box-shadow: 0 0 12px oklch(0.7 0.15 75 / 0.15),
+    0 0 0 1px oklch(0.7 0.15 75 / 0.2);
+}
+
+/* ── Terminal cursor blink ── */
+.terminal-cursor::after {
+  content: "▊";
+  animation: blink 1s step-end infinite;
+  margin-left: 2px;
+  @apply text-primary;
+}
+
+@keyframes blink {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+}
+
+/* ── Focus ring glow ── */
 .dark *:focus-visible {
  @apply ring-[3px];
  outline: none;
@@ -141,3 +264,36 @@ html:not(.dark) *:focus-visible {
  @apply ring-[3px];
  outline: none;
 }
+
+/* ── Selection ── */
+::selection {
+  background-color: oklch(0.7 0.15 75 / 0.25);
+}
+
+/* ── Scrollbar ── */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: oklch(0.5 0.02 265 / 0.2);
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: oklch(0.5 0.02 265 / 0.35);
+}
+
+/* ── Reduced motion ── */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms;
+    animation-iteration-count: 1;
+    transition-duration: 0.01ms;
+    scroll-behavior: auto;
+  }
+}
@@ -1,3 +1,6 @@
+"use client";
+
+import { motion } from "framer-motion";
 import {
  ArrowRight,
  Container,
@@ -13,6 +16,13 @@ import {
 import { Badge } from "@/components/ui/badge";
 import { buttonVariants } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  MotionItem,
+  Reveal,
+  ScaleReveal,
+  StaggerContainer,
+  Typewriter,
+} from "@/components/ui/motion-primitives";
 import { cn } from "@/lib/utils";

 // ponytail: static data, fine for a personal portfolio. Move to CMS/content layer if > 50 items.
@@ -51,44 +61,95 @@ const techTags = [
 export default function Home() {
  return (
    <div className="flex flex-1 flex-col">
-      {/* Hero — terminal-inspired */}
+      {/* ── Hero — terminal-inspired ── */}
      <section className="relative flex flex-col items-center justify-center overflow-hidden px-6 py-28 text-center sm:py-36">
-        <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_center,oklch(0.45_0.13_265_/_0.06)_0%,transparent_70%)] dark:bg-[radial-gradient(ellipse_at_center,oklch(0.7_0.15_75_/_0.06)_0%,transparent_70%)]" />
+        {/* Animated gradient background */}
+        <motion.div
+          className="pointer-events-none absolute inset-0 bg-grid"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 1 }}
+        />
+        <motion.div
+          className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_center,oklch(0.45_0.13_265_/_0.06)_0%,transparent_70%)] dark:bg-[radial-gradient(ellipse_at_center,oklch(0.7_0.15_75_/_0.06)_0%,transparent_70%)]"
+          initial={{ opacity: 0, scale: 0.8 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ duration: 1.2, ease: [0.25, 0.1, 0, 1] as const }}
+        />
+
        <div className="relative">
-          <p className="mb-2 font-mono text-xs text-muted-foreground">
+          <motion.p
+            className="mb-2 font-mono text-xs text-muted-foreground"
+            initial={{ opacity: 0, y: -10 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.4, delay: 0.1 }}
+          >
            <span className="text-primary dark:text-primary">~</span> whoami
-          </p>
-          <h1 className="font-mono text-3xl font-bold tracking-tight sm:text-5xl">
-            <span className="text-muted-foreground">$ </span>
-            Asep Haryana Saputra
-            <span className="inline-block size-2.5 animate-pulse bg-foreground ml-1 rounded-none" />
-          </h1>
-          <p className="mx-auto mt-3 max-w-lg font-mono text-xs text-muted-foreground sm:text-sm">
+          </motion.p>
+          <motion.h1
+            className="font-mono text-3xl font-bold tracking-tight sm:text-5xl"
+            initial={{ y: 16 }}
+            animate={{ y: 0 }}
+            transition={{ duration: 0.5, delay: 0.2, ease: [0.25, 0.1, 0, 1] as const }}
+          >
+            <span className="text-muted-foreground">$&nbsp;</span>
+            <Typewriter
+              text="Asep Haryana Saputra"
+              className="gradient-text font-mono"
+              speed={0.045}
+              startDelay={200}
+            />
+          </motion.h1>
+          <motion.p
+            className="mx-auto mt-3 max-w-lg font-mono text-xs text-muted-foreground sm:text-sm"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.6, delay: 0.4 }}
+          >
            <span className="text-muted-foreground/50"># </span>
            Teknik Informatika student exploring backend systems, distributed
            infrastructure, and DevOps — still learning, still building.
-          </p>
+          </motion.p>
        </div>
-        <div className="relative mt-10 flex flex-wrap items-center justify-center gap-3">
-          <a href="#projects" className={cn(buttonVariants({ size: "lg" }))}>
+
+        <motion.div
+          className="relative mt-10 flex flex-wrap items-center justify-center gap-3"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, delay: 0.6 }}
+        >
+          <motion.a
+            href="#projects"
+            className={cn(buttonVariants({ size: "lg" }))}
+            whileHover={{ scale: 1.03 }}
+            whileTap={{ scale: 0.97 }}
+          >
            View Projects
+            <motion.span
+              animate={{ x: [0, 4, 0] }}
+              transition={{ repeat: Number.POSITIVE_INFINITY, duration: 2 }}
+            >
              <ArrowRight className="size-4" />
-          </a>
-          <a
+            </motion.span>
+          </motion.a>
+          <motion.a
            href="https://github.com/asepharyana"
            target="_blank"
            rel="noopener noreferrer"
            className={cn(buttonVariants({ variant: "outline", size: "lg" }))}
+            whileHover={{ scale: 1.03 }}
+            whileTap={{ scale: 0.97 }}
          >
            GitHub
            <ExternalLink className="size-4" />
-          </a>
-        </div>
+          </motion.a>
+        </motion.div>
      </section>

-      {/* Content — staggered sections with alternating visual weight */}
-      <section className="mx-auto flex w-full max-w-3xl flex-col gap-12 px-6 pb-28">
-        {/* About — minimal, just text */}
+      {/* ── Content — staggered sections ── */}
+      <div className="mx-auto flex w-full max-w-3xl flex-col gap-12 px-6 pb-28">
+        {/* About */}
+        <Reveal>
          <div>
            <p className="mb-2 font-mono text-xs text-muted-foreground">
              <span className="text-primary dark:text-primary">~</span> about
@@ -97,59 +158,83 @@ export default function Home() {
              <p>
                I&rsquo;m a Teknik Informatika student passionate about backend
                engineering, distributed systems, and infrastructure. I spend my
-              time building RESTful APIs, learning container orchestration with
-              Docker &amp; Traefik, and exploring observability with
+                time building RESTful APIs, learning container orchestration
+                with Docker &amp; Traefik, and exploring observability with
                OpenTelemetry &amp; Jaeger.
              </p>
              <p>
-              I was the Back-End lead on the ZeaVis Edu capstone team (&ldquo;AI
+                I contributed to the ZeaVis Edu capstone team (&ldquo;AI
                for Smart Education&rdquo; by Pijak &times; IBM SkillsBuild), a
-              5-person team with task division across Back-End, Front-End, and
-              Machine Learning. I handled the system architecture, API design,
-              RESTful API development, and Docker deployment on VPS.
+                5-person team where we divided tasks across Back-End, Front-End,
+                and Machine Learning. I worked on the system architecture, API
+                design, RESTful API development, and Docker deployment on VPS.
              </p>
            </div>
          </div>
+        </Reveal>

-        {/* Skills & Tools — grid */}
+        {/* Skills & Tools */}
+        <Reveal>
          <div>
            <p className="mb-2 font-mono text-xs text-muted-foreground">
              <span className="text-primary dark:text-primary">~</span> skills
            </p>
-          <div className="mb-4 grid grid-cols-1 gap-2 sm:grid-cols-2">
+            <StaggerContainer className="mb-4 grid grid-cols-1 gap-2 sm:grid-cols-2">
              {skills.map((s) => {
                const Icon = s.icon;
                return (
-                <div
-                  key={s.label}
-                  className="flex items-center gap-3 rounded-lg border border-border bg-card px-3.5 py-2.5 text-sm"
+                  <MotionItem key={s.label}>
+                    <motion.div
+                      className="flex items-center gap-3 rounded-lg border border-border bg-card px-3.5 py-2.5 text-sm transition-all duration-300"
+                      whileHover={{
+                        y: -2,
+                        borderColor: "var(--ring)",
+                        boxShadow: "0 4px 14px oklch(0 0 0 / 0.08)",
+                      }}
                    >
                      <Icon className="size-4 shrink-0 text-primary dark:text-primary" />
                      <span>{s.label}</span>
-                </div>
+                    </motion.div>
+                  </MotionItem>
                );
              })}
-          </div>
-          <div className="flex flex-wrap gap-1.5">
+            </StaggerContainer>
+            <StaggerContainer staggerVariants={{ hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.03, delayChildren: 0.1 } } }} className="flex flex-wrap gap-1.5">
              {techTags.map((t) => (
+                <MotionItem key={t}>
+                  <motion.span
+                    whileHover={{ scale: 1.05, y: -1 }}
+                    whileTap={{ scale: 0.95 }}
+                  >
                    <Badge
-                key={t}
                      variant="outline"
-                className="text-[11px] font-normal"
+                      className="text-[11px] font-normal transition-all duration-300 hover:border-primary/30 hover:bg-primary/5"
                    >
                      {t}
                    </Badge>
+                  </motion.span>
+                </MotionItem>
              ))}
+            </StaggerContainer>
          </div>
-        </div>
+        </Reveal>

-        {/* Featured Project — elevated */}
+        {/* Featured Project */}
+        <Reveal>
          <div id="projects" className="scroll-mt-24">
            <p className="mb-2 font-mono text-xs text-muted-foreground">
              <span className="text-primary dark:text-primary">~</span> featured
              project
            </p>
-          <Card className="relative overflow-hidden">
+            <ScaleReveal>
+              <motion.div
+                whileHover={{ y: -4 }}
+                transition={{ duration: 0.25, ease: "easeOut" }}
+              >
+                <Card className="relative overflow-hidden border-primary/10 transition-all duration-300 hover:border-primary/30 hover:shadow-lg hover:shadow-primary/5">
+                  {/* Gradient border accent */}
+                  <div className="pointer-events-none absolute inset-x-0 top-0 h-[2px] bg-gradient-to-r from-primary/0 via-primary/50 to-primary/0" />
+
                  <CardHeader>
                    <div className="flex items-start justify-between gap-4">
                      <div>
@@ -160,28 +245,32 @@ export default function Home() {
                        </p>
                      </div>
                      <div className="flex shrink-0 gap-2">
-                  <a
+                        <motion.a
                          href="https://zeavisedu.asepharyana.my.id/"
                          target="_blank"
                          rel="noopener noreferrer"
                          className={cn(
                            buttonVariants({ variant: "outline", size: "sm" }),
                          )}
+                          whileHover={{ scale: 1.05 }}
+                          whileTap={{ scale: 0.95 }}
                        >
                          <ExternalLink className="size-3.5" />
                          Live
-                  </a>
-                  <a
+                        </motion.a>
+                        <motion.a
                          href="https://github.com/ATLAS-PJK-GM007/ZeaVis-Edu"
                          target="_blank"
                          rel="noopener noreferrer"
                          className={cn(
                            buttonVariants({ variant: "outline", size: "sm" }),
                          )}
+                          whileHover={{ scale: 1.05 }}
+                          whileTap={{ scale: 0.95 }}
                        >
                          <GitFork className="size-3.5" />
                          Source
-                  </a>
+                        </motion.a>
                      </div>
                    </div>
                  </CardHeader>
@@ -194,7 +283,14 @@ export default function Home() {
                    </p>

                    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-                <div className="rounded-lg border border-border bg-muted/30 p-3">
+                      <motion.div
+                        className="rounded-lg border border-border bg-muted/30 p-3 transition-all duration-300"
+                        whileHover={{
+                          y: -2,
+                          borderColor: "var(--ring)",
+                          backgroundColor: "oklch(0.7 0.15 75 / 0.04)",
+                        }}
+                      >
                        <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-foreground">
                          What it does
                        </p>
@@ -206,8 +302,15 @@ export default function Home() {
                          </li>
                          <li>Get treatment &amp; prevention recommendations</li>
                        </ul>
-                </div>
-                <div className="rounded-lg border border-border bg-muted/30 p-3">
+                      </motion.div>
+                      <motion.div
+                        className="rounded-lg border border-border bg-muted/30 p-3 transition-all duration-300"
+                        whileHover={{
+                          y: -2,
+                          borderColor: "var(--ring)",
+                          backgroundColor: "oklch(0.7 0.15 75 / 0.04)",
+                        }}
+                      >
                        <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-foreground">
                          My role
                        </p>
@@ -219,10 +322,13 @@ export default function Home() {
                            Docker deployment on VPS with Traefik &amp; Tailscale
                          </li>
                        </ul>
-                </div>
+                      </motion.div>
                    </div>

-              <div className="mt-4 flex flex-wrap gap-1.5">
+                    <StaggerContainer
+                      staggerVariants={{ hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.03 } } }}
+                      className="mt-4 flex flex-wrap gap-1.5"
+                    >
                      {[
                        "React",
                        "TypeScript",
@@ -239,21 +345,37 @@ export default function Home() {
                        "Docker",
                        "Traefik",
                      ].map((t) => (
+                        <MotionItem key={t}>
+                          <motion.span
+                            whileHover={{ scale: 1.05, y: -1 }}
+                            whileTap={{ scale: 0.95 }}
+                          >
                            <Badge
-                    key={t}
                              variant="secondary"
                              className="text-[10px] font-normal"
                            >
                              {t}
                            </Badge>
+                          </motion.span>
+                        </MotionItem>
                      ))}
-              </div>
+                    </StaggerContainer>
                  </CardContent>
                </Card>
+              </motion.div>
+            </ScaleReveal>
          </div>
+        </Reveal>

-        {/* Infrastructure CTA — clean card */}
-        <Card className="text-center">
+        {/* Infrastructure CTA */}
+        <Reveal>
+          <ScaleReveal>
+            <motion.div
+              whileHover={{ y: -3 }}
+              transition={{ duration: 0.25 }}
+            >
+              <Card className="relative overflow-hidden border-primary/10 text-center transition-all duration-300 hover:border-primary/30 hover:shadow-lg hover:shadow-primary/5">
+                <div className="pointer-events-none absolute inset-x-0 top-0 h-[2px] bg-gradient-to-r from-primary/0 via-primary/50 to-primary/0" />
                <CardContent className="flex flex-col items-center gap-4 py-10">
                  <p className="text-base font-medium">
                    This site doubles as a live infrastructure monitor.
@@ -263,28 +385,43 @@ export default function Home() {
                    Prometheus system resources, and Jaeger traces — all running on my
                    VPS deployment.
                  </p>
-            <a href="/dashboard" className={cn(buttonVariants())}>
+                  <motion.a
+                    href="/dashboard"
+                    className={cn(buttonVariants())}
+                    whileHover={{ scale: 1.04 }}
+                    whileTap={{ scale: 0.96 }}
+                  >
                    Live Dashboard
                    <ArrowRight className="size-4" />
-            </a>
+                  </motion.a>
                </CardContent>
              </Card>
-      </section>
+            </motion.div>
+          </ScaleReveal>
+        </Reveal>
+      </div>

      {/* Footer */}
-      <footer className="mt-auto border-t py-6 text-center text-xs text-muted-foreground">
+      <motion.footer
+        className="mt-auto border-t py-6 text-center text-xs text-muted-foreground"
+        initial={{ opacity: 0 }}
+        whileInView={{ opacity: 1 }}
+        viewport={{ once: true }}
+        transition={{ duration: 0.5 }}
+      >
        <p>
          &copy; {new Date().getFullYear()} Asep Haryana Saputra &mdash;{" "}
-          <a
+          <motion.a
            href="https://github.com/asepharyana"
            target="_blank"
            rel="noopener noreferrer"
            className="underline underline-offset-2 hover:text-foreground"
+            whileHover={{ color: "var(--primary)" }}
          >
            GitHub
-          </a>
+          </motion.a>
        </p>
-      </footer>
+      </motion.footer>
    </div>
  );
 }
@@ -1,3 +1,6 @@
+"use client";
+
+import { motion } from "framer-motion";
 import { NoData } from "./no-data";

 export function Donut({
@@ -21,19 +24,24 @@ export function Donut({

  let off = 0;
  return (
-    <svg
+    <motion.svg
      width={200}
      height={210}
      viewBox="0 0 200 210"
      role="img"
      aria-label="Service health donut chart"
+      initial={{ opacity: 0, scale: 0.85 }}
+      animate={{ opacity: 1, scale: 1 }}
+      transition={{ duration: 0.5, ease: [0.25, 0.1, 0, 1] }}
    >
      {segs.map((s) => {
        if (!s.n) return null;
        const frac = s.n / total;
        const ln = frac * circ;
-        const el = (
-          <circle
+        const dashOffset = -off;
+        off += ln;
+        return (
+          <motion.circle
            key={s.l}
            cx={cx}
            cy={cy}
@@ -42,24 +50,31 @@ export function Donut({
            stroke={s.c}
            strokeWidth={14}
            strokeDasharray={`${ln} ${circ - ln}`}
-            strokeDashoffset={-off}
+            strokeDashoffset={dashOffset}
            transform={`rotate(-90 ${cx} ${cy})`}
+            initial={{ pathLength: 0 }}
+            animate={{ pathLength: 1 }}
+            transition={{ duration: 1, delay: 0.2, ease: [0.25, 0.1, 0, 1] }}
+            strokeLinecap="round"
          />
        );
-        off += ln;
-        return el;
      })}
-      <text
+      {/* Center total number */}
+      <motion.text
        x={cx}
        y={cy - 4}
        textAnchor="middle"
-        fill="#e6edf3"
+        fill="currentColor"
+        className="fill-foreground"
        fontSize={26}
        fontWeight={700}
        fontFamily="system-ui,sans-serif"
+        initial={{ opacity: 0, y: 8 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.4, delay: 0.6 }}
      >
        {total}
-      </text>
+      </motion.text>
      <text
        x={cx}
        y={cy + 14}
@@ -68,13 +83,30 @@ export function Donut({
        fontSize={10}
        fontFamily="system-ui,sans-serif"
      >
-        total
+        services
      </text>
      {segs
        .filter((s) => s.n)
        .map((s, i) => (
-          <g key={s.l}>
-            <circle cx={16} cy={165 + i * 16} r={4} fill={s.c} />
+          <motion.g
+            key={s.l}
+            initial={{ opacity: 0, x: -10 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.4, delay: 0.8 + i * 0.15 }}
+          >
+            <motion.circle
+              cx={16}
+              cy={165 + i * 16}
+              r={4}
+              fill={s.c}
+              animate={{ scale: [1, 1.2, 1] }}
+              transition={{
+                repeat: Number.POSITIVE_INFINITY,
+                duration: 2,
+                delay: i * 0.5,
+                ease: "easeInOut",
+              }}
+            />
            <text
              x={26}
              y={168 + i * 16}
@@ -84,8 +116,8 @@ export function Donut({
            >
              {s.l}: {s.n}
            </text>
-          </g>
+          </motion.g>
        ))}
-    </svg>
+    </motion.svg>
  );
 }
@@ -1,3 +1,6 @@
+"use client";
+
+import { motion } from "framer-motion";
 import { NoData } from "./no-data";

 const W = 220;
@@ -22,16 +25,22 @@ export function Gauge({
  const fw = BW * Math.min(pct / 100, 1);

  return (
-    <svg
+    <motion.svg
      width={W}
      height={H}
      viewBox={`0 0 ${W} ${H}`}
      role="img"
      aria-label={`${label}: ${pct.toFixed(1)}${unit}`}
+      initial={{ opacity: 0, y: 12 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.4, ease: [0.25, 0.1, 0, 1] }}
    >
+      {/* Track */}
      <rect x={BX} y={BY} width={BW} height={BH} rx={7} ry={7} fill="#1c2333" />
+
+      {/* Filled bar */}
      {fw > 0 && (
-        <rect
+        <motion.rect
          x={BX}
          y={BY}
          width={fw}
@@ -40,9 +49,14 @@ export function Gauge({
          ry={7}
          fill={color}
          opacity={0.85}
+          initial={{ scaleX: 0, transformOrigin: "left" }}
+          animate={{ scaleX: 1, transformOrigin: "left" }}
+          transition={{ duration: 0.8, delay: 0.15, ease: [0.25, 0.1, 0, 1] }}
        />
      )}
-      <text
+
+      {/* Label */}
+      <motion.text
        x={W / 2}
        y={14}
        textAnchor="middle"
@@ -50,10 +64,15 @@ export function Gauge({
        fontSize={11}
        fontWeight={600}
        fill={color}
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.3, delay: 0.3 }}
      >
        {label}
-      </text>
-      <text
+      </motion.text>
+
+      {/* Value */}
+      <motion.text
        x={W / 2}
        y={BY + BH + 24}
        textAnchor="middle"
@@ -61,10 +80,13 @@ export function Gauge({
        fontSize={14}
        fontWeight={700}
        fill="#e6edf3"
+        initial={{ opacity: 0, y: 6 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.4, delay: 0.5 }}
      >
        {pct.toFixed(1)}
        {unit}
-      </text>
-    </svg>
+      </motion.text>
+    </motion.svg>
  );
 }
@@ -1,11 +1,13 @@
 "use client";

+import { motion } from "framer-motion";
 import { Moon, Sun } from "lucide-react";
 import { useTheme } from "next-themes";
 import { useEffect, useState } from "react";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import type { DashboardData } from "@/lib/dashboard/types";
+import { springGentle } from "@/lib/motion";

 export function DashboardHeader() {
  const [degraded, setDegraded] = useState(0);
@@ -46,19 +48,42 @@ export function DashboardHeader() {
    return () => clearInterval(id);
  }, []);

+  const isHealthy = total > 0 && degraded === 0;
+  const hasIssues = degraded > 0;
+
  return (
-    <header className="sticky top-0 z-50 flex items-center justify-between gap-2 border-b bg-background/90 px-5 py-3 backdrop-blur-xl">
-      <a href="/" className="flex items-center gap-2.5">
+    <motion.header
+      initial={{ y: -20, opacity: 0 }}
+      animate={{ y: 0, opacity: 1 }}
+      transition={{ duration: 0.4, ease: [0.25, 0.1, 0, 1] }}
+      className="sticky top-0 z-50 flex items-center justify-between gap-2 border-b bg-background/80 px-5 py-3 backdrop-blur-2xl supports-backdrop-filter:bg-background/60"
+    >
+      <motion.a
+        href="/"
+        className="flex items-center gap-2.5"
+        whileHover={{ x: 2 }}
+        transition={{ duration: 0.2 }}
+      >
        <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-foreground text-xs font-bold text-background">
          AH
        </span>
        <h1 className="text-base font-semibold">Asep Haryana</h1>
-      </a>
+      </motion.a>
      <div className="flex items-center gap-2.5">
+        <motion.div
+          animate={
+            hasIssues
+              ? {
+                  scale: [1, 1.02, 1],
+                  transition: { repeat: Number.POSITIVE_INFINITY, duration: 3 },
+                }
+              : {}
+          }
+        >
          <Badge
            variant="outline"
            className={`h-auto gap-1.5 rounded-full px-3 py-1 text-xs font-medium ${
-            degraded > 0
+              hasIssues
                ? "border-amber-500/30 bg-amber-900/20 text-amber-500"
                : total > 0
                  ? "border-emerald-500/30 bg-emerald-900/20 text-emerald-400"
@@ -66,18 +91,33 @@ export function DashboardHeader() {
            }`}
          >
            {total > 0 && (
-            <span
+              <motion.span
+                animate={{
+                  scale: [1, 1.3, 1],
+                  opacity: [0.7, 1, 0.7],
+                }}
+                transition={{
+                  repeat: Number.POSITIVE_INFINITY,
+                  duration: isHealthy ? 2.5 : 1.5,
+                  ease: "easeInOut",
+                }}
                className={`h-1.5 w-1.5 rounded-full ${
-                degraded > 0 ? "bg-amber-500" : "bg-emerald-400"
+                  hasIssues ? "bg-amber-500" : "bg-emerald-400"
                }`}
              />
            )}
            {total === 0
              ? "No services"
-            : degraded > 0
+              : hasIssues
                ? `${degraded} degraded`
                : "All Systems Operational"}
          </Badge>
+        </motion.div>
+        <motion.div
+          whileHover={{ rotate: 30 }}
+          whileTap={{ rotate: 60, scale: 0.9 }}
+          transition={springGentle}
+        >
          <Button
            variant="ghost"
            size="icon-xs"
@@ -87,8 +127,17 @@ export function DashboardHeader() {
            <Sun className="hidden dark:block!" />
            <Moon className="block dark:hidden!" />
          </Button>
-        <span className="text-[10px] text-muted-foreground">{time}</span>
+        </motion.div>
+        <motion.span
+          key={time}
+          initial={{ opacity: 0.6, y: -2 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.2 }}
+          className="text-[10px] tabular-nums text-muted-foreground"
+        >
+          {time}
+        </motion.span>
      </div>
-    </header>
+    </motion.header>
  );
 }
@@ -1,22 +1,32 @@
+"use client";
+
+import { motion } from "framer-motion";
+
 export function NoData() {
  return (
-    <svg
+    <motion.svg
      width={200}
      height={100}
      viewBox="0 0 200 100"
      role="img"
      aria-label="No data available"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.4 }}
    >
-      <text
+      <motion.text
        x={100}
        y={50}
        textAnchor="middle"
        fill="#6e7681"
        fontSize={12}
        fontFamily="system-ui,sans-serif"
+        initial={{ opacity: 0, y: 6 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.4 }}
      >
        No data
-      </text>
-    </svg>
+      </motion.text>
+    </motion.svg>
  );
 }
@@ -1,3 +1,6 @@
+"use client";
+
+import { motion } from "framer-motion";
 import { NoData } from "./no-data";

 const W = 300;
@@ -73,25 +76,59 @@ export function Sparkline({ data, color }: { data: number[]; color: string }) {
  const area = `M${PL},${PT + VH} L${pts} L${PL + VW},${PT + VH} Z`;
  const lv = data[data.length - 1];
  const ly = PT + VH * (1 - lv / maxV);
+  const d = `M${pts}`;

  return (
-    <svg
+    <motion.svg
      width={W}
      height={H}
      viewBox={`0 0 ${W} ${H}`}
      role="img"
      aria-label="Sparkline chart"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.4 }}
    >
      {gridLines(maxV)}
-      <path d={area} fill={color} opacity={0.15} />
-      <polyline
-        points={pts}
+
+      {/* Area fill */}
+      <motion.path
+        d={area}
+        fill={color}
+        opacity={0.15}
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 0.15 }}
+        transition={{ duration: 0.6, delay: 0.1 }}
+      />
+
+      {/* Animated line path */}
+      {data.length > 1 && (
+        <motion.path
+          d={d}
          fill="none"
          stroke={color}
          strokeWidth={2}
          strokeLinejoin="round"
+          strokeLinecap="round"
+          initial={{ pathLength: 0 }}
+          animate={{ pathLength: 1 }}
+          transition={{ duration: 1.2, ease: [0.25, 0.1, 0, 1] }}
        />
-      <text
+      )}
+
+      {/* Endpoint dot */}
+      <motion.circle
+        cx={PL + VW}
+        cy={ly}
+        r={3}
+        fill={color}
+        initial={{ scale: 0, opacity: 0 }}
+        animate={{ scale: 1, opacity: 1 }}
+        transition={{ duration: 0.3, delay: 1.0 }}
+      />
+
+      {/* Endpoint value label */}
+      <motion.text
        x={PL + VW}
        y={ly - 10}
        textAnchor="end"
@@ -99,10 +136,14 @@ export function Sparkline({ data, color }: { data: number[]; color: string }) {
        fontSize={11}
        fontWeight={600}
        fontFamily="system-ui,sans-serif"
+        initial={{ opacity: 0, y: 4 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.3, delay: 1.1 }}
      >
        {lv.toFixed(1)}
-      </text>
+      </motion.text>
+
      {xAxisLabels(data.length)}
-    </svg>
+    </motion.svg>
  );
 }
@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";

 const badgeVariants = cva(
-  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all duration-300 ease-out focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
  {
    variants: {
      variant: {
@@ -8,7 +8,8 @@ const buttonVariants = cva(
  {
    variants: {
      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        default:
+          "bg-primary text-primary-foreground hover:bg-primary/80 shadow-xs hover:shadow-sm hover:shadow-primary/20",
        outline:
          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
        secondary:
@@ -12,7 +12,7 @@ function Card({
      data-slot="card"
      data-size={size}
      className={cn(
-        "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl border border-border bg-card py-(--card-spacing) text-sm text-card-foreground [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl border border-border bg-card py-(--card-spacing) text-sm text-card-foreground shadow-xs transition-all duration-300 ease-out hover:shadow-md hover:shadow-border/30 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
        className,
      )}
      {...props}
@@ -0,0 +1,270 @@
+"use client";
+
+import { type HTMLMotionProps, motion, type Variants } from "framer-motion";
+import type React from "react";
+import { useEffect, useState } from "react";
+
+import { fadeInUp, scaleInSpring, stagger } from "@/lib/motion";
+import { cn } from "@/lib/utils";
+
+// ─── Viewport-based reveal wrapper ───────────────────────────
+
+type RevealProps = HTMLMotionProps<"div"> & {
+  variants?: Variants;
+  once?: boolean;
+  amount?: number | "some" | "all";
+};
+
+/**
+ * Wraps children in a fade-in-up animation triggered when they enter the viewport.
+ * Use `asChild` composition or nest directly — children receive no special bindings.
+ */
+export function Reveal({
+  children,
+  className,
+  variants = fadeInUp,
+  once = true,
+  amount = 0.2,
+  ...props
+}: RevealProps) {
+  return (
+    <motion.div
+      initial="hidden"
+      whileInView="visible"
+      viewport={{ once, amount }}
+      variants={variants}
+      className={className}
+      {...props}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
+// ─── Stagger container ───────────────────────────────────────
+
+type StaggerContainerProps = HTMLMotionProps<"div"> & {
+  staggerVariants?: Variants;
+  once?: boolean;
+};
+
+/**
+ * Parent container that staggers child `motion` elements.
+ * Children should have matching `variants` (e.g. `fadeInUp`).
+ */
+export function StaggerContainer({
+  children,
+  className,
+  staggerVariants = stagger,
+  once = true,
+  ...props
+}: StaggerContainerProps) {
+  return (
+    <motion.div
+      initial="hidden"
+      whileInView="visible"
+      viewport={{ once, amount: 0.1 }}
+      variants={staggerVariants}
+      className={className}
+      {...props}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
+// ─── Single-item child with fadeInUp ─────────────────────────
+
+type MotionItemProps = HTMLMotionProps<"div"> & { index?: number };
+
+/**
+ * A single motion item meant to be used as a child of StaggerContainer.
+ * Wraps content in a `motion.div` with fadeInUp variants.
+ */
+export function MotionItem({ children, className, ...props }: MotionItemProps) {
+  return (
+    <motion.div variants={fadeInUp} className={className} {...props}>
+      {children}
+    </motion.div>
+  );
+}
+
+// ─── Scale reveal (for cards, dialogs) ───────────────────────
+
+export function ScaleReveal({
+  children,
+  className,
+  ...props
+}: HTMLMotionProps<"div">) {
+  return (
+    <motion.div
+      initial="hidden"
+      whileInView="visible"
+      viewport={{ once: true, amount: 0.15 }}
+      variants={scaleInSpring}
+      className={className}
+      {...props}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
+// ─── Animated presence wrapper ───────────────────────────────
+
+/**
+ * Fades + scales content in/out for mount/unmount transitions.
+ */
+export function AnimatedPresence({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, scale: 0.96 }}
+      animate={{ opacity: 1, scale: 1 }}
+      exit={{ opacity: 0, scale: 0.96 }}
+      transition={{ duration: 0.25, ease: [0.25, 0.1, 0, 1] as const }}
+      className={className}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
+// ─── Animated number counter ─────────────────────────────────
+
+type AnimatedNumberProps = {
+  value: number;
+  decimals?: number;
+  duration?: number;
+  className?: string;
+};
+
+/**
+ * Animates from 0 to `value` on mount and when `value` changes.
+ */
+export function AnimatedNumber({
+  value,
+  decimals = 0,
+  duration: dur = 0.6,
+  className,
+}: AnimatedNumberProps) {
+  return (
+    <motion.span
+      key={value}
+      initial={{ opacity: 0, y: 12, filter: "blur(4px)" }}
+      animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
+      transition={{ duration: dur, ease: [0.25, 0.1, 0, 1] as const }}
+      className={cn("inline-block tabular-nums", className)}
+    >
+      {value.toFixed(decimals)}
+    </motion.span>
+  );
+}
+
+// ─── Animated text reveal (letter by letter) ─────────────────
+
+type TypewriterProps = {
+  text: string;
+  className?: string;
+  speed?: number;
+  /** Delay in ms before the first character appears */
+  startDelay?: number;
+  /** When true, shows a blinking cursor block while typing */
+  cursor?: boolean;
+};
+
+/**
+ * Reveals text one character at a time using progressive `setTimeout`.
+ * Characters are appended to a single text node so CSS gradient
+ * (`background-clip: text`) works seamlessly across the full string.
+ */
+export function Typewriter({
+  text,
+  className,
+  speed = 0.03,
+  startDelay = 250,
+  cursor: showCursor = true,
+}: TypewriterProps) {
+  const [displayed, setDisplayed] = useState("");
+  const done = displayed.length >= text.length;
+
+  useEffect(() => {
+    if (done) return;
+    const delay =
+      displayed.length === 0 ? startDelay : Math.round(speed * 1000);
+    const timer = setTimeout(
+      () => setDisplayed(text.slice(0, displayed.length + 1)),
+      delay,
+    );
+    return () => clearTimeout(timer);
+  }, [displayed, text, speed, startDelay, done]);
+
+  return (
+    <span className={className}>
+      {displayed}
+      {showCursor && !done && (
+        <span className="inline-block size-2.5 bg-primary ml-0.5 rounded-none align-text-bottom animate-pulse" />
+      )}
+    </span>
+  );
+}
+
+// ─── Blur-in reveal ──────────────────────────────────────────
+
+export function BlurReveal({
+  children,
+  className,
+  delay = 0,
+}: {
+  children: React.ReactNode;
+  className?: string;
+  delay?: number;
+}) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, filter: "blur(8px)" }}
+      whileInView={{ opacity: 1, filter: "blur(0px)" }}
+      viewport={{ once: true }}
+      transition={{ duration: 0.6, delay, ease: [0.25, 0.1, 0, 1] as const }}
+      className={className}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
+// ─── Interactive card wrapper ────────────────────────────────
+
+type InteractiveCardProps = HTMLMotionProps<"div"> & {
+  hoverScale?: number;
+};
+
+/**
+ * Card wrapper with subtle hover lift and glow.
+ */
+export function InteractiveCard({
+  children,
+  className,
+  hoverScale = 1.01,
+  ...props
+}: InteractiveCardProps) {
+  return (
+    <motion.div
+      whileHover={{
+        y: -3,
+        scale: hoverScale,
+        transition: { duration: 0.2, ease: "easeOut" },
+      }}
+      whileTap={{ y: 0, scale: 0.99 }}
+      className={cn("cursor-default transition-shadow duration-300", className)}
+      {...props}
+    >
+      {children}
+    </motion.div>
+  );
+}
@@ -4,7 +4,10 @@ function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="skeleton"
-      className={cn("animate-pulse rounded-md bg-muted", className)}
+      className={cn(
+        "animate-pulse rounded-md bg-muted/60 bg-gradient-to-r from-muted/60 via-muted/80 to-muted/60 bg-[length:200%_100%] animate-shimmer",
+        className,
+      )}
      {...props}
    />
  );
@@ -1,3 +1,5 @@
+"use client";
+
 import { Loader2Icon } from "lucide-react";
 import { cn } from "@/lib/utils";

@@ -6,7 +8,7 @@ function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
    <Loader2Icon
      data-slot="spinner"
      aria-label="Loading"
-      className={cn("size-4 animate-spin", className)}
+      className={cn("size-4 animate-spin text-muted-foreground", className)}
      {...props}
    />
  );
@@ -0,0 +1,189 @@
+/**
+ * Reusable Framer Motion animation variants and utility constants
+ * for consistent, performant animations across the hub.
+ */
+
+// ─── DOM variants ────────────────────────────────────────────
+
+export const fadeIn = {
+  hidden: { opacity: 0 },
+  visible: { opacity: 1, transition: { duration: 0.5, ease: "easeOut" } },
+};
+
+export const fadeInUp = {
+  hidden: { opacity: 0, y: 20 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.5, ease: [0.25, 0.1, 0, 1] as const },
+  },
+};
+
+export const fadeInDown = {
+  hidden: { opacity: 0, y: -16 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.4, ease: [0.25, 0.1, 0, 1] as const },
+  },
+};
+
+export const fadeInLeft = {
+  hidden: { opacity: 0, x: -20 },
+  visible: {
+    opacity: 1,
+    x: 0,
+    transition: { duration: 0.5, ease: [0.25, 0.1, 0, 1] as const },
+  },
+};
+
+export const fadeInRight = {
+  hidden: { opacity: 0, x: 20 },
+  visible: {
+    opacity: 1,
+    x: 0,
+    transition: { duration: 0.5, ease: [0.25, 0.1, 0, 1] as const },
+  },
+};
+
+export const scaleIn = {
+  hidden: { opacity: 0, scale: 0.9 },
+  visible: {
+    opacity: 1,
+    scale: 1,
+    transition: { duration: 0.4, ease: [0.25, 0.1, 0, 1] as const },
+  },
+};
+
+export const scaleInSpring = {
+  hidden: { opacity: 0, scale: 0.85 },
+  visible: {
+    opacity: 1,
+    scale: 1,
+    transition: {
+      type: "spring" as const,
+      stiffness: 200,
+      damping: 20,
+      mass: 0.8,
+    },
+  },
+};
+
+// ─── Stagger container ───────────────────────────────────────
+
+export const stagger = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.06,
+      delayChildren: 0.1,
+      ease: [0.25, 0.1, 0, 1] as const,
+    },
+  },
+};
+
+export const staggerFast = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.04,
+      delayChildren: 0.05,
+    },
+  },
+};
+
+export const staggerSlow = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.1,
+      delayChildren: 0.15,
+    },
+  },
+};
+
+// ─── SVG / Path animation ────────────────────────────────────
+
+export const drawPath = {
+  hidden: { pathLength: 0, opacity: 0 },
+  visible: {
+    pathLength: 1,
+    opacity: 1,
+    transition: { duration: 1.2, ease: [0.25, 0.1, 0, 1] as const },
+  },
+};
+
+export const growWidth = {
+  hidden: { scaleX: 0, transformOrigin: "left" },
+  visible: {
+    scaleX: 1,
+    transformOrigin: "left",
+    transition: { duration: 0.8, ease: [0.25, 0.1, 0, 1] as const },
+  },
+};
+
+// ─── Hover / Tap presets ─────────────────────────────────────
+
+export const hoverLift = {
+  whileHover: { y: -2, transition: { duration: 0.2 } },
+  whileTap: { y: 0, transition: { duration: 0.1 } },
+};
+
+export const hoverGlow = {
+  whileHover: {
+    boxShadow: "0 0 20px oklch(0.7 0.15 75 / 0.25)",
+    transition: { duration: 0.25 },
+  },
+};
+
+export const tapScale = {
+  whileTap: { scale: 0.97, transition: { duration: 0.1 } },
+};
+
+// ─── Counter / number animation ──────────────────────────────
+
+export const counterProps = {
+  initial: { opacity: 0, y: 8 },
+  animate: { opacity: 1, y: 0 },
+  transition: { duration: 0.4, ease: [0.25, 0.1, 0, 1] as const },
+};
+
+// ─── Duration presets ────────────────────────────────────────
+
+export const duration = {
+  fast: 0.2,
+  normal: 0.4,
+  slow: 0.6,
+  slower: 0.8,
+} as const;
+
+// ─── Transition presets ──────────────────────────────────────
+
+export const spring = {
+  type: "spring" as const,
+  stiffness: 200,
+  damping: 20,
+  mass: 0.8,
+};
+
+export const springBouncy = {
+  type: "spring" as const,
+  stiffness: 300,
+  damping: 15,
+  mass: 0.7,
+};
+
+export const springGentle = {
+  type: "spring" as const,
+  stiffness: 120,
+  damping: 14,
+  mass: 1,
+};
+
+export const smoothEase = {
+  ease: [0.25, 0.1, 0, 1] as [number, number, number, number],
+  duration: 0.5,
+};