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
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ó.
