Card Pulse Border

const CardPulseBorder = () => {
  return (
    <div className='relative h-48 w-48'>
      <div className='absolute top-0 flex w-full justify-center'>
        <div className='left-0 h-[1px] animate-border-width rounded-full bg-gradient-to-r from-[rgba(17,17,17,0)] via-white to-[rgba(17,17,17,0)] transition-all duration-1000' />
      </div>
      <div className='flex h-full items-center justify-center rounded-md border border-gray-800 bg-gradient-to-b from-gray-950 to-black px-3 py-2'>
        <p className='text-sm text-gray-200'>Card Content</p>
      </div>
    </div>
  );
};

export default CardPulseBorder;

{
  "animation": {
    "border-width": "border-width 3s infinite alternate"
  },
  "keyframes": {
    "border-width": {
      "from": {
        "width": "10px",
        "opacity": "0"
      },
      "to": {
        "width": "100px",
        "opacity": "1"
      }
    }
  }
}