# Onomatopeia Letras brancas com contorno preto grosso e sombra amarela deslocada, balançando de leve como letreiro de desenho. > Onomatopeia é um componente do THM Componentes que dá relevo a um título só com CSS: contorno grosso, duas sombras duras deslocadas na diagonal e um leve balanço que se repete. Lembra letreiro de desenho animado ou capa de gibi, pesa pouco e funciona bem em títulos curtos de campanhas, eventos e promoções. - Categoria: Texto e tipografia - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4 - Interação: Nenhuma: o efeito roda sozinho - URL: https://vibecode.thmtecnologia.com/componentes/onomatopeia/ ## Como ele é Imagine o título de um desenho animado recortado como adesivo. Por padrão, as letras são brancas, com um contorno preto grosso por trás, uma sombra preta deslocada para baixo e para a direita e, atrás dela, uma sombra amarela um pouco mais afastada. Juntas, elas criam a ilusão de profundidade sem nenhum 3D de verdade. As letras ficam um pouco mais juntas que o normal. O bloco inteiro balança alguns graus para os lados e para por um instante, em ciclos de um segundo e meio por padrão. Cores, espessuras e o balanço podem ser trocados ou desligados. ## Você pode estar procurando isto se pediu algo assim - “título com letra grossa e sombra colorida tipo desenho animado” - “texto com cara de adesivo ou de capa de gibi para promoção” - “letras com contorno preto e sombra amarela que ficam balançando” - “deixar o título da campanha com efeito 3D sem usar 3D de verdade” - “fonte com relevo chamativo para banner de evento ou de liquidação” - “palavra que fica tremendo de leve para chamar atenção” ## Também chamado de letreiro de gibi, texto 3D, texto em relevo, text shadow 3D, sticker text, texto estilo cartoon, wiggle text ## Quando usar - Títulos curtos de campanha, liquidação ou lançamento - Páginas de eventos, festas e produtos para o público jovem - Sites de games, streaming e marcas com visual divertido - Chamadas em banners e capas de seção sobre fundo escuro ou colorido ## Quando evitar - Textos longos e parágrafos, em que o contorno grosso atrapalha a leitura - Marcas sóbrias, como escritórios e bancos, em que o visual soa informal demais ## Como pedir para a sua IA ```text Crie um título em relevo só com CSS para o banner da campanha: letras com contorno grosso e duas sombras duras deslocadas nas cores da minha marca, um leve balanço que pare para quem prefere menos movimento e boa leitura no celular. ``` 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 Onomatopeia ### Onomatopeia usa WebGL ou alguma biblioteca 3D? Não. Onomatopeia cria o relevo só com CSS, usando contorno de texto e duas sombras deslocadas, e o balanço é uma animação CSS. O componente não importa nenhuma biblioteca de animação, por isso é classificado como Leve no THM Componentes. ### Dá para trocar as cores e tirar o balanço de Onomatopeia? Sim. Onomatopeia tem props para a cor do texto, do contorno e da sombra, para a espessura do contorno e das duas sombras e para ligar ou desligar o balanço, além da duração dele. O prompt do THM Componentes orienta a IA a usar os tokens de cor do seu projeto em vez do branco, preto e amarelo originais. ### Onomatopeia fica legível no celular? Fica, desde que o texto seja grande. O contorno e as sombras de Onomatopeia têm espessura fixa em pixels, então em fontes menores eles ocupam mais espaço dentro das letras. Em telas pequenas, vale pedir à IA para diminuir o contorno junto com a fonte, e o prompt já pede teste no celular. ## Componentes relacionados - [Buril](https://vibecode.thmtecnologia.com/componentes/buril/): Palavra com uma sombra feita de listras diagonais finas, que deslizam devagar atrás das letras. - [Pirueta](https://vibecode.thmtecnologia.com/componentes/pirueta/): Ao passar o mouse, cada letra gira como um pequeno cubo, uma depois da outra, numa onda em 3D. - [Arlequim](https://vibecode.thmtecnologia.com/componentes/arlequim/): Uma palavra do título em que cada letra ganha uma cor viva e as cores se embaralham a cada cinco segundos. - [Gralha](https://vibecode.thmtecnologia.com/componentes/gralha/): Faixas do título aparecem deslocadas para os lados com rastros vermelho e ciano, como uma tela com defeito. - [Cordel](https://vibecode.thmtecnologia.com/componentes/cordel/): Uma frase repetida corre sem parar sobre um nó tridimensional que gira devagar e inclina com 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.