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.
56 lines
1.4 KiB
TypeScript
56 lines
1.4 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
|
|
type SpotlightProps = {
|
|
className?: string;
|
|
fill?: string;
|
|
};
|
|
|
|
export const Spotlight = ({ className, fill }: SpotlightProps) => {
|
|
return (
|
|
<svg
|
|
className={cn(
|
|
"animate-spotlight pointer-events-none absolute z-[1] h-[169%] w-[138%] opacity-0 lg:w-[84%]",
|
|
className
|
|
)}
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 3787 2842"
|
|
fill="none"
|
|
>
|
|
<g filter="url(#filter)">
|
|
<ellipse
|
|
cx="1924.71"
|
|
cy="273.501"
|
|
rx="1924.71"
|
|
ry="273.501"
|
|
transform="matrix(-0.822377 -0.568943 -0.568943 0.822377 3631.88 2291.09)"
|
|
fill={fill || "white"}
|
|
fillOpacity="0.21"
|
|
></ellipse>
|
|
</g>
|
|
<defs>
|
|
<filter
|
|
id="filter"
|
|
x="0.860352"
|
|
y="0.838989"
|
|
width="3785.16"
|
|
height="2840.26"
|
|
filterUnits="userSpaceOnUse"
|
|
colorInterpolationFilters="sRGB"
|
|
>
|
|
<feFlood floodOpacity="0" result="BackgroundImageFix"></feFlood>
|
|
<feBlend
|
|
mode="normal"
|
|
in="SourceGraphic"
|
|
in2="BackgroundImageFix"
|
|
result="shape"
|
|
></feBlend>
|
|
<feGaussianBlur
|
|
stdDeviation="151"
|
|
result="effect1_foregroundBlur_1065_8"
|
|
></feGaussianBlur>
|
|
</filter>
|
|
</defs>
|
|
</svg>
|
|
);
|
|
};
|