Skip to content

Cyberpunk Theme

Jump to bottom
Wiki Sync Bot edited this page Jul 20, 2025 · 1 revision

Cyberpunk Theme Guide 🎮⚡

Running Page 2.0 features a complete cyberpunk aesthetic transformation designed for tech enthusiasts and developers. This guide explains the design system and how to customize it.

🌈 Color Palette

Primary Neon Colors

/* Cyan - Primary accent */
--neon-cyan-400: #00ffff
--neon-cyan-500: #00e6e6

/* Pink - Secondary accent */
--neon-pink-500: #ff00ff
--neon-pink-600: #e600e6

/* Green - Success states */
--neon-green-500: #00ff00
--neon-green-600: #00e600

/* Orange - Warning states */
--neon-orange-500: #ff8000
--neon-orange-600: #e67300

/* Purple - Info states */
--neon-purple-500: #8000ff
--neon-purple-600: #7300e6

Background Colors

/* Dark cyberpunk backgrounds */
--cyber-950: #0a0a0f    /* Deepest background */
--cyber-900: #1a1a2e    /* Card backgrounds */
--cyber-800: #16213e    /* Elevated surfaces */
--cyber-700: #0f3460    /* Interactive elements */

Glow Effects

/* Neon glow shadows */
--shadow-neon-cyan: 0 0 20px #00ffff40
--shadow-neon-pink: 0 0 20px #ff00ff40
--shadow-neon-green: 0 0 20px #00ff0040
--shadow-neon-orange: 0 0 20px #ff800040
--shadow-neon-purple: 0 0 20px #8000ff40

🎨 Design Principles

1. Terminal Aesthetics

  • Monospace fonts - font-mono class throughout
  • Command-line feel - Prompts like > and $
  • ASCII art elements - Box drawing characters
  • Terminal colors - Green text on dark backgrounds

2. Neon Glow Effects

  • Subtle glows - shadow-neon-* utilities
  • Interactive feedback - Hover states with glow
  • Accent highlights - Important elements glow
  • Animated pulses - Loading and active states

3. Glass Morphism

  • Translucent cards - backdrop-blur-sm
  • Layered depth - Multiple transparency levels
  • Frosted glass - Subtle background blur
  • Light refraction - Border highlights

4. Scan Line Effects

  • Subtle animations - Moving scan lines
  • CRT monitor feel - Retro computer aesthetics
  • Digital artifacts - Intentional "glitches"
  • Progressive loading - Scan line reveals

🔧 UI Components

CyberCard

<CyberCard variant="terminal" glow dataFlow>
  <CyberCardContent>
    Futuristic card with glow effects
  </CyberCardContent>
</CyberCard>

Variants:

  • terminal - Dark with green accents
  • glass - Translucent with blur
  • neon - Bright with glow effects

Props:

  • glow - Adds neon glow effect
  • dataFlow - Animated data stream border
  • scanLines - Subtle scan line overlay

CyberButton

<CyberButton variant="primary" glow pulse>
  Execute Command
</CyberButton>

Variants:

  • primary - Cyan neon styling
  • secondary - Pink neon styling
  • success - Green neon styling
  • warning - Orange neon styling
  • danger - Red neon styling
  • ghost - Transparent with border

CyberBadge

<CyberActivityBadge type="running" />
<CyberStatusBadge status="online" />
<CyberMetricBadge label="Distance" value="10.5" unit="km" />

Activity Types:

  • 🏃 Running - Green neon
  • 🚴 Cycling - Cyan neon
  • 🏊 Swimming - Purple neon
  • 🚶 Walking - Orange neon
  • 🥾 Hiking - Green neon
  • 💪 Workout - Red neon

CyberInput

<CyberInput placeholder="Enter command..." />
<CyberSearchInput onSearch={handleSearch} />

Features:

  • Terminal-style borders
  • Neon focus states
  • Monospace font
  • Command prompt styling

CyberLoading

<CyberLoading variant="terminal" text="Loading data..." />
<CyberLoading variant="matrix" />
<CyberLoading variant="scan" />

