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