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