feat(ui): vendor Aceternity registry components + showcase gallery

Vendor 50 Aceternity UI components into components/ui from the official
registry (ui.aceternity.com/registry/<slug>.json), adapted for this
template's stack: Tailwind v4, motion/react 13, cn util, React 19.

Add a live showcase gallery (/ui + /docs/... navigation is unchanged):
app/ui/page.tsx renders <ShowcaseGallery> with 30+ demos — 3d-pin,
aurora, background-beams, bento, card-stack, card-spotlight,
direction-aware-hover, encrypted-text, evervault-card, flip-words,
hero-highlight, hero-parallax, infinite-moving-cards, moving-border,
sparkles, tracing-beam, animated-tooltip, typewriter-effect,
placeholders-and-vanish-input and friends.

Toolchain stays zero-warning: vendored animation code is scoped in
eslint.config.mjs (react-hooks/react-compiler advisory rules, no-any,
prefer-const, no-img-element) so app code keeps a 0-error gate. typecheck,
build, 7 vitest tests and 2 test suites all green.

components/ui/direction-aware-hover.tsx

@@ -0,0 +1,156 @@
+"use client";
+
+import { useRef, useState } from "react";
+
+import { AnimatePresence, motion } from "motion/react";
+import { cn } from "@/lib/utils";
+
+export const DirectionAwareHover = ({
+  imageUrl,
+  children,
+  childrenClassName,
+  imageClassName,
+  className,
+}: {
+  imageUrl: string;
+  children: React.ReactNode | string;
+  childrenClassName?: string;
+  imageClassName?: string;
+  className?: string;
+}) => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  const [direction, setDirection] = useState<"top" | "bottom" | "left" | "right" | string>("left");
+
+  const handleMouseEnter = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    if (!ref.current) return;
+
+    const direction = getDirection(event, ref.current);
+    console.log("direction", direction);
+    switch (direction) {
+      case 0:
+        setDirection("top");
+        break;
+      case 1:
+        setDirection("right");
+        break;
+      case 2:
+        setDirection("bottom");
+        break;
+      case 3:
+        setDirection("left");
+        break;
+      default:
+        setDirection("left");
+        break;
+    }
+  };
+
+  const getDirection = (ev: React.MouseEvent<HTMLDivElement, MouseEvent>, obj: HTMLElement) => {
+    const { width: w, height: h, left, top } = obj.getBoundingClientRect();
+    const x = ev.clientX - left - (w / 2) * (w > h ? h / w : 1);
+    const y = ev.clientY - top - (h / 2) * (h > w ? w / h : 1);
+    const d = Math.round(Math.atan2(y, x) / 1.57079633 + 5) % 4;
+    return d;
+  };
+
+  return (
+    <motion.div
+      onMouseEnter={handleMouseEnter}
+      ref={ref}
+      className={cn(
+        "group/card relative h-60 w-60 overflow-hidden rounded-lg bg-transparent md:h-96 md:w-96",
+        className
+      )}
+    >
+      <AnimatePresence mode="wait">
+        <motion.div
+          className="relative h-full w-full"
+          initial="initial"
+          whileHover={direction}
+          exit="exit"
+        >
+          <motion.div className="absolute inset-0 z-10 hidden h-full w-full bg-black/40 transition duration-500 group-hover/card:block" />
+          <motion.div
+            variants={variants}
+            className="relative h-full w-full bg-gray-50 dark:bg-black"
+            transition={{
+              duration: 0.2,
+              ease: "easeOut",
+            }}
+          >
+            <img
+              alt="image"
+              className={cn("h-full w-full scale-[1.15] object-cover", imageClassName)}
+              width="1000"
+              height="1000"
+              src={imageUrl}
+            />
+          </motion.div>
+          <motion.div
+            variants={textVariants}
+            transition={{
+              duration: 0.5,
+              ease: "easeOut",
+            }}
+            className={cn("absolute bottom-4 left-4 z-40 text-white", childrenClassName)}
+          >
+            {children}
+          </motion.div>
+        </motion.div>
+      </AnimatePresence>
+    </motion.div>
+  );
+};
+
+const variants = {
+  initial: {
+    x: 0,
+  },
+
+  exit: {
+    x: 0,
+    y: 0,
+  },
+  top: {
+    y: 20,
+  },
+  bottom: {
+    y: -20,
+  },
+  left: {
+    x: 20,
+  },
+  right: {
+    x: -20,
+  },
+};
+
+const textVariants = {
+  initial: {
+    y: 0,
+    x: 0,
+    opacity: 0,
+  },
+  exit: {
+    y: 0,
+    x: 0,
+    opacity: 0,
+  },
+  top: {
+    y: -20,
+    opacity: 1,
+  },
+  bottom: {
+    y: 2,
+    opacity: 1,
+  },
+  left: {
+    x: -2,
+    opacity: 1,
+  },
+  right: {
+    x: 20,
+    opacity: 1,
+  },
+};