Precios de Atracción Magnética
Tarjetas de precios interactivas con selector mensual/anual y un efecto magnético sutil que sigue el puntero.
Diseño Responsivo
Sí
Soporte para Modo Oscuro
No
líneas
415
Compatibilidad del Navegador
No
Vista Previa en Vivo
Interactúa con el componente sin salir de la página.
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
--accenty--accent2controlan los colores del brillodata-monthlyydata-yearlycontrolan los precios mostradosmaxystrengthen JavaScript controlan la intensidad del efecto
Errores comunes
- Cargar el script antes de que exista el markup
- Olvidar
data-monthlyydata-yearlyen cada precio - Sobrescribir
transformde.magnetic-pricing__cardInnerdesde tu CSS global
Compatibilidad
- Funciona en navegadores modernos (requiere Pointer Events)
- Respeta
prefers-reduced-motiondesactivando el movimiento en hover
HTML
91
líneas
CSS
259
líneas
JavaScript
65
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>