# Película Linha do tempo de edição com clipes que você arrasta, apara e divide, e um preview que mostra o resultado na hora. > Película é um componente exclusivo do THM Componentes que monta um mini editor de vídeo no navegador: preview composto ao vivo, faixas de vídeo e de texto, clipes que se arrastam entre faixas do mesmo tipo, aparar pelas bordas, dividir no playhead, encaixe com guia, desfazer e refazer. Os clipes de demonstração são gerados em canvas, sem arquivos. - Categoria: Imagem e mídia - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Pesado: WebGL ou simulação; um por página, carregado sob demanda - Tecnologia: Vue 3, TypeScript, Canvas 2D - Interação: Mouse, Toque, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/pelicula/ ## Como ele é Lembra a parte de baixo de um editor de vídeo de computador, em miniatura. No alto, um preview escuro mostra a composição no ponto do playhead. Abaixo, uma barra reúne tocar, o tempo, dividir, excluir, adicionar clipe, desfazer, refazer e um controle de zoom. Depois vêm a régua de tempo e as faixas, uma de texto e duas de vídeo, com clipes coloridos em forma de bloco que mostram nome e duração. Arrastar o meio move o clipe; arrastar a borda apara. Perto de outra borda ou do playhead, o clipe encaixa e uma linha ciano aparece. ## Você pode estar procurando isto se pediu algo assim - “editor de vídeo simples dentro do meu sistema” - “linha do tempo para cortar e juntar clipes no navegador” - “arrastar pedaços de vídeo e ver o resultado na hora” - “ferramenta para montar stories cortando vídeos sem sair do site” - “timeline tipo editor profissional, com desfazer e atalhos” - “barra de edição com clipes que encaixam uns nos outros” ## Também chamado de video timeline, linha do tempo de vídeo, video editor, editor de vídeo web, timeline editor, editor de clipes, non-linear editor ## Quando usar - Ferramenta interna para montar criativos ou cortes de vídeo - Produto de edição de stories, reels ou anúncios no navegador - Protótipo de editor de mídia para validar o fluxo com usuários - Painel em que a equipe organiza blocos no tempo, como roteiro ou cenas ## Quando evitar - Quando você precisa editar arquivos de vídeo reais sem adaptar o componente - Telas pequenas de celular, em que faixas e bordas ficam difíceis de tocar - Páginas públicas de marketing, em que um editor completo é exagero ## Como pedir para a sua IA ```text Crie um editor de vídeo com linha do tempo em Vue: preview composto ao vivo, faixas de vídeo e de texto, clipes para arrastar, aparar pelas bordas e dividir no playhead, encaixe com guia, zoom e desfazer. Quero atalhos de teclado, rótulos acessíveis nos clipes e o estado das faixas num v-model. ``` 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 Película ### Película edita vídeos de verdade? Não sem adaptação. Película vem com fontes de demonstração desenhadas em canvas, como gradiente, ondas, formas, partículas e linhas, mais uma faixa de texto, e não lê arquivos de vídeo. A interface de faixas, aparar, dividir, encaixe e desfazer, junto com o v-model das faixas, serve de base para a IA ligar o seu próprio motor de mídia. ### Quais atalhos Película tem? Em Película, Espaço toca e pausa, S divide no playhead, Delete exclui o clipe selecionado, Ctrl+Z desfaz e Ctrl+Shift+Z refaz. As setas movem o clipe selecionado em 0,1 segundo, ou 1 segundo com Shift, e Ctrl com a roda do mouse dá zoom na régua. ### Como salvo o projeto editado em Película? Película mantém as faixas num v-model: depois de cada edição concluída, como arrastar, aparar, dividir, excluir ou desfazer, o componente emite a lista de faixas com início, duração e ponto de entrada de cada clipe, em segundos. É esse dado que você salva no banco ou no armazenamento local. ## Componentes relacionados - [Matinê](https://vibecode.thmtecnologia.com/componentes/matine/): Player com barra de progresso, miniatura ao passar o mouse, capítulos, legendas, velocidade e tela cheia. - [Fatia](https://vibecode.thmtecnologia.com/componentes/fatia/): Uma forma de onda com duas alças para escolher o trecho, ouvir o recorte, aplicar fades e baixar em WAV. - [Prancheta](https://vibecode.thmtecnologia.com/componentes/prancheta/): Editor de fotos dentro da página para recortar, girar, ajustar brilho e cor, aplicar filtros e exportar a imagem. - [Biombo](https://vibecode.thmtecnologia.com/componentes/biombo/): Tela dividida em áreas que você aumenta, diminui ou recolhe arrastando as linhas entre elas, como num editor de código. - [Canteiro](https://vibecode.thmtecnologia.com/componentes/canteiro/): Cronograma de barras que você arrasta para mudar datas, com setas entre as tarefas e o caminho crítico em vermelho. --- 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.