Como ele é
Lembra um letreiro de notícias enrolado num nó de corda. No centro da área aparece um tubo tridimensional dado em nó, coberto por faixas da frase em letras grossas azul-marinho sobre uma superfície quase branca. O texto desliza continuamente ao longo do tubo, a forma gira devagar e balança um pouco, e o lado de trás aparece mais apagado, o que reforça a profundidade. Quando o mouse se move, o objeto inclina suavemente na direção dele. Também dá para trocar o nó por um toro, com formato de rosquinha, ou por uma esfera. O conteúdo colocado dentro fica por cima da cena.
Você pode estar procurando isto se pediu algo assim
- texto girando em 3D em volta de uma forma, para o topo do site
- frase que corre em volta de um objeto tridimensional tipo letreiro
- tipografia em movimento para o manifesto da marca
- aquele efeito de texto enrolado num nó que gira com o mouse
- abertura de evento com o nome escrito numa rosquinha 3D girando
- hero só com tipografia que pareça feito por estúdio de design
- texto infinito passando por cima de uma esfera
Também chamado de
- tipografia cinética
- kinetic typography
- texto em 3D
- torus knot text
- nó toroidal
- texto girando em 3D
- letreiro 3D
Quando usar
- Hero tipográfico de marca com uma frase curta e forte
- Manifesto ou página de propósito em que a frase é a protagonista
- Abertura de evento, festival ou lançamento com o nome em destaque
- Portfólio de estúdio ou agência que quer mostrar domínio de 3D
Quando evitar
- Páginas que já têm outro efeito em WebGL ou 3D pesado
- Frases longas, que passam do limite da textura e ficam difíceis de ler na curva
- Título principal que precisa ser lido por leitores de tela, sem uma versão em HTML
Como pedir para a sua IA
Crie um hero com tipografia cinética em 3D usando Three.js: minha frase repetida correndo sobre um nó toroidal que gira devagar e inclina com o cursor, nas cores da marca, com pausa fora da tela, versão parada para movimento reduzido e o título real em HTML para leitores de tela.
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 Cordel
Cordel deixa o site pesado?
Cordel é um componente Pesado no THM Componentes: usa WebGL com Three.js e desenha a frase sobre uma forma 3D detalhada. O componente para de desenhar quando sai da tela e limita a densidade de pixels. No Nuxt, o prompt orienta a IA a usar ClientOnly com uma reserva estática, carregar sob demanda e manter um só efeito pesado por página.
Cordel respeita quem prefere menos movimento?
Sim. Com a redução de movimento ativa no sistema, a frase de Cordel para de correr e a forma deixa de girar sozinha, ficando parada num ângulo fixo. Ela ainda inclina devagar na direção do cursor, então a cena responde à pessoa sem animação contínua.
Leitores de tela conseguem ler a frase de Cordel?
Não diretamente. Em Cordel, a frase vira uma textura pintada dentro do WebGL e não existe como texto na página. Para leitores de tela e mecanismos de busca, mantenha o título real em HTML, por exemplo um h1 visualmente oculto ou o conteúdo colocado dentro do componente.
