# Caligrama Uma forma 3D girando na tela, desenhada ao vivo com letras e símbolos de terminal em vez de pixels. > Caligrama é um componente exclusivo do THM Componentes que desenha uma cena 3D iluminada ao vivo com caracteres ASCII: cada célula da tela escolhe um símbolo conforme a luz da cena. A forma gira sozinha e acompanha o cursor. Em Three.js com shader próprio, combina com heros de tecnologia, cibersegurança e portfólios com estética de terminal. - Categoria: 3D e espaço - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Pesado: WebGL ou simulação; um por página, carregado sob demanda - Tecnologia: Vue 3, TypeScript, WebGL, Three.js - Interação: Mouse - URL: https://vibecode.thmtecnologia.com/componentes/caligrama/ ## 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 ```text 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. ## Componentes relacionados - [Ponto-cruz](https://vibecode.thmtecnologia.com/componentes/ponto-cruz/): O conteúdo real da página é redesenhado ao vivo como arte ASCII, com caracteres que imitam luz e sombra. - [Fliperama](https://vibecode.thmtecnologia.com/componentes/fliperama/): Transforma uma foto em padrão de pontinhos de poucas cores, com cara de jogo antigo ou de impressão retrô. - [Cifra](https://vibecode.thmtecnologia.com/componentes/cifra/): Título que surge embaralhado em letras, números e símbolos e vai se acertando até formar a frase. - [Caldeira](https://vibecode.thmtecnologia.com/componentes/caldeira/): Janela de terminal escura em que a pessoa digita comandos, vê respostas coloridas e acompanha um deploy de demonstração. - [Quimera](https://vibecode.thmtecnologia.com/componentes/quimera/): Uma forma líquida em 3D que ondula, se funde com um anel e duas cápsulas e gira conforme o mouse. --- 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.