Shimmer Button

import { ShimmerButton } from "@/components/vritti/shimmer-button";

export function ShimmerButtonExample() {
  return (
    <div className="flex h-[500px] w-full items-center justify-center overflow-hidden rounded-lg border bg-background">
      <ShimmerButton>Shimmer Button</ShimmerButton>
    </div>
  );
}

import { ShimmerButton } from "@/components/vritti/shimmer-button";

export function ShimmerButtonColorsExample() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-4 p-8">
      <ShimmerButton shimmerColor="#ffffff" background="rgba(0, 0, 0, 1)">
        Default
      </ShimmerButton>
      <ShimmerButton shimmerColor="#60a5fa" background="rgba(30, 64, 175, 1)">
        Blue
      </ShimmerButton>
      <ShimmerButton shimmerColor="#f472b6" background="rgba(157, 23, 77, 1)">
        Pink
      </ShimmerButton>
      <ShimmerButton shimmerColor="#a78bfa" background="rgba(91, 33, 182, 1)">
        Purple
      </ShimmerButton>
    </div>
  );
}

import { ShimmerButton } from "@/components/vritti/shimmer-button";

export function ShimmerButtonSizesExample() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-4 p-8">
      <ShimmerButton className="text-xs px-4 py-2" shimmerSize="0.03em">
        Small
      </ShimmerButton>
      <ShimmerButton className="text-sm px-6 py-3">
        Medium
      </ShimmerButton>
      <ShimmerButton className="text-lg px-8 py-4" shimmerSize="0.08em">
        Large
      </ShimmerButton>
    </div>
  );
}