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