# Buril A word with a shadow made of thin diagonal stripes that slide slowly behind the letters. > Buril is a THM Componentes component that places a shadow made of thin diagonal stripes, like engraving hatching, behind a word, with the stripes sliding slowly and endlessly. It is CSS only, with no animation JavaScript, and works well in large headlines on editorial sites, retro-style landing pages and campaign callouts. - 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/buril/ ## What it looks like It looks like the fine-line shadow of an old engraving or a retro poster. Behind each letter sits a copy shifted slightly right and down, filled with very thin diagonal lines, like hatching, instead of a solid color. Those lines slide slowly along the diagonal in a 15-second loop that never stops, giving the shadow a quiet shimmer. The front letter keeps the color and font of the surrounding text. The shadow is black by default; in the demo it turns white in dark mode. The effect shows up most in large, bold headlines, like the one in the demo. ## You may be looking for this if you asked for something like - “a headline with a shadow made of diagonal stripes” - “a retro shadow made of lines behind the word” - “an old poster style text effect for my headline” - “a word with a hatched shadow that moves slowly” - “make one word in the headline look editorial” - “that striped magazine-style shadow on big letters” ## Also known as engraving-style shadow, striped text shadow, hatched shadow, retro text shadow, diagonal line shadow, animated text shadow ## When to use - One highlighted word inside a large headline, as in the demo - Editorial sites, digital magazines and blogs with a retro look - Landing pages for brands with a graphic or vintage identity - Section covers and campaign callouts set in bold type ## When to avoid - Small or thin text, where the shadow lines barely show - Content that changes after load, because the component reads the text once and accepts plain text only ## How to ask your AI ```text Create a diagonal line shadow effect behind one word of the hero headline: the stripes slide slowly in my brand color, with proper contrast in dark mode and a still shadow for people who prefer reduced motion. ``` 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 Buril ### Can I put icons or HTML inside Buril? No. Buril accepts only plain text as content and throws an error if it gets another element, because it uses that text to draw the shadow. The content is also read once, on mount, so to change the phrase later your AI can recreate the component with a new key. ### How does Buril look in dark mode? Buril has a single shadow color, set in the shadowColor prop, black by default. It does not switch colors on its own; in the demo, the color changes to white when the dark theme is active. The THM Componentes prompt tells your AI to use your project color tokens in both themes. ### Does Buril add weight to my site? Almost none. Buril is CSS only: a pseudo-element repeats the text behind the letter and an animation moves the stripe pattern over 15 seconds, with no animation JavaScript. That is why it is rated Light in THM Componentes. For people who prefer reduced motion, the prompt asks for a still version. ## Related components - [Onomatopeia](https://vibecode.thmtecnologia.com/en/components/onomatopeia/): White letters with a thick black outline and an offset yellow shadow, wobbling slightly like a cartoon title. - [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. - [Lustro](https://vibecode.thmtecnologia.com/en/components/lustro/): Soft gray text with a band of shine that sweeps across the letters every few seconds. - [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. - [Quilate](https://vibecode.thmtecnologia.com/en/components/quilate/): Small violet and pink stars blink and spin over the word, popping in and out without stopping. --- 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).