# Stepper: Interface de etapas de progresso

Um indicador de progresso horizontal de três etapas, Account, Plan e Done, mostrado na segunda etapa. 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/stepper

Preview video: https://subclipweb.subclip.app/motion-graphics-templates/v1/previews/motion-template-remotion-remocn-stepper.mp4?v=acda60c86a

Um indicador de etapas horizontal de onboarding com três etapas nomeadas, em que a etapa ativa pode ser definida para mostrar o progresso.

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

Um indicador de etapas horizontal mostra três etapas, Account, Plan e Done, ligadas por uma linha, com a segunda etapa, Plan, ativa. O template mantém esse estado por quatro segundos. No código, o progresso segue uma posição de etapa contínua, então a linha se preenche e cada etapa acende conforme o fluxo avança.

Você pode definir a etapa ativa, além da velocidade de reprodução e do fundo. Use em um tour de onboarding, uma demo de checkout ou cadastro, um vídeo explicativo de "como funciona em três passos" ou a apresentação de um design system.

## Use para

- Tours de onboarding
- Demos de checkout e cadastro
- Vídeos explicativos em três passos
- Apresentações de design systems

## 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 Stepper 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 Stepper do remocn: https://remocn.dev