CracklingCard

Overview

The Crackling Card features a smooth gradient transition with vibrant colors, adding a dynamic and visually striking element to your interface.

Key features include:

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

Cosmic Card

With a glowy magical border!

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/crackling-card.json

Manual Installation

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

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

import React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { twMerge } from "tailwind-merge";
import clsx from "clsx";
 
 
const cracklingCardVariants = cva(
  "relative p-[3px] rounded-xl animate-border overflow-hidden",
  {
    variants: {
      size: {
        sm: "w-[200px] h-[140px]",
        md: "w-[300px] h-[200px]",
        lg: "w-[400px] h-[250px]",
      },
      variant: {
        default: "bg-white text-black",
        dark: "bg-gray-900 text-white",
      },
    },
    defaultVariants: {
      size: "md",
      variant: "default",
    },
  }
);
 
 
type CracklingCardProps = React.HTMLAttributes<HTMLDivElement> &
  VariantProps<typeof cracklingCardVariants> & {
    title?: string;
    description?: string;
    animationDuration?: string;
  };
 
 
const CracklingCard: React.FC<CracklingCardProps> = ({
  title = "Crackling Border",
  description = "This card has a sparkly moving border!",
  size,
  variant,
  className,
  animationDuration = "4s",
  ...props
}) => {
  return (
    <>
      <div className={twMerge(clsx(cracklingCardVariants({ size, variant }), className))} {...props}>
        <div className="w-full h-full rounded-xl flex flex-col items-center justify-center text-center px-4 py-6">
          <h2 className="text-xl font-bold mb-2">{title}</h2>
          <p className="text-sm">{description}</p>
        </div>
      </div>
 
 
      <style>{`
        @keyframes crackle-border {
          0% { background-position: 0% 50%; }
          50% { background-position: 100% 50%; }
          100% { background-position: 0% 50%; }
        }
        .animate-border {
          background: linear-gradient(
            270deg,
            #ff00c8,
            #00ffff,
            #ff9900,
            #ff00c8
          );
          background-size: 600% 600%;
          animation: crackle-border ${animationDuration} linear infinite;
        }
      `}</style>
    </>
  );
};
 
export default CracklingCard;

Usage

Import and use the GlowLiftCard component like this:

import CracklingCard from "@/components/ui/animatedCards/cracklingcard";
   <CracklingCard
        size="lg"
        variant="dark"
        title="Cosmic Card"
        description="With a glowy magical border!"
        animationDuration="6s"
      />

Props

Prop	Type	Description	Default	props
`size`	`string`	The size of the card	`"lg"`	`sm` `md` `lg`
`variant`	`string`	The color of the card	`"default"`	`default` `dark`
`title`	`string`	The title displayed on the card	`"Cosmic Card"`	`""`
`description`	`string`	The description text under the title	`"With a glowy magical border!"`	`""`
`className`	`string`	Additional Tailwind classes for outer container	`""`	`""`