Este guia documenta as 14 ações visíveis do sorteio aleatório Spin and Wheel — uma ferramenta no navegador que atribui a cada entrada um arco igual em uma roleta HTML5 Canvas, gerando uma probabilidade de seleção de 1/N. A página inclui um início rápido em três etapas e uma referência detalhada de cada botão, alternador e atalho de teclado da roleta principal.
Abrir a roletaDigite ou cole sua lista na caixa Entradas — uma por linha. Nomes, opções, tarefas, prêmios — qualquer coisa que você queira sortear. Não há limite superior além da capacidade de localStorage do navegador (tipicamente 5 MB por origem).
Clique no botão Girar abaixo da roleta ou diretamente sobre o canvas da roleta. A rotação dura 3,5 segundos com curva de desaceleração easeOutQuart e para em uma entrada aleatória com probabilidade de 1/N — toda entrada tem chance idêntica, independentemente da posição na roleta.
O vencedor aparece em um modal. Você pode girar de novo, remover o vencedor da lista ou fechar o modal — os vencedores são registrados automaticamente na aba Vencedores.
A caixa Entradas contém a lista entre a qual a roleta escolhe — um item por linha, com contador em tempo real do número de linhas não vazias. Cada entrada ocupa um arco de 360°/N da roleta, então a probabilidade de seleção é exatamente 1/N, independentemente do tamanho do texto ou da posição. Não há limite superior além da capacidade de localStorage do navegador (tipicamente 5 MB por origem).
Dica: cole uma coluna de planilha para adicionar muitas entradas de uma vez.
Reordena aleatoriamente todas as entradas. Útil para mudar a vizinhança dos itens entre giros ou quebrar a ordem de uma lista classificada.
Embaralhar não muda a probabilidade — cada entrada continua com 1/N.
Ordena as entradas em ordem alfabética (A–Z). Útil para organizar uma lista colada longa ou agrupar itens semelhantes antes de compartilhar a roleta.
Como Embaralhar, a ordenação muda apenas a exibição, não a equidade.
Remove todas as entradas em um clique. A roleta fica vazia e você pode começar uma nova lista.
Listas limpas não podem ser recuperadas — compartilhe a URL antes para guardar uma cópia.
Inicia a animação de rotação, fixada em 3.500 ms com curva de desaceleração easeOutQuart para garantir sensação consistente e equidade no resultado. Dois gatilhos: o botão Girar abaixo da roleta e o clique direto sobre o canvas. A caixa Entradas é desativada durante a rotação para impedir que a lista mude no meio do giro, o que invalidaria o cálculo de probabilidade.
A duração da animação é fixa propositalmente para que nenhuma entrada seja favorecida.
Cada vencedor é adicionado automaticamente à aba Vencedores. Troque de aba para ver o histórico completo, com um contador mostrando quantos vencedores foram sorteados.
Use o botão Limpar na aba Vencedores para zerar o histórico sem mexer nas entradas.
No modal do vencedor, o botão Remover tira a entrada vencedora — ideal para sorteios em que cada nome só pode ganhar uma vez. O botão Usar como entradas (aba Vencedores) devolve todos os vencedores para a lista de giro.
Combine os dois para rodadas de eliminação: girar, remover, repetir.
Após exibir um vencedor, o modal pode acionar o próximo giro automaticamente. Marque a caixa e defina a contagem regressiva em segundos. O contador reinicia a cada novo vencedor.
Contagem padrão: 30 segundos — ajuste conforme o ritmo do seu evento.
Quando ativada, o nome do vencedor é lido em voz alta pela Web Speech API do navegador (interface SpeechSynthesis, especificação do W3C Community Group). A voz e o idioma são selecionados automaticamente para corresponder ao idioma ativo da interface, entre os sete locais suportados. O estado do alternador no modal do vencedor é persistido em localStorage como voiceOver_
Qualidade e idioma da voz dependem das vozes instaladas no seu sistema operacional.
Um som de tique-taque toca durante a rotação, como uma roleta de verdade. Ative ou desative pelo ícone de alto-falante no cabeçalho — a preferência é mantida entre sessões.
Silencie em sala de aula ou escritório quando o som ambiente importar.
Clicar no ícone de tela cheia no cabeçalho aciona a Fullscreen API do navegador (Element.requestFullscreen()), expandindo o canvas da roleta para todo o viewport. Compatível com todos os navegadores evergreen (Chrome, Edge, Firefox, Safari 16.4+) — ideal para apresentações, projetores e compartilhamento de tela em videochamadas.
Pressione Esc para sair da tela cheia a qualquer momento.
As entradas são persistidas automaticamente no localStorage do navegador (Web Storage API, recomendação do W3C), com chave por idioma: mainInput_en, mainInput_fr, etc. O armazenamento sobrevive ao fechamento da aba, ao reinício do navegador e da máquina, até que o usuário limpe os dados do site. A capacidade por origem é tipicamente de 5 MB, suficiente para dezenas de milhares de entradas.
Salvamento por idioma: mudar para inglês cria uma lista em inglês independente.
A URL é atualizada a cada tecla pressionada via History API (history.replaceState), codificando a lista de entradas como parâmetro de consulta. Compartilhar o endereço transfere o estado da roleta sem nenhuma ida ao servidor — o destinatário abre o link e vê a mesma configuração no próprio dispositivo. O tamanho da lista é limitado apenas pelos comprimentos típicos de URL dos navegadores (~2.000 caracteres em clientes antigos, ~32.000 em Chromium moderno).
Sem contas, sem servidores — a lista vive dentro da própria URL.
Clique no botão Compartilhar QR code no topo do formulário de entradas para abrir uma janela com um QR code escaneável. O código contém a URL atual, incluindo as entradas adicionadas, então quem escanear com a câmera do celular abre exatamente a mesma roleta com a mesma lista. A janela também mostra o link completo e um botão Copiar link, caso prefira colar o endereço em uma conversa, e-mail ou apresentação.
Ótimo para sala de aula e eventos — alunos ou convidados escaneiam o código na tela e abrem a roleta no próprio dispositivo com um toque.
A roleta está disponível em 7 idiomas: inglês, francês, espanhol, japonês, português, alemão e polonês. Escolha o idioma no rodapé — toda a interface, incluindo a narração, muda na hora.
Cada idioma mantém sua própria lista salva, sem sobrescrever as outras.
Você pode exibir a roleta ao vivo na sua transmissão no OBS Studio em duas partes: uma roleta que fica por cima da sua cena e um pequeno painel de controle encaixado dentro do OBS, onde você edita os nomes e gira. Não há programas extras para instalar nem conta — as duas partes funcionam dentro do OBS no mesmo computador.
Adicione a roleta à sua cena usando o Link de Exibição. Ela aparece sobre um fundo transparente, então só a roleta fica visível sobre a sua webcam ou o seu jogo, sem caixa em volta. Um tamanho quadrado como 800 × 800 funciona melhor.
Mova e redimensione onde quiser na cena; a área ao redor da roleta continua transparente sobre as suas outras fontes.
Adicione o Link do Dock como um painel dentro do OBS para editar nomes, girar e ver vencedores sem sair do OBS nem mudar para uma aba do navegador.
Se o painel sumir, reative-o pelo menu Docks no topo do OBS.
O painel de controle e a roleta na tela estão ligados dentro do OBS, então um giro aparece na transmissão instantaneamente. Nada é enviado a um servidor — as duas partes só precisam rodar no mesmo OBS em um computador.
Pressione Girar a Roleta no painel e a roleta na tela gira na hora; cada vencedor é adicionado à lista de Vencedores do painel.
Ative Controlar o áudio pelo OBS ao adicionar a roleta para que os espectadores ouçam o tique-taque. Pelo painel você também pode fazer cada vencedor ser anunciado em voz alta e iniciar o próximo giro automaticamente.
Você pode silenciar a roleta pelo mixer de áudio do OBS a qualquer momento.
