Gaming & Cyberpunk

HUD interfaces, RGB stat bars, scan-line effects, kill feeds, and futuristic dashboards.

components

Action Buttons

── SELECT ACTION ──

Dark scan-line panel with ATTACK/DEFEND/BOOST/RESET on a glowing red grid. Click any button to activate it.

action-buttons.tsx

1	function ActionButtons() {
2	const [active, setActive] = useState(null);
3	return (
4	<div "color:#79c0ff">style={{
5	width:"100%",height:"100%",background:"#0a0a0c",
6	backgroundImage:"linear-gradient(rgba(255,68,68,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,68,68,0.04) 1px,transparent 1px)",
7	backgroundSize:"32px 32px",display:"flex",alignItems:"center",justifyContent:"center",padding:24,position:"relative"
8	}}>
9	<div "color:#79c0ff">style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:10}}>
10	{[
11	{label:"⚔ ATTACK",color:"#ff4444",glow:"rgba(255,68,68,0.5)"},
12	{label:"🛡 DEFEND",color:"#00ffff",glow:"rgba(0,255,255,0.4)"},
13	{label:"⚡ BOOST", color:"#ffaa00",glow:"rgba(255,170,0,0.5)"},
14	{label:"↺ RESET", color:"rgba(255,255,255,0.3)",glow:"rgba(255,255,255,0.1)"},
15	].map(btn=>(
16	<button "color:#79c0ff">key={btn.label} "color:#79c0ff">onClick={()=>setActive(btn.label)} "color:#79c0ff">style={{
17	background:active===btn.label?`${btn.color}22`:"rgba(255,255,255,0.03)",
18	border:`1px solid ${active===btn.label?btn.color:btn.color+"44"}`,
19	color:btn.color,fontFamily:"monospace",fontWeight:700,fontSize:13,
20	letterSpacing:"0.15em",textTransform:"uppercase",padding:"10px 22px",
21	borderRadius:3,cursor:"pointer",
22	boxShadow:active===btn.label?`0 0 18px ${btn.glow}`:"none",transition:"all 0.18s",
23	}}>{btn.label}</button>
24	))}
25	</div>
26	</div>
27	);
28	}

⬡ UIDrop Component28 lines

TypeScript ReactUTF-8

Skill Hotbar

── SKILL HOTBAR ──

🔥

Q

FIREBALL

❄️

W

FREEZE

⚡

E

BOLT

💀

R

REAPER

🛡

F

SHIELD

5 skill slots [Q][W][E][R][F] with emoji icons and a fill-based cooldown animation. Click to trigger cooldown.

skill-hotbar.tsx

1	function SkillHotbar() {
2	const [cooldown, setCooldown] = useState(null);
3	const [progress, setProgress] = useState(0);
4	const skills = [
5	{key:"Q",icon:"🔥",name:"FIREBALL",color:"#ff6b35"},
6	{key:"W",icon:"❄️",name:"FREEZE", color:"#00ffff"},
7	{key:"E",icon:"⚡",name:"BOLT", color:"#ffaa00"},
8	{key:"R",icon:"💀",name:"REAPER", color:"#ff4444"},
9	{key:"F",icon:"🛡",name:"SHIELD", color:"#7c3aed"},
10	];
11	const trigger = i => {
12	if(cooldown===i) return;
13	setCooldown(i); setProgress(0);
14	let p=0;
15	const t = setInterval(()=>{ p+=5; setProgress(p); if(p>=100){clearInterval(t);setCooldown(null);} },80);
16	};
17	return (
18	<div "color:#79c0ff">style={{display:"flex",gap:10,padding:20,background:"#0a0a0c",justifyContent:"center"}}>
19	{skills.map((s,i)=>(
20	<div "color:#79c0ff">key={s.key} "color:#79c0ff">onClick={()=>trigger(i)} "color:#79c0ff">style={{position:"relative",width:56,height:56,cursor:"pointer"}}>
21	<div "color:#79c0ff">style={{width:56,height:56,borderRadius:6,
22	background:cooldown===i?"rgba(0,0,0,0.8)":`${s.color}18`,
23	border:`1px solid ${cooldown===i?"rgba(255,255,255,0.1)":s.color+"66"}`,
24	boxShadow:cooldown===i?"none":`0 0 12px ${s.color}44`,
25	display:"flex",alignItems:"center",justifyContent:"center"}}>
26	<span "color:#79c0ff">style={{fontSize:20,filter:cooldown===i?"grayscale(1) opacity(0.3)":"none"}}>{s.icon}</span>
27	</div>
28	{cooldown===i&&<div "color:#79c0ff">style={{position:"absolute",bottom:0,left:0,right:0,height:`${progress}%`,background:`${s.color}33`,borderRadius:"0 0 6px 6px"}}/>}
29	<div "color:#79c0ff">style={{position:"absolute",top:-8,left:"50%",transform:"translateX(-50%)",background:s.color,color:"#000",fontFamily:"monospace",fontSize:9,fontWeight:700,padding:"1px 5px",borderRadius:2}}>{s.key}</div>
30	</div>
31	))}
32	</div>
33	);
34	}

