What it looks like
Picture a cartoon title cut out like a sticker. By default the letters are white, with a thick black outline behind them, a black shadow offset down and to the right and, behind it, a yellow shadow set a little farther out. Together they create an illusion of depth with no real 3D. The letters sit slightly tighter than usual. The whole block tilts a few degrees side to side and pauses for a moment, in cycles of one and a half seconds by default. Colors, thicknesses and the wobble can be changed or turned off.
You may be looking for this if you asked for something like
- a headline with chunky letters and a colored shadow like a cartoon
- text that looks like a sticker or a comic book cover for a promo
- letters with a black outline and yellow shadow that wiggle a bit
- a 3D look for my campaign title without real 3D
- an eye-catching raised font for an event or sale banner
- a word that keeps wobbling slightly to grab attention
Also known as
- chunky outlined headline
- text shadow 3D
- sticker text
- cartoon text effect
- comic book text
- wiggle text
- outlined text with shadow
When to use
- Short headlines for a campaign, sale or launch
- Event, party and youth-oriented product pages
- Gaming, streaming and playful brand sites
- Banner calls and section covers on dark or colorful backgrounds
When to avoid
- Long text and paragraphs, where the thick outline hurts readability
- Sober brands, such as law firms and banks, where the look feels too casual
How to ask your AI
Create a CSS-only 3D headline for the campaign banner: letters with a thick outline and two hard offset shadows in my brand colors, a gentle wobble that stops for people who prefer reduced motion, and good readability on phones.
With THM Componentes, you paste the full prompt from the catalog together with this component's code, and the AI reproduces this exact effect instead of improvising.
Questions about Onomatopeia
Does Onomatopeia use WebGL or a 3D library?
No. Onomatopeia builds the depth with CSS alone, using a text outline and two offset shadows, and the wobble is a CSS animation. The component imports no animation library, which is why it is rated Light in THM Componentes.
Can I change the colors of Onomatopeia and turn off the wobble?
Yes. Onomatopeia has props for the text, outline and shadow colors, for the thickness of the outline and of both shadows, and to turn the wobble on or off and set its duration. The THM Componentes prompt tells your AI to use your project color tokens instead of the original white, black and yellow.
Is Onomatopeia readable on phones?
Yes, as long as the text is large. The outline and shadows in Onomatopeia have a fixed thickness in pixels, so at smaller font sizes they take up more of each letter. On small screens, ask your AI to scale the outline down with the font; the prompt already asks for testing on mobile.
