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/svg-mask-effect.tsx

@@ -0,0 +1,76 @@
+"use client";
+import { useState, useEffect, useRef } from "react";
+import { motion } from "motion/react";
+import { cn } from "@/lib/utils";
+
+export const MaskContainer = ({
+  children,
+  revealText,
+  size = 10,
+  revealSize = 600,
+  className,
+}: {
+  children?: string | React.ReactNode;
+  revealText?: string | React.ReactNode;
+  size?: number;
+  revealSize?: number;
+  className?: string;
+}) => {
+  const [isHovered, setIsHovered] = useState(false);
+  const [mousePosition, setMousePosition] = useState<any>({ x: null, y: null });
+  const containerRef = useRef<any>(null);
+  const updateMousePosition = (e: any) => {
+    const rect = containerRef.current.getBoundingClientRect();
+    setMousePosition({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+  };
+
+  useEffect(() => {
+    containerRef.current.addEventListener("mousemove", updateMousePosition);
+    return () => {
+      if (containerRef.current) {
+        containerRef.current.removeEventListener("mousemove", updateMousePosition);
+      }
+    };
+  }, []);
+  const maskSize = isHovered ? revealSize : size;
+
+  return (
+    <motion.div
+      ref={containerRef}
+      className={cn("relative h-screen", className)}
+      animate={{
+        backgroundColor: isHovered ? "var(--slate-900)" : "var(--white)",
+      }}
+      transition={{
+        backgroundColor: { duration: 0.3 },
+      }}
+    >
+      <motion.div
+        className="absolute flex h-full w-full items-center justify-center bg-black [mask-image:url(/mask.svg)] [mask-size:40px] [mask-repeat:no-repeat] text-6xl dark:bg-white"
+        animate={{
+          maskPosition: `${mousePosition.x - maskSize / 2}px ${mousePosition.y - maskSize / 2}px`,
+          maskSize: `${maskSize}px`,
+        }}
+        transition={{
+          maskSize: { duration: 0.3, ease: "easeInOut" },
+          maskPosition: { duration: 0.15, ease: "linear" },
+        }}
+      >
+        <div className="absolute inset-0 z-0 h-full w-full bg-black opacity-50 dark:bg-white" />
+        <div
+          onMouseEnter={() => {
+            setIsHovered(true);
+          }}
+          onMouseLeave={() => {
+            setIsHovered(false);
+          }}
+          className="relative z-20 mx-auto max-w-4xl text-center text-4xl font-bold"
+        >
+          {children}
+        </div>
+      </motion.div>
+
+      <div className="flex h-full w-full items-center justify-center">{revealText}</div>
+    </motion.div>
+  );
+};