4f: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"] 50: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"] 51: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"] 52:T1f39,"use client"; import { Slot } from "radix-ui"; import * as React from "react"; import { cn } from "@/lib/utils"; type MovingBorderButtonVariant = "default" | "outline" | "secondary"; type MovingBorderEffect = | "spin" | "beam" | "pulse" | "shimmer" | "dash" | "hover-spin" | "reverse" | "meteor" | "glow" | "ping" | "dual-beam" | "wave"; const variantStyles: Record< MovingBorderButtonVariant, { bg: string; border: string; text: string } > = { default: { bg: "bg-primary", border: "", text: "text-primary-foreground", }, secondary: { bg: "bg-secondary", border: "", text: "text-secondary-foreground", }, outline: { bg: "bg-background", border: "border border-input", text: "text-foreground", }, }; const gradients = { rainbow: "conic-gradient(from 0deg, var(--chart-1), var(--chart-3), var(--chart-5), var(--chart-2), var(--chart-4), var(--chart-1))", beam: "conic-gradient(from 0deg, transparent 0deg, transparent 285deg, var(--chart-1) 310deg, var(--chart-3) 330deg, var(--chart-5) 350deg, transparent 360deg)", shimmer: "linear-gradient(110deg, transparent 25%, var(--chart-1) 42%, var(--chart-3) 50%, var(--chart-5) 58%, transparent 75%)", meteor: "conic-gradient(from 0deg, transparent 0deg, transparent 240deg, var(--chart-1) 270deg, var(--chart-3) 295deg, var(--chart-5) 315deg, transparent 345deg, transparent 360deg)", dualBeam: "conic-gradient(from 0deg, transparent 0deg, var(--chart-1) 18deg, transparent 36deg, transparent 180deg, var(--chart-3) 198deg, transparent 216deg, transparent 360deg)", wave: "conic-gradient(from var(--moving-border-angle, 0deg), var(--chart-1), var(--chart-3), var(--chart-5), var(--chart-2), var(--chart-4), var(--chart-1))", }; type MaskedEffect = { kind: "mask"; layer: string; gradient: keyof typeof gradients; }; type CustomEffect = { kind: "custom"; id: "dash" | "ping"; }; const effectConfig: Record = { spin: { kind: "mask", layer: "absolute inset-[-150%] animate-[moving-border-spin_4s_linear_infinite]", gradient: "rainbow", }, beam: { kind: "mask", layer: "absolute inset-[-120%] animate-[moving-border-spin_3s_linear_infinite]", gradient: "beam", }, pulse: { kind: "mask", layer: "absolute inset-0 rounded-[inherit] animate-[moving-border-pulse_2s_ease-in-out_infinite]", gradient: "rainbow", }, shimmer: { kind: "mask", layer: "absolute inset-[-50%] animate-[moving-border-shimmer_2.5s_linear_infinite] bg-[length:200%_200%]", gradient: "shimmer", }, dash: { kind: "custom", id: "dash" }, "hover-spin": { kind: "mask", layer: "absolute inset-[-150%] opacity-30 transition-opacity duration-300 group-hover/btn:opacity-100 group-hover/btn:animate-[moving-border-spin_3s_linear_infinite]", gradient: "rainbow", }, reverse: { kind: "mask", layer: "absolute inset-[-150%] animate-[moving-border-spin-reverse_4s_linear_infinite]", gradient: "rainbow", }, meteor: { kind: "mask", layer: "absolute inset-[-130%] animate-[moving-border-spin_6s_linear_infinite]", gradient: "meteor", }, glow: { kind: "mask", layer: "absolute inset-[-100%] blur-sm animate-[moving-border-glow_3s_ease-in-out_infinite]", gradient: "rainbow", }, ping: { kind: "custom", id: "ping" }, "dual-beam": { kind: "mask", layer: "absolute inset-[-120%] animate-[moving-border-spin_5s_linear_infinite]", gradient: "dualBeam", }, wave: { kind: "mask", layer: "absolute inset-[-150%] animate-[moving-border-wave_5s_linear_infinite]", gradient: "wave", }, }; export interface MovingBorderButtonProps extends React.ButtonHTMLAttributes { variant?: MovingBorderButtonVariant; effect?: MovingBorderEffect; asChild?: boolean; } export const MovingBorderButton = ({ children, variant = "outline", effect = "spin", asChild = false, className, ...props }: MovingBorderButtonProps) => { const styles = variantStyles[variant]; const Comp = asChild ? Slot.Root : "button"; const config = effectConfig[effect]; const dashGradientId = React.useId(); return ( {config.kind === "mask" ? ( ) : null} {config.kind === "custom" && config.id === "dash" ? ( ) : null} {config.kind === "custom" && config.id === "ping" ? ( <> ) : null} {children} ); }; 4b:["$","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","radix-ui",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/radix-ui","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"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":["utils"]}]]}],["$","$L50",null,{"sourceUrl":"https://shadcnblocks.com/r/border-button-border-button-moving-1.json","proxyUrl":"https://shadcnregistry.com/r/shadcnblocks/border-button-border-button-moving-1","itemId":"@shadcnblocks/border-button-border-button-moving-1"}],["$","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"}],["$","$L51",null,{"files":[{"path":"example/border-button/border-button-moving-1.tsx","content":"import { MovingBorderButton } from \"@/components/shadcnblocks/moving-border-button\";\n\nexport const title = \"Moving Spin\";\n\nconst Example = () => (\n \n Moving Spin\n \n);\n\nexport default Example;\n","type":"registry:block"},{"path":"components/shadcnblocks/moving-border-button.tsx","content":"$52","type":"registry:component","target":""}]}]]}],"$L53"]}]

Border Button Moving 1 Moving Spin

Installation

Files

components

Styles