# Tirinha Vertical cards in a phone-sized frame that advance on their own, with progress bars at the top and tap to skip. > Tirinha is an exclusive THM Componentes component that brings the vertical story format from social apps to your site: progress bars at the top, automatic advance, tap right to go forward and left to go back, hold to pause and drag down to close. It has full keyboard support, an optional 3D cube transition and no WebGL. - Category: Images and media - Origin: THM exclusive, built by THM Tecnologia Inteligente; the prompt includes the full source code - Load weight: Light: CSS or light JavaScript, no noticeable cost - Technology: Vue 3, TypeScript - Interaction: Mouse, Touch, Keyboard - URL: https://vibecode.thmtecnologia.com/en/components/tirinha/ ## What it looks like It is the stories screen of a social app, inside a vertical phone-sized frame with rounded corners and a shadow. Each card has a background photo with a dark gradient, a short cyan line in capitals, a large title, body text and, optionally, a white call-to-action button. At the top, one bar per story fills up as time passes, with a counter and the pause and close buttons just below. When moving between stories, the card turns like the face of a cube. Holding a finger or the mouse button pauses and shows a paused badge. ## You may be looking for this if you asked for something like - “Instagram-like stories on my website” - “vertical cards that play by themselves with little bars at the top” - “show product updates in a story format” - “tap the side to skip and hold to pause, like social media” - “an onboarding flow of vertical screens that advance with a tap” - “a showcase of case studies in story format for mobile” - “that cube spin effect between one story and the next” ## Also known as story player, Instagram-style stories, web stories, story viewer, vertical carousel, stories widget ## When to use - Highlights of news or launches at the top of an app or site - Visual onboarding across a few vertical screens - A mobile-first showcase of case studies, products or testimonials - Campaigns that reuse a format people already know from social apps ## When to avoid - Long content or text that needs careful reading, since stories advance on their own - Essential information tucked into a story that not everyone will watch to the end ## How to ask your AI ```text Create a stories viewer in Vue with segmented progress bars, automatic advance, tap left to go back and right to go forward, hold to pause and drag down to close. I want full keyboard support, swaps without animation for reduced motion and a paused timer when it leaves the screen. ``` With THM Componentes, you paste the full prompt from the catalog, which already includes this component's source code, and the AI reproduces this exact effect instead of improvising. ## Questions about Tirinha ### How do I add my own images and text to Tirinha? Through the stories prop, a list of cards where each one has an image, a title and, optionally, a short line above the title, body text, a call-to-action button and its own duration. Without the prop, Tirinha shows four sample cards. Clicking the button emits a cta event with the card index, so you can open a link or a modal. ### Does Tirinha work with a keyboard and screen readers? Yes. Tirinha takes focus and responds to the arrow keys to go back and forward, Space to pause, Esc to close, and Home and End to jump to the first and last story. The region announces the position and the current title, and the pause and close buttons have labels. ### Does Tirinha respect reduced motion settings? It does. With reduced motion turned on, Tirinha switches between stories without the 3D cube turn and drops the transitions on the frame and buttons. Automatic advance continues, since it is part of the format, and people can pause it by holding, with the button or with Space. Off screen, the timer stops running. ## Related components - [Estojo](https://vibecode.thmtecnologia.com/en/components/estojo/): An iPhone drawn in SVG, with the island at the top and your app screenshot filling the screen. - [Porta-retrato](https://vibecode.thmtecnologia.com/en/components/porta-retrato/): A cube that turns as you drag it, showing a photo or a video on each face. - [Matinê](https://vibecode.thmtecnologia.com/en/components/matine/): A player with a progress bar, hover thumbnails, chapters, captions, playback speed and fullscreen. - [Coreto](https://vibecode.thmtecnologia.com/en/components/coreto/): Photos arranged in a ring, like a cylinder, that you spin by dragging, with inertia and a floor reflection. - [Mezanino](https://vibecode.thmtecnologia.com/en/components/mezanino/): A panel that slides up from the bottom of the screen, stops at three heights and follows your finger. --- 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).