Cyberpunk Pricing Matrix Component

A futuristic pricing table with cyberpunk aesthetics, neon glows, and glitch effects for a dystopian tech experience.

Features

• Cyberpunk Aesthetics: Dystopian futuristic design with neon colors and digital elements
• Neon Glow Effects: Vibrant glowing elements using CSS text and box shadows
• Glitch Animations: Simulated digital artifacts and screen distortions
• Scanline Effects: Moving scanlines for authentic CRT monitor appearance
• Grid Background: Animated grid pattern for a digital matrix feel
• Terminal Typography: Monospace font with hacker-style text formatting

HTML Structure

<div class="cyberpunk-pricing-container">
  <div class="pricing-header">
    <h2 class="pricing-title">/// SYSTEM PRICING ///</h2>
    <p class="pricing-subtitle">ACCESSING TIER MATRIX...</p>
  </div>
  
  <div class="pricing-toggle">
    <span class="toggle-label">MONTHLY</span>
    <label class="switch">
      <input type="checkbox" id="billing-toggle">
      <span class="slider"></span>
    </label>
    <span class="toggle-label">YEARLY</span>
    <span class="discount-badge">SAVE 25%</span>
  </div>
  
  <div class="pricing-grid">
    <div class="pricing-card" data-tier="hacker">
      <div class="card-header">
        <div class="terminal-bar">
          <div class="terminal-dot red"></div>
          <div class="terminal-dot yellow"></div>
          <div class="terminal-dot green"></div>
        </div>
        <h3 class="plan-name">HACKER</h3>
        <p class="plan-description">FOR DIGITAL REBELS</p>
      </div>
      <div class="card-price">
        <span class="currency">$</span>
        <span class="amount" data-monthly="24" data-yearly="18">24</span>
        <span class="period">/MONTH</span>
      </div>
      <ul class="features-list">
        <li class="feature-item">
          <span class="feature-icon">></span>
          <span class="feature-text">1 PROJECT</span>
        </li>
        <li class="feature-item">
          <span class="feature-icon">></span>
          <span class="feature-text">10GB STORAGE</span>
        </li>
        <li class="feature-item">
          <span class="feature-icon">></span>
          <span class="feature-text">BASIC SUPPORT</span>
        </li>
        <li class="feature-item disabled">
          <span class="feature-icon">></span>
          <span class="feature-text">API ACCESS</span>
        </li>
        <li class="feature-item disabled">
          <span class="feature-icon">></span>
          <span class="feature-text">CUSTOM DOMAIN</span>
        </li>
      </ul>
      <button class="select-button">INITIALIZE</button>
    </div>
    
    <div class="pricing-card popular" data-tier="cyber">
      <div class="card-header">
        <div class="terminal-bar">
          <div class="terminal-dot red"></div>
          <div class="terminal-dot yellow"></div>
          <div class="terminal-dot green"></div>
        </div>
        <div class="popular-badge">MOST CHOSEN</div>
        <h3 class="plan-name">CYBER</h3>
        <p class="plan-description">FOR CORPORATE USERS</p>
      </div>
      <div class="card-price">
        <span class="currency">$</span>
        <span class="amount" data-monthly="59" data-yearly="44.25">59</span>
        <span class="period">/MONTH</span>
      </div>
      <ul class="features-list">
        <li class="feature-item">
          <span class="feature-icon">></span>
          <span class="feature-text">5 PROJECTS</span>
        </li>
        <li class="feature-item">
          <span class="feature-icon">></span>
          <span class="feature-text">100GB STORAGE</span>
        </li>
        <li class="feature-item">
          <span class="feature-icon">></span>
          <span class="feature-text">PRIORITY SUPPORT</span>
        </li>
        <li class="feature-item">
          <span class="feature-icon">></span>
          <span class="feature-text">API ACCESS</span>
        </li>
        <li class="feature-item disabled">
          <span class="feature-icon">></span>
          <span class="feature-text">CUSTOM DOMAIN</span>
        </li>
      </ul>
      <button class="select-button">INITIALIZE</button>
    </div>
    
    <div class="pricing-card" data-tier="synth">
      <div class="card-header">
        <div class="terminal-bar">
          <div class="terminal-dot red"></div>
          <div class="terminal-dot yellow"></div>
          <div class="terminal-dot green"></div>
        </div>
        <h3 class="plan-name">SYNTH</h3>
        <p class="plan-description">FOR MEGA-CORPORATIONS</p>
      </div>
      <div class="card-price">
        <span class="currency">$</span>
        <span class="amount" data-monthly="149" data-yearly="111.75">149</span>
        <span class="period">/MONTH</span>
      </div>
      <ul class="features-list">
        <li class="feature-item">
          <span class="feature-icon">></span>
          <span class="feature-text">UNLIMITED PROJECTS</span>
        </li>
        <li class="feature-item">
          <span class="feature-icon">></span>
          <span class="feature-text">1TB STORAGE</span>
        </li>
        <li class="feature-item">
          <span class="feature-icon">></span>
          <span class="feature-text">24/7 DEDICATED SUPPORT</span>
        </li>
        <li class="feature-item">
          <span class="feature-icon">></span>
          <span class="feature-text">FULL API ACCESS</span>
        </li>
        <li class="feature-item">
          <span class="feature-icon">></span>
          <span class="feature-text">CUSTOM DOMAIN</span>
        </li>
      </ul>
      <button class="select-button">INITIALIZE</button>
    </div>
  </div>
  
  <div class="scanline"></div>
