Glow Button

1"use client";
2 
3import * as React from "react";
4import { motion, type Transition } from "motion/react";
5 
6import { type VariantProps } from "class-variance-authority";
7import { Button, buttonVariants } from "@/components/ui/button";
8import { cn } from "@/lib/utils";
9 
10type ButtonProps = React.ComponentPropsWithoutRef<"button"> &
11  VariantProps<typeof buttonVariants> & { asChild?: boolean };
12 
13type GlowMode =
14  | "rotate"
15  | "pulse"
16  | "breathe"
17  | "colorShift"
18  | "flowHorizontal"
19  | "static";
20 
21type GlowBlur =
22  | number
23  | "softest"
24  | "soft"
25  | "medium"
26  | "strong"
27  | "stronger"
28  | "strongest"
29  | "none";
30 
31const BLUR_PRESETS: Record<string, string> = {
32  softest: "blur-xs",
33  soft: "blur-sm",
34  medium: "blur-md",
35  strong: "blur-lg",
36  stronger: "blur-xl",
37  strongest: "blur-2xl",
38  none: "blur-none",
39};
40 
41function blurClass(blur: GlowBlur) {
42  if (typeof blur === "number") return `blur-[${blur}px]`;
43  return BLUR_PRESETS[blur] ?? "blur-md";
44}
45 
46interface GlowEffectInnerProps {
47  colors?: string[];
48  mode?: GlowMode;
49  blur?: GlowBlur;
50  scale?: number;
51  duration?: number;
52  transition?: Transition;
53  className?: string;
54}
55 
56function GlowEffectLayer({
57  colors = ["#FF5733", "#33FF57", "#3357FF", "#F1C40F"],
58  mode = "rotate",
59  blur = "strong",
60  scale = 1,
61  duration = 5,
62  transition,
63  className,
64}: GlowEffectInnerProps) {
65  const base: Transition = { repeat: Infinity, duration, ease: "linear" };
66 
67  const animations: Record<GlowMode, object> = {
68    rotate: {
69      background: [
70        `conic-gradient(from 0deg at 50% 50%, ${colors.join(", ")})`,
71        `conic-gradient(from 360deg at 50% 50%, ${colors.join(", ")})`,
72      ],
73      transition: transition ?? base,
74    },
75    pulse: {
76      background: colors.map(
77        (c) => `radial-gradient(circle at 50% 50%, ${c} 0%, transparent 100%)`,
78      ),
79      scale: [scale, scale * 1.1, scale],
80      opacity: [0.5, 0.8, 0.5],
81      transition: transition ?? { ...base, repeatType: "mirror" },
82    },
83    breathe: {
84      background: colors.map(
85        (c) => `radial-gradient(circle at 50% 50%, ${c} 0%, transparent 100%)`,
86      ),
87      scale: [scale, scale * 1.05, scale],
88      transition: transition ?? { ...base, repeatType: "mirror" },
89    },
90    colorShift: {
91      background: colors.map((c, i) => {
92        const next = colors[(i + 1) % colors.length];
93        return `conic-gradient(from 0deg at 50% 50%, ${c} 0%, ${next} 50%, ${c} 100%)`;
94      }),
95// … truncated