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.
62 lines
1.9 KiB
TypeScript
62 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { useMotionValue, motion, useMotionTemplate } from "motion/react";
|
|
import React, { MouseEvent as ReactMouseEvent, useState } from "react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export const CardSpotlight = ({
|
|
children,
|
|
radius = 350,
|
|
color = "#262626",
|
|
className,
|
|
...props
|
|
}: {
|
|
radius?: number;
|
|
color?: string;
|
|
children: React.ReactNode;
|
|
} & React.HTMLAttributes<HTMLDivElement>) => {
|
|
const mouseX = useMotionValue(0);
|
|
const mouseY = useMotionValue(0);
|
|
function handleMouseMove({ currentTarget, clientX, clientY }: ReactMouseEvent<HTMLDivElement>) {
|
|
const { left, top } = currentTarget.getBoundingClientRect();
|
|
|
|
mouseX.set(clientX - left);
|
|
mouseY.set(clientY - top);
|
|
}
|
|
|
|
const [isHovering, setIsHovering] = useState(false);
|
|
const handleMouseEnter = () => setIsHovering(true);
|
|
const handleMouseLeave = () => setIsHovering(false);
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"group/spotlight relative rounded-md border border-neutral-800 bg-black p-10 dark:border-neutral-800",
|
|
className
|
|
)}
|
|
onMouseMove={handleMouseMove}
|
|
onMouseEnter={handleMouseEnter}
|
|
onMouseLeave={handleMouseLeave}
|
|
{...props}
|
|
>
|
|
<motion.div
|
|
className="pointer-events-none absolute -inset-px z-0 rounded-md opacity-0 transition duration-300 group-hover/spotlight:opacity-100"
|
|
style={{
|
|
backgroundColor: color,
|
|
maskImage: useMotionTemplate`
|
|
radial-gradient(
|
|
${radius}px circle at ${mouseX}px ${mouseY}px,
|
|
white,
|
|
transparent 80%
|
|
)
|
|
`,
|
|
}}
|
|
>
|
|
{isHovering && (
|
|
<div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_var(--spotlight-x,50%)_var(--spotlight-y,50%),rgba(59,130,246,0.35),transparent_60%)]" />
|
|
)}
|
|
</motion.div>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|