# Templates Remotion de animação de componentes e fluxos de interface 14 templates Remotion grátis de animação de interface: comboboxes, menus de comandos, toasts, controles deslizantes, abas e fluxos completos de cadastro, checkout e configurações. Edite ou pegue o código. Canonical URL: https://www.subclip.app/pt/motion-graphics-templates/remotion/ui-animations Estes templates Remotion animam as partes de uma interface: uma combobox abrindo, um menu de comandos filtrando, um toast entrando depois de um clique, um controle deslizante sendo arrastado. Vários deles são fluxos completos, em que um cursor preenche um formulário de cadastro ou conclui um checkout. São úteis para demos de produto e vídeos de lançamento de SaaS que precisam mostrar um app funcionando sem gravar um. ## Componentes e fluxos Cada template de componente mostra uma interação: Combobox digita uma busca e escolhe um resultado, Command Menu filtra uma lista de comandos, Context Menu abre com um clique direito, Tabs troca de painel, Slider arrasta um valor, Stepper avança pelas etapas, Resizable arrasta uma alça divisória, Skeleton dá lugar ao conteúdo carregado, Toast confirma uma ação e Typing Indicator mostra a pulsação dos três pontinhos. Search Reveal monta uma barra de busca a partir de círculos de construção. Os fluxos encadeiam essas peças: Signup Flow preenche cada campo e envia, Checkout Flow escolhe um plano e insere os dados do cartão, e Settings Toggle Flow liga interruptores, escolhe um tema e salva. ## Edite a interface Cada template é um componente TSX com rótulos, valores e tempos em props e arrays simples, então você pode mudar os textos para combinar com o seu produto. Edite no Subclip ao lado das suas gravações de tela ou copie o código para o seu próprio projeto Remotion. ## 14 templates - [Search Reveal](https://www.subclip.app/pt/motion-graphics-templates/remotion/search-reveal) (Remotion, Interface): Círculos finos de construção crescem e se encaixam em uma barra de busca, seu texto é digitado e um painel gráfico colorido se abre atrás dela. - [Combobox](https://www.subclip.app/pt/motion-graphics-templates/remotion/combobox) (Remotion, Interface): Um componente de seleção com busca, com um gatilho com texto de exemplo, um painel de opções aberto e uma linha destacada, para vídeos de demo de interface. - [Command Menu](https://www.subclip.app/pt/motion-graphics-templates/remotion/command-menu) (Remotion, Interface): Uma paleta de comandos de teclado com campo de busca e uma lista de comandos com atalhos, mostrada aberta sobre um fundo escurecido. - [Context Menu](https://www.subclip.app/pt/motion-graphics-templates/remotion/context-menu) (Remotion, Interface): Um painel de menu de clique direito com quatro ações e uma linha com o ponteiro em cima, pronto para colocar no ponto do cursor em uma demo de interface. - [Resizable](https://www.subclip.app/pt/motion-graphics-templates/remotion/resizable) (Remotion, Interface): Um layout de dois painéis com uma alça divisória, em que a proporção da divisão e o estado da alça podem ser definidos para vídeos de demo de interface. - [Skeleton](https://www.subclip.app/pt/motion-graphics-templates/remotion/skeleton) (Remotion, Interface): Um cartão de carregamento skeleton com um brilho que passa por um avatar redondo e duas linhas de texto. - [Slider](https://www.subclip.app/pt/motion-graphics-templates/remotion/slider) (Remotion, Interface): Um controle deslizante limpo cujo valor de preenchimento e estado do botão podem ser definidos, com o valor atual mostrado acima do botão. - [Stepper](https://www.subclip.app/pt/motion-graphics-templates/remotion/stepper) (Remotion, Interface): Um indicador de etapas horizontal de onboarding com três etapas nomeadas, em que a etapa ativa pode ser definida para mostrar o progresso. - [Tabs](https://www.subclip.app/pt/motion-graphics-templates/remotion/tabs) (Remotion, Interface): Um componente de abas com indicador em pílula ou sublinhado e um painel curto de texto para a aba ativa. - [Toast](https://www.subclip.app/pt/motion-graphics-templates/remotion/toast) (Remotion, Interface): Um pequeno cartão de notificação com ícone, título e uma linha de detalhe, no estilo padrão ou de sucesso, para vídeos de demo de apps. - [Typing Indicator](https://www.subclip.app/pt/motion-graphics-templates/remotion/typing-indicator) (Remotion, Interface): Uma fileira de pontinhos que quicam um após o outro em uma onda suave, como o indicador de digitação de um app de chat. - [Signup Flow](https://www.subclip.app/pt/motion-graphics-templates/remotion/signup-flow) (Remotion, Interface): Um cartão de cadastro no estilo shadcn em que um cursor preenche nome, e-mail e senha, envia com um estado de carregamento e recebe um toast de sucesso. - [Checkout Flow](https://www.subclip.app/pt/motion-graphics-templates/remotion/checkout-flow) (Remotion, Interface): Um cartão de checkout com seletor de cobrança, campo de cartão e caixa de termos, preenchido e pago por um cursor, com um toast de sucesso no fim. - [Settings Toggle Flow](https://www.subclip.app/pt/motion-graphics-templates/remotion/settings-toggle-flow) (Remotion, Interface): Um cartão de configurações em duas colunas em que um cursor ativa as notificações, escolhe um tema, arrasta um controle deslizante e salva.