mirror of
https://github.com/FranP-code/create-better-t-stack.git
synced 2025-10-12 23:52:15 +00:00
remove border beam file
This commit is contained in:
@@ -1,94 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { cn } from "@/lib/utils";
|
|
||||||
import { type MotionStyle, type Transition, motion } from "motion/react";
|
|
||||||
|
|
||||||
interface BorderBeamProps {
|
|
||||||
/**
|
|
||||||
* The size of the border beam.
|
|
||||||
*/
|
|
||||||
size?: number;
|
|
||||||
/**
|
|
||||||
* The duration of the border beam.
|
|
||||||
*/
|
|
||||||
duration?: number;
|
|
||||||
/**
|
|
||||||
* The delay of the border beam.
|
|
||||||
*/
|
|
||||||
delay?: number;
|
|
||||||
/**
|
|
||||||
* The color of the border beam from.
|
|
||||||
*/
|
|
||||||
colorFrom?: string;
|
|
||||||
/**
|
|
||||||
* The color of the border beam to.
|
|
||||||
*/
|
|
||||||
colorTo?: string;
|
|
||||||
/**
|
|
||||||
* The motion transition of the border beam.
|
|
||||||
*/
|
|
||||||
transition?: Transition;
|
|
||||||
/**
|
|
||||||
* The class name of the border beam.
|
|
||||||
*/
|
|
||||||
className?: string;
|
|
||||||
/**
|
|
||||||
* The style of the border beam.
|
|
||||||
*/
|
|
||||||
style?: React.CSSProperties;
|
|
||||||
/**
|
|
||||||
* Whether to reverse the animation direction.
|
|
||||||
*/
|
|
||||||
reverse?: boolean;
|
|
||||||
/**
|
|
||||||
* The initial offset position (0-100).
|
|
||||||
*/
|
|
||||||
initialOffset?: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const BorderBeam = ({
|
|
||||||
className,
|
|
||||||
size = 50,
|
|
||||||
delay = 0,
|
|
||||||
duration = 6,
|
|
||||||
colorFrom = "#ffaa40",
|
|
||||||
colorTo = "#9c40ff",
|
|
||||||
transition,
|
|
||||||
style,
|
|
||||||
reverse = false,
|
|
||||||
initialOffset = 0,
|
|
||||||
}: BorderBeamProps) => {
|
|
||||||
return (
|
|
||||||
<div className="pointer-events-none absolute inset-0 rounded-[inherit] border border-transparent [mask-clip:padding-box,border-box] [mask-composite:intersect] [mask-image:linear-gradient(transparent,transparent),linear-gradient(#000,#000)]">
|
|
||||||
<motion.div
|
|
||||||
className={cn(
|
|
||||||
"absolute aspect-square",
|
|
||||||
"bg-gradient-to-l from-[var(--color-from)] via-[var(--color-to)] to-transparent",
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
style={
|
|
||||||
{
|
|
||||||
width: size,
|
|
||||||
offsetPath: `rect(0 auto auto 0 round ${size}px)`,
|
|
||||||
"--color-from": colorFrom,
|
|
||||||
"--color-to": colorTo,
|
|
||||||
...style,
|
|
||||||
} as MotionStyle
|
|
||||||
}
|
|
||||||
initial={{ offsetDistance: `${initialOffset}%` }}
|
|
||||||
animate={{
|
|
||||||
offsetDistance: reverse
|
|
||||||
? [`${100 - initialOffset}%`, `${-initialOffset}%`]
|
|
||||||
: [`${initialOffset}%`, `${100 + initialOffset}%`],
|
|
||||||
}}
|
|
||||||
transition={{
|
|
||||||
repeat: Number.POSITIVE_INFINITY,
|
|
||||||
ease: "linear",
|
|
||||||
duration,
|
|
||||||
delay: -delay,
|
|
||||||
...transition,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
Reference in New Issue
Block a user