Spotlight Card

Animations

Card with animated spotlight effect following the cursor.

Import

import { PixelSpotlightCard } from "@/components/ui/pixel/animations/pixel-spotlight-card"

Usage

Featured

Hover to reveal spotlight effect!

Component Source

Copy and paste the following code into your project at /src/components/ui/pixel/animations/pixel-spotlight-card.tsx

"use client";

import { cva, type VariantProps } from "class-variance-authority";
import * as React from "react";
import { cn } from "@/lib/utils";

const pixelSpotlightCardVariants = cva(
  "relative overflow-hidden pixel-borders transition-all duration-200",
  {
    variants: {
      variant: {
        default:
          "bg-white dark:bg-black border-2 border-black dark:border-white",
        primary:
          "bg-[#ff8c00]/10 dark:bg-[#ff8c00]/5 border-2 border-[#ff8c00]",
        secondary:
          "bg-[#ffd700]/10 dark:bg-[#ffd700]/5 border-2 border-[#ffd700]",
        accent: "bg-[#5227FF]/10 dark:bg-[#5227FF]/5 border-2 border-[#5227FF]",
      },
      size: {
        sm: "p-4",
        md: "p-6",
        lg: "p-8",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "md",
    },
  },
);

export interface PixelSpotlightCardProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof pixelSpotlightCardVariants> {
  spotlightColor?: string;
  spotlightSize?: number;
}

const PixelSpotlightCard = React.forwardRef<
  HTMLDivElement,
  PixelSpotlightCardProps
>(
  (
    {
      spotlightColor = "rgba(255, 215, 0, 0.3)",
      spotlightSize = 200,
      variant,
      size,
      className,

// ... (more code below)

Props

PropTypeDefaultDescription
spotlightColorstring"rgba(255, 215, 0, 0.3)"Spotlight color in rgba format
spotlightSizenumber200Spotlight radius in pixels
variant"default" | "primary" | "secondary" | "accent""default"Card style variant

Examples

Primary Spotlight

Featured

Hover to reveal spotlight effect!

Accessibility

This component is built with accessibility in mind, including proper ARIA attributes, keyboard navigation, and focus management.