asepharyana
bf75d9deef
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.
73 lines
2.4 KiB
TypeScript
73 lines
2.4 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
import React from "react";
|
|
import { motion } from "motion/react";
|
|
|
|
export const BackgroundGradient = ({
|
|
children,
|
|
className,
|
|
containerClassName,
|
|
animate = true,
|
|
}: {
|
|
children?: React.ReactNode;
|
|
className?: string;
|
|
containerClassName?: string;
|
|
animate?: boolean;
|
|
}) => {
|
|
const variants = {
|
|
initial: {
|
|
backgroundPosition: "0 50%",
|
|
},
|
|
animate: {
|
|
backgroundPosition: ["0, 50%", "100% 50%", "0 50%"],
|
|
},
|
|
};
|
|
return (
|
|
<div className={cn("group relative p-[4px]", containerClassName)}>
|
|
<motion.div
|
|
variants={animate ? variants : undefined}
|
|
initial={animate ? "initial" : undefined}
|
|
animate={animate ? "animate" : undefined}
|
|
transition={
|
|
animate
|
|
? {
|
|
duration: 5,
|
|
repeat: Infinity,
|
|
repeatType: "reverse",
|
|
}
|
|
: undefined
|
|
}
|
|
style={{
|
|
backgroundSize: animate ? "400% 400%" : undefined,
|
|
}}
|
|
className={cn(
|
|
"absolute inset-0 z-[1] rounded-3xl opacity-60 blur-xl transition duration-500 will-change-transform group-hover:opacity-100",
|
|
"bg-[radial-gradient(circle_farthest-side_at_0_100%,#00ccb1,transparent),radial-gradient(circle_farthest-side_at_100%_0,#7b61ff,transparent),radial-gradient(circle_farthest-side_at_100%_100%,#ffc414,transparent),radial-gradient(circle_farthest-side_at_0_0,#1ca0fb,#141316)]"
|
|
)}
|
|
/>
|
|
<motion.div
|
|
variants={animate ? variants : undefined}
|
|
initial={animate ? "initial" : undefined}
|
|
animate={animate ? "animate" : undefined}
|
|
transition={
|
|
animate
|
|
? {
|
|
duration: 5,
|
|
repeat: Infinity,
|
|
repeatType: "reverse",
|
|
}
|
|
: undefined
|
|
}
|
|
style={{
|
|
backgroundSize: animate ? "400% 400%" : undefined,
|
|
}}
|
|
className={cn(
|
|
"absolute inset-0 z-[1] rounded-3xl will-change-transform",
|
|
"bg-[radial-gradient(circle_farthest-side_at_0_100%,#00ccb1,transparent),radial-gradient(circle_farthest-side_at_100%_0,#7b61ff,transparent),radial-gradient(circle_farthest-side_at_100%_100%,#ffc414,transparent),radial-gradient(circle_farthest-side_at_0_0,#1ca0fb,#141316)]"
|
|
)}
|
|
/>
|
|
|
|
<div className={cn("relative z-10", className)}>{children}</div>
|
|
</div>
|
|
);
|
|
};
|