Categoría · Tablas de Precios Nivel de Dificultad · Avanzado Publicado el · 10 de septiembre de 2025

Precios de Atracción Magnética

Tarjetas de precios interactivas con selector mensual/anual y un efecto magnético sutil que sigue el puntero.

#precios #magnetico #hover #selector #ui

Diseño Responsivo

Sí

Soporte para Modo Oscuro

líneas

415

Compatibilidad del Navegador

Vista Previa en Vivo

Interactúa con el componente sin salir de la página.

520px

Escenarios de uso

Landings que necesitan una sección de precios premium
Planes SaaS con facturación mensual/anual
Páginas de producto donde las micro-interacciones mejoran la percepción de calidad

Parámetros ajustables

--accent y --accent2 controlan los colores del brillo
data-monthly y data-yearly controlan los precios mostrados
max y strength en JavaScript controlan la intensidad del efecto

Errores comunes

Cargar el script antes de que exista el markup
Olvidar data-monthly y data-yearly en cada precio
Sobrescribir transform de .magnetic-pricing__cardInner desde tu CSS global

Compatibilidad

Funciona en navegadores modernos (requiere Pointer Events)
Respeta prefers-reduced-motion desactivando el movimiento en hover

HTML

líneas

CSS

259

líneas

JavaScript

líneas

                <section class="magnetic-pricing" data-magnetic-pricing>
  <header class="magnetic-pricing__header">
    <h2 class="magnetic-pricing__title">Precios que reaccionan al cursor</h2>
    <p class="magnetic-pricing__subtitle">Hover magnético + layout limpio de planes para landing pages</p>
  </header>

  <div class="magnetic-pricing__billing" role="group" aria-label="Periodo de facturación">
    <span class="magnetic-pricing__label">Mensual</span>
    <label class="magnetic-pricing__switch">
      <input class="magnetic-pricing__checkbox" type="checkbox" aria-label="Cambiar a facturación anual" />
      <span class="magnetic-pricing__slider" aria-hidden="true"></span>
    </label>
    <span class="magnetic-pricing__label">Anual</span>
    <span class="magnetic-pricing__badge">Ahorra 25%</span>
  </div>

  <div class="magnetic-pricing__grid">
    <article class="magnetic-pricing__card" data-plan>
      <div class="magnetic-pricing__cardInner">
        <div class="magnetic-pricing__top">
          <h3 class="magnetic-pricing__plan">Inicial</h3>
          <p class="magnetic-pricing__desc">Para proyectos personales</p>
        </div>

        <div class="magnetic-pricing__price">
          <span class="magnetic-pricing__currency">\$</span>
          <span class="magnetic-pricing__amount" data-monthly="19" data-yearly="14">19</span>
          <span class="magnetic-pricing__period">/mes</span>
        </div>

        <ul class="magnetic-pricing__features">
          <li>3 proyectos</li>
          <li>10GB de almacenamiento</li>
          <li>Soporte por email</li>
          <li class="is-muted">Acceso a API</li>
        </ul>

        <button class="magnetic-pricing__cta" type="button">Elegir Inicial</button>
      </div>
    </article>

    <article class="magnetic-pricing__card is-popular" data-plan>
      <div class="magnetic-pricing__cardInner">
        <div class="magnetic-pricing__pill">Más popular</div>
        <div class="magnetic-pricing__top">
          <h3 class="magnetic-pricing__plan">Equipo</h3>
          <p class="magnetic-pricing__desc">Para equipos en crecimiento</p>
        </div>

        <div class="magnetic-pricing__price">
          <span class="magnetic-pricing__currency">\$</span>
          <span class="magnetic-pricing__amount" data-monthly="49" data-yearly="36">49</span>
          <span class="magnetic-pricing__period">/mes</span>
        </div>

        <ul class="magnetic-pricing__features">
          <li>10 proyectos</li>
          <li>100GB de almacenamiento</li>
          <li>Soporte prioritario</li>
          <li>Acceso a API</li>
        </ul>

        <button class="magnetic-pricing__cta" type="button">Elegir Equipo</button>
      </div>
    </article>

    <article class="magnetic-pricing__card" data-plan>
      <div class="magnetic-pricing__cardInner">
        <div class="magnetic-pricing__top">
          <h3 class="magnetic-pricing__plan">Empresa</h3>
          <p class="magnetic-pricing__desc">Para organizaciones grandes</p>
        </div>

        <div class="magnetic-pricing__price">
          <span class="magnetic-pricing__currency">\$</span>
          <span class="magnetic-pricing__amount" data-monthly="119" data-yearly="89">119</span>
          <span class="magnetic-pricing__period">/mes</span>
        </div>

        <ul class="magnetic-pricing__features">
          <li>Proyectos ilimitados</li>
          <li>1TB de almacenamiento</li>
          <li>Soporte con SLA</li>
          <li>Seguridad avanzada</li>
        </ul>

        <button class="magnetic-pricing__cta" type="button">Elegir Empresa</button>
      </div>
    </article>
  </div>
