xlibs-components/dist/components/aceternity/card-spotlight-demo.js

Modern React component library with Aceternity, MagicUI, and ShadCN components for building beautiful web applications

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { CardSpotlight } from './card-spotlight';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../components/ui/card.js';
export function CardSpotlightDemo() {
    return (_jsxs(Card, { className: "w-full", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Card Spotlight Effect" }), _jsx(CardDescription, { children: "Interactive cards with mouse-following spotlight and animated canvas effects" })] }), _jsxs(CardContent, { className: "space-y-6", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsx(CardSpotlight, { radius: 300, color: "#1a1a1a", children: _jsxs("div", { className: "relative z-10", children: [_jsx("h3", { className: "text-xl font-semibold text-white mb-2", children: "Interactive Spotlight" }), _jsx("p", { className: "text-neutral-300 text-sm", children: "Move your mouse over this card to see the spotlight effect. The light follows your cursor and reveals animated particles." })] }) }), _jsx(CardSpotlight, { radius: 250, color: "#2a2a2a", children: _jsxs("div", { className: "relative z-10", children: [_jsx("h3", { className: "text-xl font-semibold text-white mb-2", children: "Customizable Radius" }), _jsx("p", { className: "text-neutral-300 text-sm", children: "Each card can have different spotlight sizes and colors. This one uses a smaller radius for a more focused effect." })] }) }), _jsx(CardSpotlight, { radius: 400, color: "#3a3a3a", children: _jsxs("div", { className: "relative z-10", children: [_jsx("h3", { className: "text-xl font-semibold text-white mb-2", children: "Canvas Animation" }), _jsx("p", { className: "text-neutral-300 text-sm", children: "The canvas reveal effect creates animated particles that connect with lines when they get close to each other." })] }) }), _jsx(CardSpotlight, { radius: 350, color: "#4a4a4a", children: _jsxs("div", { className: "relative z-10", children: [_jsx("h3", { className: "text-xl font-semibold text-white mb-2", children: "Smooth Transitions" }), _jsx("p", { className: "text-neutral-300 text-sm", children: "All animations use smooth transitions and motion values for a polished, professional feel." })] }) })] }), _jsx("div", { className: "p-4 bg-muted/50 rounded-lg", children: _jsxs("div", { className: "text-sm text-muted-foreground space-y-2", children: [_jsx("p", { children: _jsx("strong", { children: "How it works:" }) }), _jsxs("ul", { className: "list-disc list-inside space-y-1 ml-4", children: [_jsx("li", { children: "Mouse position tracking with motion values" }), _jsx("li", { children: "Radial gradient mask that follows the cursor" }), _jsx("li", { children: "Canvas-based particle animation system" }), _jsx("li", { children: "Dynamic connections between nearby particles" }), _jsx("li", { children: "Customizable colors, radius, and animation speed" })] })] }) })] })] }));
}