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:T236c,'use client'; import * as React from 'react'; import { Slot } from '@radix-ui/react-slot'; import { cva, type VariantProps } from 'class-variance-authority'; import { AnimatePresence, motion, type Variants, useReducedMotion, type Easing, } from 'motion/react'; import { cn } from '@/lib/utils'; const buttonVariants = cva( 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', { variants: { variant: { default: 'bg-primary text-primary-foreground shadow-sm hover:bg-primary/90', destructive: 'bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90', outline: 'border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground', secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80', ghost: 'hover:bg-accent hover:text-accent-foreground', link: 'relative text-primary underline-offset-4 hover:text-primary/90 group', success: 'bg-green-600 text-white hover:bg-green-700', warning: 'bg-yellow-500 text-black hover:bg-yellow-600', info: 'bg-blue-500 text-white hover:bg-blue-600', dark: 'bg-gray-800 text-white hover:bg-gray-700', light: 'bg-gray-100 text-gray-800 hover:bg-gray-200', gradient: 'bg-linear-to-r from-indigo-500 via-purple-500 to-pink-500 text-white hover:opacity-90', glass: 'bg-white/10 backdrop-blur-md text-white border border-white/20 hover:bg-white/20', }, size: { default: 'h-9 px-4 py-2', sm: 'h-8 rounded-md px-3 text-xs', lg: 'h-10 rounded-md px-8', icon: 'h-9 w-9', }, }, defaultVariants: { variant: 'default', size: 'default', }, }, ); interface StaggerButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean; text?: string; hoverText?: string; staggerDelay?: number; staggerDuration?: number; direction?: 'up' | 'down' | 'alternate-even' | 'alternate-odd'; easing?: Easing; disableStagger?: boolean; } const useProcessedChars = (text: string, hoverText?: string) => React.useMemo(() => { const base = Array.from(text); const hover = Array.from(hoverText ?? text); const max = Math.max(base.length, hover.length); return { safeBase: Array.from({ length: max }, (_, i) => base[i] ?? ' '), safeHover: Array.from({ length: max }, (_, i) => hover[i] ?? ' '), }; }, [text, hoverText]); const useIsTouchDevice = () => { const [isTouch, setIsTouch] = React.useState(false); React.useEffect(() => { const check = () => setIsTouch('ontouchstart' in window || navigator.maxTouchPoints > 0); check(); window.addEventListener('resize', check); return () => window.removeEventListener('resize', check); }, []); return isTouch; }; const getTargetY = ( direction: StaggerButtonProps['direction'], isEven: boolean, ) => { switch (direction) { case 'up': return '-100%'; case 'down': return '0%'; case 'alternate-even': return isEven ? '-50%' : '0%'; case 'alternate-odd': return isEven ? '0%' : '-50%'; default: return '-50%'; } }; const StaggerButton = React.forwardRef( ( { className, variant, size, asChild = false, text, hoverText, staggerDelay = 0.025, staggerDuration = 0.4, direction = 'down', easing = [0.25, 1, 0.5, 1] as Easing, disableStagger = false, children, ...props }, ref, ) => { const [isHovered, setIsHovered] = React.useState(false); const [isTapped, setIsTapped] = React.useState(false); const displayText = text ?? React.Children.toArray(children) .map((c) => (typeof c === 'string' ? c : '')) .join('') ?? ''; const { safeBase, safeHover } = useProcessedChars(displayText, hoverText); const prefersReducedMotion = useReducedMotion(); const isTouchDevice = useIsTouchDevice(); const containerVariants: Variants = { initial: {}, hover: { transition: { staggerChildren: prefersReducedMotion ? 0 : staggerDelay, }, }, exit: {}, }; const stackVariants: Variants = { initial: { y: direction === 'up' ? '0%' : '-50%' }, hover: ({ index, isEven }: { index: number; isEven: boolean }) => prefersReducedMotion ? { y: direction === 'up' ? '0%' : '-50%' } : { y: getTargetY(direction, isEven), transition: { duration: staggerDuration, delay: index * staggerDelay, ease: easing, }, }, exit: { y: direction === 'up' ? '0%' : '-50%' }, }; const handleTouchStart = (e: React.TouchEvent) => { if (isTouchDevice && !disableStagger) { setIsTapped(true); setTimeout( () => setIsTapped(false), staggerDuration * 1000 + safeBase.length * staggerDelay * 1000, ); } props.onTouchStart?.(e); }; const shouldAnimate = disableStagger ? false : isTouchDevice ? isTapped : isHovered; const Comp = asChild ? Slot : 'button'; return ( !isTouchDevice && setIsHovered(true)} onMouseLeave={() => !isTouchDevice && setIsHovered(false)} onTouchStart={handleTouchStart} {...props} > {safeBase.map((char, index) => { const nextChar = safeHover[index]; const isSpace = char === ' ' && nextChar === ' '; const visibleCharsBefore = safeBase .slice(0, index) .filter((c) => c !== ' ').length; const isEven = visibleCharsBefore % 2 === 0; const isUp = direction === 'up'; return ( {isUp ? ( <> {isSpace ? '\u00A0' : char} {isSpace ? '\u00A0' : nextChar} ) : ( <> {isEven && ( {isSpace ? '\u00A0' : nextChar} )} {isSpace ? '\u00A0' : char} {!isEven && ( {isSpace ? '\u00A0' : nextChar} )} )} ); })} {variant === 'link' && ( )} ); }, ); StaggerButton.displayName = 'StaggerButton'; export { StaggerButton, buttonVariants }; export type { StaggerButtonProps }; 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","@radix-ui/react-slot",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-slot","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":"@radix-ui/react-slot"}]]}]}],["$","li","class-variance-authority",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","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":"class-variance-authority"}]]}]}],["$","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":[]}]]}],["$","$L51",null,{"sourceUrl":"https://www.scrollxui.dev/registry/stagger-button.json","proxyUrl":"https://shadcnregistry.com/r/scrollxui/stagger-button","itemId":"@scrollxui/stagger-button"}],["$","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/stagger-button.tsx","content":"$53","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"}]}]]}],"$L54"]}]

Stagger Button

Installation

Files

components

lib

Styles