</div>

CSS Styles

.cyberpunk-pricing-container {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 2rem;
  font-family: 'Courier New', monospace;
  background: #0a0a0a;
  color: #00ff41;
  position: relative;
  overflow: hidden;
  border: 1px solid #00ff41;
  box-shadow: 0 0 20px rgba(0, 255, 65, 0.3);
  min-height: 100vh;
}

.cyberpunk-pricing-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(rgba(0, 255, 65, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 65, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
  animation: grid-move 20s linear infinite;
}

.pricing-header {
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
  z-index: 2;
}

.pricing-title {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  color: #00ff41;
  text-shadow: 
    0 0 5px #00ff41,
    0 0 10px #00ff41,
    0 0 20px #00ff41;
  letter-spacing: 3px;
  animation: text-flicker 3s infinite alternate;
}

.pricing-subtitle {
  color: #008f11;
  font-size: 1rem;
  text-shadow: 0 0 5px #008f11;
  letter-spacing: 2px;
}

.pricing-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-bottom: 3rem;
  position: relative;
  z-index: 2;
}

.toggle-label {
  font-size: 1rem;
  color: #00cc44;
  text-shadow: 0 0 3px #00cc44;
  letter-spacing: 1px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 30px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 20, 10, 0.3);
  border: 1px solid #008f11;
  transition: .4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 4px;
  bottom: 3px;
  background: #00ff41;
  transition: .4s;
  border-radius: 50%;
  box-shadow: 0 0 10px #00ff41;
}

input:checked + .slider {
  background: rgba(0, 20, 10, 0.3);
  border-color: #00ff41;
}

input:checked + .slider:before {
  transform: translateX(30px);
  box-shadow: 0 0 15px #00ff41;
}

.discount-badge {
  background: linear-gradient(135deg, #ff00ff 0%, #ffff00 100%);
  color: #000;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-left: 0.5rem;
  text-shadow: none;
  box-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  position: relative;
  z-index: 2;
}

.pricing-card {
  background: rgba(0, 20, 10, 0.3);
  border: 1px solid #008f11;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
  box-shadow: 0 0 15px rgba(0, 255, 65, 0.2);
}

.pricing-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00ff41, transparent);
  animation: scan 3s linear infinite;
}

.pricing-card:hover {
  border-color: #00ff41;
  box-shadow: 0 0 25px rgba(0, 255, 65, 0.4);
  transform: translateZ(0);
}

.terminal-bar {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem;
  background: #001a00;
  border-bottom: 1px solid #008f11;
}

.terminal-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.terminal-dot.red {
  background: #ff5f56;
  box-shadow: 0 0 5px #ff5f56;
}

.terminal-dot.yellow {
  background: #ffbd2e;
  box-shadow: 0 0 5px #ffbd2e;
}

.terminal-dot.green {
  background: #27c93f;
  box-shadow: 0 0 5px #27c93f;
}

.card-header {
  padding: 1.5rem;
  text-align: center;
  position: relative;
}

