# Apagador Campo em pílula com dicas que sobem e se alternam; ao enviar, o texto digitado se desfaz em pó. > Apagador é um componente do THM Componentes para campos de pergunta: as dicas do placeholder sobem e se alternam a cada três segundos e, ao apertar Enter ou o botão, o texto digitado se desfaz em pó da direita para a esquerda. Funciona bem em buscas de IA e em inscrição de newsletter. - Categoria: Formulários e entrada - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Médio: canvas ou animação contínua; bom para uma seção - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4, Canvas 2D - Interação: Mouse, Toque, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/apagador/ ## Como ele é Imagine uma barra de busca em forma de pílula, branca no modo claro e grafite no escuro, com um botão redondo e escuro na ponta direita. Dentro dela, uma frase de exemplo sobe e some a cada três segundos, dando lugar à próxima. Com o campo vazio, o botão fica apagado; ao digitar, a seta se completa. Quando a pessoa envia, as letras viram pontinhos que tremem, encolhem e somem, varrendo o texto do fim para o começo, como areia levada pelo vento. Depois, o campo fica limpo e pronto para a próxima pergunta. ## Você pode estar procurando isto se pediu algo assim - “campo de pergunta igual ao de chat de IA, com sugestões trocando” - “texto que vira pó quando aperto enviar” - “placeholder que muda sozinho com exemplos de perguntas” - “barra de busca bonita para a página inicial do meu app de IA” - “efeito de texto se desintegrando ao mandar a mensagem” - “campo de newsletter em que o e-mail some depois de enviar” - “input arredondado com frases de exemplo subindo” ## Também chamado de placeholder animado, campo que vira pó, texto que se desintegra, rotating placeholder, campo de busca de IA, efeito de dissolver texto ## Quando usar - Caixa de pergunta na página inicial de um produto com IA - Busca principal de uma central de ajuda, com exemplos do que perguntar - Inscrição em newsletter ou lista de espera com um único campo - Landing pages em que o campo é a chamada principal da seção ## Quando evitar - Formulários com vários campos ou validação complexa: o componente é um campo único com envio - Páginas com outro campo que deve receber o foco, porque este recebe o foco sozinho ao carregar ## Como pedir para a sua IA ```text Crie um campo de pergunta com placeholders que se alternam e efeito de texto que se desfaz em partículas ao enviar, na página inicial do meu app de IA. Use as cores da minha marca, carregue só no cliente em Nuxt e ofereça uma versão sem animação para quem prefere menos movimento. ``` Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar. ## Perguntas sobre Apagador ### Como recebo o texto enviado por Apagador? Apagador emite o evento submit com o texto digitado quando a pessoa aperta Enter ou clica no botão, e também funciona com v-model. Basta ouvir esse evento para mandar a pergunta à sua IA ou cadastrar o e-mail; o campo se limpa sozinho depois da animação. ### Apagador funciona em Nuxt com SSR? Funciona, com um cuidado: o efeito de pó de Apagador usa Canvas e só roda no navegador. O prompt do THM Componentes orienta a IA a carregar o componente sob demanda e, em Nuxt, a colocar o campo dentro de ClientOnly com um fallback estático. ### Apagador respeita quem prefere menos movimento? O componente original sempre anima as dicas e o texto. O prompt do THM Componentes pede à IA uma versão estática para quem ativa a preferência de reduzir movimento; em Apagador, isso significa trocar as dicas sem deslizar e limpar o campo sem o efeito de pó. ## Componentes relacionados - [Mote](https://vibecode.thmtecnologia.com/componentes/mote/): Caixa de mensagem de app de IA que cresce com o texto, aceita arquivos, grava áudio e abre comandos ao digitar barra. - [Coruja](https://vibecode.thmtecnologia.com/componentes/coruja/): Campo de busca escuro cercado por anéis de luz azul e magenta que giram ao passar o mouse e ao clicar. - [Tocha](https://vibecode.thmtecnologia.com/componentes/tocha/): Campo de texto cuja borda acende em azul no ponto por onde o cursor passa, como uma lanterna na moldura. - [Sinônimo](https://vibecode.thmtecnologia.com/componentes/sinonimo/): Uma palavra no meio do título troca sozinha a cada poucos segundos, com a nova entrando letra por letra. - [Prosa](https://vibecode.thmtecnologia.com/componentes/prosa/): A resposta do assistente aparece aos poucos, palavra por palavra, saindo de um leve desfoque, como num chat de IA. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.