50:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 51:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 52:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 53:T293d,'use client'; import React, { useRef, createContext, useContext, useCallback } from 'react'; import { motion, AnimatePresence, PanInfo, useSpring, useMotionTemplate, useTransform, } from 'motion/react'; import { Card, CardContent, CardHeader, CardFooter, CardTitle, CardDescription, } from '@/components/ui/card'; import { cn } from '@/lib/utils'; interface BorderGlideContextType { currentIndex: number; direction: number; handleDragEnd: ( e: MouseEvent | TouchEvent | PointerEvent, info: PanInfo, ) => void; totalItems: number; } const BorderGlideContext = createContext( undefined, ); const useBorderGlideContext = () => { const context = useContext(BorderGlideContext); if (!context) { throw new Error('BorderGlide components must be used within BorderGlide'); } return context; }; const MovingBorder: React.FC<{ children: React.ReactNode; duration?: number; rx?: string; ry?: string; color?: string; width?: string; height?: string; opacity?: number; }> = ({ children, duration = 3000, rx = '1.5rem', ry = '1.5rem', color = '#3b82f6', width = '12rem', height = '0.5rem', opacity = 0.8, }) => { const pathRef = useRef(null); const animationRef = useRef(null); const startTimeRef = useRef(Date.now()); const time = useSpring(0, { stiffness: 100, damping: 20, mass: 0.5, }); const animate = useCallback(() => { const elapsed = Date.now() - startTimeRef.current; const speed = 1000 / duration; time.set(elapsed * speed); animationRef.current = requestAnimationFrame(animate); }, [time, duration]); React.useLayoutEffect(() => { startTimeRef.current = Date.now(); animate(); return () => { if (animationRef.current) { cancelAnimationFrame(animationRef.current); } }; }, [animate]); const progress = useTransform(time, (val) => { if (!pathRef.current) return 0; const length = pathRef.current.getTotalLength(); return val % length; }); const x = useTransform(progress, (val) => { if (!pathRef.current) return 0; return pathRef.current.getPointAtLength(val).x; }); const y = useTransform(progress, (val) => { if (!pathRef.current) return 0; return pathRef.current.getPointAtLength(val).y; }); const angle = useTransform(progress, (val) => { if (!pathRef.current) return 0; const length = pathRef.current.getTotalLength(); const p1 = pathRef.current.getPointAtLength(val); const p2 = pathRef.current.getPointAtLength((val + 1) % length); return Math.atan2(p2.y - p1.y, p2.x - p1.x) * (180 / Math.PI); }); const transform = useMotionTemplate` translateX(${x}px) translateY(${y}px) translateX(-50%) translateY(-50%) rotate(${angle}deg) `; const getBackgroundStyle = (color: string) => { if ( color.includes('gradient') || color.includes('linear-gradient') || color.includes('radial-gradient') || color.includes('conic-gradient') ) { return color; } return `radial-gradient(${color} 40%, transparent 60%)`; }; return ( <>

); }; interface BorderGlideProps { children: React.ReactNode; className?: string; autoPlayInterval?: number; borderDuration?: number; borderColor?: string; borderWidth?: string; borderHeight?: string; borderOpacity?: number; } const BorderGlide: React.FC = ({ children, className, autoPlayInterval = 5000, borderDuration = 3000, borderColor = '#3b82f6', borderWidth = '6rem', borderHeight = '6rem', borderOpacity = 0.8, }) => { const [currentIndex, setCurrentIndex] = React.useState(0); const [direction, setDirection] = React.useState(0); const autoPlayRef = useRef(null); const childrenArray = React.Children.toArray(children); const totalItems = childrenArray.length; const swipeConfidenceThreshold = 10000; const swipePower = (offset: number, velocity: number) => Math.abs(offset) * velocity; const paginate = useCallback( (newDirection: number) => { setDirection(newDirection); if (newDirection === 1) { setCurrentIndex((prev) => (prev === totalItems - 1 ? 0 : prev + 1)); } else { setCurrentIndex((prev) => (prev === 0 ? totalItems - 1 : prev - 1)); } }, [totalItems], ); const handleDragEnd = useCallback( ( e: MouseEvent | TouchEvent | PointerEvent, { offset, velocity }: PanInfo, ) => { const swipe = swipePower(offset.x, velocity.x); if (swipe < -swipeConfidenceThreshold) { paginate(1); } else if (swipe > swipeConfidenceThreshold) { paginate(-1); } }, [paginate], ); const setupAutoPlay = useCallback(() => { if (autoPlayRef.current) { clearInterval(autoPlayRef.current); } if (autoPlayInterval > 0 && totalItems > 1) { autoPlayRef.current = setInterval(() => { paginate(1); }, autoPlayInterval); } }, [autoPlayInterval, totalItems, paginate]); React.useLayoutEffect(() => { setupAutoPlay(); return () => { if (autoPlayRef.current) { clearInterval(autoPlayRef.current); } }; }, [setupAutoPlay]); const contextValue: BorderGlideContextType = { currentIndex, direction, handleDragEnd, totalItems, }; const slideVariants = { enter: (direction: number) => ({ x: direction > 0 ? '100%' : '-100%', opacity: 0, scale: 0.95, }), center: { zIndex: 1, x: '0%', opacity: 1, scale: 1, }, exit: (direction: number) => ({ zIndex: 0, x: direction < 0 ? '100%' : '-100%', opacity: 0, scale: 0.95, }), }; const spring = { type: 'spring' as const, stiffness: 300, damping: 30, mass: 0.8, }; return (

{childrenArray[currentIndex]}

); }; interface BorderGlideCardProps { children: React.ReactNode; className?: string; } const BorderGlideCard: React.FC = ({ children, className, }) => { return ( {children} ); }; interface BorderGlideContentProps { children: React.ReactNode; className?: string; } const BorderGlideContent: React.FC = ({ children, className, }) => { return ( {children} ); }; interface BorderGlideHeaderProps { children: React.ReactNode; className?: string; } const BorderGlideHeader: React.FC = ({ children, className, }) => { return ( {children} ); }; interface BorderGlideFooterProps { children: React.ReactNode; className?: string; } const BorderGlideFooter: React.FC = ({ children, className, }) => { return ( {children} ); }; interface BorderGlideTitleProps { children: React.ReactNode; className?: string; } const BorderGlideTitle: React.FC = ({ children, className, }) => { return ( {children} ); }; interface BorderGlideDescriptionProps { children: React.ReactNode; className?: string; } const BorderGlideDescription: React.FC = ({ children, className, }) => { return ( {children} ); }; export { BorderGlide, BorderGlideCard, BorderGlideContent, BorderGlideHeader, BorderGlideFooter, BorderGlideTitle, BorderGlideDescription, }; 54:T7d2,import * as React from 'react'; import { cn } from '@/lib/utils'; function Card({ className, ...props }: React.ComponentProps<'div'>) { return (

); } function CardHeader({ className, ...props }: React.ComponentProps<'div'>) { return (

); } function CardTitle({ className, ...props }: React.ComponentProps<'div'>) { return (

); } function CardDescription({ className, ...props }: React.ComponentProps<'div'>) { return (

); } function CardAction({ className, ...props }: React.ComponentProps<'div'>) { return (

); } function CardContent({ className, ...props }: React.ComponentProps<'div'>) { return (

); } function CardFooter({ className, ...props }: React.ComponentProps<'div'>) { return (

); } export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, }; 4c:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"motion"}]]}]}],["$","li","clsx",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"clsx"}]]}]}],["$","li","tailwind-merge",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"tailwind-merge"}]]}]}]]}],["$","$L50",null,{"registryDependencies":["@scrollxui/card"]}]]}],["$","$L51",null,{"sourceUrl":"https://www.scrollxui.dev/registry/border-glide.json","proxyUrl":"https://shadcnregistry.com/r/scrollxui/border-glide","itemId":"@scrollxui/border-glide"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L52",null,{"files":[{"path":"components/ui/border-glide.tsx","content":"$53","type":"registry:ui"},{"path":"components/ui/card.tsx","content":"$54","type":"registry:ui"},{"path":"lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}","type":"registry:lib"}]}]]}],"$L55"]}]

Border Glide

Installation

Files

components

lib

Styles