Anatomía

La sección externa usa CSS custom properties para el padding y el background-alt. Dentro, una cuadrícula CSS de dos columnas separa el contenido editorial de las métricas. La columna izquierda contiene un eyebrow etiquetado (icono TrendingUp + subtítulo), un h2 y un párrafo. La columna derecha es su propia cuadrícula 2×2 de tarjetas; cada tarjeta muestra el número animado en color de acento arriba y la etiqueta de la métrica debajo, dentro de una tarjeta con borde y esquinas redondeadas con relleno card-background.

Cómo funciona

El subcomponente AnimatedCounter asocia un ref a su span y llama a useInView de Framer Motion con once:true. Cuando isInView pasa a true, un setInterval se dispara cada 37,5ms (1500ms / 40 pasos) y suma value/40 al conteo en curso. Math.floor mantiene los estados intermedios como enteros, y clearInterval detiene la ejecución exactamente en el objetivo. La sección padre anima cada tarjeta de métrica mediante whileInView con un retardo escalonado (i * 0.08s) y una curva de easing expo-out [0.16, 1, 0.3, 1], para que las tarjetas lleguen con una ligera sensación elástica en lugar de un fundido plano.

Cómo crearlo en React

1. Crea el subcomponente AnimatedCounter

   Extrae la lógica de conteo en un pequeño subcomponente. Asocia un ref al span mostrado, luego usa useInView de Framer Motion para detectar cuándo entra en el viewport. Inicia el intervalo solo cuando isInView pasa a true, y límpialo al desmontar.

   const ref = useRef<HTMLSpanElement>(null);
   const isInView = useInView(ref, { once: true });
   
   useEffect(() => {
     if (!isInView) return;
     const steps = 40;
     const increment = value / steps;
     let current = 0;
     const timer = setInterval(() => {
       current += increment;
       if (current >= value) { setCount(value); clearInterval(timer); }
       else setCount(Math.floor(current));
     }, 1500 / steps);
     return () => clearInterval(timer);
   }, [isInView, value]);

2. Construye el split-layout de dos columnas

   Envuelve la sección en un div contenedor con una cuadrícula CSS de dos columnas iguales y un gap de 4rem. Coloca tu texto editorial a la izquierda y una cuadrícula 2×2 anidada para las tarjetas de métricas a la derecha. Usa CSS custom properties para los espaciados para que la sección se adapte a todos los presets de tema.

   <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "4rem", alignItems: "center" }}>
     {/* Left: text */}
     <motion.div initial={{ opacity: 0, y: 16 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }}>
       {/* title + description */}
     </motion.div>
   
     {/* Right: 2x2 metrics */}
     <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "1.5rem" }}>
       {metrics.map((m, i) => (
         <motion.div key={i} initial={{ opacity: 0, y: 16 }} whileInView={{ opacity: 1, y: 0 }}
           transition={{ delay: i * 0.08, ease: [0.16, 1, 0.3, 1] }} viewport={{ once: true }}>
           <AnimatedCounter value={m.value} suffix={m.suffix} />
           <p>{m.label}</p>
         </motion.div>
       ))}
     </div>
   </div>

3. Estiliza los números con tabular-nums para evitar el desplazamiento del layout

   Cuando los dígitos cambian de 0 al objetivo, los caracteres de ancho variable hacen temblar las tarjetas. Define fontVariantNumeric: 'tabular-nums' en el elemento del número para que cada dígito ocupe el mismo espacio horizontal durante toda la animación.

   <p style={{
     fontSize: "clamp(2rem, 4vw, 3rem)",
     fontWeight: 700,
     color: "var(--color-accent)",
     fontVariantNumeric: "tabular-nums",
   }}>
     <AnimatedCounter value={metric.value} suffix={metric.suffix} />
   </p>

4. Pasa las métricas como props para una personalización sencilla

   Define una interface Metric con value (number), suffix (string, p. ej. '+' o '%'), y label. Acepta un prop array metrics para que los consumidores puedan inyectar sus propias estadísticas sin tocar las interioridades del componente. Los props por defecto de la implementación usan cuatro valores ilustrativos como fallback.

   interface Metric { value: number; suffix: string; label: string; }
   
   // Usage
   <AboutNumbersAnimated
     sectionTitle="By the numbers"
     description="We've helped 500+ teams ship faster."
     metrics={[
       { value: 500, suffix: "+", label: "Customers" },
       { value: 98,  suffix: "%", label: "Satisfaction" },
       { value: 40,  suffix: "+", label: "Countries" },
       { value: 12,  suffix: "M", label: "Events/month" },
     ]}
   />

Cuándo usarlo

Recurre a esta sección cuando necesites traducir la escala de una empresa a un formato tangible en una página About o de marketing. Funciona bien en mitad de página después de una intro de equipo o una declaración de misión, dejando que las métricas refuercen la narrativa. Evítala cuando las cifras todavía no impresionan o cuando la página ya está cargada de datos; un bloque de estadísticas escaso y débil se lee peor que ningún bloque. En móvil la cuadrícula de dos columnas se apila, así que verifica que el layout apilado se siga leyendo bien antes de desplegar.

Usado por

• Stripe, Usa contadores de estadísticas animados en su página About para mostrar el volumen de pagos y el alcance entre desarrolladores.
• Linear, Muestra los hitos de la empresa como números activados al scroll en su página About.
• Notion, Destaca el número de usuarios y las estadísticas de workspace con animaciones count-up para reforzar la tracción.
• Vercel, Cifras animadas de despliegues y desarrolladores aparecen al scroll en sus secciones de marketing y about.

FAQ