Todos os componentes

Sliding Number Counter

Sliding Number Counter é um componente para React e Tailwind CSS, da biblioteca Motion Primitives, com licença MIT. Copia e cola no teu projeto.

Motion Primitives MIT other

O que é

Sliding Number Counter é um componente para React e Tailwind CSS, da biblioteca Motion Primitives, com licença MIT. Copia e cola no teu projeto.

Como usar

Abre o componente no catálogo, carrega em copiar, e cola no teu projeto. O prompt copiado leva o código e as regras para o teu agente o reproduzir sem alterar nada.

Abrir no catálogo

Cinco cópias grátis por mês. Sem cartão.

Precisa de

npm i motion

Licença

Este componente vem de Motion Primitives e é redistribuído sob a licença MIT, que permite uso comercial. O aviso de copyright viaja com o código.

Sliding Number Counter

app/docs/sliding-number/sliding-basic.tsx

'use client';

import { motion } from 'motion/react';
import { useEffect, useState } from 'react';
import { SlidingNumber } from '@/components/core/sliding-number';

export function SlidingNumberBasic() {
  const [value, setValue] = useState(0);

  useEffect(() => {
    if (value === 100) return;

    const interval = setInterval(() => {
      setValue((prev) => prev + 1);
    }, 10);
    return () => clearInterval(interval);
  }, [value]);

  return (
    <motion.div
      initial={{ y: 0, fontSize: `${24}px` }}
      animate={{ y: 0, fontSize: `${24}px` }}
      transition={{
        ease: [1, 0, 0.35, 0.95],
        duration: 1.5,
        delay: 0.3,
      }}
      className='leading-none text-black dark:text-white'
    >
      <div className='inline-flex items-center gap-1 font-mono'>
        <SlidingNumber value={value} />%
      </div>
    </motion.div>
  );
}

Componentes parecidos