Quantum Entanglement Pricing Component

A futuristic pricing table with quantum entanglement effects, particle connections, and physics-based animations for a science-inspired experience.

Features

• Quantum Entanglement Effects: Particle-based animations that simulate quantum physics phenomena
• Physics-based Animations: Realistic movement using distance calculations and transform properties
• Magnetic Attraction: Elements respond to cursor proximity with realistic magnetic forces
• Particle Connections: Dynamic particle systems that connect related elements
• Glowing Effects: Neon-like glowing elements using layered text and box shadows
• Performance Optimized: Hardware-accelerated animations for smooth 60fps performance

HTML Structure

<div class="quantum-entanglement-pricing-container">
  <div class="pricing-header">
    <h2 class="pricing-title">Quantum Entanglement Pricing</h2>
    <p class="pricing-subtitle">Connected prices through quantum physics</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-quantum>
      <div class="entanglement-base"></div>
      <div class="card-entanglement">
        <div class="card-header">
          <div class="quantum-dot"></div>
          <h3 class="plan-name">QUANTUM</h3>
          <p class="plan-description">FOR INDIVIDUAL PARTICLES</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">
            <div class="feature-dot"></div>
            <span class="feature-text">3 PROJECTS</span>
          </li>
          <li class="feature-item">
            <div class="feature-dot"></div>
            <span class="feature-text">10GB STORAGE</span>
          </li>
          <li class="feature-item">
            <div class="feature-dot"></div>
            <span class="feature-text">BASIC SUPPORT</span>
          </li>
          <li class="feature-item disabled">
            <div class="feature-dot disabled"></div>
            <span class="feature-text">API ACCESS</span>
          </li>
          <li class="feature-item disabled">
            <div class="feature-dot disabled"></div>
            <span class="feature-text">CUSTOM DOMAIN</span>
          </li>
        </ul>
        <button class="select-button">ENTANGLE NOW</button>
      </div>
    </div>
    
    <div class="pricing-card popular" data-quantum>
      <div class="entanglement-base"></div>
      <div class="card-entanglement">
        <div class="popular-badge">MOST ENTANGLED</div>
        <div class="card-header">
          <div class="quantum-dot"></div>
          <h3 class="plan-name">ENTANGLEMENT</h3>
          <p class="plan-description">FOR CONNECTED PAIRS</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">
            <div class="feature-dot"></div>
            <span class="feature-text">10 PROJECTS</span>
          </li>
          <li class="feature-item">
            <div class="feature-dot"></div>
            <span class="feature-text">100GB STORAGE</span>
          </li>
          <li class="feature-item">
            <div class="feature-dot"></div>
            <span class="feature-text">PRIORITY SUPPORT</span>
          </li>
          <li class="feature-item">
            <div class="feature-dot"></div>
            <span class="feature-text">API ACCESS</span>
          </li>
          <li class="feature-item disabled">
            <div class="feature-dot disabled"></div>
            <span class="feature-text">CUSTOM DOMAIN</span>
          </li>
        </ul>
        <button class="select-button">ENTANGLE NOW</button>
      </div>
    </div>
    
    <div class="pricing-card" data-quantum>
      <div class="entanglement-base"></div>
      <div class="card-entanglement">
        <div class="card-header">
          <div class="quantum-dot"></div>
          <h3 class="plan-name">SUPERPOSITION</h3>
          <p class="plan-description">FOR MULTIPLE STATES</p>
        </div>
        <div class="card-price">
          <span class="currency">$</span>
          <span class="amount" data-monthly="129" data-yearly="96.75">129</span>
          <span class="period">/MONTH</span>
        </div>
        <ul class="features-list">
          <li class="feature-item">
            <div class="feature-dot"></div>
            <span class="feature-text">UNLIMITED PROJECTS</span>
          </li>
          <li class="feature-item">
            <div class="feature-dot"></div>
            <span class="feature-text">1TB STORAGE</span>
          </li>
          <li class="feature-item">
            <div class="feature-dot"></div>
            <span class="feature-text">24/7 DEDICATED SUPPORT</span>
          </li>
          <li class="feature-item">
            <div class="feature-dot"></div>
            <span class="feature-text">FULL API ACCESS</span>
          </li>
          <li class="feature-item">
            <div class="feature-dot"></div>
            <span class="feature-text">CUSTOM DOMAIN</span>
          </li>
        </ul>
        <button class="select-button">CONTACT SALES</button>
      </div>
    </div>
  </div>
  
  <div class="particle-field"></div>
</div>

CSS Styles

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

.quantum-entanglement-pricing-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: quantum-pulse 8s ease-in-out 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: #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: 3px;
  animation: title-glow 3s ease-in-out infinite alternate;
}

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

.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: rgba(0, 255, 255, 0.9);
  text-shadow: 0 0 3px rgba(0, 255, 255, 0.5);
  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: rgba(20, 20, 40, 0.5);
  border: 1px solid rgba(0, 255, 255, 0.3);
  transition: .4s;
  border-radius: 34px;
}

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

input:checked + .slider {
  background: rgba(20, 20, 40, 0.5);
  border-color: rgba(0, 255, 255, 0.5);
}

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

.discount-badge {
  background: linear-gradient(135deg, #ec4899 0%, #f43f5e 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 4px 12px rgba(236, 72, 153, 0.4);
}

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

.pricing-card {
  background: rgba(20, 20, 40, 0.7);
  border: 1px solid rgba(0, 255, 255, 0.3);
  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;
}

.pricing-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
  pointer-events: none;
  z-index: -1;
  border-radius: 16px;
}

.pricing-card:hover {
  background: rgba(25, 25, 50, 0.9);
  border-color: rgba(0, 255, 255, 0.6);
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(0, 255, 255, 0.3);
  transform: translateY(-5px);
}