⬡ UIDrop Component34 lines

TypeScript ReactUTF-8

Player Card

🎮

XENO_HUNTER

LVL 87 · SERVER NA-EAST

◆ DIAMOND III

💎

24/3/11

K/D/A

73%

WIN RATE

1,204

MATCHES

⚔

🎯

🏆

▶ VIEW PROFILE

Full player profile: avatar 🎮, XENO_HUNTER callsign, Diamond III rank, KDA and win-rate stats with cyan glow border.

player-card.tsx

1	<div "color:#79c0ff">style={{width:"100%",height:"100%",background:"#0a0a0c",display:"flex",alignItems:"center",justifyContent:"center",padding:20}}>
2	<div "color:#79c0ff">style={{width:"100%",maxWidth:320,background:"linear-gradient(135deg,#0d0d1a,#0a0a14)",
3	border:"1px solid rgba(0,255,255,0.25)",borderRadius:8,boxShadow:"0 0 30px rgba(0,255,255,0.1)",overflow:"hidden",position:"relative"}}>
4	<div "color:#79c0ff">style={{position:"absolute",top:0,left:0,right:0,height:3,background:"linear-gradient(90deg,transparent,#00ffff,transparent)"}}/>
5	<div "color:#79c0ff">style={{padding:"20px 20px 16px"}}>
6	<div "color:#79c0ff">style={{display:"flex",alignItems:"flex-start",gap:14}}>
7	<div "color:#79c0ff">style={{width:64,height:64,borderRadius:6,fontSize:32,background:"rgba(0,255,255,0.08)",
8	border:"1px solid rgba(0,255,255,0.3)",display:"flex",alignItems:"center",justifyContent:"center",
9	boxShadow:"0 0 16px rgba(0,255,255,0.2)"}}>🎮</div>
10	<div "color:#79c0ff">style={{flex:1}}>
11	<div "color:#79c0ff">style={{color:"#00ffff",fontFamily:"monospace",fontWeight:700,fontSize:16,letterSpacing:"0.1em"}}>XENO_HUNTER</div>
12	<div "color:#79c0ff">style={{color:"rgba(255,255,255,0.4)",fontFamily:"monospace",fontSize:10,letterSpacing:"0.2em",marginTop:2}}>LVL 87 · SERVER NA-EAST</div>
13	<div "color:#79c0ff">style={{marginTop:8,background:"rgba(0,255,255,0.12)",border:"1px solid rgba(0,255,255,0.3)",borderRadius:3,padding:"3px 8px",color:"#00ffff",fontFamily:"monospace",fontSize:10,display:"inline-block"}}>◆ DIAMOND III</div>
14	</div>
15	<div "color:#79c0ff">style={{fontSize:28}}>💎</div>
16	</div>
17	<div "color:#79c0ff">style={{marginTop:16,display:"grid",gridTemplateColumns:"1fr 1fr 1fr",gap:8}}>
18	{[{l:"K/D/A",v:"24/3/11",c:"#ff4444"},{l:"WIN RATE",v:"73%",c:"#00ffff"},{l:"MATCHES",v:"1,204",c:"#ffaa00"}].map(s=>(
19	<div "color:#79c0ff">key={s.l} "color:#79c0ff">style={{background:"rgba(255,255,255,0.03)",border:"1px solid rgba(255,255,255,0.06)",borderRadius:4,padding:"8px 10px",textAlign:"center"}}>
20	<div "color:#79c0ff">style={{color:s.c,fontFamily:"monospace",fontWeight:700,fontSize:14}}>{s.v}</div>
21	<div "color:#79c0ff">style={{color:"rgba(255,255,255,0.3)",fontFamily:"monospace",fontSize:9,marginTop:2}}>{s.l}</div>
22	</div>
23	))}
24	</div>
25	</div>
26	</div>
27	</div>

