Liquid Wave FAQ Component

An organic FAQ component with fluid wave animations and flowing motion effects for a natural user experience.

Features

• Fluid Wave Animations: Organic wave movements using CSS animations and transforms
• Glassmorphism Design: Frosted glass effect with backdrop blur
• Smooth Transitions: Elegant animations for expanding and collapsing FAQ items
• Dynamic Indicators: Pulsing wave indicators for visual feedback
• Performance Optimized: Hardware-accelerated animations for smooth performance
• Fully Responsive: Adapts to all screen sizes while maintaining fluid effects

HTML Structure

<div class="liquid-faq-container">
  <div class="faq-header">
    <h2 class="faq-title">Fluid FAQ System</h2>
    <p class="faq-subtitle">Flowing knowledge in motion</p>
  </div>
  
  <div class="wave-background">
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
  </div>
  
  <div class="faq-content">
    <div class="faq-item">
      <div class="faq-question">
        <div class="wave-indicator"></div>
        <h3>What is liquid wave design?</h3>
        <div class="question-icon">+</div>
      </div>
      <div class="faq-answer">
        <p>Liquid wave design uses fluid animations and organic motion to create a sense of flowing movement and natural interaction.</p>
      </div>
    </div>
    
    <div class="faq-item">
      <div class="faq-question">
        <div class="wave-indicator"></div>
        <h3>How are the wave effects created?</h3>
        <div class="question-icon">+</div>
      </div>
      <div class="faq-answer">
        <p>Wave effects are achieved using SVG path animations and CSS keyframes to simulate natural water-like movement.</p>
      </div>
    </div>
    
    <div class="faq-item">
      <div class="faq-question">
        <div class="wave-indicator"></div>
        <h3>Are these effects performance heavy?</h3>
        <div class="question-icon">+</div>
      </div>
      <div class="faq-answer">
        <p>The animations are optimized using hardware acceleration and efficient CSS properties for smooth performance.</p>
      </div>
    </div>
    
    <div class="faq-item">
      <div class="faq-question">
        <div class="wave-indicator"></div>
        <h3>Can I customize the wave colors?</h3>
        <div class="question-icon">+</div>
      </div>
      <div class="faq-answer">
        <p>Absolutely! The component uses CSS custom properties for easy customization of wave colors and animation speeds.</p>
      </div>
    </div>
  </div>
</div>

CSS Styles

.liquid-faq-container {
  max-width: 800px;
  margin: 2rem auto;
  padding: 2rem;
  font-family: 'Inter', sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

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

.faq-title {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  color: white;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.faq-subtitle {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.1rem;
}

.wave-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 1;
}

.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 100px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 43%;
  animation: wave 12s linear infinite;
  opacity: 0.7;
}

.wave:nth-child(2) {
  animation: wave 15s linear infinite;
  opacity: 0.5;
  animation-direction: reverse;
}

.wave:nth-child(3) {
  animation: wave 18s linear infinite;
  opacity: 0.3;
}

.faq-content {
  position: relative;
  z-index: 2;
}

.faq-item {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 1rem;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  position: relative;
}

.faq-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
  transform: translateX(-100%);
  animation: wave-glow 3s ease-in-out infinite;
}

.faq-item:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

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

.wave-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  margin-right: 1rem;
  position: relative;
  overflow: hidden;
}

.wave-indicator::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  animation: pulse 2s ease-in-out infinite;
}

.faq-question h3 {
  margin: 0;
  font-size: 1.2rem;
  color: white;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  flex: 1;
}

.question-icon {
  font-size: 1.5rem;
  color: white;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  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 cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(255, 255, 255, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

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

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

@keyframes wave {
  0% {
    transform: translateX(0) translateY(0) rotate(0deg);
  }
  50% {
    transform: translateX(-25%) translateY(-20px) rotate(1deg);
  }
  100% {
    transform: translateX(-50%) translateY(0) rotate(0deg);
  }
}

@keyframes wave-glow {
  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) {
  .liquid-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');
      }
    });
  });
});

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 gradient colors and wave animation speeds to match your brand
5. Add your own FAQ questions and answers

The liquid wave FAQ component features organic wave animations and fluid motion effects that create a natural, flowing user experience. The design uses glassmorphism techniques with backdrop blur and multiple layered wave animations for a visually appealing interface.