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.
2026-09-20 19:10:43 +07:00
parent bc64b74a34
commit bf75d9deef
53 changed files with 6781 additions and 1 deletions
@@ -0,0 +1,63 @@
+"use client";
+
+import React, { useRef, useState } from "react";
+import { motion } from "motion/react";
+
+export const MagneticButton = ({
+  children,
+  strength = 0.8,
+  maxDistance = 100,
+}: {
+  children: React.ReactNode;
+  strength?: number;
+  maxDistance?: number;
+}) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+
+  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!ref.current) return;
+
+    const { width, height, left, top } = ref.current.getBoundingClientRect();
+    const { clientX, clientY } = e;
+
+    let x = (clientX - (left + width / 2)) * strength;
+    let y = (clientY - (top + height / 2)) * strength;
+
+    const distance = Math.hypot(x, y);
+    if (distance > maxDistance) {
+      const scale = maxDistance / distance;
+      x *= scale;
+      y *= scale;
+    }
+
+    setPosition({ x, y });
+  };
+
+  const handleMouseLeave = () => {
+    setPosition({ x: 0, y: 0 });
+  };
+
+  const hasMoved = position.x !== 0 || position.y !== 0;
+  return (
+    <div
+      onMouseMove={handleMouseMove}
+      onMouseLeave={handleMouseLeave}
+      className="cursor-pointer rounded-lg border border-dashed transition-colors duration-150 [--show-color:var(--color-blue-500)]"
+      style={{
+        borderColor: hasMoved ? "var(--show-color)" : "transparent",
+        backgroundColor: hasMoved
+          ? "color-mix(in srgb,var(--show-color) 20%, transparent)"
+          : "transparent",
+      }}
+    >
+      <motion.div
+        ref={ref}
+        animate={{ x: position.x, y: position.y }}
+        transition={{ type: "spring", stiffness: 150, damping: 25, mass: 0.1 }}
+      >
+        {children}
+      </motion.div>
+    </div>
+  );
+};