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,65 @@
+"use client";
+import { useEffect, useState } from "react";
+import { motion } from "motion/react";
+
+type Card = {
+  id: number;
+  name: string;
+  designation: string;
+  content: React.ReactNode;
+};
+
+export const CardStack = ({
+  items,
+  offset,
+  scaleFactor,
+}: {
+  items: Card[];
+  offset?: number;
+  scaleFactor?: number;
+}) => {
+  const CARD_OFFSET = offset || 10;
+  const SCALE_FACTOR = scaleFactor || 0.06;
+  const [cards, setCards] = useState<Card[]>(items);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCards((prevCards: Card[]) => {
+        const newArray = [...prevCards]; // create a copy of the array
+        newArray.unshift(newArray.pop()!); // move the last element to the front
+        return newArray;
+      });
+    }, 5000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <div className="relative h-60 w-60 md:h-60 md:w-96">
+      {cards.map((card, index) => {
+        return (
+          <motion.div
+            key={card.id}
+            className="absolute flex h-60 w-60 flex-col justify-between rounded-3xl border border-neutral-200 bg-white p-4 shadow-xl shadow-black/[0.1] md:h-60 md:w-96 dark:border-white/[0.1] dark:bg-black dark:shadow-white/[0.05]"
+            style={{
+              transformOrigin: "top center",
+            }}
+            animate={{
+              top: index * -CARD_OFFSET,
+              scale: 1 - index * SCALE_FACTOR, // decrease scale for cards that are behind
+              zIndex: cards.length - index, //  decrease z-index for the cards that are behind
+            }}
+          >
+            <div className="font-normal text-neutral-700 dark:text-neutral-200">{card.content}</div>
+            <div>
+              <p className="font-medium text-neutral-500 dark:text-white">{card.name}</p>
+              <p className="font-normal text-neutral-400 dark:text-neutral-200">
+                {card.designation}
+              </p>
+            </div>
+          </motion.div>
+        );
+      })}
+    </div>
+  );
+};