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.
34 lines (33 loc) • 2.16 kB
JavaScript
// @ts-nocheck
"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import { cn } from "../../lib/utils";
import { motion } from "framer-motion";
export 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 (_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: _jsx(motion.div, { className: 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,
} }) }));
};