Roda de Números Plus

Contador em roda: os valores rolam numa janela até parar no alvo, dentro da faixa com o ícone, e o ícone comemora a chegada com brilho e faíscas.

Ver na loja e baixar

Sobre este efeito

Uma coluna de valores (0, 100, 200…) rola numa janela de 5 linhas até parar no alvo, dentro de uma faixa destacada com um ícone; as linhas de fora da faixa ficam apagadas por máscara, então funciona em qualquer fundo. O giro é uma mola calculada pela fórmula exata e, ao chegar a 99%, o ícone comemora: anel que se abre, brilho que acende e 6 faíscas em sequência. Começo, alvo e passo por atributo, com formatação brasileira, moeda, prefixo e sufixo; troca o alvo direto no HTML ou por código, e avisa quando chega. Ícone é o seu (svg, imagem ou emoji). Sem biblioteca: Web Animations.

Ficha

Categoria: Contagem
Onde combina: números, prova social, chamada pra ação
Alcance: Área: vive dentro de um bloco da página.
Plano: Incluso no Plus (R$ 19,90/mês) e no Ultra (R$ 39,90/mês).
Peso: 6,1 KB de código comprimido. Sem biblioteca externa.
No celular: Leve: usa 8% do processador de um celular intermediário enquanto anima.
Na loja desde: 11/09/2026

Como colocar no seu site

Criando o site com IA (Claude Code, Codex e parecidas): baixe o kit, extraia na pasta do projeto e cole o pedido pronto que a loja entrega. Não precisa saber programar.
Usando um construtor (Elementor, Shopify, Webflow e outros): a loja mostra o passo a passo de cada um.
Programando: importe o efeito.css e o efeito.js e marque o elemento com a classe fx-roda-de-numeros.

Assuntos

numeros
contador
roda
wheel
meta
marco
estrelas
apoiadores
mola
faiscas
comemoracao