⬡ UIDrop Component27 lines

TypeScript ReactUTF-8

Weapon Card

PLASMA RIFLE

MODEL GX-9 · SCI-FI CLASS

LEGENDARY

🔫

DAMAGE87/100

RANGE64/100

FIRE RATE72/100

PLASMA RIFLE with LEGENDARY badge in gold, damage/range/fire-rate stat bars, dark purple-black with gold accents.

weapon-card.tsx

1	<div "color:#79c0ff">style={{width:"100%",height:"100%",background:"#0a0a0c",display:"flex",alignItems:"center",justifyContent:"center",padding:20}}>
2	<div "color:#79c0ff">style={{width:"100%",maxWidth:320,background:"linear-gradient(135deg,#0f0a18,#0a0814)",
3	border:"1px solid rgba(255,170,0,0.25)",borderRadius:8,boxShadow:"0 0 30px rgba(255,170,0,0.08)",overflow:"hidden",position:"relative"}}>
4	<div "color:#79c0ff">style={{position:"absolute",top:0,left:0,right:0,height:3,background:"linear-gradient(90deg,transparent,#ffaa00,transparent)"}}/>
5	<div "color:#79c0ff">style={{padding:20}}>
6	<div "color:#79c0ff">style={{display:"flex",justifyContent:"space-between",alignItems:"flex-start",marginBottom:14}}>
7	<div>
8	<div "color:#79c0ff">style={{color:"#ffaa00",fontFamily:"monospace",fontWeight:700,fontSize:18}}>PLASMA RIFLE</div>
9	<div "color:#79c0ff">style={{color:"rgba(255,255,255,0.35)",fontFamily:"monospace",fontSize:10,marginTop:2}}>MODEL GX-9 · SCI-FI CLASS</div>
10	</div>
11	<div "color:#79c0ff">style={{background:"linear-gradient(135deg,#ffaa00,#ff6b35)",borderRadius:3,padding:"3px 8px",color:"#000",fontFamily:"monospace",fontSize:10,fontWeight:700}}>LEGENDARY</div>
12	</div>
13	<div "color:#79c0ff">style={{fontSize:42,textAlign:"center",margin:"12px 0",filter:"drop-shadow(0 0 12px rgba(255,170,0,0.6))"}}>🔫</div>
14	{[{l:"DAMAGE",v:87,c:"#ff4444"},{l:"RANGE",v:64,c:"#00ffff"},{l:"FIRE RATE",v:72,c:"#ffaa00"}].map(s=>(
15	<div "color:#79c0ff">key={s.l} "color:#79c0ff">style={{marginBottom:10}}>
16	<div "color:#79c0ff">style={{display:"flex",justifyContent:"space-between",marginBottom:4}}>
17	<span "color:#79c0ff">style={{color:"rgba(255,255,255,0.5)",fontFamily:"monospace",fontSize:10}}>{s.l}</span>
18	<span "color:#79c0ff">style={{color:s.c,fontFamily:"monospace",fontSize:10,fontWeight:700}}>{s.v}/100</span>
19	</div>
20	<div "color:#79c0ff">style={{height:4,background:"rgba(255,255,255,0.06)",borderRadius:2}}>
21	<div "color:#79c0ff">style={{height:"100%",width:`${s.v}%`,background:`linear-gradient(90deg,${s.c}88,${s.c})`,borderRadius:2,boxShadow:`0 0 8px ${s.c}66`}}/>
22	</div>
23	</div>
24	))}
25	</div>
26	</div>
27	</div>

⬡ UIDrop Component27 lines

TypeScript ReactUTF-8

Game Login

▶ ENTER GAME

AUTHENTICATION REQUIRED

CALLSIGN

ACCESS CODE