</section>

              

                .magnetic-pricing {
  --bg: #0b1220;
  --panel: rgba(255, 255, 255, 0.06);
  --panelBorder: rgba(255, 255, 255, 0.12);
  --text: #e7eefc;
  --muted: rgba(231, 238, 252, 0.7);
  --accent: #7c3aed;
  --accent2: #22d3ee;
  --shadow: rgba(0, 0, 0, 0.45);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: radial-gradient(1200px 600px at 20% 10%, rgba(124, 58, 237, 0.28), transparent 60%),
    radial-gradient(1000px 500px at 80% 0%, rgba(34, 211, 238, 0.18), transparent 55%),
    var(--bg);
  border-radius: 24px;
  padding: 28px;
  max-width: 980px;
  margin: 0 auto;
  box-shadow: 0 30px 80px var(--shadow);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.magnetic-pricing__header {
  text-align: center;
  margin-bottom: 20px;
}

.magnetic-pricing__title {
  margin: 0;
  font-size: 1.9rem;
  letter-spacing: -0.02em;
}

.magnetic-pricing__subtitle {
  margin: 8px 0 0 0;
  color: var(--muted);
  font-size: 1rem;
}

.magnetic-pricing__billing {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 18px 0 26px;
}

.magnetic-pricing__label {
  font-size: 0.95rem;
  color: var(--muted);
}

.magnetic-pricing__badge {
  margin-left: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #08101f;
  background: linear-gradient(135deg, var(--accent2), #a7f3d0);
  padding: 6px 10px;
  border-radius: 999px;
}

.magnetic-pricing__switch {
  position: relative;
  width: 58px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.magnetic-pricing__checkbox {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.magnetic-pricing__slider {
  width: 58px;
  height: 30px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  position: relative;
  transition: background 200ms ease, border-color 200ms ease;
}

.magnetic-pricing__slider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 3px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), #a78bfa);
  box-shadow: 0 8px 18px rgba(124, 58, 237, 0.35);
  transition: transform 200ms ease;
}

.magnetic-pricing__checkbox:focus-visible + .magnetic-pricing__slider {
  outline: 3px solid rgba(34, 211, 238, 0.35);
  outline-offset: 3px;
}

.magnetic-pricing__checkbox:checked + .magnetic-pricing__slider::before {
  transform: translateY(-50%) translateX(28px);
}

.magnetic-pricing__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.magnetic-pricing__card {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
  border: 1px solid var(--panelBorder);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.28);
}

.magnetic-pricing__cardInner {
  position: relative;
  background: rgba(9, 14, 26, 0.42);
  border-radius: 18px;
  margin: 10px;
  padding: 18px 18px 16px;
  transition: transform 140ms ease;
  will-change: transform;
}

.magnetic-pricing__card::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at 30% 20%, rgba(124, 58, 237, 0.35), transparent 45%),
    radial-gradient(circle at 70% 80%, rgba(34, 211, 238, 0.26), transparent 45%);
  opacity: 0;
  transition: opacity 160ms ease;
}

.magnetic-pricing__card.is-active::before {
  opacity: 1;
}

.magnetic-pricing__card.is-popular {
  border-color: rgba(34, 211, 238, 0.35);
}

