# Cordel Uma frase repetida corre sem parar sobre um nó tridimensional que gira devagar e inclina com o mouse. > Cordel é um componente exclusivo do THM Componentes de tipografia cinética em 3D: a frase vira uma faixa repetida que corre sem parar sobre um nó, um toro ou uma esfera, enquanto a forma gira devagar e inclina na direção do cursor. Com Three.js, serve para heros de marca, manifestos e aberturas de evento. - Categoria: Texto e tipografia - 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/cordel/ ## 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 ```text 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. ## Componentes relacionados - [Roseta](https://vibecode.thmtecnologia.com/componentes/roseta/): Uma frase curta dá a volta num círculo e gira sem parar, como um selo carimbado ao lado do botão. - [Montanha-russa](https://vibecode.thmtecnologia.com/componentes/montanha-russa/): Fotos, logos ou palavras que deslizam sem parar ao longo de um caminho curvo e podem ser arrastadas. - [Onomatopeia](https://vibecode.thmtecnologia.com/componentes/onomatopeia/): Letras brancas com contorno preto grosso e sombra amarela deslocada, balançando de leve como letreiro de desenho. - [Vitral](https://vibecode.thmtecnologia.com/componentes/vitral/): Um título que se parte em centenas de cacos ao clicar ou passar o mouse e se monta de novo sozinho. - [Batuta](https://vibecode.thmtecnologia.com/componentes/batuta/): Milhares de pontinhos que voam e se reorganizam em esfera, anel, cubo e no texto que você escolher. --- 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.