What it looks like
Picture a headline written in two halves with a closed gap between them. When the mouse moves over it, the gap opens in width: the media grows from zero to its set size in about 0.4 seconds, and both parts of the text glide sideways to make room, with no jumps. Move the mouse away and everything closes again. In the in-view mode, it opens once, when half of the component enters the screen. The media can be a photo or a muted looping video, cropped to fill its frame. In the demo, a sentence in thin lowercase letters opens a small square photo.
You may be looking for this if you asked for something like
- a headline that opens up a photo in the middle of the sentence on hover
- words that slide apart and show an image between them
- a sentence with a tiny video appearing inside the text
- a magazine-style editorial effect for my site headline
- a headline where an image pops in when people scroll to it
- make my brand manifesto look like a fashion editorial
Also known as
- photo inside a headline
- inline image reveal
- headline media reveal
- image between words
- animated editorial headline
- text with inline video
When to use
- A brand, studio or agency hero with a short, punchy sentence
- Manifestos and about pages with an editorial tone
- Product launches where a small photo illustrates the sentence
- Fashion, design and photography portfolios
When to avoid
- Long headlines, since the effect is designed for a short sentence in two parts
- Mostly mobile audiences with the hover trigger; use the in-view trigger instead
How to ask your AI
Create an editorial headline for the hero where the sentence splits in two and a small photo opens between the parts on hover, opening on scroll into view on mobile, with real alt text on the image and a static version for 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 Parêntese
Does Parêntese work on phones?
It works best with the in-view trigger. Parêntese has three triggers: hover, scrolling into view, or code through the animate and reset methods. Since phones have no hover, use the in-view trigger, which opens the media when half of the sentence appears. In the demo, the photo shrinks from 100 to 30 pixels on narrow screens.
Can I use video in Parêntese?
Yes. Parêntese accepts an image or a video through the mediaType prop. Video starts on its own, muted, looping and inline on the page, and can show a poster image while it loads. The media is cropped to fill the opened space, and you set its final size with the classes on the media container.
Do screen readers understand Parêntese?
Parêntese renders the text as real elements, so a screen reader reads the sentence normally. By default, the image alt text repeats the whole sentence, which makes the headline heard twice; replace it with a short description of the photo through the alt prop.
