"use client"; import React from "react"; import { motion, useAnimationFrame, useMotionTemplate, useMotionValue, useTransform, } from "motion/react"; import { useRef } from "react"; import { cn } from "@/lib/utils"; export function Button({ borderRadius = "1.75rem", children, as: Component = "button", containerClassName, borderClassName, duration, className, ...otherProps }: { borderRadius?: string; children: React.ReactNode; as?: any; containerClassName?: string; borderClassName?: string; duration?: number; className?: string; [key: string]: any; }) { return (

{children}

); } export const MovingBorder = ({ children, duration = 3000, rx, ry, ...otherProps }: { children: React.ReactNode; duration?: number; rx?: string; ry?: string; [key: string]: any; }) => { const pathRef = useRef(); const progress = useMotionValue(0); useAnimationFrame((time) => { const length = pathRef.current?.getTotalLength(); if (length) { const pxPerMillisecond = length / duration; progress.set((time * pxPerMillisecond) % length); } }); const x = useTransform( progress, (val) => pathRef.current?.getPointAtLength(val).x, ); const y = useTransform( progress, (val) => pathRef.current?.getPointAtLength(val).y, ); const transform = useMotionTemplate`translateX(${x}px) translateY(${y}px) translateX(-50%) translateY(-50%)`; return ( <> {children} ); };

Moving Border

Instalação

Dependências