CALLSIGN + ACCESS CODE inputs with red-glow focus ring and AUTHENTICATE button on a scan-line dark panel.

game-login.tsx

1	<div "color:#79c0ff">style={{width:"100%",height:"100%",background:"#0a0a0c",display:"flex",alignItems:"center",justifyContent:"center",padding:20,position:"relative"}}>
2	<style>{`
3	.gi{background:rgba(255,68,68,0.04);border:1px solid rgba(255,68,68,0.2);color:#fff;font-family:monospace;font-size:13px;padding:10px 14px;border-radius:3px;width:100%;outline:none;transition:all 0.2s}
4	.gi:focus{border-color:#ff4444;box-shadow:0 0 16px rgba(255,68,68,0.3)}
5	.gi::placeholder{color:rgba(255,68,68,0.3)}
6	.gb{background:linear-gradient(135deg,rgba(255,68,68,0.2),rgba(255,68,68,0.1));border:1px solid #ff4444;color:#ff4444;font-family:monospace;font-weight:700;font-size:13px;letter-spacing:0.3em;padding:12px;width:100%;cursor:pointer;border-radius:3px;transition:all 0.2s}
7	.gb:hover{background:rgba(255,68,68,0.25);box-shadow:0 0 20px rgba(255,68,68,0.4);color:#fff}
8	`}</style>
9	<div "color:#79c0ff">style={{position:"absolute",inset:0,background:"repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,0.05) 3px,rgba(0,0,0,0.05) 4px)",pointerEvents:"none"}}/>
10	<div "color:#79c0ff">style={{width:"100%",maxWidth:300,position:"relative",zIndex:2}}>
11	<div "color:#79c0ff">style={{textAlign:"center",marginBottom:24}}>
12	<div "color:#79c0ff">style={{color:"#ff4444",fontFamily:"monospace",fontWeight:700,fontSize:22,letterSpacing:"0.3em"}}>▶ ENTER GAME</div>
13	</div>
14	<div "color:#79c0ff">style={{display:"flex",flexDirection:"column",gap:12}}>
15	<input "color:#79c0ff">className="gi" "color:#79c0ff">placeholder="ENTER USERNAME"/>
16	<input "color:#79c0ff">className="gi" "color:#79c0ff">type="password" "color:#79c0ff">placeholder="••••••••"/>
17	<button "color:#79c0ff">className="gb">▶ AUTHENTICATE</button>
18	</div>
19	</div>
20	</div>

⬡ UIDrop Component20 lines

TypeScript ReactUTF-8

Character Creator

CHARACTER NAME

SELECT CLASS

⚔️

WARRIOR

High HP · Melee

🔮

MAGE

Magic · AoE

🗡️

ROGUE

Fast · Stealth

Name input + class selector (Warrior/Mage/Rogue radio cards) with active highlight. Click a class to select.

character-creator.tsx

1	function CharacterCreator() {
2	const [name, setName] = useState("SHADOW_X");
3	const [cls, setCls] = useState("warrior");
4	const classes=[
5	{id:"warrior",label:"WARRIOR",icon:"⚔️",color:"#ff4444",desc:"High HP · Melee"},
6	{id:"mage", label:"MAGE", icon:"🔮",color:"#7c3aed",desc:"Magic · AoE"},
7	{id:"rogue", label:"ROGUE", icon:"🗡️",color:"#00ffff",desc:"Fast · Stealth"},
8	];
9	return (
10	<div "color:#79c0ff">style={{width:"100%",height:"100%",background:"#0a0a0c",display:"flex",alignItems:"center",justifyContent:"center",padding:20}}>
11	<div "color:#79c0ff">style={{width:"100%",maxWidth:340}}>
12	<input "color:#79c0ff">value={name} "color:#79c0ff">onChange={e=>setName(e.target.value)} "color:#79c0ff">style={{background:"rgba(255,255,255,0.04)",border:"1px solid rgba(255,255,255,0.1)",color:"#fff",fontFamily:"monospace",fontSize:14,padding:"8px 12px",borderRadius:3,width:"100%",outline:"none",marginBottom:16}}/>
13	<div "color:#79c0ff">style={{display:"flex",gap:8,marginBottom:16}}>
14	{classes.map(c=>(
15	<div "color:#79c0ff">key={c.id} "color:#79c0ff">onClick={()=>setCls(c.id)} "color:#79c0ff">style={{flex:1,cursor:"pointer",borderRadius:5,padding:10,textAlign:"center",
16	background:cls===c.id?`${c.color}18`:"rgba(255,255,255,0.02)",
17	border:`1px solid ${cls===c.id?c.color:"rgba(255,255,255,0.08)"}`,
18	boxShadow:cls===c.id?`0 0 14px ${c.color}44`:"none",transition:"all 0.2s"}}>
19	<div "color:#79c0ff">style={{fontSize:20}}>{c.icon}</div>
20	<div "color:#79c0ff">style={{color:cls===c.id?c.color:"rgba(255,255,255,0.5)",fontFamily:"monospace",fontSize:10,fontWeight:700,marginTop:4}}>{c.label}</div>
21	</div>
22	))}
23	</div>
24	<button "color:#79c0ff">style={{background:"rgba(124,58,237,0.2)",border:"1px solid #7c3aed",color:"#7c3aed",fontFamily:"monospace",fontWeight:700,fontSize:12,letterSpacing:"0.25em",padding:10,width:"100%",cursor:"pointer",borderRadius:3}}>✦ CREATE CHARACTER</button>
25	</div>
26	</div>
27	);
28	}

