Gráfico que Acorda Plus

Sobre este efeito

Um cartão com um gráfico de barras sonolento: metade das barras acesa, subindo de uma linha, e metade apagada, pendurada abaixo dela. Com o mouse em cima o gráfico acorda: as barras se reorganizam de pé numa subida, todas acesas, o gráfico chega mais perto, um calor sobe de baixo, os selos do canto somem e uma legenda de vidro sobe até o topo; saiu, volta a cochilar. Os números são seus: uma lista para o repouso (positivo sobe aceso, negativo desce apagado) e outra para o acordado. Cada barra anda por transformação e a cor acende por opacidade, sem recalcular layout; o gráfico acordado ocupa a largura do cartão sem cortar nenhuma barra; o tom diz alguma coisa (a barra que subiu em relação à anterior fica no tom principal e a que caiu, no segundo). No celular o toque acorda e adormece, tocar num link de dentro segue o link, e o Tab acorda o cartão do link focado. O gráfico tem papel de imagem e um rótulo pro leitor de tela, e com menos movimento troca na hora. Cores, altura, zoom, tempo e grade ajustáveis.

Ficha

Categoria

Cards

Onde combina

números, recursos

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

5,7 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

18/09/2026

Como colocar no seu site

1. 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.
2. Usando um construtor (Elementor, Shopify, Webflow e outros): a loja mostra o passo a passo de cada um.
3. Programando: importe o efeito.css e o efeito.js e marque o elemento com a classe fx-grafico-que-acorda.

Assuntos

• cartao
• grafico
• barras
• dados
• hover
• toque
• teclado
• dashboard