lightswind
Version:
A collection of beautifully crafted React Components, Blocks & Templates for Modern Developers. Create stunning web applications effortlessly by using our 160+ professional and animated react components.
37 lines • 2.41 kB
JavaScript
;
"use client";
Object.defineProperty(exports, "__esModule", { value: true });
exports.BorderBeam = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const utils_1 = require("@/components/lib/utils");
const framer_motion_1 = require("framer-motion");
const BorderBeam = ({ className, size = 50, delay = 0, duration = 6, colorFrom = "#7400ff", colorTo = "#9b41ff", transition, style, reverse = false, initialOffset = 0, borderThickness = 1, opacity = 1, glowIntensity = 0, beamBorderRadius, pauseOnHover = false, speedMultiplier = 1, }) => {
// Calculate actual duration based on speed multiplier
const actualDuration = speedMultiplier ? duration / speedMultiplier : duration;
// Generate box shadow for glow effect
const glowEffect = glowIntensity > 0
? `0 0 ${glowIntensity * 5}px ${glowIntensity * 2}px var(--color-from)`
: undefined;
return ((0, jsx_runtime_1.jsx)("div", { className: "pointer-events-none absolute inset-0 rounded-[inherit] \r\n border border-transparent [mask-clip:padding-box,border-box] \r\n [mask-composite:intersect] [mask-image:linear-gradient(transparent,transparent),linear-gradient(#000,#000)]", children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { className: (0, utils_1.cn)("absolute aspect-square", "bg-gradient-to-l from-[var(--color-from)] via-[var(--color-to)] to-transparent", pauseOnHover && "group-hover:animation-play-state-paused", className), style: {
width: size,
offsetPath: `rect(0 auto auto 0 round ${beamBorderRadius ?? size}px)`,
"--color-from": colorFrom,
"--color-to": colorTo,
opacity: opacity,
boxShadow: glowEffect,
borderRadius: beamBorderRadius ? `${beamBorderRadius}px` : undefined,
...style,
}, initial: { offsetDistance: `${initialOffset}%` }, animate: {
offsetDistance: reverse
? [`${100 - initialOffset}%`, `${-initialOffset}%`]
: [`${initialOffset}%`, `${100 + initialOffset}%`],
}, transition: {
repeat: Infinity,
ease: "linear",
duration: actualDuration,
delay: -delay,
...transition,
} }) }));
};
exports.BorderBeam = BorderBeam;
//# sourceMappingURL=border-beam.js.map