cosmic-button

1"use client"
2 
3import type { ComponentPropsWithoutRef } from "react"
4 
5import { cn } from "@/lib/utils"
6 
7/**
8 * Requires these keyframes and utilities in your CSS (e.g. global CSS or Tailwind):
9 *
10 * @keyframes cosmic-spin {
11 *   from { transform: rotate(0deg); }
12 *   to { transform: rotate(360deg); }
13 * }
14 * @keyframes cosmic-spin-slow {
15 *   from { transform: rotate(0deg); }
16 *   to { transform: rotate(-360deg); }
17 * }
18 * @utility animate-cosmic-spin {
19 *   animation: cosmic-spin 3s linear infinite;
20 * }
21 * @utility animate-cosmic-spin-slow {
22 *   animation: cosmic-spin-slow 5s linear infinite;
23 * }
24 */
25 
26export type CosmicButtonProps<E extends "a" | "button" = "a"> = {
27  /** The HTML element to render as. @default "a" */
28  as?: E
29} & ComponentPropsWithoutRef<E>
30 
31/**
32 * An animated button/link with a cosmic gradient border effect.
33 * Renders as an anchor by default; use `as="button"` for button behavior.
34 *
35 * @example
36 * // As link (default)
37 * <CosmicButton href="/about">About</CosmicButton>
38 *
39 * @example
40 * // As button
41 * <CosmicButton as="button" onClick={handleClick}>Submit</CosmicButton>
42 */
43export function CosmicButton<E extends "a" | "button" = "a">({
44  as,
45  className,
46  children,
47  ...props
48}: CosmicButtonProps<E>) {
49  const Element = as ?? "a"
50  const isAnchor = Element === "a"
51 
52  const baseClassName = cn(
53    "group/cosmic relative inline-flex min-h-11 min-w-11 items-center justify-center gap-3 rounded-[15px] p-[3px] transition-transform  ",
54    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#adfa1b] focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-[#0c0912]",
55    className
56  )
57 
58  const content = (
59    <>
60      {/* Animated cosmic border - enlarges on hover */}
61      <span className="absolute inset-0 overflow-hidden rounded-[15px] transition-all duration-300 ease-out group-hover/cosmic:inset-[-3px] group-hover/cosmic:rounded-[15px]">
62        <span className="absolute inset-[-200%] animate-cosmic-spin bg-[conic-gradient(from_0deg,#adfa1b,#c9ff63,#efffb7,#8cd413,#6f9f19,#92d61b,#adfa1b)] opacity-95" />
63      </span>
64 
65      {/* Noise/texture overlay on the border - enlarges on hover */}
66      <span className="absolute inset-0 overflow-hidden rounded-[15px] opacity-45 mix-blend-soft-light transition-all duration-300 ease-out group-hover/cosmic:inset-[-3px] group-hover/cosmic:rounded-[15px] dark:opacity-60 dark:mix-blend-overlay">
67// … truncated