# Tirinha Cartões verticais em tela de celular que passam sozinhos, com barrinhas de progresso no topo e toque para avançar. > Tirinha é um componente exclusivo do THM Componentes que leva ao site o formato de histórias verticais das redes sociais: barras de progresso no topo, avanço automático, toque na direita para avançar e na esquerda para voltar, segurar para pausar e arrastar para baixo para fechar. Tem teclado completo, transição de cubo 3D opcional e não usa WebGL. - Categoria: Imagem e mídia - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível - Tecnologia: Vue 3, TypeScript - Interação: Mouse, Toque, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/tirinha/ ## Como ele é É a tela de stories de uma rede social, dentro de uma moldura vertical de celular com cantos arredondados e sombra. Cada cartão tem uma foto de fundo com degradê escuro, uma linha curta em ciano e caixa alta, um título grande, um texto e, se quiser, um botão branco de chamada. No topo, uma barrinha por história se enche conforme o tempo passa e, logo abaixo, ficam um contador e os botões de pausar e fechar. Ao trocar de história, o cartão gira como a face de um cubo. Manter o dedo ou o botão do mouse pressionado pausa e mostra o aviso pausado. ## Você pode estar procurando isto se pediu algo assim - “stories igual ao Instagram no meu site” - “cartões verticais que passam sozinhos com barrinha no topo” - “mostrar as novidades do produto em formato de story” - “tocar do lado para passar e segurar para pausar, tipo rede social” - “onboarding em telas verticais que avançam com um toque” - “vitrine de cases em formato de story para o celular” - “aquele efeito de cubo girando entre um story e outro” ## Também chamado de stories para site, stories estilo Instagram, web stories, story viewer, visualizador de stories, carrossel vertical, histórias ## Quando usar - Destaques de novidades ou lançamentos no topo de um app ou site - Onboarding visual em poucas telas verticais - Vitrine de cases, produtos ou depoimentos pensada para celular - Campanhas que reaproveitam o formato que o público já conhece das redes ## Quando evitar - Conteúdo longo ou que pede leitura com calma, já que as histórias avançam sozinhas - Informação essencial escondida numa história que nem todos vão abrir até o fim ## Como pedir para a sua IA ```text Crie um visualizador de stories em Vue com barras de progresso segmentadas, avanço automático, toque à esquerda para voltar e à direita para avançar, segurar para pausar e arrastar para baixo para fechar. Quero teclado completo, troca sem animação para movimento reduzido e pausa quando sai da tela. ``` Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar. ## Perguntas sobre Tirinha ### Como coloco minhas imagens e textos em Tirinha? Pela prop stories, uma lista de cartões em que cada um tem imagem, título e, se quiser, uma linha de apoio acima do título, texto, botão de chamada e duração própria. Sem a prop, Tirinha mostra quatro cartões de exemplo. O clique no botão emite o evento cta com o índice do cartão, para você abrir um link ou um modal. ### Tirinha funciona com teclado e leitor de tela? Sim. Tirinha recebe foco e responde ao teclado: as setas voltam e avançam, Espaço pausa, Esc fecha, e Home e End levam à primeira e à última história. A região anuncia a posição e o título atual, e os botões de pausar e fechar têm rótulos. ### Tirinha respeita quem prefere menos movimento? Respeita. Com a redução de movimento ativada no sistema, Tirinha troca de história sem o giro do cubo 3D e remove as transições da moldura e dos botões. O avanço automático continua, porque faz parte do formato, e pode ser pausado segurando, pelo botão ou com Espaço. Fora da tela, o tempo para de correr. ## Componentes relacionados - [Estojo](https://vibecode.thmtecnologia.com/componentes/estojo/): Um iPhone desenhado em SVG, com a ilha no topo e o print do seu app ocupando a tela. - [Porta-retrato](https://vibecode.thmtecnologia.com/componentes/porta-retrato/): Um cubo que gira com o arraste e mostra uma foto ou um vídeo em cada face. - [Matinê](https://vibecode.thmtecnologia.com/componentes/matine/): Player com barra de progresso, miniatura ao passar o mouse, capítulos, legendas, velocidade e tela cheia. - [Coreto](https://vibecode.thmtecnologia.com/componentes/coreto/): Fotos dispostas em roda, como num cilindro, que você gira arrastando, com inércia e reflexo no chão. - [Mezanino](https://vibecode.thmtecnologia.com/componentes/mezanino/): Um painel que sobe da parte de baixo da tela, para em três alturas e pode ser puxado com o dedo. --- 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.