Variants:

  • terminal - Command line style
  • matrix - Matrix-style rain
  • scan - Scanning line effect

🎭 Animation System

Framer Motion Integration

// Staggered entrance animations
<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.6, delay: index * 0.1 }}
>

Custom Animations

/* Glow pulse effect */
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 5px var(--neon-cyan-400); }
  50% { box-shadow: 0 0 20px var(--neon-cyan-400); }
}

/* Scan line movement */
@keyframes scan-line {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

/* Data flow animation */
@keyframes data-flow {
  0% { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}

🎨 Customization Guide

Changing Color Scheme

  1. Update Tailwind Config
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        neonCyan: {
          400: '#your-cyan-color',
          500: '#your-cyan-darker'
        }
      }
    }
  }
}
  1. Update CSS Variables
/* globals.css */
:root {
  --neon-cyan-400: #your-new-color;
  --shadow-neon-cyan: 0 0 20px #your-new-color40;
}

Adding New Components

  1. Follow Naming Convention
// CyberYourComponent.tsx
export function CyberYourComponent({ variant, glow, ...props }) {
  return (
    <div className={clsx(
      'cyber-base-styles',
      variants[variant],
      glow && 'shadow-neon-cyan'
    )}>
      {children}
    </div>
  )
}
  1. Use Design Tokens
const variants = {
  primary: 'bg-neonCyan-400/20 text-neonCyan-400 border-neonCyan-400',
  secondary: 'bg-neonPink-500/20 text-neonPink-500 border-neonPink-500'
}

Custom Glow Effects

/* Custom glow utility */
.glow-custom {
  box-shadow: 
    0 0 5px #your-color,
    0 0 10px #your-color,
    0 0 15px #your-color,
    0 0 20px #your-color;
}

🖥️ Typography System

Font Stack

/* Monospace for terminal feel */
font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

/* Fallback for body text */
font-family: 'Inter', 'Helvetica Neue', sans-serif;

Text Styles

/* Terminal text */
.terminal-text {
  font-family: monospace;
  color: #00ff00;
  text-shadow: 0 0 5px #00ff0080;
}

/* Neon text */
.neon-text {
  color: #00ffff;
  text-shadow: 0 0 10px #00ffff80;
}

/* Glitch text */
.glitch-text {
  animation: glitch 2s infinite;
}

📱 Responsive Design

Breakpoint Strategy

/* Mobile-first approach */
.cyber-component {
  /* Mobile styles */
}

@media (md) {
  .cyber-component {
    /* Tablet styles */
  }
}

@media (lg) {
  .cyber-component {
    /* Desktop styles */
  }
}

Touch Interactions

  • Larger touch targets - Minimum 44px
  • Hover alternatives - Active states for mobile
  • Gesture support - Swipe and pinch where appropriate

🎯 Best Practices

Performance

  • Use CSS transforms - Hardware acceleration
  • Limit glow effects - Only on key elements
  • Optimize animations - 60fps target
  • Lazy load effects - Progressive enhancement

Accessibility

  • High contrast - Neon colors on dark backgrounds
  • Focus indicators - Visible keyboard navigation
  • Screen reader support - Semantic HTML
  • Reduced motion - Respect user preferences

Consistency

  • Design tokens - Use predefined colors and spacing
  • Component library - Reuse Cyber components
  • Animation timing - Consistent duration and easing
  • Visual hierarchy - Clear information structure

🚀 Future Enhancements

Planned Features

  • Theme switcher - Multiple cyberpunk variants
  • Custom color picker - User-defined neon colors
  • Animation controls - Disable/reduce motion
  • Sound effects - Optional cyberpunk audio

Community Themes

  • Neon Tokyo - Pink and blue variant
  • Matrix Green - Classic green-on-black
  • Synthwave - Purple and pink retro
  • Blade Runner - Orange and teal

Ready to customize your cyberpunk experience? Start with the UI Components guide or check out the Color Palette reference! 🎮⚡

Clone this wiki locally