.popular-badge {
  position: absolute;
  top: -10px;
  right: 10px;
  background: linear-gradient(135deg, #ff00ff 0%, #ffff00 100%);
  color: #000;
  padding: 0.25rem 1rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-shadow: none;
  box-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
  transform: rotate(5deg);
}

.plan-name {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  color: #00ff41;
  text-shadow: 0 0 5px #00ff41;
  letter-spacing: 2px;
}

.plan-description {
  color: #00cc44;
  font-size: 0.9rem;
  text-shadow: 0 0 3px #00cc44;
  letter-spacing: 1px;
}

.card-price {
  text-align: center;
  margin-bottom: 2rem;
  padding: 0 1.5rem;
}

.currency {
  font-size: 1.5rem;
  color: #00ff41;
  vertical-align: top;
}

.amount {
  font-size: 3rem;
  font-weight: 700;
  color: #00ff41;
  text-shadow: 0 0 10px #00ff41;
}

.period {
  color: #00cc44;
  font-size: 1rem;
  text-shadow: 0 0 3px #00cc44;
}

.features-list {
  list-style: none;
  padding: 0 1.5rem;
  margin-bottom: 2rem;
}

.feature-item {
  display: flex;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px dashed #008f11;
}

.feature-item:last-child {
  border-bottom: none;
}

.feature-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
  font-size: 0.8rem;
  font-weight: bold;
  flex-shrink: 0;
  color: #ff00ff;
  text-shadow: 0 0 5px #ff00ff;
}

.feature-item:not(.disabled) .feature-icon {
  background: rgba(255, 0, 255, 0.2);
  box-shadow: 0 0 10px rgba(255, 0, 255, 0.3);
}

.feature-item.disabled .feature-icon {
  color: #666;
  text-shadow: none;
  background: rgba(100, 100, 100, 0.2);
  box-shadow: none;
}

.feature-text {
  color: #00cc44;
  font-size: 0.95rem;
  text-shadow: 0 0 2px #00cc44;
  flex: 1;
}

.feature-item.disabled .feature-text {
  color: #666;
  text-shadow: none;
}

.select-button {
  width: calc(100% - 3rem);
  margin: 0 1.5rem 1.5rem;
  padding: 1rem;
  background: rgba(0, 30, 15, 0.5);
  border: 1px solid #008f11;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 1rem;
  font-weight: 600;
  color: #00ff41;
  cursor: pointer;
  transition: all 0.3s ease;
  text-shadow: 0 0 3px #00ff41;
  box-shadow: 0 0 10px rgba(0, 255, 65, 0.2);
}

.select-button:hover {
  background: rgba(0, 50, 25, 0.7);
  border-color: #00ff41;
  box-shadow: 0 0 15px rgba(0, 255, 65, 0.3);
  transform: translateY(-2px);
}

.scanline {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(0, 255, 65, 0.3);
  animation: scanline 8s linear infinite;
  pointer-events: none;
  z-index: 3;
}

@keyframes scanline {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100vh);
  }
}

@keyframes scan {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes grid-move {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(20px, 20px);
  }
}

@keyframes text-flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    text-shadow: 
      0 0 5px #00ff41,
      0 0 10px #00ff41,
      0 0 20px #00ff41;
    opacity: 1;
  }
  20%, 24%, 55% {
    text-shadow: none;
    opacity: 0.8;
  }
}

@media (max-width: 768px) {
  .cyberpunk-pricing-container {
    padding: 1rem;
  }
  
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .pricing-title {
    font-size: 2rem;
  }
  
  .plan-name {
    font-size: 1.5rem;
  }
}

JavaScript Functionality

document.addEventListener('DOMContentLoaded', function() {
  const toggle = document.getElementById('billing-toggle');
  const amounts = document.querySelectorAll('.amount');
  
  toggle.addEventListener('change', function() {
    amounts.forEach(amount => {
      if (this.checked) {
        amount.textContent = amount.getAttribute('data-yearly');
      } else {
        amount.textContent = amount.getAttribute('data-monthly');
      }
    });
  });
  
  // Add glitch effect to cards
  const cards = document.querySelectorAll('.pricing-card');
  
  cards.forEach(card => {
    card.addEventListener('mouseenter', () => {
      card.style.animation = 'glitch 0.3s linear';
      setTimeout(() => {
        card.style.animation = 'none';
      }, 300);
    });
  });
  
  // Add glitch animation to CSS
  const style = document.createElement('style');
  style.textContent = `
    @keyframes glitch {
      0% {
        transform: translate(0);
      }
      20% {
        transform: translate(-2px, 2px);
      }
      40% {
        transform: translate(-2px, -2px);
      }
      60% {
        transform: translate(2px, 2px);
      }
      80% {
        transform: translate(2px, -2px);
      }
      100% {
        transform: translate(0);
      }
    }
  `;
  document.head.appendChild(style);
});

Implementation Guide

1. Copy the HTML structure into your project
2. Add the CSS styles to your stylesheet
3. Include the JavaScript code in your script file
4. Customize the neon colors and glitch effects to match your brand
5. Update the pricing plans and features to reflect your offerings

The cyberpunk pricing matrix features a dystopian futuristic design with neon glows, scanlines, and glitch effects that create an authentic cyberpunk aesthetic. The design uses monospace typography and hacker-style formatting to enhance the digital experience.