xlibs-components
Version:
Modern React component library with Aceternity, MagicUI, and ShadCN components for building beautiful web applications
79 lines (78 loc) • 4.43 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from '../../lib/utils.js';
import { useMotionValue, motion, useMotionTemplate } from "framer-motion";
export const HeroHighlight = ({ children, className, containerClassName, }) => {
let mouseX = useMotionValue(0);
let mouseY = useMotionValue(0);
// SVG patterns for different states and themes
const dotPatterns = {
light: {
default: `url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='16' height='16' fill='none'%3E%3Ccircle fill='%23d4d4d4' id='pattern-circle' cx='10' cy='10' r='2.5'%3E%3C/circle%3E%3C/svg%3E")`,
hover: `url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='16' height='16' fill='none'%3E%3Ccircle fill='%236366f1' id='pattern-circle' cx='10' cy='10' r='2.5'%3E%3C/circle%3E%3C/svg%3E")`,
},
dark: {
default: `url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='16' height='16' fill='none'%3E%3Ccircle fill='%23404040' id='pattern-circle' cx='10' cy='10' r='2.5'%3E%3C/circle%3E%3C/svg%3E")`,
hover: `url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='16' height='16' fill='none'%3E%3Ccircle fill='%238183f4' id='pattern-circle' cx='10' cy='10' r='2.5'%3E%3C/circle%3E%3C/svg%3E")`,
},
};
function handleMouseMove({ currentTarget, clientX, clientY, }) {
if (!currentTarget)
return;
let { left, top } = currentTarget.getBoundingClientRect();
mouseX.set(clientX - left);
mouseY.set(clientY - top);
}
return (_jsxs("div", { className: cn("group relative flex h-[40rem] w-full items-center justify-center bg-white dark:bg-black", containerClassName), onMouseMove: handleMouseMove, children: [_jsx("div", { className: "pointer-events-none absolute inset-0 dark:hidden", style: {
backgroundImage: dotPatterns.light.default,
} }), _jsx("div", { className: "pointer-events-none absolute inset-0 hidden dark:block", style: {
backgroundImage: dotPatterns.dark.default,
} }), _jsx(motion.div, { className: "pointer-events-none absolute inset-0 opacity-0 transition duration-300 group-hover:opacity-100 dark:hidden", style: {
backgroundImage: dotPatterns.light.hover,
WebkitMaskImage: useMotionTemplate `
radial-gradient(
200px circle at ${mouseX}px ${mouseY}px,
black 0%,
transparent 100%
)
`,
maskImage: useMotionTemplate `
radial-gradient(
200px circle at ${mouseX}px ${mouseY}px,
black 0%,
transparent 100%
)
`,
} }), _jsx(motion.div, { className: "pointer-events-none absolute inset-0 hidden opacity-0 transition duration-300 group-hover:opacity-100 dark:block", style: {
backgroundImage: dotPatterns.dark.hover,
WebkitMaskImage: useMotionTemplate `
radial-gradient(
200px circle at ${mouseX}px ${mouseY}px,
black 0%,
transparent 100%
)
`,
maskImage: useMotionTemplate `
radial-gradient(
200px circle at ${mouseX}px ${mouseY}px,
black 0%,
transparent 100%
)
`,
} }), _jsx("div", { className: cn("relative z-20", className), children: children })] }));
};
export const Highlight = ({ children, className, }) => {
return (_jsx(motion.span, { initial: {
backgroundSize: "0% 100%",
}, animate: {
backgroundSize: "100% 100%",
}, transition: {
duration: 2,
ease: "linear",
delay: 0.5,
}, style: {
backgroundRepeat: "no-repeat",
backgroundPosition: "left center",
display: "inline",
}, className: cn(`relative inline-block rounded-lg bg-gradient-to-r from-indigo-300 to-purple-300 px-1 pb-1 dark:from-indigo-500 dark:to-purple-500`, className), children: children }));
};