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
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.
