# Parêntese A sentence in two parts that slide apart to make room for a small photo or video in between. > Parêntese is a THM Componentes component for editorial headlines: the sentence is split in two and, on hover or when it scrolls into view, the words slide apart while a photo or video opens sideways in the middle with a smooth motion. It works well in heroes, manifestos and brand 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: Mouse, Scroll - URL: https://vibecode.thmtecnologia.com/en/components/parentese/ ## 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 ```text 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. ## Related components - [Estêncil](https://vibecode.thmtecnologia.com/en/components/estencil/): A large headline with a video playing inside it, as if each letter were a window onto the scene. - [Tecla](https://vibecode.thmtecnologia.com/en/components/tecla/): A word inside a raised box that changes by itself, while the box stretches or shrinks to fit the next one. - [Sinônimo](https://vibecode.thmtecnologia.com/en/components/sinonimo/): One word in the middle of the headline changes by itself every few seconds, the new one arriving letter by letter. - [Relicário](https://vibecode.thmtecnologia.com/en/components/relicario/): A badge with a small yellow folder icon: hover it and the folder opens as up to three photos fan out. - [Avesso](https://vibecode.thmtecnologia.com/en/components/avesso/): Two phrases in the same spot: a vertical line follows the mouse and shows the other phrase on one side. --- 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).