# Matinê A player with a progress bar, hover thumbnails, chapters, captions, playback speed and fullscreen. > Matinê is an exclusive THM Componentes component with the controls of a modern player: a progress bar with hover thumbnails and chapters, speed from 0.5x to 2x, volume, captions, fullscreen, picture-in-picture when available and keyboard shortcuts. The 45-second demo film is drawn on a canvas, with no video file involved. - Category: Images and media - Origin: THM exclusive, built by THM Tecnologia Inteligente; the prompt includes the full source code - Load weight: Medium: canvas or continuous animation; fine for one section - Technology: Vue 3, TypeScript, Canvas 2D - Interaction: Mouse, Touch, Keyboard - URL: https://vibecode.thmtecnologia.com/en/components/matine/ ## What it looks like It looks like the player of a major video platform, with rounded corners. Before playback, it shows a frame from the opening and a round button in the center. Along the bottom, a dark strip holds the progress bar, with an indigo to cyan gradient and small dots at each chapter, plus the play, volume, time, chapter name, speed, captions and fullscreen controls. Hovering the bar brings up a thumbnail of that frame with its time and chapter. During playback, the controls fade out after a few seconds of stillness and come back when the mouse moves. ## You may be looking for this if you asked for something like - “a nice video player that shows a thumbnail when I hover the bar” - “a company video with chapters and captions on my site” - “a player like the big video platforms have, with keyboard shortcuts” - “video controls that hide by themselves during playback” - “an accessible player with captions and speed for an online course” - “a product demo video at the top of the sales page” ## Also known as video player, custom video player, video controls, chapters video player, thumbnail preview, accessible video player ## When to use - A company video or brand manifesto on the home page - A product demo with chapters to jump straight to each feature - Lessons and courses that need speed control, captions and shortcuts - A prototype for a video product before the final files exist ## When to avoid - When you need to play your own video file without adapting the component - Decorative background videos, where full controls are overkill ## How to ask your AI ```text Create a custom video player in Vue with a progress bar, hover thumbnail previews, chapters, captions, speed, volume and fullscreen. I want keyboard shortcuts, controls that work with screen readers and controls that stay visible for people who prefer reduced motion. ``` 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 Matinê ### Does Matinê play my own video file? Not directly. Matinê ships with a 45-second demo film drawn frame by frame on a canvas, in five scenes, with a synthesized soundtrack that starts after the first click. To play your own video, ask your AI to adapt the component to a video element, keeping the bar, chapters, captions and shortcuts. ### Which keyboard shortcuts does Matinê support? Matinê responds to Space or K to play and pause, left and right arrows to move 5 seconds, up and down arrows for volume, F for fullscreen, M for mute and C for captions. The progress bar also accepts Home and End and announces time and chapter to screen readers. ### Does Matinê respect reduced motion settings? Yes, where the interface is concerned. With reduced motion turned on, Matinê stops hiding the controls during playback and removes the button transitions. The film only moves after someone presses play, so nothing animates on its own when the page opens. ## Related components - [Sarau](https://vibecode.thmtecnologia.com/en/components/sarau/): A podcast player with chapters on the bar and a transcript that highlights and scrolls to the line being played. - [Película](https://vibecode.thmtecnologia.com/en/components/pelicula/): An editing timeline with clips you drag, trim and split, plus a preview that shows the result instantly. - [Maquete](https://vibecode.thmtecnologia.com/en/components/maquete/): A product drawn in real time that spins, splits into parts and snaps back together as you scroll. - [Postigo](https://vibecode.thmtecnologia.com/en/components/postigo/): A Safari window drawn in SVG, with an address bar and your site screenshot filling the page. - [Pandeiro](https://vibecode.thmtecnologia.com/en/components/pandeiro/): A disc ringed by bars that dance with the sound, or flowing wave lines, playing ambient audio or listening to the mic. --- 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).