⬡ UIDrop Component28 lines

TypeScript ReactUTF-8

Player HUD

❤️

HP67/100

💙

MP45/100

⭐

XP82/100

XENO_HUNTER

LVL 87 · DIAMOND III

KILLS24

DEATHS3

ASSISTS11

HUD ACTIVE

🔥

Q

❄️

W

⚡

E

💀

R

🛡

F

Full-panel HUD: HP/MP/XP bars (top-left), K/D/A stats (top-right), 5-slot action bar (bottom-center), corner bracket UI.

player-hud.tsx

1	// Full HUD layout with HP/MP/XP bars, stats panel, and hotbar — see preview

⬡ UIDrop Component1 lines

TypeScript ReactUTF-8

Kill Feed

── KILL FEED ──

0:12×3XENO_HUNTER⚔️shadow_wolf

0:24plasma_god🔫XENO_HUNTER

0:31XENO_HUNTER🗡️dark_mage_x

0:44×2RED_VIPER💥nova_strike

1:02XENO_HUNTER⚡RED_VIPER

KILL STREAK: LEGENDARY ×3

Sliding kill notifications with weapon emojis, timestamps, streak badges, and kill-streak status banner.

kill-feed.tsx

1	// Kill feed with slide-in animation and alternating row backgrounds

⬡ UIDrop Component1 lines

TypeScript ReactUTF-8

Rank Badges

▲

IRON

▲

BRONZE

◆

SILVER

◆

GOLD

★

PLAT

💎

DIA

👑

MASTER

Iron → Bronze → Silver → Gold → Platinum → Diamond → Master tier badges with per-rank glow and metallic coloring.

rank-badges.tsx

1	<div "color:#79c0ff">style={{width:"100%",height:"100%",background:"#0a0a0c",display:"flex",alignItems:"center",justifyContent:"center",padding:20,gap:10,flexWrap:"wrap"}}>
2	{[
3	{name:"IRON", color:"#888", icon:"▲"},
4	{name:"BRONZE",color:"#cd7f32", icon:"▲"},
5	{name:"SILVER",color:"#c0c0c0", icon:"◆"},
6	{name:"GOLD", color:"#ffaa00", icon:"◆"},
7	{name:"PLAT", color:"#00ffcc", icon:"★"},
8	{name:"DIA", color:"#00ffff", icon:"💎"},
9	{name:"MASTER",color:"#ff4444", icon:"👑"},
10	].map(r=>(
11	<div "color:#79c0ff">key={r.name} "color:#79c0ff">style={{display:"flex",flexDirection:"column",alignItems:"center",gap:4,
12	padding:"10px 8px",background:`${r.color}0d`,border:`1px solid ${r.color}44`,
13	borderRadius:4,boxShadow:`0 0 10px ${r.color}44`,minWidth:52}}>
14	<div "color:#79c0ff">style={{color:r.color,fontSize:18,filter:`drop-shadow(0 0 6px ${r.color}88)`}}>{r.icon}</div>
15	<div "color:#79c0ff">style={{color:r.color,fontFamily:"monospace",fontSize:8,fontWeight:700,letterSpacing:"0.1em"}}>{r.name}</div>
16	</div>
17	))}
18	</div>

