Components
React Shimmer Button Component: A Customizable Button with Animated Effects
This React component renders a customizable button with various visual enhancements, including a 3D effect, hover animations, and a unique shimmer effect triggered by mouse movement. It offers options for size, variant (default or secondary), and custom shimmer color. The component utilizes CSS variables and keyframes for animation.
import React from 'react';
import {ShimmerButton, type ShimmerButtonProps} from "@/components/ui/shimmer-button";
export default function ShimmerButtonDemo() {
return (
<div className="min-h-screen bg-background flex items-center justify-center p-8 w-full">
{/* Grain overlay for aesthetic */}
<div className="relative z-10 flex flex-col items-center gap-8">
{/* Main demo */}
<div className="text-center space-y-4">
<ShimmerButton onClick={() => alert('Hello from Shimmer Button!')}>
Contact Us
</ShimmerButton>
</div>
</div>
</div>
);
}