Lançar um plugin no diretório oficial do WordPress é sempre uma experiência empolgante. Há alguns dias, publiquei o Animated Raffle Winner (Ganhador de sorteio animado em Português do Brasil), um bloco interativo projetado especificamente para o editor do WordPress que oferece uma experiência visual, divertida e acessível para a realização de sorteios e seleções de números aleatórios.
Neste post, quero contar um pouco sobre o que motivou a criação deste plugin, suas principais funcionalidades e como você pode utilizá-lo no seu site WordPress.
O que é o Ganhador de sorteio animado?
A ideia central do plugin é simples: permitir que produtores de conteúdo, palestrantes, organizadores de eventos e donos de e-commerce realizem sorteios de números da sorte diretamente em suas páginas ou posts, sem depender de ferramentas externas de terceiros. O estopim para a criação do plugin surgiu no WordCamp Brasil no ano passado.
Em vez de apenas exibir um número estático na tela, o Animated Raffle Winner transforma o sorteio em um evento interativo, gerando expectativa nos participantes com uma animação de suspense e comemorando o resultado na tela com fogos de artifício, balões ou confetes.
Principais funcionalidades (Destaques da v1.0)
O plugin já nasceu pronto para produção e conta com os seguintes recursos:
- Intervalo personalizado: Você pode definir livremente os números inicial e final do sorteio (inclusive aceitando números negativos).
- Animação de suspense: Ao clicar em “Sortear”, os números rolam na tela por 5 segundos antes de revelar o resultado final.
- Celebração festiva: Fogos de artifício dinâmicos cobrem a tela para celebrar o número sorteado.
- Interface responsiva: Funciona perfeitamente em celulares, tablets e computadores.
- Customização completa no Editor:
- Escolha de uma imagem de fundo personalizada direto da sua biblioteca de mídia do WordPress.
- Controle deslizante de opacidade (0-100) para a sobreposição da imagem.
- Tamanhos de texto predefinidos (Muito pequeno, Pequeno, Médio, Grande e Muito grande) para se ajustar ao layout do seu site.
- Fluxo de re-sorteio: O botão se adapta dinamicamente para “Sortear novamente” após cada rodada, permitindo múltiplos sorteios seguidos com facilidade.
Foco em acessibilidade e experiência do usuário (UX)
Um dos pontos que dei bastante atenção no desenvolvimento da versão 1.0 foi a usabilidade e a acessibilidade (a11y). Realizar sorteios visuais e animados pode ser excludente se não for planejado com cuidado. Por isso, o bloco inclui:
- Anúncios ao vivo para leitores de tela: Implementação de regiões
aria-livepara garantir que o resultado final do sorteio seja imediatamente anunciado de forma auditiva para usuários de tecnologias assistivas. - Suporte para redução de movimento: O bloco detecta e respeita as configurações do sistema operacional do usuário (
prefers-reduced-motion), suavizando ou removendo animações intensas de rolagem de números e fogos de artifício caso o usuário tenha sensibilidade ao movimento. - Controle de teclado: É possível interromper a animação de celebração e fechar modos de visualização cheia pressionando a tecla
Escape. Além disso, a celebração possui uma parada automática após alguns segundos para evitar distrações prolongadas.
Como instalar e usar em seu site
Começar a usar o plugin é extremamente simples:
- No painel do seu WordPress, vá em Plugins > Adicionar Novo.
- Pesquise por “Animated Raffle Winner” ou “Ganhador de sorteio animado”.
- Clique em Instalar e depois em Ativar.
- Abra qualquer post ou página no editor do WordPress (também conhecido como Gutenberg).
- Insira o bloco Ganhador de sorteio animado.
- Defina o número inicial e final no painel lateral de configurações.
- Publique e clique em Sortear para ver a mágica acontecer!
Código aberto e contribuições
O Animated Raffle Winner é um projeto de código aberto licenciado sob GPLv2. Se você desenvolvr e quer ver como o bloco foi construído usando React e as APIs modernas de blocos do WordPress, ou se quer contribuir com novas ideias e correções, o repositório público está disponível no GitHub:
Se você gostou da ferramenta ou tem alguma sugestão de melhoria, faça o download na página oficial e deixe sua avaliação. O seu feedback é super importante para guiar as próximas atualizações!
