Anatomía

La sección tiene tres zonas apiladas: un header centrado (eyebrow, h2, subtítulo) que aparece en fundido al hacer scroll; una fila de toggle de facturación con una pill SpringToggle y un badge de descuento bajo AnimatePresence; y un grid CSS de tarjetas de plan. Cada tarjeta contiene un nombre, una descripción, un bloque AnimatedPrice, un label de facturación, una lista de features con iconos Check y un botón CTA. El plan destacado se muestra con un esquema de colores invertido (fondo = foreground) y un ligero scale(1.02).

Cómo funciona

El componente SpringToggle crea un spring de Framer Motion (stiffness 500, damping 35) que mapea 0/1 a un offset x en píxeles para el thumb mediante useTransform. Llamar a spring.set(yearly ? 1 : 0) en cada render controla la posición del thumb sin necesidad de ningún useEffect. El bloque AnimatedPrice envuelve el precio en AnimatePresence con mode='popLayout': cada valor de precio único recibe su propio motion.span con key por precio, entrando desde y:24 y saliendo hacia y:-24 con un easing spring de 300ms. El badge de descuento usa un spring de escala que rebota por [0, 1.15, 1] al entrar. Las tarjetas se animan de forma escalonada con whileInView (retardo i * 0.08s).

Cómo crearlo en React

1. Construir el toggle spring

   Crea un componente SpringToggle que reciba un booleano y un callback. Instancia un spring de Framer Motion y mapea su rango 0/1 al offset en píxeles donde debe situarse el thumb. Llama a spring.set() directamente en el cuerpo del render para que el thumb siga siempre a la prop.

   const spring = useSpring(yearly ? 1 : 0, { stiffness: 500, damping: 35 });
   const x = useTransform(spring, [0, 1], [3, 27]);
   spring.set(yearly ? 1 : 0); // drives the thumb on every render

2. Animar el precio con AnimatePresence popLayout

   Envuelve el span del precio en AnimatePresence con mode='popLayout' para que los elementos que salen se retiren del flujo del layout antes de que se posicionen los que entran. Asigna a cada motion.span una key con el valor del precio para que React trate el mensual y el anual como elementos distintos y dispare las animaciones de entrada y salida.

   <AnimatePresence mode="popLayout">
     <motion.span
       key={price}
       initial={{ y: 24, opacity: 0 }}
       animate={{ y: 0, opacity: 1 }}
       exit={{ y: -24, opacity: 0 }}
       transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
       style={{ display: "block", fontSize: "3rem", fontWeight: 800 }}
     >
       {price}
     </motion.span>
   </AnimatePresence>

3. Hacer aparecer el badge de descuento con un rebote de escala

   Renderiza el label de descuento dentro de AnimatePresence para que se monte y se desmonte con el estado yearly. Usa un array de animate para scale, [0, 1.15, 1], para producir un overshoot natural sin una config spring aparte.

   <AnimatePresence>
     {yearly && (
       <motion.span
         key="badge"
         initial={{ scale: 0, opacity: 0 }}
         animate={{ scale: [0, 1.15, 1], opacity: 1 }}
         exit={{ scale: 0, opacity: 0 }}
         transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
       >
         Save 20%
       </motion.span>
     )}
   </AnimatePresence>

4. Construir las tarjetas de plan con entrada escalonada

   Recorre el array tiers y renderiza cada tarjeta como un motion.div con whileInView. Multiplica el índice por 0.08 para el retardo, así las tarjetas entran en cascada de izquierda a derecha. Añade la prop layout para que Framer Motion gestione cualquier desplazamiento de layout durante la animación del precio.

   <motion.div
     key={tier.name}
     layout
     initial={{ opacity: 0, y: 32 }}
     whileInView={{ opacity: 1, y: 0 }}
     viewport={{ once: true }}
     transition={{ duration: 0.55, ease: E, delay: i * 0.08 }}
   >

Cuándo usarlo

Este patrón es la opción adecuada para productos SaaS que ofrecen facturación mensual y anual y necesitan hacer tangible el ahorro sin recargar la página. El precio animado dirige la mirada hacia la diferencia de valor; el toggle spring transmite una sensación premium sin resultar molesto. Evítalo en páginas de producto de e-commerce o en servicios de un solo plan, donde un toggle de facturación no tendría sentido. En móvil, tanto el thumb spring como la animación del precio se comportan bien, pero prueba el colapso del grid en viewports estrechos para verificar la legibilidad.

Usado por

• Linear, Usa un toggle mensual/anual con actualización instantánea del precio y un label de ahorro visible en el plan anual.
• Vercel, Cambio de periodo de facturación que actualiza los precios de los planes en línea, con un etiquetado claro del descuento anual en todos los planes.
• Lemon Squeezy, Toggle animado entre mensual y anual, badge de descuento en el label anual, que coincide exactamente con este patrón.
• Supabase, Cambio mensual/anual que actualiza de forma visible los precios por plan y destaca el ahorro en el plan anual.

FAQ