Cyberpunk FAQ Interface Component

A futuristic FAQ component 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-faq-container">
  <div class="faq-header">
    <h2 class="faq-title">/// SYSTEM FAQ ///</h2>
    <p class="faq-subtitle">ACCESSING KNOWLEDGE BASE...</p>
  </div>
  
  <div class="faq-list">
    <div class="faq-item">
      <div class="faq-question">
        <span class="question-marker">>></span>
        <span class="question-text">WHAT IS CYBERPUNK DESIGN?</span>
        <span class="question-status">[OPEN]</span>
      </div>
      <div class="faq-answer">
        <p>> CYBERPUNK IS A SUBGENRE OF SCI-FI SET IN DYSTOPIAN FUTURES WITH ADVANCED TECHNOLOGY AND SOCIAL DECAY.</p>
        <p>> CHARACTERIZED BY NEON LIGHTS, CORPORATE DOMINANCE, AND HACKER CULTURE.</p>
      </div>
    </div>
    
    <div class="faq-item">
      <div class="faq-question">
        <span class="question-marker">>></span>
        <span class="question-text">HOW DO NEON EFFECTS WORK?</span>
        <span class="question-status">[OPEN]</span>
      </div>
      <div class="faq-answer">
        <p>> NEON EFFECTS ARE ACHIEVED THROUGH BOX-SHADOWS, TEXT-SHADOWS, AND CSS ANIMATIONS.</p>
        <p>> MULTIPLE LAYERS OF GLOW CREATE THE ILLUSION OF LIGHT EMISSION.</p>
      </div>
    </div>
    
    <div class="faq-item">
      <div class="faq-question">
        <span class="question-marker">>></span>
        <span class="question-text">ARE GLITCH EFFECTS REAL?</span>
        <span class="question-status">[OPEN]</span>
      </div>
      <div class="faq-answer">
        <p>> GLITCH EFFECTS ARE SIMULATED USING CSS TRANSFORMS AND CLIP-PATH PROPERTIES.</p>
        <p>> JAVASCRIPT RANDOMIZES THE EFFECTS TO CREATE UNPREDICTABLE VISUAL ARTIFACTS.</p>
      </div>
    </div>
    
    <div class="faq-item">
      <div class="faq-question">
        <span class="question-marker">>></span>
        <span class="question-text">CAN I CUSTOMIZE COLORS?</span>
        <span class="question-status">[OPEN]</span>
      </div>
      <div class="faq-answer">
        <p>> YES, THE COMPONENT USES CSS CUSTOM PROPERTIES FOR EASY COLOR THEMING.</p>
        <p>> MODIFY THE --neon-color VARIABLE TO CHANGE THE PRIMARY GLOW COLOR.</p>
      </div>
    </div>
  </div>
  
  <div class="scanline"></div>
</div>

CSS Styles

.cyberpunk-faq-container {
  max-width: 800px;
  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);
}

.cyberpunk-faq-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;
}

.faq-header {
  text-align: center;
  margin-bottom: 2rem;
  position: relative;
}

.faq-title {
  font-size: 2rem;
  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;
}

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

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-item {
  background: rgba(0, 20, 10, 0.3);
  border: 1px solid #008f11;
  padding: 1rem;
  position: relative;
  transition: all 0.3s ease;
  overflow: hidden;
}

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

.faq-item:hover {
  border-color: #00ff41;
  box-shadow: 
    0 0 10px rgba(0, 255, 65, 0.5),
    inset 0 0 10px rgba(0, 255, 65, 0.1);
  transform: translateZ(0);
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  cursor: pointer;
  background: rgba(0, 30, 15, 0.5);
  border: 1px solid #008f11;
  margin-bottom: 1rem;
  position: relative;
  transition: all 0.3s ease;
}

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

.question-marker {
  color: #ff00ff;
  text-shadow: 0 0 5px #ff00ff;
  font-weight: bold;
}

.question-text {
  flex: 1;
  margin: 0 1rem;
  font-weight: bold;
  letter-spacing: 1px;
  text-shadow: 0 0 3px #00ff41;
}

.question-status {
  color: #ffff00;
  text-shadow: 0 0 5px #ffff00;
  font-size: 0.8rem;
}

.faq-answer {
  padding: 0 1rem;
  max-height: 0;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(0, 15, 10, 0.5);
  border: 1px dashed #008f11;
  position: relative;
}

.faq-item.active .faq-answer {
  padding: 1rem;
  max-height: 300px;
}

.faq-answer p {
  margin: 0.5rem 0;
  color: #00cc44;
  font-size: 0.9rem;
  line-height: 1.6;
  text-shadow: 0 0 2px #00cc44;
}

.faq-answer p:first-child::before {
  content: '> ';
  color: #ff00ff;
}

.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;
}

@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-faq-container {
    padding: 1rem;
  }
  
  .faq-title {
    font-size: 1.5rem;
  }
  
  .question-text {
    font-size: 0.9rem;
  }
}

JavaScript Functionality

document.addEventListener('DOMContentLoaded', function() {
  const faqItems = document.querySelectorAll('.faq-item');
  
  faqItems.forEach(item => {
    const question = item.querySelector('.faq-question');
    
    question.addEventListener('click', () => {
      const isActive = item.classList.contains('active');
      
      // Close all other items
      faqItems.forEach(otherItem => {
        if (otherItem !== item) {
          otherItem.classList.remove('active');
        }
      });
      
      // Toggle current item
      if (isActive) {
        item.classList.remove('active');
      } else {
        item.classList.add('active');
        
        // Add glitch effect on open
        item.style.animation = 'none';
        setTimeout(() => {
          item.style.animation = 'glitch 0.3s linear';
        }, 10);
      }
    });
  });
  
  // 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 by modifying the color values
5. Add your own FAQ questions and answers in the cyberpunk style

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