Lucy
EdgerunnerAdvanced cybernetic enhancement module for combat performance
80%
75%
60%
David
EdgerunnerAdvanced cybernetic enhancement module for combat performance
75%
80%
85%
Installation
Examples
NEURAL HACKING SUITE
v2.7.3-BETA
ONLINE
NODE: 0x7F3A
SYSTEM INTEGRITY75.3%
UPTIME
13:42:06
THREATS
0 ACTIVE
BANDWIDTH
847 MB/s
IMG_7F3A.dat
SCAN_COMPLETE
CONNECTION STATUS:
SECURED & ENCRYPTED
PRIMARY TARGET:
>> ARASAKA_MAINFRAME.db
SECURITY_LEVEL: MAXIMUM
NETWORK METRICS:
LATENCY
127ms
STABILITY
99.7%
SIGNAL STRENGTH:
ICE: 3/7
CPU: 42%
RAM: 67%
NEURAL_LINK_ACTIVE
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 | string | "neon-blue" | The color theme of the card. Possible values: "neon-blue", "neon-pink", "neon-green", "neon-orange", "neon-purple", "matrix-green", "cyber-red", "hologram", "custom" |
customColors | object | undefined | Custom colors for the card when theme is set to "custom". The object should include properties: primary, secondary, and accent |
borderStyle | string | "solid" | The border style of the card. Possible values: "solid", "dashed", "glitch", "corners", "animated", "circuit" |
colorShift | boolean | true | Whether to enable the color shift effect |
lightTrail | boolean | true | Whether to enable the light trail effect |
rounded | string | "md" | The border radius of the card. Possible values: "none", "sm", "md", "lg" |
glow | boolean | true | Whether to show a glow effect |
glowIntensity | number | 3 | The intensity of the glow effect (1-5) |
backgroundEffect | string | "none" | Background visual effect. Possible values: "none", "circuit", "matrix", "scanlines", "particles", "waves" |
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 | string | "normal" | Speed of animations. Possible values: "slow", "normal", "fast" |
className | string | "" | Additional CSS classes to apply |
children | React.ReactNode | undefined | Content of the card |