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