Magnetic Attraction FAQ Component

An interactive FAQ component with magnetic hover effects and attraction-based animations for a physics-inspired user experience.

Features

• Magnetic Attraction: Elements respond to cursor proximity with realistic attraction effects
• Physics-based Animations: Natural movement using distance calculations and transform properties
• Smooth Transitions: Elegant animations for expanding and collapsing FAQ items
• Dynamic Visual Feedback: Visual changes indicate magnetic attraction state
• Performance Optimized: Hardware-accelerated animations for smooth 60fps performance
• Fully Responsive: Adapts to all screen sizes while maintaining magnetic effects

HTML Structure

<div class="magnetic-faq-container">
  <div class="faq-header">
    <h2 class="faq-title">Magnetic FAQ System</h2>
    <p class="faq-subtitle">Attracting answers with magnetic force</p>
  </div>
  
  <div class="faq-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 30%</span>
  </div>
  
  <div class="faq-grid">
    <div class="faq-item" data-magnetic>
      <div class="faq-question">
        <div class="magnetic-dot"></div>
        <h3>What is magnetic attraction design?</h3>
        <div class="question-icon">+</div>
      </div>
      <div class="faq-answer">
        <p>Magnetic attraction design uses physics-based animations to create interactive elements that respond to cursor proximity with realistic attraction effects.</p>
      </div>
    </div>
    
    <div class="faq-item" data-magnetic>
      <div class="faq-question">
        <div class="magnetic-dot"></div>
        <h3>How do the magnetic effects work?</h3>
        <div class="question-icon">+</div>
      </div>
      <div class="faq-answer">
        <p>The effects use JavaScript to calculate cursor distance and apply CSS transforms to create realistic attraction and repulsion behaviors.</p>
      </div>
    </div>
    
    <div class="faq-item" data-magnetic>
      <div class="faq-question">
        <div class="magnetic-dot"></div>
        <h3>Are these effects performance optimized?</h3>
        <div class="question-icon">+</div>
      </div>
      <div class="faq-answer">
        <p>Yes, the animations use hardware acceleration and efficient requestAnimationFrame for smooth 60fps performance.</p>
      </div>
    </div>
    
    <div class="faq-item" data-magnetic>
      <div class="faq-question">
        <div class="magnetic-dot"></div>
        <h3>Can I customize the attraction strength?</h3>
        <div class="question-icon">+</div>
      </div>
      <div class="faq-answer">
        <p>Absolutely! The component uses CSS custom properties and JavaScript parameters for easy customization of magnetic strength and effects.</p>
      </div>
    </div>
  </div>
</div>

CSS Styles

.magnetic-faq-container {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 2rem;
  font-family: 'Inter', sans-serif;
  background: #0f172a;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  min-height: 100vh;
}

.magnetic-faq-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 30%, rgba(99, 102, 241, 0.1) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.1) 0%, transparent 40%),
    radial-gradient(circle at 40% 80%, rgba(236, 72, 153, 0.1) 0%, transparent 30%);
  pointer-events: none;
  animation: float 15s ease-in-out infinite;
}

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

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

.faq-subtitle {
  color: #94a3b8;
  font-size: 1.1rem;
}

.faq-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: #cbd5e1;
  font-weight: 500;
}

.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: #1e293b;
  border: 1px solid #334155;
  transition: .4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 4px;
  bottom: 3px;
  background: #6366f1;
  transition: .4s;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.5);
}

input:checked + .slider {
  background: #1e293b;
  border-color: #6366f1;
}

input:checked + .slider:before {
  transform: translateX(30px);
  background: #8b5cf6;
  box-shadow: 0 2px 10px rgba(139, 92, 246, 0.6);
}

.discount-badge {
  background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-left: 0.5rem;
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.4);
}

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

.faq-item {
  background: #1e293b;
  border: 1px solid #334155;
  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.3);
  position: relative;
  transform: translateZ(0);
  will-change: transform;
}

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

.faq-item:hover {
  background: #1e293b;
  border-color: #6366f1;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  transform: translateY(-5px);
}

.faq-item.magnetic-active {
  border-color: #8b5cf6;
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
}

.magnetic-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #6366f1;
  margin-right: 1rem;
  flex-shrink: 0;
  box-shadow: 0 0 8px #6366f1;
  transition: all 0.3s ease;
}

.faq-item.magnetic-active .magnetic-dot {
  background: #8b5cf6;
  transform: scale(1.3);
  box-shadow: 0 0 15px #8b5cf6;
}

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

.faq-question h3 {
  margin: 0;
  font-size: 1.2rem;
  color: #e2e8f0;
  flex: 1;
  transition: color 0.3s ease;
}

.faq-item.magnetic-active .faq-question h3 {
  color: #8b5cf6;
}

.question-icon {
  font-size: 1.5rem;
  color: #94a3b8;
  transition: all 0.3s ease;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-item.magnetic-active .question-icon {
  color: #8b5cf6;
  transform: scale(1.2);
}

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

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

.faq-answer {
  padding: 0 1.5rem;
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  background: #1e293b;
  border-top: 1px solid #334155;
}

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

.faq-answer p {
  margin: 1rem 0 0 0;
  color: #cbd5e1;
  line-height: 1.6;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

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

@media (max-width: 768px) {
  .magnetic-faq-container {
    padding: 1rem;
  }
  
  .faq-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .faq-title {
    font-size: 2rem;
  }
  
  .faq-question {
    padding: 1rem;
  }
  
  .faq-question h3 {
    font-size: 1rem;
  }
}

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');
      }
    });
  });
  
  // Magnetic effect functionality
  const faqItems = document.querySelectorAll('.faq-item[data-magnetic]');
  
  faqItems.forEach(item => {
    const question = item.querySelector('.faq-question');
    
    // FAQ accordion functionality
    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');
      }
    });
    
    // Magnetic attraction effect
    const handleMouseMove = (e) => {
      const rect = item.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;
      const centerX = rect.width / 2;
      const centerY = rect.height / 2;
      const distanceX = x - centerX;
      const distanceY = y - centerY;
      const distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY);
      const maxDistance = 200;
      
      if (distance < maxDistance) {
        const strength = 1 - (distance / maxDistance);
        const moveX = (distanceX / maxDistance) * strength * 15;
        const moveY = (distanceY / maxDistance) * strength * 15;
        
        item.style.transform = `translate(${moveX}px, ${moveY}px)`;
        item.classList.add('magnetic-active');
      } else {
        item.style.transform = 'translate(0, 0)';
        item.classList.remove('magnetic-active');
      }
    };
    
    const handleMouseLeave = () => {
      item.style.transform = 'translate(0, 0)';
      item.classList.remove('magnetic-active');
    };
    
    document.addEventListener('mousemove', handleMouseMove);
    item.addEventListener('mouseleave', handleMouseLeave);
  });
});

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 magnetic strength and attraction effects to match your brand
5. Update the FAQ questions and answers to reflect your offerings

The magnetic attraction FAQ component features physics-based animations that respond to cursor proximity with realistic attraction effects. The design uses distance calculations and CSS transforms to create natural movement, with visual feedback indicating the magnetic attraction state for an immersive user experience.