Origami Fold Pricing Component

An innovative pricing table with origami-inspired folding animations and paper-like design elements for a unique user experience.

Features

• Origami-inspired Design: Paper-folding aesthetics using CSS clip-path and gradient techniques
• Folding Animations: Subtle hover animations that mimic paper folding effects
• Paper Texture Effects: Soft shadows and gradients that create a paper-like appearance
• Corner Accents: Triangular origami corners for distinctive card styling
• Smooth Transitions: Elegant animations for expanding and collapsing elements
• Responsive Layout: Adapts to all screen sizes with mobile-friendly design

HTML Structure

<div class="origami-pricing-container">
  <div class="pricing-header">
    <h2 class="pricing-title">/// ORIGAMI PRICING ///</h2>
    <p class="pricing-subtitle">FOLDING PLANS FOR YOUR SUCCESS</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-tier="basic">
      <div class="card-header">
        <div class="origami-corner tl"></div>
        <div class="origami-corner tr"></div>
        <div class="origami-corner bl"></div>
        <div class="origami-corner br"></div>
        <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="15" data-yearly="11.25">15</span>
        <span class="period">/MONTH</span>
      </div>
      <ul class="features-list">
        <li class="feature-item">
          <div class="feature-icon">✓</div>
          <span class="feature-text">1 Project</span>
        </li>
        <li class="feature-item">
          <div class="feature-icon">✓</div>
          <span class="feature-text">5GB Storage</span>
        </li>
        <li class="feature-item">
          <div class="feature-icon">✓</div>
          <span class="feature-text">Email Support</span>
        </li>
        <li class="feature-item disabled">
          <div class="feature-icon">✗</div>
          <span class="feature-text">API Access</span>
        </li>
        <li class="feature-item disabled">
          <div class="feature-icon">✗</div>
          <span class="feature-text">Custom Domain</span>
        </li>
      </ul>
      <button class="select-button">GET STARTED</button>
    </div>
    
    <div class="pricing-card popular" data-tier="pro">
      <div class="card-header">
        <div class="origami-corner tl"></div>
        <div class="origami-corner tr"></div>
        <div class="origami-corner bl"></div>
        <div class="origami-corner br"></div>
        <div class="popular-badge">MOST POPULAR</div>
        <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="39" data-yearly="29.25">39</span>
        <span class="period">/MONTH</span>
      </div>
      <ul class="features-list">
        <li class="feature-item">
          <div class="feature-icon">✓</div>
          <span class="feature-text">5 Projects</span>
        </li>
        <li class="feature-item">
          <div class="feature-icon">✓</div>
          <span class="feature-text">50GB Storage</span>
        </li>
        <li class="feature-item">
          <div class="feature-icon">✓</div>
          <span class="feature-text">Priority Support</span>
        </li>
        <li class="feature-item">
          <div class="feature-icon">✓</div>
          <span class="feature-text">API Access</span>
        </li>
        <li class="feature-item disabled">
          <div class="feature-icon">✗</div>
          <span class="feature-text">Custom Domain</span>
        </li>
      </ul>
      <button class="select-button">GET STARTED</button>
    </div>
    
    <div class="pricing-card" data-tier="enterprise">
      <div class="card-header">
        <div class="origami-corner tl"></div>
        <div class="origami-corner tr"></div>
        <div class="origami-corner bl"></div>
        <div class="origami-corner br"></div>
        <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="89" data-yearly="66.75">89</span>
        <span class="period">/MONTH</span>
      </div>
      <ul class="features-list">
        <li class="feature-item">
          <div class="feature-icon">✓</div>
          <span class="feature-text">Unlimited Projects</span>
        </li>
        <li class="feature-item">
          <div class="feature-icon">✓</div>
          <span class="feature-text">500GB Storage</span>
        </li>
        <li class="feature-item">
          <div class="feature-icon">✓</div>
          <span class="feature-text">24/7 Dedicated Support</span>
        </li>
        <li class="feature-item">
          <div class="feature-icon">✓</div>
          <span class="feature-text">Full API Access</span>
        </li>
        <li class="feature-item">
          <div class="feature-icon">✓</div>
          <span class="feature-text">Custom Domain</span>
        </li>
      </ul>
      <button class="select-button">CONTACT SALES</button>
    </div>
  </div>
