glow-border-card

1'use client';
2 
3import React from 'react';
4import { cn } from '@/lib/utils';
5 
6/**
7 * Props for the GlowBorderCard component
8 */
9export interface GlowBorderCardProps extends React.HTMLAttributes<HTMLDivElement> {
10    /**
11     * Content to display inside the card
12     */
13    children?: React.ReactNode;
14 
15    /**
16     * Width of the card (CSS value)
17     * @default "320px"
18     */
19    width?: string;
20 
21    /**
22     * Height of the card (CSS value). If not provided, uses aspect-ratio.
23     */
24    height?: string;
25 
26    /**
27     * Aspect ratio of the card (e.g., "1", "16/9", "4/3")
28     * @default "1"
29     */
30    aspectRatio?: string;
31 
32    /**
33     * Corner radius of the card
34     * @default "0.75rem"
35     */
36    borderRadius?: string;
37 
38    /**
39     * Animation duration in seconds
40     * @default 4
41     */
42    animationDuration?: number;
43 
44    /**
45     * Gradient colors array (up to 10 colors)
46     */
47    gradientColors?: string[];
48 
49    /**
50     * Border width for the glow effect
51     * @default "1.25em"
52     */
53    borderWidth?: string;
54 
55    /**
56     * Blur amount for the glow effect
57     * @default "0.75em"
58     */
59    blurAmount?: string;
60 
61    /**
62     * Inset distance (negative values push the border outside)
63     * @default "-1em"
64     */
65    inset?: string;
66 
67    /**
68     * Preset color themes
69     */
70    colorPreset?: 'nature' | 'ocean' | 'sunset' | 'aurora' | 'custom';
71 
72    /**
73     * Whether animation is paused
74     * @default false
75     */
76    paused?: boolean;
77}
78 
79// Preset gradient colors (10 colors each for smooth transitions)
80const colorPresets: Record<string, string[]> = {
81    nature: ['#669900', '#88bb22', '#99cc33', '#aaddaa', '#ccee66', '#006699', '#228888', '#3399cc', '#55aacc', '#669900'],
82    ocean: ['#006699', '#1177aa', '#2288bb', '#3399cc', '#44aadd', '#55bbee', '#66ccff', '#44bbee', '#2299cc', '#006699'],
83    sunset: ['#ff6600', '#ff7711', '#ff8822', '#ff9900', '#ffaa22', '#ffbb44', '#ffcc00', '#ff9933', '#ff7722', '#ff6600'],
84    aurora: ['#00ff87', '#22ffaa', '#44ffcc', '#60efff', '#88ddff', '#bb99ff', '#dd77ee', '#ff68f0', '#ff55cc', '#00ff87'],
85    custom: ['#669900', '#99cc33', '#ccee66', '#006699', '#3399cc', '#990066', '#cc3399', '#ff6600', '#ff9900', '#ffcc00'],
86};
87 
88/**
89 * GlowBorderCard - A CSS-only animated glowing border card component
90 * 
91 * Features a rotating conic gradient that creates a beautiful
92 * aurora-like glow effect around the card edges.
93 * Uses @property for smooth angle animation.
94 */
95// … truncated