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
1 parent bc64b74a34
commit bf75d9deef
@@ -0,0 +1,160 @@
+"use client";
+import { cn } from "@/lib/utils";
+import { motion, MotionValue } from "motion/react";
+
+const transition = {
+  duration: 0,
+  ease: "linear" as const,
+};
+
+export const GoogleGeminiEffect = ({
+  pathLengths,
+  title,
+  description,
+  className,
+}: {
+  pathLengths: MotionValue[];
+  title?: string;
+  description?: string;
+  className?: string;
+}) => {
+  return (
+    <div className={cn("sticky top-80", className)}>
+      <p className="bg-gradient-to-b from-neutral-100 to-neutral-300 bg-clip-text pb-4 text-center text-lg font-normal text-transparent md:text-7xl">
+        {title || `Build with Aceternity UI`}
+      </p>
+      <p className="mx-auto mt-4 max-w-lg text-center text-xs font-normal text-neutral-400 md:text-xl">
+        {description ||
+          `Scroll this component and see the bottom SVG come to life wow this
+        works!`}
+      </p>
+      <div className="bg-red-transparent absolute -top-60 flex h-[890px] w-full items-center justify-center md:-top-40">
+        <button className="z-30 mx-auto mt-8 w-fit rounded-full bg-white px-2 py-1 text-xs font-bold text-black md:mt-24 md:px-4 md:py-2 md:text-base">
+          ui.aceternity.com
+        </button>
+      </div>
+      <svg
+        width="1440"
+        height="890"
+        viewBox="0 0 1440 890"
+        xmlns="http://www.w3.org/2000/svg"
+        className="absolute -top-60 w-full md:-top-40"
+      >
+        <motion.path
+          d="M0 663C145.5 663 191 666.265 269 647C326.5 630 339.5 621 397.5 566C439 531.5 455 529.5 490 523C509.664 519.348 521 503.736 538 504.236C553.591 504.236 562.429 514.739 584.66 522.749C592.042 525.408 600.2 526.237 607.356 523.019C624.755 515.195 641.446 496.324 657 496.735C673.408 496.735 693.545 519.572 712.903 526.769C718.727 528.934 725.184 528.395 730.902 525.965C751.726 517.115 764.085 497.106 782 496.735C794.831 496.47 804.103 508.859 822.469 518.515C835.13 525.171 850.214 526.Line truncated
+          stroke="#FFB7C5"
+          strokeWidth="2"
+          fill="none"
+          initial={{
+            pathLength: 0,
+          }}
+          style={{
+            pathLength: pathLengths[0],
+          }}
+          transition={transition}
+        />
+        <motion.path
+          d="M0 587.5C147 587.5 277 587.5 310 573.5C348 563 392.5 543.5 408 535C434 523.5 426 526.235 479 515.235C494 512.729 523 510.435 534.5 512.735C554.5 516.735 555.5 523.235 576 523.735C592 523.735 616 496.735 633 497.235C648.671 497.235 661.31 515.052 684.774 524.942C692.004 527.989 700.2 528.738 707.349 525.505C724.886 517.575 741.932 498.33 757.5 498.742C773.864 498.742 791.711 520.623 810.403 527.654C816.218 529.841 822.661 529.246 828.451 526.991C849.246 518.893 861.599 502.112 879.5Line truncated
+          stroke="#FFDDB7"
+          strokeWidth="2"
+          fill="none"
+          initial={{
+            pathLength: 0,
+          }}
+          style={{
+            pathLength: pathLengths[1],
+          }}
+          transition={transition}
+        />
+        <motion.path
+          d="M0 514C147.5 514.333 294.5 513.735 380.5 513.735C405.976 514.94 422.849 515.228 436.37 515.123C477.503 514.803 518.631 506.605 559.508 511.197C564.04 511.706 569.162 512.524 575 513.735C588 516.433 616 521.702 627.5 519.402C647.5 515.402 659 499.235 680.5 499.235C700.5 499.235 725 529.235 742 528.735C757.654 528.735 768.77 510.583 791.793 500.59C798.991 497.465 807.16 496.777 814.423 499.745C832.335 507.064 850.418 524.648 866 524.235C882.791 524.235 902.316 509.786 921.814 505.392Line truncated
+          stroke="#B1C5FF"
+          strokeWidth="2"
+          fill="none"
+          initial={{
+            pathLength: 0,
+          }}
+          style={{
+            pathLength: pathLengths[2],
+          }}
+          transition={transition}
+        />
+        <motion.path
+          d="M0 438.5C150.5 438.5 261 438.318 323.5 456.5C351 464.5 387.517 484.001 423.5 494.5C447.371 501.465 472 503.735 487 507.735C503.786 512.212 504.5 516.808 523 518.735C547 521.235 564.814 501.235 584.5 501.235C604.5 501.235 626 529.069 643 528.569C658.676 528.569 672.076 511.63 695.751 501.972C703.017 499.008 711.231 498.208 718.298 501.617C735.448 509.889 751.454 529.98 767 529.569C783.364 529.569 801.211 507.687 819.903 500.657C825.718 498.469 832.141 499.104 837.992 501.194C859.178Line truncated
+          stroke="#4FABFF"
+          strokeWidth="2"
+          fill="none"
+          initial={{
+            pathLength: 0,
+          }}
+          style={{
+            pathLength: pathLengths[3],
+          }}
+          transition={transition}
+        />
+        <motion.path
+          d="M0.5 364C145.288 362.349 195 361.5 265.5 378C322 391.223 399.182 457.5 411 467.5C424.176 478.649 456.916 491.677 496.259 502.699C498.746 503.396 501.16 504.304 503.511 505.374C517.104 511.558 541.149 520.911 551.5 521.236C571.5 521.236 590 498.736 611.5 498.736C631.5 498.736 652.5 529.236 669.5 528.736C685.171 528.736 697.81 510.924 721.274 501.036C728.505 497.988 736.716 497.231 743.812 500.579C761.362 508.857 778.421 529.148 794 528.736C810.375 528.736 829.35 508.68 848.364 502.1Line truncated
+          stroke="#076EFF"
+          strokeWidth="2"
+          fill="none"
+          initial={{
+            pathLength: 0,
+          }}
+          style={{
+            pathLength: pathLengths[4],
+          }}
+          transition={transition}
+        />
+
+        {/* Gaussian blur for the background paths */}
+
+        <path
+          d="M0 663C145.5 663 191 666.265 269 647C326.5 630 339.5 621 397.5 566C439 531.5 455 529.5 490 523C509.664 519.348 521 503.736 538 504.236C553.591 504.236 562.429 514.739 584.66 522.749C592.042 525.408 600.2 526.237 607.356 523.019C624.755 515.195 641.446 496.324 657 496.735C673.408 496.735 693.545 519.572 712.903 526.769C718.727 528.934 725.184 528.395 730.902 525.965C751.726 517.115 764.085 497.106 782 496.735C794.831 496.47 804.103 508.859 822.469 518.515C835.13 525.171 850.214 526.Line truncated
+          stroke="#FFB7C5"
+          strokeWidth="2"
+          fill="none"
+          pathLength={1}
+          filter="url(#blurMe)"
+        />
+        <path
+          d="M0 587.5C147 587.5 277 587.5 310 573.5C348 563 392.5 543.5 408 535C434 523.5 426 526.235 479 515.235C494 512.729 523 510.435 534.5 512.735C554.5 516.735 555.5 523.235 576 523.735C592 523.735 616 496.735 633 497.235C648.671 497.235 661.31 515.052 684.774 524.942C692.004 527.989 700.2 528.738 707.349 525.505C724.886 517.575 741.932 498.33 757.5 498.742C773.864 498.742 791.711 520.623 810.403 527.654C816.218 529.841 822.661 529.246 828.451 526.991C849.246 518.893 861.599 502.112 879.5Line truncated
+          stroke="#FFDDB7"
+          strokeWidth="2"
+          fill="none"
+          pathLength={1}
+          filter="url(#blurMe)"
+        />
+        <path
+          d="M0 514C147.5 514.333 294.5 513.735 380.5 513.735C405.976 514.94 422.849 515.228 436.37 515.123C477.503 514.803 518.631 506.605 559.508 511.197C564.04 511.706 569.162 512.524 575 513.735C588 516.433 616 521.702 627.5 519.402C647.5 515.402 659 499.235 680.5 499.235C700.5 499.235 725 529.235 742 528.735C757.654 528.735 768.77 510.583 791.793 500.59C798.991 497.465 807.16 496.777 814.423 499.745C832.335 507.064 850.418 524.648 866 524.235C882.791 524.235 902.316 509.786 921.814 505.392Line truncated
+          stroke="#B1C5FF"
+          strokeWidth="2"
+          fill="none"
+          pathLength={1}
+          filter="url(#blurMe)"
+        />
+        <path
+          d="M0 438.5C150.5 438.5 261 438.318 323.5 456.5C351 464.5 387.517 484.001 423.5 494.5C447.371 501.465 472 503.735 487 507.735C503.786 512.212 504.5 516.808 523 518.735C547 521.235 564.814 501.235 584.5 501.235C604.5 501.235 626 529.069 643 528.569C658.676 528.569 672.076 511.63 695.751 501.972C703.017 499.008 711.231 498.208 718.298 501.617C735.448 509.889 751.454 529.98 767 529.569C783.364 529.569 801.211 507.687 819.903 500.657C825.718 498.469 832.141 499.104 837.992 501.194C859.178Line truncated
+          stroke="#4FABFF"
+          strokeWidth="2"
+          fill="none"
+          pathLength={1}
+          filter="url(#blurMe)"
+        />
+        <path
+          d="M0.5 364C145.288 362.349 195 361.5 265.5 378C322 391.223 399.182 457.5 411 467.5C424.176 478.649 456.916 491.677 496.259 502.699C498.746 503.396 501.16 504.304 503.511 505.374C517.104 511.558 541.149 520.911 551.5 521.236C571.5 521.236 590 498.736 611.5 498.736C631.5 498.736 652.5 529.236 669.5 528.736C685.171 528.736 697.81 510.924 721.274 501.036C728.505 497.988 736.716 497.231 743.812 500.579C761.362 508.857 778.421 529.148 794 528.736C810.375 528.736 829.35 508.68 848.364 502.1Line truncated
+          stroke="#076EFF"
+          strokeWidth="2"
+          fill="none"
+          pathLength={1}
+          filter="url(#blurMe)"
+        />
+
+        <defs>
+          <filter id="blurMe">
+            <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
+          </filter>
+        </defs>
+      </svg>
+    </div>
+  );
+};