# Cartomante A fan of tall photos behind a large headline: each photo reveals itself on hover and the headline turns see-through. > Cartomante is a THM Componentes component that opens a page with a large headline over a fan of tall photos. On load, the photos spread out one by one with a spring; on hover, the chosen photo appears, the ones after it make room and the headline turns see-through in the middle. It suits project and collection showcases. - Category: Cards and surfaces - 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, Touch - URL: https://vibecode.thmtecnologia.com/en/components/cartomante/ ## What it looks like Think of a deck of tall, thin cards fanned out, with a large headline running across the middle and a main photo fixed on the left. On load, the cards slide to the right one after another with a slight spring bounce. At rest, almost all of them show the same placeholder image and only the last one shows its own photo. When you hover a card, it switches to its photo in half a second, the cards to its right move 60 pixels aside and the headline shifts from solid to a gradient where only the ends stay white. The bottom of the stack fades out. ## You may be looking for this if you asked for something like - “a big headline with several photos stacked behind it” - “photos fanned out like cards that open up when I hover” - “a hero with image cards that slide in when the page loads” - “show projects as overlapping cards side by side” - “text that turns transparent so the photo shows through” - “a portfolio opener that feels like a premium product launch” - “a stacked collection gallery for the top of the page” ## Also known as photo fan on hover, image stack hero, fanned photo cards, hover image swap, stacked image reveal, layered card hero ## When to use - A portfolio or studio opener that shows several works at once - A fashion, interior or photography collection launch - A product page with visual variations side by side - A highlight section with a short, bold headline ## When to avoid - Light backgrounds without changes, since the hover headline uses fixed white - Long lists: the fan works with a few photos and fills the screen height - Mobile-first audiences, since the effect was designed for the mouse ## How to ask your AI ```text Create a hero with a fanned card stack behind a large headline: the photos spread out with a spring on load, and on hover the chosen photo appears while the next ones make room. Use my brand colors in the headline, support taps on phones and add 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 Cartomante ### How many photos does Cartomante take? Cartomante takes a list of photos through the imgSrc prop, plus a main photo and a placeholder image. The demo uses five photos; since each card sits 32 pixels to the right of the previous one, longer lists need smaller spacing or a wider area. ### Does Cartomante work on phones? Cartomante was designed for the mouse. A click toggles the active card, which lets people tap on phones, but the headline uses a smaller font on small screens and the fan has a fixed width. The THM Componentes prompt asks for mobile testing and an LCP and INP comparison before and after. ### Does Cartomante respect reduced motion settings? The original component always animates the entrance and the swaps with a spring. The THM Componentes prompt asks your AI for a static version for people who turn on reduced motion; with Cartomante, a simple option is to show the fan already open and swap photos without sliding. ## Related components - [Prateleira](https://vibecode.thmtecnologia.com/en/components/prateleira/): A row of tall photo cards that scrolls sideways and opens each card in a panel over the page. - [Resma](https://vibecode.thmtecnologia.com/en/components/resma/): Large cards that stick to the top of the screen and pile up on each other as the page scrolls. - [Truco](https://vibecode.thmtecnologia.com/en/components/truco/): A pile of photo cards where you drag the top one aside and it springs back to the bottom of the stack. - [Persiana](https://vibecode.thmtecnologia.com/en/components/persiana/): Photos side by side in vertical strips; the one under the mouse widens and the others narrow. - [Biruta](https://vibecode.thmtecnologia.com/en/components/biruta/): A photo card that reveals text on hover and nudges the image according to the side the cursor came from. --- 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).