</div>

CSS Styles

.origami-pricing-container {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 2rem;
  font-family: 'Inter', sans-serif;
  background: #f0f4f8;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}

.origami-pricing-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(135deg, rgba(255, 182, 193, 0.1) 0%, transparent 30%),
    linear-gradient(45deg, rgba(173, 216, 230, 0.1) 0%, transparent 30%);
  pointer-events: none;
  animation: float 20s 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: #2d3748;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  letter-spacing: 2px;
}

.pricing-subtitle {
  color: #4a5568;
  font-size: 1.1rem;
}

.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: #2d3748;
  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: #e2e8f0;
  border: 1px solid #cbd5e0;
  transition: .4s;
  border-radius: 34px;
}

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

input:checked + .slider {
  background: #e2e8f0;
  border-color: #a0aec0;
}

input:checked + .slider:before {
  transform: translateX(30px);
  background: #4a5568;
}

.discount-badge {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 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 6px rgba(0, 0, 0, 0.1);
}

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

.pricing-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transform-origin: center;
}

.pricing-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(135deg, rgba(255, 182, 193, 0.05) 0%, transparent 50%),
    linear-gradient(45deg, rgba(173, 216, 230, 0.05) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
  border-radius: 16px;
}

.pricing-card:hover {
  border-color: #cbd5e0;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  transform: translateY(-5px) rotate(1deg);
}

.popular {
  border-color: #667eea;
  box-shadow: 0 10px 25px rgba(102, 126, 234, 0.15);
}

.popular:hover {
  box-shadow: 0 15px 35px rgba(102, 126, 234, 0.2);
  transform: translateY(-10px) rotate(2deg);
}

.origami-corner {
  position: absolute;
  width: 30px;
  height: 30px;
  background: 
    linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.tl {
  top: 0;
  left: 0;
}

.tr {
  top: 0;
  right: 0;
  transform: scaleX(-1);
}

.bl {
  bottom: 0;
  left: 0;
  transform: scaleY(-1);
}

.br {
  bottom: 0;
  right: 0;
  transform: scale(-1);
}

.card-header {
  padding: 2rem;
  text-align: center;
  position: relative;
  border-bottom: 1px solid #edf2f7;
}

.popular-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 0.25rem 1rem;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.plan-name {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  color: #2d3748;
  font-weight: 700;
}

.plan-description {
  color: #718096;
  font-size: 0.9rem;
}

.card-price {
  text-align: center;
  margin: 2rem 0;
  position: relative;
}

.currency {
  font-size: 1.5rem;
  color: #4a5568;
  vertical-align: top;
}

.amount {
  font-size: 3rem;
  font-weight: 700;
  color: #2d3748;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.period {
  color: #718096;
  font-size: 1rem;
}

.features-list {
  list-style: none;
  padding: 0 2rem;
  margin-bottom: 2rem;
}

.feature-item {
  display: flex;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid #edf2f7;
}

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

.feature-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
  font-size: 0.8rem;
  font-weight: bold;
  flex-shrink: 0;
}

.feature-item:not(.disabled) .feature-icon {
  background: #667eea;
  color: white;
  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
}

.feature-item.disabled .feature-icon {
  background: #e2e8f0;
  color: #a0aec0;
}

.feature-text {
  color: #4a5568;
  font-size: 0.95rem;
  flex: 1;
}

.feature-item.disabled .feature-text {
  color: #a0aec0;
}

.select-button {
  width: calc(100% - 4rem);
  margin: 0 2rem 2rem;
  padding: 1rem;
  background: #f7fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  color: #4a5568;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.select-button:hover {
  background: #edf2f7;
  border-color: #cbd5e0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

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

@media (max-width: 768px) {
  .origami-pricing-container {
    padding: 1rem;
  }
  
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .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');
      }
    });
  });
});

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

The origami fold pricing component features paper-like textures and folding animations inspired by traditional Japanese paper folding. The design uses triangular corner accents and subtle hover animations to create a unique visual experience that mimics the art of origami with modern web techniques.