# Tapume A solid block of color covers the headline and pulls away to the side, letting the text rise gently into view. > Tapume is a THM Componentes component that reveals text with a colored box: a solid block covers the content and retracts from left to right while the text appears, rising a few pixels. It fires when it enters the screen and gives an editorial rhythm to section headings, introductions and portfolio pages. - 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, Motion for Vue - Interaction: Scroll - URL: https://vibecode.thmtecnologia.com/en/components/tapume/ ## What it looks like It recalls the opening titles of a documentary or a magazine page turning. Where the text should be, a solid block of color shows up first, the exact size of the content, indigo by default. Right after, the left edge of that block runs to the right and the block shrinks until it disappears, while the headline emerges behind it, gaining opacity and rising slightly into place. The whole thing takes about a second and starts when that part enters the screen. With several stacked blocks, such as a headline, subtitle and paragraph, each one gets its own box. ## You may be looking for this if you asked for something like - “text that appears from behind a colored bar sliding to the side” - “a headline revealed by a color block, like movie opening titles” - “a box that slides away to show the text as I scroll” - “an editorial animation for the section titles on my portfolio” - “that effect where a colored strip slides off the text” - “an elegant way to make the company name appear at the top” - “subtitle and paragraph appearing with a color bar in front of them” ## Also known as sliding color block, color wipe text, reveal block animation, color block reveal, mask reveal, wipe reveal ## When to use - Section headings on portfolios, agency and editorial sites - Presenting a name, role and short line on a personal page - A case study or project opener with a magazine feel - Landing pages that want reading rhythm without heavy effects ## When to avoid - Long text or many blocks in a row, where the sequence of boxes gets tiring - App interfaces and dashboards, where content needs to show up immediately ## How to ask your AI ```text Create a reveal effect on section headings: a block in my brand accent color covers the text and retracts to the right while the content rises gently into view as it enters the screen, with a static version for reduced motion and no hard-coded colors in the component. ``` 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 Tapume ### Can I change the box color in Tapume? Yes. The box color in Tapume comes from a prop, and the THM Componentes prompt tells your AI to use your project color tokens instead of fixed colors. A good pattern is to use your brand accent color for the box and repeat the same tone on one word of the headline. ### Does Tapume respect reduced motion settings? The original component always animates. The THM Componentes prompt asks your AI for a static version for people who turn on reduced motion in their system settings, which is simple with Tapume: hide the box and show the text already in place, with no offset. ### Can I use Tapume on several pieces of text in one section? Yes. Each instance of Tapume wraps one block and creates its own box, sized to that content, so a headline, subtitle and paragraph can each have a separate box. Adjust the duration and delay of each one so they appear in sequence instead of all at once. ## Related components - [Ênfase](https://vibecode.thmtecnologia.com/en/components/enfase/): A band of color grows behind a passage of text, like a highlighter pen moving across the line. - [Florada](https://vibecode.thmtecnologia.com/en/components/florada/): Headlines and paragraphs that appear one after another, rising slightly out of a blur until they turn sharp. - [Pincelada](https://vibecode.thmtecnologia.com/en/components/pincelada/): A band of color fills the background of a word from left to right, like a highlighter pen. - [Levante](https://vibecode.thmtecnologia.com/en/components/levante/): A headline that enters the page with each letter rising from below, one after another, like a wave. - [Cadência](https://vibecode.thmtecnologia.com/en/components/cadencia/): A large block of text where each word comes out of a blur and turns sharp as you scroll, at reading pace. --- 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).