---
title: Orbit Card
description: A visually enhanced card component with a pulsing orbit-style glowing background animation. Built using React, Tailwind CSS, and CSS-in-JSX keyframes. Ideal for showcasing premium features, callouts, or spotlight sections.
---

<ComponentPreview name="orbit-card-demo" />

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx lightswind@latest add orbit-card
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

```tsx
"use client";

import React from "react";

type OrbitCardProps = {
  children: React.ReactNode;
  className?: string;
};

const OrbitCard: React.FC<OrbitCardProps> = ({ children, className }) => {
  return (
    <div className={`relative ${className} rounded-xl`}>
      {/* Glowing shadow background */}
      <div className="absolute inset-0 z-0 flex items-center justify-center rounded-xl bg-background">
        <div className="absolute h-full w-full animate-orbit-glow rounded-xl">
          <div className="h-full w-full rounded-xl bg-transparent shadow-[0_0_30px_10px_rgba(59,130,246,0.5)]"></div>
        </div>
      </div>

      {/* Card Content */}
      <div className="relative z-10 rounded-xl bg-background p-6 ">
        {children}
      </div>

      {/* Keyframes for glowing effect */}
      <style jsx>{`
        @keyframes orbit-glow {
          0% {
            transform: scale(1);
            box-shadow: 0 0 30px 10px rgba(59, 130, 246, 0.5);
          }
          50% {
            transform: scale(1.05);
            box-shadow: 0 0 40px 20px rgba(59, 130, 246, 0.3);
          }
          100% {
            transform: scale(1);
            box-shadow: 0 0 30px 10px rgba(59, 130, 246, 0.5);
          }
        }
        .animate-orbit-glow {
          animation: orbit-glow 4s ease-in-out infinite;
        }
      `}</style>
    </div>
  );
};

export default OrbitCard;

```

</Steps>

</TabsContent>

</Tabs>

## Usage

```tsx
import OrbitCard from '@/components/lightswind/orbit-card';
```

```tsx
import OrbitCard from '@/components/lightswind/orbit-card';
import { Crown } from 'lucide-react';

<OrbitCard>
  <div className="flex flex-col items-center text-center">
    <Crown className="w-8 h-8 text-yellow-500 mb-3" />
    <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-1">
      Unlock Premium Access
    </h2>
    <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">
      Gain priority access to new features, exclusive tools, and member-only resources.
    </p>
    <button className="px-4 py-2 rounded-lg bg-primarylw text-white hover:bg-primarylw-2 transition duration-300 text-sm font-medium">
      Upgrade Now
    </button>
  </div>
</OrbitCard>;
```