Hover Cracker Animated Card

Overview

The FirecrackerCard component is a visually appealing UI card that features a glowing and lifting effect when hovered. It’s designed to draw attention and add interactivity to your interface.

Key features include:

Title and Description: Customizable title and description.
Customizable Styles: Easy to apply additional styles using the className prop.

New Year Boom!

Hover or click to see the sparks fly!

CLI Installation

Ensure your project is using ShadCN and the custom UI system. Then run:

npx shadcn@latest add https://ui-chaiui.vercel.app/registry/basic-button.json

Manual Installation

To manually set up the FirecrackerCard component in your project, follow these steps:

Go to your src directory.
Create a folder structure: components/ui/FirecrackerCard.
Inside the glowLiftCard folder, create a file named firecrackerCard.tsx.
Paste the following code into firecrackerCard.tsx.

"use client";
import React, { useState } from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { twMerge } from "tailwind-merge";
import clsx from "clsx";
 
 
const firecrackerCardVariants = cva(
  "relative w-full h-full rounded-xl border-2 shadow-xl flex flex-col items-center justify-center transition-all duration-300",
  {
    variants: {
      variant: {
        default: "border-orange-500 bg-white text-black",
        dark: "border-yellow-400 bg-[#1c1c1c] text-white",
        light:"border-gray-400 bg-gray-300 text-black"
      },
      size: {
        sm: "w-[250px] h-[160px]",
        md: "w-[300px] h-[200px]",
        lg: "w-[350px] h-[240px]",
      },
      animate: {
        true: "shadow-lg",
        false: "",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "md",
      animate: false,
    },
  }
);
 
 
type FirecrackerCardProps = React.HTMLAttributes<HTMLDivElement> &
  VariantProps<typeof firecrackerCardVariants> & {
    title?: string;
    description?: string;
    buttonLabel?: string;
  };
 
 
const FirecrackerCard: React.FC<FirecrackerCardProps> = ({
  title = "Firecracker Card",
  description = "Click below to start the firework show!",
  buttonLabel = "Ignite Fireworks",
  size,
  variant,
  className,
  ...props
}) => {
  const [animate, setAnimate] = useState(false);
 
  return (
    <div>
     <div
  className={twMerge(
    clsx(firecrackerCardVariants({ size, variant, animate }), className)
  )}
  onMouseEnter={() => setAnimate(true)}
  onMouseLeave={() => setAnimate(false)}
  {...props}
>
        <h2 className="text-xl font-bold mb-2 text-black dark:text-white">{title}</h2>
        <p className="text-sm text-center mb-4 text-gray-400">{description}</p>
 
        <button
          onClick={() => setAnimate(true)}
          className="px-6 py-2 bg-orange-500 hover:bg-orange-400 rounded-full text-white font-semibold"
        >
          {buttonLabel}
        </button>
 
        {animate && (
          <>
            <span className="absolute w-2 h-2 bg-amber-400 rounded-full animate-firecracker1" />
            <span className="absolute w-2 h-2 bg-amber-400 rounded-full animate-firecracker2" />
            <span className="absolute w-2 h-2 bg-amber-400 rounded-full animate-firecracker3" />
           
          </>
        )}
      </div>
 
 
      <style>
        {`
          @keyframes firecracker1 {
            0%   { top: 0; left: 0; }
            25%  { top: 0; left: 100%; transform: translate(-100%, 0); }
            50%  { top: 100%; left: 100%; transform: translate(-100%, -100%); }
            75%  { top: 100%; left: 0; transform: translate(0, -100%); }
            100% { top: 0; left: 0; }
          }
 
          @keyframes firecracker2 {
            0%   { top: 0; left: 0; }
            25%  { top: 100%; left: 100%; transform: translate(-100%, -100%); }
            50%  { top: 100%; left: 0; transform: translate(0, -100%); }
            75%  { top: 0; left: 100%; transform: translate(-100%, 0); }
            100% { top: 0; left: 0; }
          }
 
          @keyframes firecracker3 {
            0%   { top: 0; left: 0; }
            25%  { top: 100%; left: 0; transform: translate(0, -100%); }
            50%  { top: 100%; left: 100%; transform: translate(-100%, -100%); }
            75%  { top: 0; left: 100%; transform: translate(-100%, 0); }
            100% { top: 0; left: 0; }
          }
 
          @keyframes firecracker4 {
            0%   { top: 0; left: 0; }
            25%  { top: 100%; left: 0; transform: translate(0, -100%); }
            50%  { top: 100%; left: 100%; transform: translate(-100%, -100%); }
            75%  { top: 0; left: 100%; transform: translate(-100%, 0); }
            100% { top: 0; left: 0; }
          }
 
          .animate-firecracker1 {
            animation: firecracker1 2s linear infinite;
          }
          .animate-firecracker2 {
            animation: firecracker2 2s linear infinite;
          }
          .animate-firecracker3 {
            animation: firecracker3 2s linear infinite;
          }
          .animate-firecracker4 {
            animation: firecracker4 2s linear infinite;
          }
        `}
      </style>
 </div>
  );
};
 
export default FirecrackerCard;

Usage

Import and use the FirecrackerCard component like this:

 
import FirecrackerCard from "@/components/ui/cards/glowLiftCard";
 
export default function App() {
  return <firecrackerCard size="lg" variant="dark" animate="true" description="Hover or click to see the sparks fly!"
        buttonLabel="Light It Up" />;
}

Props

Prop	Type	Description	Default	props
`size`	`string`	The size of the card	`"md"`	`"sm"` `"md"` `"lg"`
`variant`	`string`	The color of the card	`"default"`	`"default"` `"dark"` `"light"`
`animate`	`string`	The title displayed on the card	`"false"`	`"true"`
`description`	`string`	The description text under the title	`"Light it up"`	`""`
`buttonLabel`	`string`	The description text under the button	`"Hover or click to see the sparks fly!"`	`""`
`className`	`string`	Additional Tailwind classes for outer container	`""`	`""`