Todos os componentes

Counter Animation

Counter Animation é um componente de texto para React e Tailwind CSS, da biblioteca Bund UI, com licença MIT. Copia e cola no teu projeto.

Bund UI MIT text

O que é

Counter Animation é um componente de texto para React e Tailwind CSS, da biblioteca Bund UI, 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 Bund UI e é redistribuído sob a licença MIT, que permite uso comercial. O aviso de copyright viaja com o código.

Counter Animation

examples/motion/components/counter-animation/01/counter-animation.tsx

"use client";

import React from "react";
import { cn } from "@/lib/utils";
import { useMotionValue, useTransform, animate, useMotionValueEvent } from "motion/react";

type Props = {
  number: number;
  className?: string;
  prefix?: string;
  suffix?: string;
};

export default function CounterAnimation({ number, className, prefix, suffix }: Props) {
  const count = useMotionValue(0);
  const rounded = useTransform(count, Math.round);
  const [current, setCurrent] = React.useState(0);

  React.useEffect(() => {
    const animation = animate(count, number, { duration: 2 });
    return animation.stop;
  }, [count, number]);

  useMotionValueEvent(rounded, "change", (latest) => {
    setCurrent(latest);
  });

  return (
    <span className={cn(className)}>
      {prefix}
      {current}
      {suffix}
    </span>
  );
}

examples/motion/components/counter-animation/01/page.tsx

import CounterAnimation from "./counter-animation";

export default function CounterExample() {
  return <CounterAnimation number={60} className="text-2xl font-semibold lg:text-5xl" />;
}

Componentes parecidos