Cyberpunk Card is a React card shell with a neon glow border, dynamic color shifting, and a light trail that follows the pointer along the perimeter as you hover. Angle, hue range, and trail speed are configurable. Built with React and Tailwind CSS. Works for feature callouts, product drops, gaming or synthwave-themed landing pages, and anywhere you want a high-contrast accent without heavy 3D.
Installation
Examples
Usage
import { CyberpunkCard } from "@/components/ui/cyberpunk-card";<CyberpunkCard
theme="neon-blue"
borderStyle="solid"
colorShift={true}
lightTrail={true}
rounded="md"
glow={true}
glowIntensity={3}
>
<div className="p-6">
<h3 className="text-xl font-bold text-white">Cyberpunk Title</h3>
<p className="text-blue-100 mt-2">Your content goes here</p>
</div>
</CyberpunkCard>Props
Cyberpunk Card
| Prop | Type | Default | Description |
|---|---|---|---|
theme | "neon-blue" | "neon-pink" | "neon-green" | "neon-orange" | "neon-purple" | "neon-cyan" | "neon-red" | "matrix-green" | "hologram" | "custom" | "neon-blue" | The color theme of the card. |
customColors | { primary: string; secondary: string; accent: string } | undefined | Custom colors for the card when theme is set to "custom". |
borderStyle | "solid" | "dashed" | "glitch" | "corners" | "animated" | "circuit" | "solid" | The border style of the card. |
colorShift | boolean | true | Whether to enable the color shift effect |
lightTrail | boolean | true | Whether to enable the light trail effect |
rounded | "none" | "sm" | "md" | "lg" | "md" | The border radius of the card. |
glow | boolean | true | Whether to show a glow effect |
glowIntensity | number | 3 | The intensity of the glow effect (1-5) |
backgroundEffect | "none" | "circuit" | "matrix" | "scanlines" | "particles" | "waves" | "none" | Background visual effect. |
pulseAnimation | boolean | false | Whether to enable pulsing animation effect |
glitchEffect | boolean | false | Whether to enable glitch visual effect |
hologramFlicker | boolean | false | Whether to enable hologram flickering effect |
dataStream | boolean | false | Whether to show animated data stream effect |
loading | boolean | false | Whether to show loading state with animations |
animationSpeed | "slow" | "normal" | "fast" | "normal" | Speed of animations. |
className | string | "" | Additional CSS classes to apply |
children | React.ReactNode | Required | Content of the card |