animated-button

1"use client";
2 
3import React from "react";
4import { motion, MotionProps } from "framer-motion";
5import { cn } from "@/lib/utils";
6 
7type AnimatedButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
8  MotionProps & {
9    children?: React.ReactNode;
10    as?: any;
11  };
12 
13/**
14 * AnimatedButton
15 * - theme-aware: uses Tailwind `dark:` classes so it works in both light and dark mode
16 * - accepts all native button props (onClick, className, type, etc.)
17 */
18const AnimatedButton: React.FC<AnimatedButtonProps> = ({
19  children = "Browse Components",
20  className = "",
21  as = "button",
22  ...rest
23}) => {
24  const Component = (motion as any)[as] || motion.button;
25 
26  return (
27    <Component
28      {...rest}
29      whileHover={{ scale: 1.01 }}
30      whileTap={{ scale: 0.97 }}
31      transition={{
32        type: "spring",
33        stiffness: 500,
34        damping: 30,
35        mass: 0.5,
36      }}
37      // Set a CSS variable `--shine` that we override for dark mode via Tailwind.
38      className={cn(
39        "group inline-flex items-center justify-center px-6 py-2 rounded-md relative overflow-hidden bg-neutral-50 dark:bg-black border border-neutral-200 dark:border-[#222]",
40        "text-neutral-900 dark:text-neutral-100 font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-950 disabled:pointer-events-none disabled:opacity-50",
41        "[--shine:rgba(0,0,0,.66)] dark:[--shine:rgba(255,255,255,.66)]",
42        className,
43      )}
44    >
45      {/* Text with shine mask */}
46      <motion.span
47        className="tracking-wide font-light flex items-center justify-center h-full w-full relative z-10"
48        style={{
49          WebkitMaskImage:
50            "linear-gradient(-75deg, white calc(var(--mask-x) + 20%), transparent calc(var(--mask-x) + 30%), white calc(var(--mask-x) + 100%))",
51          maskImage:
52            "linear-gradient(-75deg, white calc(var(--mask-x) + 20%), transparent calc(var(--mask-x) + 30%), white calc(var(--mask-x) + 100%))",
53        }}
54        initial={{ ["--mask-x" as any]: "100%" } as any}
55        animate={{ ["--mask-x" as any]: "-100%" } as any}
56        transition={{
57          repeat: Infinity,
58          duration: 1,
59          ease: "linear",
60          repeatDelay: 1,
61        }}
62      >
63        {children}
64      </motion.span>
65 
66      {/* Border shine effect uses the --shine variable so it adapts to theme */}
67      <motion.span
68        className="block absolute inset-0 rounded-md p-px"
69        style={{
70// … truncated