⬡ UIDrop Component18 lines

TypeScript ReactUTF-8

Status Indicators

── PLAYER STATUS ──

ONLINE

2,847 players

IN-GAME

Match active

DO NOT DISTURB

Busy

OFFLINE

Last seen 2h

ONLINE/IN-GAME/DND/OFFLINE player status rows with animated CSS pulse ring on the live-online indicator.

status-indicators.tsx

1	// Status badge panel with pulse animation on ONLINE dot

⬡ UIDrop Component1 lines

TypeScript ReactUTF-8

Leaderboard

◆ LEADERBOARD

#

PLAYER

KDA

WINS

#1

🐉

XENO_HUNTER

8.0

847

👑

#2

⚡

plasma_god

6.4

721

💎

#3

🔥

RED_VIPER

5.9

698

💎

#4

🌑

shadow_wolf

4.2

512

🥈

#5

💀

dark_mage_x

3.8

487

🥈

Top 5 players: rank, avatar, name, KDA, wins. Gold highlight for #1. Click WINS/KDA header buttons to sort.

leaderboard.tsx

1	// Sortable leaderboard — click KDA or WINS to resort

⬡ UIDrop Component1 lines

TypeScript ReactUTF-8

Match Stats

VICTORY

MATCH DURATION

28:14

DEFEAT

PLAYER

K

D

A

DMG

── TEAM ALPHA ──

XENO_HUNTERMVP

24

3

11

34,820

plasma_god

18

5

9

28,400

nova_strike

9

8

14

18,200

── TEAM OMEGA ──

RED_VIPER

12

11

7

21,500

shadow_wolf

7

14

5

14,300

dark_mage_x

4

16

6

9,800

Post-match scoreboard: TEAM ALPHA vs TEAM OMEGA, K/D/A/DMG columns, MVP badge, VICTORY/DEFEAT banner.

match-stats.tsx

1	// Match scoreboard with two teams, MVP highlight, and match duration

⬡ UIDrop Component1 lines

TypeScript ReactUTF-8

Glitch Text

SYSTEM_ERROR

SYSTEM_ERROR

SYSTEM_ERROR

FATAL: 0xDEADBEEF

ERR

CORE

ERR

MEM

ERR

NET

SYSTEM_ERROR with layered CSS glitch: skew + translateX offset layers, clip-path color splits, CRT scan-line overlay.

glitch-text.tsx

