Como ele é
Lembra uma tela de terminal antigo exibindo um objeto 3D. Por padrão, um nó toroidal, uma espécie de rosquinha trançada, gira devagar no centro, iluminado por uma luz principal e por um contorno azulado. Em vez de cores e pixels, a área é dividida numa grade de células de 10 pixels, e cada uma mostra um caractere de uma escala que vai do espaço vazio até o arroba, conforme a luz naquele ponto. Os símbolos são azul-marinho sobre fundo quase branco, ou ganham a cor da cena no modo colorido. O objeto inclina com suavidade na direção do mouse.
Você pode estar procurando isto se pediu algo assim
- objeto 3D feito de letrinhas girando no topo do site
- efeito de terminal hacker com uma forma 3D no meio
- visual de código ASCII para site de cibersegurança
- animação 3D com cara de computador antigo
- forma girando desenhada com símbolos de texto que segue o mouse
- hero de empresa de tecnologia com estética de linha de comando
- aquele efeito de arte ASCII em 3D que aparece em portfólios de dev
Também chamado de
- ASCII art 3D
- renderização ASCII
- ASCII shader
- efeito terminal
- text mode 3D
- arte em caracteres
- objeto 3D em caracteres
Quando usar
- Hero de empresa de tecnologia, segurança ou infraestrutura
- Portfólio de desenvolvedor com estética de terminal
- Página de lançamento de ferramenta de linha de comando ou de API
- Abertura de evento ou de hackathon de programação
Quando evitar
- Páginas que já têm outro efeito WebGL, já que o prompt pede no máximo um pesado por página
- Marcas de tom acolhedor, como saúde e bem-estar, em que o visual de terminal destoa
Como pedir para a sua IA
Crie no hero uma cena 3D renderizada ao vivo em caracteres ASCII com Three.js: uma forma iluminada que gira sozinha e segue o cursor, com glifos nas cores da minha marca, pausa fora da tela, ângulo fixo para movimento reduzido e carregamento só no cliente com fallback estático no Nuxt.
Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Caligrama
Caligrama deixa o site pesado?
É um efeito Pesado no THM Componentes: Caligrama desenha a cena 3D com Three.js e depois a converte em caracteres num segundo passo na GPU, a cada quadro. O componente pausa quando sai da tela e limita a resolução a 2x, e o prompt orienta a IA a carregar sob demanda e a manter um único efeito WebGL pesado por página.
Como usar Caligrama no Nuxt com SSR?
Caligrama depende do pacote three e cria o contexto WebGL no navegador. O prompt do THM Componentes orienta a IA a envolver o componente em ClientOnly com um fallback estático, uma imagem ou uma cor, e a carregar sob demanda, para que o servidor entregue a página sem esperar a cena 3D.
Dá para trocar a forma e os caracteres de Caligrama?
Sim. Caligrama oferece três formas, nó toroidal, icosaedro e toro, e a rampa de caracteres é uma prop de texto, do mais escuro ao mais claro. Também dá para ajustar o tamanho da célula, as cores e a velocidade. Com movimento reduzido, a rotação automática para e a forma só se move com o cursor.
