style: added border beam

Author: codebyaadi

www/src/app/(auth)/signin/page.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { BorderBeam } from '@/components/magicui/border-beam';
 import { Button } from '@/components/ui/button';
 import {
   Card,
@@ -77,7 +78,7 @@ export default function SignIn() {
 
   return (
     <div className='mx-4 w-full md:mx-auto md:w-1/2 lg:mx-auto lg:w-1/2'>
-      <Card className='rounded-md shadow-none'>
+      <Card className='relative overflow-hidden rounded-md shadow-none'>
         <CardHeader>
           <CardTitle>Sign In</CardTitle>
           <CardDescription>
@@ -140,6 +141,7 @@ export default function SignIn() {
             Sign Up
           </Link>
         </CardFooter>
+        <BorderBeam duration={8} size={100} colorTo='#ffd230' />
       </Card>
     </div>
   );

www/src/app/(auth)/signup/page.tsx

@@ -25,6 +25,7 @@ import {
 } from '@/components/ui/form';
 import { toast } from 'sonner';
 import { authClient } from '@/lib/auth-client';
+import { BorderBeam } from '@/components/magicui/border-beam';
 
 const formSchema = z.object({
   name: z.string().min(3, {
@@ -72,7 +73,7 @@ export default function SignUp() {
 
   return (
     <div className='mx-4 w-full md:mx-auto lg:mx-auto lg:w-1/2'>
-      <Card className='rounded-md shadow-none'>
+      <Card className='relative overflow-hidden rounded-md shadow-none'>
         <CardHeader>
           <CardTitle>Sign Up</CardTitle>
           <CardDescription>
@@ -147,6 +148,7 @@ export default function SignUp() {
             Sign In
           </Link>
         </CardFooter>
+        <BorderBeam duration={8} size={100} colorTo='#ffd230' />
       </Card>
     </div>
   );

www/src/components/magicui/border-beam.tsx

@@ -0,0 +1,94 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+import { motion, MotionStyle, Transition } 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-image:linear-gradient(transparent,transparent),linear-gradient(#000,#000)] [mask-composite:intersect] [mask-clip:padding-box,border-box]'>
+      <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: Infinity,
+          ease: 'linear',
+          duration,
+          delay: -delay,
+          ...transition,
+        }}
+      />
+    </div>
+  );
+};