Frase com Roleta Ultra

Sobre este efeito

Um formulário que se lê como uma frase, com a escolha feita numa roleta. O select no meio da frase vira um tambor de palavras que gira sem fim: arraste pra cima ou pra baixo, ou arremesse e ele continua girando e freia. A palavra que para na janela do meio é a escolhida, assenta com uma mola leve, e dentro da janela aparece na cor de destaque, recortada no formato dela; fora, as vizinhas vão sumindo e se curvando como num cilindro. Clicar numa vizinha traz ela pra janela, e dá pra usar as setas do teclado e, com a roleta em foco, a roda do mouse. As etapas do formulário trocam no mesmo lugar, com a que sai subindo e desfocando e a próxima entrando de baixo, e o que foi escolhido aparece no resumo da etapa seguinte. Por baixo continua o select de verdade, que vai no envio, e o leitor de tela anuncia a escolha. Sem JavaScript, fica o select normal. Com a preferência de menos movimento, o tambor vira uma coluna reta e a palavra encaixa direto. Curva do tambor, palavras vizinhas, encaixe, balanço, inércia, cores e tempo da troca de etapa ajustáveis. JavaScript e CSS puros, sem biblioteca.

Ficha

Categoria

Interação

Onde combina

chamada pra ação, recursos

Alcance

Área: vive dentro de um bloco da página.

Plano

Exclusivo de quem assina o Ultra (R$ 39,90/mês).

Na loja desde

03/11/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-frase-com-roleta.

Assuntos

• formulário
• form
• contato
• roleta
• seletor
• select
• arrastar
• tambor
• frase
• etapas
• orçamento
• pedido