# Settings Toggle Flow: Animação de página de configurações

Um cursor liga um interruptor, escolhe um tema em um seletor, arrasta um controle de volume e clica em Salvar, terminando com um toast de salvo. 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/settings-toggle-flow

Preview video: https://subclipweb.subclip.app/motion-graphics-templates/v1/previews/motion-template-remotion-remocn-settings-toggle-flow.mp4?v=a786adea42

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.

- 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/settings-toggle-flow

Um cartão "Notification settings" aparece e seus controles surgem do desfoque um a um. Um cursor liga o interruptor de notificações, abre o seletor de tema e escolhe a última opção, Dark, e depois arrasta o controle de volume enquanto o valor muda. Ele clica em "Save settings" no canto inferior direito, o botão mostra um check e um toast "Settings saved" aparece e depois se fecha. A animação dura cerca de dez segundos.

Você pode ajustar a velocidade de reprodução e o fundo ao redor da cena e editar os rótulos, as opções e as cores no código. Use em um tour por produto SaaS, uma demo de recurso de preferências, um tutorial de app ou a apresentação de um design system.

## Use para

- Tours por produtos SaaS
- Demos de recursos de preferências
- Tutoriais de apps
- 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 Settings Toggle 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 Settings Toggle Flow do remocn: https://remocn.dev