Spinning Circles Card

A card component with spinning circles that create a dynamic light effect.

I amTitle

I am some text that describes whats in the title.

Installation

Update tailwind.config.js

Add the following animations to your tailwind.config.js file:

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      keyframes: {
        spin: {
          "0%": { transform: "rotate(0deg)" },
          "100%": { transform: "rotate(360deg)" },
        },
        "spin-reverse": {
          "0%": { transform: "rotate(0deg)" },
          "100%": { transform: "rotate(-360deg)" },
        },
      },
      animation: {
        spin: "spin 8s linear infinite",
        "reverse-spin": "spin-reverse 8s linear infinite",
      },
    },
  },
};

    Copy and paste the source code into your project.

    "use client";
 
import { cn } from "@/lib/utils";
import React from "react";
 
/**
 * Renders a spinning circles card component.
 *
 * @param {React.ReactNode} children - The content to be rendered centered inside the card.
 */
export function SpinningCirclesCard({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="relative h-[464px] w-[420px] bg-gradient-to-b from-transparent to-black/5 dark:to-[rgba(255,255,255,0.04)] overflow-hidden isolate rounded-2xl border shadow-lg">
      <div
        className={cn(
          "absolute bg-black/5 dark:bg-[#ffffff03]",
          "shadow-[inset_0_-16px_32px_rgba(0,0,0,0.08)] dark:shadow-[inset_0_-16px_32px_rgba(255,255,255,0.04)]",
          "rounded-full",
          "animate-reverse-spin",
          "w-[278px] h-[278px] top-[calc(50%-139px)] left-[calc(50%-139px)]"
        )}
      >
        <svg
          fill="none"
          height="278"
          viewBox="0 0 278 278"
          width="278"
          xmlns="http://www.w3.org/2000/svg"
          className="text-gray-800 dark:text-white"
        >
          <path
            d="M277.5 139C277.5 171.977 265.733 203.872 244.316 228.949C222.899 254.025 193.237 270.636 160.666 275.795C128.095 280.954 94.7517 274.321 66.634 257.091C38.5162 239.86 17.4692 213.162 7.27867 181.799"
            stroke="url(#paint0_linear_77_7119)"
            strokeLinecap="round"
            strokeLinejoin="round"
          ></path>
          <defs>
            <linearGradient
              gradientUnits="userSpaceOnUse"
              id="paint0_linear_77_7119"
              x1="278"
              x2="139"
              y1="139"
              y2="278"
            >
              <stop stopColor="currentColor"></stop>
              <stop offset="1" stopColor="currentColor" stopOpacity="0"></stop>
            </linearGradient>
          </defs>
        </svg>
      </div>
      <div
        className={cn(
          "absolute bg-black/5 dark:bg-[#ffffff03]",
          "shadow-[inset_0_-16px_32px_rgba(0,0,0,0.08)] dark:shadow-[inset_0_-16px_32px_rgba(255,255,255,0.04)]",
          "rounded-full transition-[transform,box-shadow]",
          "animate-spin",
          "w-[398px] h-[398px] top-[calc(50%-199px)] left-[calc(50%-199px)]"
        )}
      >
        <svg
          fill="none"
          height="398"
          viewBox="0 0 398 398"
          width="398"
          xmlns="http://www.w3.org/2000/svg"
          className="text-gray-800 dark:text-white"
        >
          <path
            d="M397.5 199C397.5 235.608 387.377 271.503 368.249 302.716C349.122 333.929 321.735 359.245 289.117 375.865C256.499 392.484 219.921 399.76 183.426 396.888C146.931 394.016 111.941 381.107 82.3246 359.59"
            stroke="url(#paint0_linear_77_7120)"
            strokeLinecap="round"
            strokeLinejoin="round"
          ></path>
          <defs>
            <linearGradient
              gradientUnits="userSpaceOnUse"
              id="paint0_linear_77_7120"
              x1="5.39763e-06"
              x2="199"
              y1="148.785"
              y2="-7.02881e-06"
            >
              <stop stopColor="currentColor"></stop>
              <stop offset="1" stopColor="currentColor" stopOpacity="0"></stop>
            </linearGradient>
          </defs>
        </svg>
      </div>
      <div
        className={cn(
          "absolute bg-black/5 dark:bg-[#ffffff03]",
          "shadow-[inset_0_-16px_32px_rgba(0,0,0,0.08)] dark:shadow-[inset_0_-16px_32px_rgba(255,255,255,0.04)]",
          "rounded-full transition-[transform,box-shadow]",
          "animate-reverse-spin",
          "w-[518px] h-[518px] top-[calc(50%-259px)] left-[calc(50%-259px)]"
        )}
      >
        <svg
          fill="none"
          height="518"
          viewBox="0 0 518 518"
          width="518"
          xmlns="http://www.w3.org/2000/svg"
          className="text-gray-800 dark:text-white"
        >
          <path
            d="M388.25 35.1324C437.531 63.5848 476.046 107.503 497.823 160.076C519.599 212.649 523.42 270.939 508.692 325.905C493.964 380.87 461.51 429.44 416.365 464.082C371.22 498.723 315.905 517.5 259 517.5"
            stroke="url(#paint0_linear_77_7121)"
            strokeLinecap="round"
            strokeLinejoin="round"
          ></path>
          <defs>
            <linearGradient
              gradientUnits="userSpaceOnUse"
              id="paint0_linear_77_7121"
              x1="390.377"
              x2="518"
              y1="37.5362"
              y2="259"
            >
              <stop stopColor="currentColor"></stop>
              <stop offset="1" stopColor="currentColor" stopOpacity="0"></stop>
            </linearGradient>
          </defs>
        </svg>
      </div>
      <div className="relative text-center flex flex-col justify-center items-center gap-2 h-full w-full">
        {children}
      </div>
    </div>
  );
}

      Update the import paths to match your project setup.

      Props

      PropTypeDefaultDescription
      childrenReact.ReactNode-The content to be rendered centered inside the card.
      Flip CardElastic Cursor