# Onomatopeia White letters with a thick black outline and an offset yellow shadow, wobbling slightly like a cartoon title. > Onomatopeia is a THM Componentes component that adds depth to a headline with CSS alone: a thick outline, two hard shadows offset diagonally and a gentle wobble that repeats. It recalls cartoon titles and comic book covers, stays light and works well for short headlines in campaigns, events and promotions. - Category: Text and typography - Origin: Adapted from open source under the MIT license, with a ready THM prompt - Load weight: Light: CSS or light JavaScript, no noticeable cost - Technology: Vue 3, TypeScript, Tailwind CSS v4 - Interaction: None: the effect runs on its own - URL: https://vibecode.thmtecnologia.com/en/components/onomatopeia/ ## 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 ```text 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. ## Related components - [Buril](https://vibecode.thmtecnologia.com/en/components/buril/): A word with a shadow made of thin diagonal stripes that slide slowly behind the letters. - [Pirueta](https://vibecode.thmtecnologia.com/en/components/pirueta/): On hover, each letter turns like a small cube, one after another, in a 3D wave. - [Arlequim](https://vibecode.thmtecnologia.com/en/components/arlequim/): A headline word where every letter gets a bright color and the colors reshuffle every five seconds. - [Gralha](https://vibecode.thmtecnologia.com/en/components/gralha/): Slices of the headline show up shifted sideways with red and cyan trails, like a screen on the fritz. - [Cordel](https://vibecode.thmtecnologia.com/en/components/cordel/): A repeating phrase runs endlessly over a 3D knot that turns slowly and tilts with the mouse. --- THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).