# Checkout Flow: Animação de checkout

Um cursor escolhe a cobrança anual, digita um número de cartão, marca a caixa dos termos e clica em Pay, terminando com um toast de sucesso. Template de vídeo: copie o código para Claude ou edite no Subclip.

Canonical URL: https://www.subclip.app/pt/motion-graphics-templates/remotion/checkout-flow

Preview video: https://subclipweb.subclip.app/motion-graphics-templates/v1/previews/motion-template-remotion-remocn-checkout-flow.mp4?v=62e416395c

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.

- Framework: Remotion
- Categoria: Interface
- Duração: 11 s
- Proporção: 16:9 horizontal
- Código: Pegue o código (login grátis): https://www.subclip.app/pt/motion-graphics-templates/remotion/checkout-flow

Um cartão "Upgrade your plan" aparece e seus campos surgem do desfoque um a um. Um cursor clica em Yearly no seletor de cobrança, foca o campo do número do cartão enquanto "4242 4242 4242 4242" é digitado e marca "I accept the terms and conditions". Depois clica em "Pay $49", que mostra um estado de carregamento e vira sucesso enquanto um toast "Payment successful" entra deslizando e depois se fecha. A animação dura cerca de 11 segundos.

Você pode ajustar a velocidade de reprodução e o fundo ao redor da cena e editar os rótulos, os valores e as cores no código. Use em uma demo de preços de SaaS, um vídeo de produto de pagamentos, um anúncio sobre checkout rápido ou um tour por um fluxo de upgrade.

## Use para

- Demos de preços de SaaS
- Vídeos de produtos de pagamentos
- Anúncios de checkout rápido
- Tours por fluxos de upgrade

## O que você pode alterar

- `speed`: Velocidade de reprodução (Número)
- `stageBackground`: Fundo ao redor da cena (Cor)

## Como usar este template

1. Baixe o Subclip para Mac ou Windows. Todos os templates desta página já vêm instalados.
2. Abra o painel Templates, escolha Checkout Flow e arraste para a sua timeline.
3. Altere o texto, as cores e o tempo nas configurações da camada, ou peça ao agente de IA para editar por você.
4. Exporte o vídeo ou baixe o código para usar o template no seu próprio projeto.

Baseado em Checkout Flow do remocn: https://remocn.dev