Holographic Pricing Display Component

An immersive pricing table with holographic projections, 3D elements, and light ray effects for a futuristic experience.

Features

• Holographic Projections: Simulated 3D holographic display using CSS 3D transforms and perspective
• Light Ray Effects: Dynamic light rays that move across the screen for immersive visuals
• Floating Animation: Gentle floating motion to simulate holographic projection
• Scan Line Effects: Moving scan lines for authentic holographic appearance
• 3D Interaction: Cards that respond to cursor movement with realistic 3D rotation
• Glowing Elements: Neon-like glowing elements using layered text and box shadows

HTML Structure

<div class="holographic-pricing-container">
  <div class="pricing-header">
    <h2 class="pricing-title">/// HOLOGRAPHIC PRICING ///</h2>
    <p class="pricing-subtitle">PROJECTING TIER INFORMATION...</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 30%</span>
  </div>
  
  <div class="pricing-grid">
    <div class="pricing-card" data-tier="basic">
      <div class="hologram-base"></div>
      <div class="card-projection">
        <div class="card-header">
          <h3 class="plan-name">BASIC</h3>
          <p class="plan-description">FOR INDIVIDUAL USERS</p>
        </div>
        <div class="card-price">
          <span class="currency">$</span>
          <span class="amount" data-monthly="19" data-yearly="13.30">19</span>
          <span class="period">/MONTH</span>
        </div>
        <ul class="features-list">
          <li class="feature-item">
            <div class="feature-dot"></div>
            <span class="feature-text">1 PROJECT</span>
          </li>
          <li class="feature-item">
            <div class="feature-dot"></div>
            <span class="feature-text">5GB STORAGE</span>
          </li>
          <li class="feature-item">
            <div class="feature-dot"></div>
            <span class="feature-text">EMAIL 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">SELECT PLAN</button>
      </div>
    </div>
    
    <div class="pricing-card popular" data-tier="pro">
      <div class="hologram-base"></div>
      <div class="card-projection">
        <div class="popular-badge">MOST POPULAR</div>
        <div class="card-header">
          <h3 class="plan-name">PRO</h3>
          <p class="plan-description">FOR GROWING TEAMS</p>
        </div>
        <div class="card-price">
          <span class="currency">$</span>
          <span class="amount" data-monthly="49" data-yearly="34.30">49</span>
          <span class="period">/MONTH</span>
        </div>
        <ul class="features-list">
          <li class="feature-item">
            <div class="feature-dot"></div>
            <span class="feature-text">5 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">SELECT PLAN</button>
      </div>
    </div>
    
    <div class="pricing-card" data-tier="enterprise">
      <div class="hologram-base"></div>
      <div class="card-projection">
        <div class="card-header">
          <h3 class="plan-name">ENTERPRISE</h3>
          <p class="plan-description">FOR LARGE ORGANIZATIONS</p>
        </div>
        <div class="card-price">
          <span class="currency">$</span>
          <span class="amount" data-monthly="99" data-yearly="69.30">99</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="light-rays"></div>
</div>

CSS Styles

.holographic-pricing-container {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 2rem;
  font-family: 'Inter', sans-serif;
  background: #000011;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 255, 255, 0.3);
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.2);
  min-height: 100vh;
}

.holographic-pricing-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;
  animation: float 15s ease-in-out infinite;
}

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

.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.7);
  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: 3;
}

.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(0, 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: rgba(0, 255, 255, 0.8);
  transition: .4s;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
}

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

input:checked + .slider:before {
  transform: translateX(30px);
  background: rgba(0, 255, 255, 1);
  box-shadow: 0 0 15px rgba(0, 255, 255, 1);
}

.discount-badge {
  background: linear-gradient(135deg, #ff00ff 0%, #00ffff 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 0 15px rgba(255, 0, 255, 0.5);
}

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

.pricing-card {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
}

.hologram-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-projection {
  background: rgba(10, 30, 50, 0.3);
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 16px;
  padding: 2rem;
  backdrop-filter: blur(10px);
  transform: translateZ(30px);
  box-shadow: 
    0 0 30px rgba(0, 255, 255, 0.2),
    inset 0 0 20px rgba(0, 255, 255, 0.1);
  position: relative;
  z-index: 2;
  transition: all 0.4s ease;
}

.card-projection::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;
}

.pricing-card:hover .card-projection {
  background: rgba(10, 30, 50, 0.4);
  border-color: rgba(0, 255, 255, 0.6);
  box-shadow: 
    0 0 40px rgba(0, 255, 255, 0.4),
    inset 0 0 25px rgba(0, 255, 255, 0.2);
  transform: translateZ(40px) translateY(-10px);
}

.popular-badge {
  position: absolute;
  top: -10px;
  right: 20px;
  background: linear-gradient(135deg, #ff00ff 0%, #00ffff 100%);
  color: #000;
  padding: 0.25rem 1rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  text-shadow: none;
  box-shadow: 0 0 15px rgba(255, 0, 255, 0.5);
  z-index: 3;
  transform: rotate(5deg);
}

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

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

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

.currency {
  font-size: 1.5rem;
  color: #00ffff;
  vertical-align: top;
  text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
}

.amount {
  font-size: 3rem;
  font-weight: 700;
  color: #00ffff;
  text-shadow: 
    0 0 10px rgba(0, 255, 255, 0.7),
    0 0 20px rgba(0, 255, 255, 0.5);
}

.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;
  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: 10px;
  height: 10px;
  border-radius: 50%;
  background: #00ffff;
  margin-right: 1rem;
  flex-shrink: 0;
  box-shadow: 0 0 5px #00ffff;
}

.feature-dot.disabled {
  background: rgba(100, 100, 100, 0.5);
  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: 100%;
  padding: 1rem;
  background: rgba(0, 20, 40, 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 rgba(0, 255, 255, 0.5);
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
}

.select-button:hover {
  background: rgba(0, 30, 60, 0.7);
  border-color: rgba(0, 255, 255, 0.6);
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
  transform: translateY(-2px);
}

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

.light-rays::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: 
    linear-gradient(90deg, 
      transparent 0%, 
      rgba(0, 255, 255, 0.1) 25%, 
      transparent 50%, 
      rgba(255, 0, 255, 0.1) 75%, 
      transparent 100%);
  animation: rays-move 10s linear infinite;
  transform: skewX(-30deg);
}

@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);
  }
  50% {
    transform: translateY(-20px);
  }
}

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

@keyframes rays-move {
  0% {
    transform: skewX(-30deg) translateX(0);
  }
  100% {
    transform: skewX(-30deg) translateX(100%);
  }
}

@media (max-width: 768px) {
  .holographic-pricing-container {
    padding: 1rem;
  }
  
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .pricing-title {
    font-size: 2rem;
  }
  
  .plan-name {
    font-size: 1.5rem;
  }
}

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');
      }
    });
  });
  
  // Add 3D effect to cards
  const cards = document.querySelectorAll('.pricing-card');
  
  cards.forEach(card => {
    card.addEventListener('mousemove', (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 rotateX = (centerY - y) / 20;
      const rotateY = (x - centerX) / 20;
      
      card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
    });
    
    card.addEventListener('mouseleave', () => {
      card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0)';
    });
  });
});

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 light effects to match your brand
5. Update the pricing plans and features to reflect your offerings

The holographic pricing display features simulated 3D holographic projections using CSS 3D transforms and perspective properties. The design includes dynamic light rays, floating animations, and scan line effects that create an authentic holographic appearance with futuristic visuals.