.popular {
  background: rgba(30, 30, 60, 0.8);
  border: 1px solid rgba(0, 255, 255, 0.5);
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.4),
    0 0 25px rgba(0, 255, 255, 0.4);
}

.popular:hover {
  background: rgba(35, 35, 70, 0.9);
  border-color: #ff00ff;
  box-shadow: 
    0 16px 48px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(255, 0, 255, 0.5);
  transform: translateY(-10px);
}

.entanglement-base {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  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);
  filter: blur(2px);
  z-index: 1;
}

.card-entanglement {
  position: relative;
  z-index: 2;
}

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

.quantum-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #00ffff;
  margin: 0 auto 1rem;
  box-shadow: 0 0 10px #00ffff;
  transition: all 0.3s ease;
}

.pricing-card:hover .quantum-dot {
  background: #ff00ff;
  transform: scale(1.3);
  box-shadow: 0 0 15px #ff00ff;
}

.popular-badge {
  position: absolute;
  top: 1rem;
  right: -30px;
  background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);
  color: #000;
  padding: 0.25rem 2rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  text-shadow: none;
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.4);
  z-index: 3;
  transform: rotate(45deg);
}

.plan-name {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  color: #00ffff;
  text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
  font-weight: 700;
}

.plan-description {
  color: rgba(0, 255, 255, 0.8);
  font-size: 0.9rem;
  text-shadow: 0 0 3px rgba(0, 255, 255, 0.3);
}

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

.currency {
  font-size: 1.5rem;
  color: #00ffff;
  vertical-align: top;
  text-shadow: 0 0 5px #00ffff;
}

.amount {
  font-size: 3rem;
  font-weight: 700;
  color: #00ffff;
  text-shadow: 
    0 0 10px #00ffff,
    0 0 20px #00ffff;
  animation: price-glow 3s ease-in-out infinite alternate;
}

.period {
  color: rgba(0, 255, 255, 0.8);
  font-size: 1rem;
  text-shadow: 0 0 3px rgba(0, 255, 255, 0.3);
}

.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 solid rgba(0, 255, 255, 0.1);
}

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

.feature-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00ffff;
  margin-right: 1rem;
  flex-shrink: 0;
  box-shadow: 0 0 5px #00ffff;
}

.feature-item:not(.disabled) .feature-dot {
  background: #00ffff;
  box-shadow: 0 0 5px #00ffff;
}

.feature-item.disabled .feature-dot {
  background: #334155;
  box-shadow: none;
}

.feature-text {
  color: rgba(0, 255, 255, 0.9);
  font-size: 0.95rem;
  text-shadow: 0 0 2px rgba(0, 255, 255, 0.3);
  flex: 1;
}

.feature-item.disabled .feature-text {
  color: rgba(100, 100, 100, 0.7);
  text-shadow: none;
}

.select-button {
  width: calc(100% - 3rem);
  margin: 0 1.5rem 1.5rem;
  padding: 1rem;
  background: rgba(30, 30, 60, 0.5);
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  color: #00ffff;
  cursor: pointer;
  transition: all 0.3s ease;
  text-shadow: 0 0 3px #00ffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.select-button:hover {
  background: rgba(40, 40, 80, 0.7);
  border-color: rgba(0, 255, 255, 0.6);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

.particle-field {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}

.particle-field::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  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: quantum-pulse 8s ease-in-out infinite;
}

@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 quantum-pulse {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.6;
  }
}

@keyframes price-glow {
  0% {
    text-shadow: 
      0 0 10px #00ffff,
      0 0 20px #00ffff;
  }
  100% {
    text-shadow: 
      0 0 15px #00ffff,
      0 0 25px #00ffff,
      0 0 35px #00ffff;
  }
}

@media (max-width: 768px) {
  .quantum-entanglement-pricing-container {
    padding: 1rem;
  }
  
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .pricing-title {
    font-size: 2rem;
  }
  
  .plan-name {
    font-size: 1.5rem;
  }
  
  .popular {
    transform: scale(1);
  }
  
  .popular:hover {
    transform: translateY(-5px);
  }
}

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');
      }
    });
  });
  
  // Quantum entanglement effect functionality
  const pricingCards = document.querySelectorAll('.pricing-card[data-quantum]');
  
  pricingCards.forEach(card => {
    // FAQ accordion functionality
    const question = card.querySelector('.faq-question');
    
    question.addEventListener('click', () => {
      const isActive = card.classList.contains('active');
      
      // Close all other items
      pricingCards.forEach(otherItem => {
        if (otherItem !== card) {
          otherItem.classList.remove('active');
        }
      });
      
      // Toggle current item
      if (isActive) {
        card.classList.remove('active');
      } else {
        card.classList.add('active');
      }
    });
    
    // Quantum entanglement attraction effect
    const handleMouseMove = (e) => {
      const rect = card.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;
        
        card.style.transform = `translate(${moveX}px, ${moveY}px)`;
        card.classList.add('quantum-active');
      } else {
        card.style.transform = 'translate(0, 0)';
        card.classList.remove('quantum-active');
      }
    };
    
    const handleMouseLeave = () => {
      card.style.transform = 'translate(0, 0)';
      card.classList.remove('quantum-active');
    };
    
    document.addEventListener('mousemove', handleMouseMove);
    card.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 quantum strength and attraction effects to match your brand
5. Update the pricing plans and features to reflect your offerings

The quantum entanglement pricing component features physics-based animations that simulate quantum phenomena with particle connections and attraction effects. The design uses realistic distance calculations and CSS transforms to create natural movement, with visual feedback indicating the quantum entanglement state for an immersive scientific experience.