.magnetic-pricing__pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(34, 211, 238, 0.15);
  border: 1px solid rgba(34, 211, 238, 0.35);
  padding: 6px 10px;
  border-radius: 999px;
  color: rgba(231, 238, 252, 0.92);
  margin-bottom: 10px;
}

.magnetic-pricing__top {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}

.magnetic-pricing__plan {
  margin: 0;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}

.magnetic-pricing__desc {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.magnetic-pricing__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 14px;
}

.magnetic-pricing__currency {
  color: rgba(231, 238, 252, 0.85);
  font-weight: 700;
}

.magnetic-pricing__amount {
  font-size: 2.1rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, rgba(231, 238, 252, 0.98), rgba(34, 211, 238, 0.9));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.magnetic-pricing__period {
  color: var(--muted);
  font-weight: 600;
}

.magnetic-pricing__features {
  margin: 0;
  padding: 0 0 0 18px;
  display: grid;
  gap: 8px;
  color: rgba(231, 238, 252, 0.88);
  font-size: 0.95rem;
  min-height: 96px;
}

.magnetic-pricing__features .is-muted {
  color: rgba(231, 238, 252, 0.45);
}

.magnetic-pricing__cta {
  margin-top: 14px;
  width: 100%;
  border-radius: 14px;
  padding: 11px 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: rgba(231, 238, 252, 0.95);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}

.magnetic-pricing__cta:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(34, 211, 238, 0.35);
  transform: translateY(-1px);
}

@media (max-width: 860px) {
  .magnetic-pricing__grid {
    grid-template-columns: 1fr;
  }
}

              

                document.addEventListener('DOMContentLoaded', () => {
  const prefersReducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  const containers = document.querySelectorAll('[data-magnetic-pricing]');

  containers.forEach((container) => {
    const toggle = container.querySelector('.magnetic-pricing__checkbox');
    const amounts = container.querySelectorAll('.magnetic-pricing__amount');

    const syncBilling = () => {
      const yearly = Boolean(toggle && toggle.checked);
      amounts.forEach((el) => {
        const monthly = el.getAttribute('data-monthly');
        const yearlyValue = el.getAttribute('data-yearly');
        el.textContent = yearly ? (yearlyValue || el.textContent) : (monthly || el.textContent);
      });
      container.querySelectorAll('.magnetic-pricing__period').forEach((el) => {
        el.textContent = yearly ? '/año' : '/mes';
      });
    };

    if (toggle) toggle.addEventListener('change', syncBilling);
    syncBilling();

    if (prefersReducedMotion) return;

    const cards = container.querySelectorAll('.magnetic-pricing__card');
    cards.forEach((card) => {
      const inner = card.querySelector('.magnetic-pricing__cardInner');
      if (!inner) return;

      let raf = 0;
      let targetX = 0;
      let targetY = 0;

      const apply = () => {
        raf = 0;
        inner.style.transform = `translate(\${targetX}px, \${targetY}px)`;
      };

      const onMove = (event) => {
        const rect = card.getBoundingClientRect();
        const x = event.clientX - rect.left;
        const y = event.clientY - rect.top;
        const dx = x - rect.width / 2;
        const dy = y - rect.height / 2;
        const max = 18;
        const strength = 0.12;
        targetX = Math.max(-max, Math.min(max, dx * strength));
        targetY = Math.max(-max, Math.min(max, dy * strength));
        card.classList.add('is-active');
        if (!raf) raf = requestAnimationFrame(apply);
      };

      const onLeave = () => {
        card.classList.remove('is-active');
        targetX = 0;
        targetY = 0;
        if (!raf) raf = requestAnimationFrame(apply);
      };

      card.addEventListener('pointermove', onMove);
      card.addEventListener('pointerleave', onLeave);
    });
  });
});

              

Convertidor de Markdown a HTML

Generador de Políticas de Privacidad

Precios de Atracción Magnética

Vista Previa en Vivo

Escenarios de uso

Parámetros ajustables

Errores comunes

Compatibilidad

Fragmentos de Código Relacionados

Insignia de Notificación Animada

Notificación Toast Animada

Tarjeta de Producto Animada

Explora packs de plantillas