1	function GlitchText() {
2	return (
3	<div "color:#79c0ff">style={{width:"100%",height:"100%",background:"#050505",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",position:"relative",overflow:"hidden"}}>
4	<style>{`
5	@keyframes gm{0%,90%,100%{transform:none}91%{transform:skewX(-5deg) translateX(-4px)}93%{transform:skewX(3deg) translateX(4px)}95%{transform:none}}
6	@keyframes gt{0%,88%,100%{clip-path:inset(100% 0 0 0)}89%{clip-path:inset(10% 0 80% 0);transform:translateX(-8px);color:#ff4444}90%{clip-path:inset(60% 0 20% 0);transform:translateX(6px);color:#00ffff}91%{clip-path:inset(100% 0 0 0)}}
7	@keyframes gb{0%,92%,100%{clip-path:inset(100% 0 0 0)}93%{clip-path:inset(40% 0 50% 0);transform:translateX(8px);color:#ff4444}94%{clip-path:inset(70% 0 15% 0);transform:translateX(-6px);color:#00ffff}95%{clip-path:inset(100% 0 0 0)}}
8	`}</style>
9	<div "color:#79c0ff">style={{position:"absolute",inset:0,background:"repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.15) 2px,rgba(0,0,0,0.15) 4px)",pointerEvents:"none"}}/>
10	<div "color:#79c0ff">style={{position:"relative",zIndex:2}}>
11	<div "color:#79c0ff">style={{position:"relative",animation:"gm 4s infinite"}}>
12	<div "color:#79c0ff">style={{color:"#ff4444",fontFamily:"monospace",fontWeight:700,fontSize:36,letterSpacing:"0.15em",textShadow:"0 0 20px rgba(255,68,68,0.6)"}}>SYSTEM_ERROR</div>
13	<div "color:#79c0ff">style={{position:"absolute",top:0,left:0,right:0,color:"#ff4444",fontFamily:"monospace",fontWeight:700,fontSize:36,letterSpacing:"0.15em",animation:"gt 4s infinite"}}>SYSTEM_ERROR</div>
14	<div "color:#79c0ff">style={{position:"absolute",top:0,left:0,right:0,color:"#00ffff",fontFamily:"monospace",fontWeight:700,fontSize:36,letterSpacing:"0.15em",animation:"gb 4s 0.2s infinite"}}>SYSTEM_ERROR</div>
15	</div>
16	<div "color:#79c0ff">style={{color:"rgba(255,68,68,0.4)",fontFamily:"monospace",fontSize:11,letterSpacing:"0.3em",textAlign:"center",marginTop:8}}>FATAL: 0xDEADBEEF</div>
17	</div>
18	</div>
19	);
20	}

⬡ UIDrop Component20 lines

TypeScript ReactUTF-8

Holographic Card

🔐

ACCESS GRANTED

CLEARANCE LEVEL: ALPHA

ID: XEN-0847 · SECTOR 7G

Rainbow-cycling gradient border with CSS keyframe animation + shimmer sweep. Hover intensifies the glow aura.

holographic-card.tsx

1	function HolographicCard() {
2	const [h, setH] = useState(false);
3	return (
4	<div "color:#79c0ff">style={{width:"100%",height:"100%",background:"#05050a",display:"flex",alignItems:"center",justifyContent:"center",padding:24}}>
5	<style>{`
6	@keyframes hb{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
7	@keyframes sw{0%{transform:translateX(-200%) skewX(-20deg);opacity:0}40%{opacity:0.4}100%{transform:translateX(300%) skewX(-20deg);opacity:0}}
8	@keyframes hf{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
9	`}</style>
10	<div "color:#79c0ff">onMouseEnter={()=>setH(true)} "color:#79c0ff">onMouseLeave={()=>setH(false)} "color:#79c0ff">style={{width:"100%",maxWidth:280,padding:3,borderRadius:10,
11	background:"linear-gradient(135deg,#ff4444,#ff6b35,#ffaa00,#00ffff,#7c3aed,#ff4444)",backgroundSize:"400% 400%",
12	animation:"hb 4s ease infinite",boxShadow:h?"0 0 40px rgba(0,255,255,0.3)":"0 0 20px rgba(0,255,255,0.15)",transition:"box-shadow 0.3s"}}>
13	<div "color:#79c0ff">style={{background:"linear-gradient(135deg,#0a0a14,#05050f)",borderRadius:8,padding:24,position:"relative",overflow:"hidden",animation:"hf 4s ease-in-out infinite"}}>
14	<div "color:#79c0ff">style={{position:"absolute",top:0,left:0,bottom:0,width:"60%",background:"linear-gradient(90deg,transparent,rgba(255,255,255,0.08),transparent)",animation:"sw 3s ease-in-out infinite",pointerEvents:"none"}}/>
15	<div "color:#79c0ff">style={{textAlign:"center",position:"relative",zIndex:1}}>
16	<div "color:#79c0ff">style={{fontSize:40,marginBottom:12,filter:"drop-shadow(0 0 16px rgba(0,255,255,0.8))"}}>🔐</div>
17	<div "color:#79c0ff">style={{color:"#00ffff",fontFamily:"monospace",fontWeight:700,fontSize:20,letterSpacing:"0.25em",textShadow:"0 0 20px rgba(0,255,255,0.7)"}}>ACCESS GRANTED</div>
18	<div "color:#79c0ff">style={{color:"rgba(255,255,255,0.3)",fontFamily:"monospace",fontSize:10,marginTop:6}}>CLEARANCE LEVEL: ALPHA</div>
19	</div>
20	</div>
21	</div>
22	</div>
23	);
24	}

⬡ UIDrop Component24 lines

TypeScript ReactUTF-8