Como ele é
Parece a tela de um terminal antigo desenhando a sua página com letras. O bloco é dividido numa grade de células de 8 pixels, e cada célula recebe um caractere de 5 por 5 pontos: áreas claras viram caracteres cheios, áreas escuras viram pontos quase apagados, e cada caractere leva a cor original daquele trecho. O resultado é um mosaico de texto sobre fundo escuro, que acompanha as mudanças do conteúdo. Ao pressionar a superfície com o mouse ou o dedo, os caracteres ficam monocromáticos. O tamanho da célula é ajustável a partir de 5 pixels.
Você pode estar procurando isto se pediu algo assim
- transformar a página em letrinhas tipo arte ASCII
- efeito de terminal hacker em cima do site
- texto e imagens viram caracteres como em filme de hacker
- visual retrô de computador antigo aplicado ao HTML
- página de demo desenhada só com símbolos de teclado
- landing de evento de tecnologia com cara de tela de código
Também chamado de
- ASCII art
- efeito ASCII
- ASCII shader
- HTML em canvas
- terminal effect
- arte em caracteres
- glyph rendering
Quando usar
- Protótipos e demos de conceito com estética hacker ou retrô
- Páginas de evento de tecnologia, hackathon ou game jam
- Experimentos de portfólio para mostrar domínio de shaders
Quando evitar
- Produção de cliente: depende de API experimental do navegador, como o próprio prompt alerta
- Áreas de leitura, porque o texto vira textura e perde legibilidade
- Aparelhos sem WebGL2, em que o efeito simplesmente não aparece
Como pedir para a sua IA
Crie um protótipo com efeito de arte ASCII em WebGL2 sobre um bloco de HTML ao vivo, mantendo links clicáveis e acessíveis, pausa fora da tela, versão estática para movimento reduzido e o HTML normal como alternativa sem suporte.
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 Ponto-cruz
Posso usar Ponto-cruz em produção?
Não é recomendado. Ponto-cruz usa uma API do navegador ainda experimental para desenhar HTML dentro de um canvas e, quando ela não existe, recorre a uma captura do conteúdo. O prompt do THM Componentes é direto: use só em protótipo, nunca em produção de cliente.
Os links dentro de Ponto-cruz continuam clicáveis?
Continuam. Ponto-cruz mantém o conteúdo original na página para interação e para leitores de tela, e o canvas com os caracteres fica por cima sem capturar cliques. Só o ato de pressionar a superfície tem efeito visual próprio: os caracteres passam a monocromáticos enquanto o botão ou o dedo está pressionado.
Ponto-cruz precisa de outro componente?
Precisa. Ponto-cruz é um efeito montado sobre o componente base Crisol, que faz a captura do HTML, o WebGL2 e a alternativa automática. O arquivo do efeito importa esse renderizador compartilhado, então os dois precisam estar no projeto. O mesmo vale para os outros efeitos de HTML do catálogo.
