# Virada

Um cartão que troca de logo a cada poucos segundos, dobrando ao meio como um painel de aeroporto antigo.

> Virada é um componente do THM Componentes que mostra vários logos no espaço de um só: o cartão se dobra ao meio, como um painel de embarque de aeroporto antigo, e revela o próximo logo a cada 2,5 segundos. Usa transformações 3D do CSS e serve para parceiros, integrações e clientes em áreas pequenas.

- Categoria: Comércio e conversão
- Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM
- Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível
- Tecnologia: Vue 3, TypeScript, Tailwind CSS v4, Motion for Vue
- Interação: Nenhuma: o efeito roda sozinho
- URL: https://vibecode.thmtecnologia.com/componentes/virada/

## Como ele é

Lembra os antigos painéis de embarque de aeroporto, em que as letras viram em pequenas abas. Um cartão de cantos arredondados, levemente girado em perspectiva, mostra um logo grande sobre um quadrado colorido. A cada 2,5 segundos, a metade de cima dobra para baixo ao longo de uma linha central escura e revela o logo seguinte, num movimento de um segundo e meio com início e fim suaves. A sequência volta ao primeiro logo e se repete sem parar. Cada logo vai num item próprio, e você define a cor de fundo de cada um.

## Você pode estar procurando isto se pediu algo assim

- “logo dos parceiros trocando sozinho num quadradinho”
- “aquele efeito de painel de aeroporto virando para mostrar logos”
- “mostrar várias integrações sem ocupar espaço na página”
- “card que vira ao meio e troca o ícone de tempos em tempos”
- “animação de flip para os logos dos clientes”
- “um jeito diferente de exibir marcas parceiras no hero”

## Também chamado de

split-flap, flip board, painel de aeroporto, logo flip, flip clock effect, efeito origami, troca de logos

## Quando usar

- Seção de integrações ou parceiros com pouco espaço disponível
- Hero que cita ferramentas compatíveis sem listar todas de uma vez
- Cartões de prova social ao lado de depoimentos ou números
- Páginas de evento que alternam patrocinadores

## Quando evitar

- Quando todos os logos precisam ser vistos ao mesmo tempo, como numa lista de clientes
- Áreas de leitura em que uma troca a cada poucos segundos distrai

## Como pedir para a sua IA

```text
Crie um cartão com efeito split-flap que alterna os logos dos parceiros, dobrando a metade de cima em 3D a cada poucos segundos, com as cores do meu tema, texto alternativo em cada logo e um logo parado para quem prefere menos movimento.
```

Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar.

## Perguntas sobre Virada

### Dá para mudar o tempo de troca em Virada?

Sim. Virada tem duas props: delay, o intervalo entre as trocas, que vem com 2,5 segundos, e duration, a duração da dobra, que vem com 1,5 segundo. Intervalos maiores deixam o cartão mais calmo, o que ajuda quando ele fica perto de textos.

### Virada respeita quem prefere menos movimento?

O código original de Virada troca os logos sempre, sem ler essa preferência. O prompt do THM Componentes pede à IA uma versão estática para quem ativa a redução de movimento, que aqui pode ser o primeiro logo parado ou uma grade simples com todos eles.

### Quantos logos cabem em Virada?

Não há limite fixo no código: Virada percorre todos os itens colocados no componente, um de cada vez, e volta ao início. Como só um logo aparece por vez, listas longas fazem cada marca demorar a voltar; para muitas marcas, uma faixa de logos costuma funcionar melhor.

## Componentes relacionados

- [Freguesia](https://vibecode.thmtecnologia.com/componentes/freguesia/): Uma faixa com os logos dos seus clientes passando devagar, numa cor só, abaixo de um título curto.
- [Valete](https://vibecode.thmtecnologia.com/componentes/valete/): Cartão que gira 180 graus ao passar o mouse e mostra o verso, virando para o lado ou de cima para baixo.
- [Catraca](https://vibecode.thmtecnologia.com/componentes/catraca/): Números grandes que rolam como os tambores do hodômetro de um carro e param com um leve balanço.
- [Ouriço](https://vibecode.thmtecnologia.com/componentes/ourico/): Bola de ícones redondos girando em 3D, que segue o mouse e traz para a frente o ícone clicado.
- [Planetário](https://vibecode.thmtecnologia.com/componentes/planetario/): Ícones ou pequenos elementos que giram em círculos ao redor de um centro, como planetas em volta do Sol.

---
THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.