Como ele é
Pense numa lanterna pequena passando pela moldura do campo. O campo tem 40 pixels de altura, cantos arredondados e fundo cinza bem claro com sombra suave; no modo escuro, o fundo fica grafite e o texto, branco. Quando o mouse entra, um círculo de luz azul com 100 pixels de raio aparece na borda fina ao redor do campo e acompanha o cursor sem atraso, como se a moldura acendesse só naquele ponto. Quando o mouse sai, o brilho apaga e o campo volta ao normal.
Você pode estar procurando isto se pediu algo assim
- campo de texto com uma luz que segue o mouse pela borda
- deixar o formulário de login com cara de app caro
- input que brilha em azul quando passo o cursor
- borda do campo que acende onde o mouse está
- caixa de texto moderna para o formulário de contato
- efeito de lanterna na borda do input, tipo site de startup
Também chamado de
- input com brilho
- campo com spotlight
- glow input
- radial hover input
- spotlight border
- campo de texto animado
Quando usar
- Formulários de contato, login e cadastro que precisam parecer cuidados
- Landing page de SaaS com um campo de e-mail em destaque
- Interfaces em modo escuro, em que o brilho azul ganha contraste
- Projetos com Tailwind que querem um campo pronto com v-model
Quando evitar
- Formulários longos, em que o brilho em dezenas de campos vira distração
- Apps usados quase só no celular, já que o brilho foi feito para o movimento do mouse
Como pedir para a sua IA
Crie um campo de texto com brilho radial na borda que acompanha o cursor, na cor de destaque da minha marca, para o formulário de login. Mantenha o v-model, um foco bem visível pelo teclado e uma versão sem o efeito 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 Tocha
Tocha funciona com v-model e com os atributos normais de um campo?
Sim. Tocha repassa ao campo nativo os atributos que você passar, como type, placeholder, name e required, e aceita v-model ou um valor inicial pela prop defaultValue. Assim o componente entra no lugar de um input comum em formulários de login, cadastro e contato sem mudar a lógica do formulário.
Dá para trocar o azul do brilho de Tocha?
Dá. O brilho de Tocha lê a cor da variável CSS --blue-500, e o prompt do THM Componentes orienta a IA a usar os tokens de cor e tipografia do projeto, sem cores fixas dentro do componente. Assim o círculo de luz e o fundo do campo passam a seguir a paleta da sua marca.
Tocha funciona no celular?
Funciona como qualquer campo: a pessoa toca e digita normalmente. O brilho de Tocha foi feito para o movimento do mouse, então no celular o efeito fica limitado. O prompt do THM Componentes pede teste em mobile e comparação de LCP e INP antes e depois de incluir o componente.
