Holographic Projection FAQ Component

A futuristic FAQ component with holographic projection effects and 3D visual elements for an immersive experience.

Features

• Holographic Effects: Simulated 3D projection using advanced CSS techniques
• Dynamic Lighting: Glowing elements and light trails for a futuristic feel
• Interactive 3D: Container responds to mouse movement for immersive experience
• Floating Animation: Gentle floating motion to simulate holographic projection
• Scanning Lines: Animated scan lines for authentic holographic appearance
• Responsive Design: Adapts to all screen sizes while maintaining effects

HTML Structure

<div class="holographic-faq-container">
  <div class="faq-header">
    <h2 class="faq-title">Holographic FAQ System</h2>
    <p class="faq-subtitle">Projecting knowledge into reality</p>
  </div>
  
  <div class="projection-area">
    <div class="hologram-base"></div>
    <div class="faq-projection">
      <div class="faq-item">
        <div class="faq-question">
          <div class="hologram-dot"></div>
          <h3>What is holographic projection?</h3>
          <div class="question-icon">+</div>
        </div>
        <div class="faq-answer">
          <p>Holographic projection creates 3D-like visual effects using layered transparency, gradients, and light effects.</p>
        </div>
      </div>
      
      <div class="faq-item">
        <div class="faq-question">
          <div class="hologram-dot"></div>
          <h3>How are the effects achieved?</h3>
          <div class="question-icon">+</div>
        </div>
        <div class="faq-answer">
          <p>Effects use CSS gradients, box-shadows, and pseudo-elements to simulate light projection and depth.</p>
        </div>
      </div>
      
      <div class="faq-item">
        <div class="faq-question">
          <div class="hologram-dot"></div>
          <h3>Is this truly 3D?</h3>
          <div class="question-icon">+</div>
        </div>
        <div class="faq-answer">
          <p>While not true 3D, the visual effects create an illusion of depth using advanced CSS techniques.</p>
        </div>
      </div>
      
      <div class="faq-item">
        <div class="faq-question">
          <div class="hologram-dot"></div>
          <h3>Can I customize the colors?</h3>
          <div class="question-icon">+</div>
        </div>
        <div class="faq-answer">
          <p>Absolutely! The component uses CSS custom properties for easy color and effect customization.</p>
        </div>
      </div>
    </div>
  </div>
</div>

CSS Styles

.holographic-faq-container {
  max-width: 800px;
  margin: 2rem auto;
  padding: 2rem;
  font-family: 'Orbitron', sans-serif;
  background: #000011;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 255, 255, 0.3);
}

.holographic-faq-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 30%, rgba(0, 255, 255, 0.1) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255, 0, 255, 0.1) 0%, transparent 40%),
    radial-gradient(circle at 40% 80%, rgba(0, 255, 0, 0.1) 0%, transparent 30%);
  pointer-events: none;
}

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

.faq-title {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  color: #00ffff;
  text-shadow: 
    0 0 10px rgba(0, 255, 255, 0.7),
    0 0 20px rgba(0, 255, 255, 0.5),
    0 0 30px rgba(0, 255, 255, 0.3);
  letter-spacing: 2px;
  animation: title-glow 3s ease-in-out infinite alternate;
}

.faq-subtitle {
  color: rgba(0, 255, 255, 0.7);
  font-size: 1.1rem;
  text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
}

.projection-area {
  position: relative;
  perspective: 1000px;
  min-height: 400px;
}

.hologram-base {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 10px;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.8), transparent);
  border-radius: 50%;
  box-shadow: 
    0 0 20px rgba(0, 255, 255, 0.5),
    0 0 40px rgba(0, 255, 255, 0.3);
  filter: blur(2px);
}

.faq-projection {
  position: relative;
  transform-style: preserve-3d;
  animation: float 6s ease-in-out infinite;
}

.faq-item {
  background: rgba(0, 20, 40, 0.3);
  border: 1px solid rgba(0, 255, 255, 0.3);
  margin-bottom: 1rem;
  border-radius: 8px;
  backdrop-filter: blur(10px);
  transform: translateZ(20px);
  box-shadow: 
    0 0 20px rgba(0, 255, 255, 0.2),
    inset 0 0 10px rgba(0, 255, 255, 0.1);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

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

.faq-item:hover {
  border-color: rgba(0, 255, 255, 0.6);
  box-shadow: 
    0 0 30px rgba(0, 255, 255, 0.4),
    inset 0 0 15px rgba(0, 255, 255, 0.2);
  transform: translateZ(30px) translateY(-5px);
}

.faq-question {
  display: flex;
  align-items: center;
  padding: 1.5rem;
  cursor: pointer;
  position: relative;
}

.hologram-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #00ffff;
  box-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff;
  margin-right: 1rem;
  position: relative;
}

.hologram-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 255, 255, 0.2);
  animation: pulse 2s ease-in-out infinite;
}

.faq-question h3 {
  margin: 0;
  font-size: 1.2rem;
  color: #00ffff;
  text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
  flex: 1;
}

.question-icon {
  font-size: 1.5rem;
  color: #00ffff;
  text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
  transition: transform 0.3s ease;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-item.active .question-icon {
  transform: rotate(45deg);
}

.faq-answer {
  padding: 0 1.5rem;
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s ease;
  background: rgba(0, 30, 60, 0.4);
  border-top: 1px solid rgba(0, 255, 255, 0.2);
}

.faq-item.active .faq-answer {
  padding: 0 1.5rem 1.5rem;
  max-height: 200px;
}

.faq-answer p {
  margin: 1rem 0 0 0;
  color: rgba(0, 255, 255, 0.9);
  line-height: 1.6;
  text-shadow: 0 0 3px rgba(0, 255, 255, 0.3);
}

@keyframes title-glow {
  0% {
    text-shadow: 
      0 0 10px rgba(0, 255, 255, 0.7),
      0 0 20px rgba(0, 255, 255, 0.5),
      0 0 30px rgba(0, 255, 255, 0.3);
  }
  100% {
    text-shadow: 
      0 0 15px rgba(0, 255, 255, 0.8),
      0 0 25px rgba(0, 255, 255, 0.6),
      0 0 35px rgba(0, 255, 255, 0.4),
      0 0 45px rgba(0, 255, 255, 0.2);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0) rotateX(2deg);
  }
  50% {
    transform: translateY(-10px) rotateX(-2deg);
  }
}

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

@keyframes pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.7;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0.3;
  }
}

@media (max-width: 768px) {
  .holographic-faq-container {
    padding: 1rem;
  }
  
  .faq-title {
    font-size: 2rem;
  }
  
  .faq-question {
    padding: 1rem;
  }
  
  .faq-question h3 {
    font-size: 1rem;
  }
}

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 floating animation to container
  const container = document.querySelector('.holographic-faq-container');
  container.addEventListener('mousemove', (e) => {
    const xAxis = (window.innerWidth / 2 - e.pageX) / 25;
    const yAxis = (window.innerHeight / 2 - e.pageY) / 25;
    container.style.transform = `perspective(1000px) rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
  });
  
  container.addEventListener('mouseenter', () => {
    container.style.transition = 'none';
  });
  
  container.addEventListener('mouseleave', () => {
    container.style.transition = 'transform 0.5s ease';
    container.style.transform = 'perspective(1000px) rotateY(0deg) rotateX(0deg)';
  });
});

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 holographic colors and effects to match your theme
5. Add your own FAQ questions and answers

The holographic projection FAQ component creates a futuristic interface with simulated 3D effects using advanced CSS techniques. The container responds to mouse movement for an immersive experience, and the FAQ items feature glowing elements and scan lines for an authentic holographic appearance.