Programa Visual — Motion

Camada 5 do PVD (parcial) · Marca: BAZEá (slug: bazea)

Sexto subconjunto da Camada 5, depois de 05-programa-visual-cor.md, 05-programa-visual-tipografia.md, 05-programa-visual-grid.md, 05-programa-visual-iconografia.md e 05-programa-visual-componentes.md. Fechado por definitivo em 2026-08-16 — aprovado por Alan, construído em entregas/bazea-o05.html.

Depende de: componentes (a escala de elevação, os materiais papel/metal já registrados) e grid (a escala de espaçamento, base do sistema de duração). Alimenta: fotografia, logotipo, Camada 6.

---

1. Contexto

Alan pediu explicitamente "uma biblioteca de motion atualizada, moderna e vibrante como a marca" — e, no mesmo pedido, autorizou explorar a paleta de cor com mais liberdade, com o ensaio ganhando modo claro e modo escuro pela primeira vez. Isso trouxe uma tensão real que precisava ser resolvida antes de desenhar qualquer curva: a doutrina já recusou o glitch desde o02, porque "glitch comunica instabilidade, e a marca vende permanência" (04-linguagem-visual.md, recusado por doutrina). Um motion "vibrante" no sentido comum — quique, elástico, mola — pertence à mesma família de instabilidade. Entregar isso contradiria uma decisão já registrada, aprovada por Alan.

A resolução: vibrância não precisa vir de instabilidade. Vem de movimento com massa — curvas derivadas dos materiais que a marca já registrou (papel, metal), não de uma biblioteca de física genérica.

2. Por que as curvas são derivadas, não importadas

Pesquisa de duas fontes citáveis, para não repetir o padrão já recusado de "instalar referência pronta como veio":

IBM Carbon Design System — o motion system mais documentado publicamente com valores numéricos abertos. Declara duas famílias de easing, produtiva e expressiva, com curvas padrão/entrada/saída, e é explícito sobre o modelo físico: "elements on the screen should speed up quickly and slow down smoothly, obeying the physics of a light-weight material" — a física de um material leve.

Duração: fast-01 70ms, fast-02 110ms, moderate-01 150ms, moderate-02 240ms, slow-01 400ms, slow-02 700ms.

Isso não pôde ser adotado como veio. Os materiais que a BAZEá já registrou — papel empilhado e metal prensado, em 05-programa-visual-componentes.md §4.1 — são o oposto de "material leve". Copiar a curva do Carbon seria a mesma forma de erro já recusada no amarelo e no losango: pegar emprestado sem checar se o sentido bate.

Disney, os 12 princípios de animação (via literatura secundária consultada por busca — Slow In/Slow Out, Peso, Follow Through) — confirmam o princípio geral (objetos reais aceleram e desaceleram, não se movem a velocidade constante) sem prescrever números. Serviram para validar a lógica de derivação por material, não como fonte de curva.

Fontes: carbondesignsystem.com/elements/motion e v10.carbondesignsystem.com/guidelines/motion/overview, consultadas em 2026-08-16; literatura sobre os 12 princípios de animação de Disney aplicados a UI (múltiplas fontes secundárias, mesma data).

3. As curvas — derivadas do material, não da física genérica

Cada curva tem correspondência de uso com um componente já rastreado em 05-programa-visual-componentes.md: papel → .sheet/etiquetas/selo; metal → toggle/botão 3D/troca de tema; tinta → estados de formulário, quando existirem (ainda em aberto).

4. A escala de duração — 10ms × token de espaçamento

O multiplicador (10ms por px do token) não foi escolhido a dedo: é o que faz o piso da escala (8px) cair em 80ms — o limiar prático abaixo do qual um deslocamento lê como corte/salto em vez de movimento — e o teto (80px) cair em 800ms, o limite antes de um gesto expressivo começar a ler como lentidão. --mo-passo (40ms, meia-unidade da escala) rege o escalonamento entre elementos — mesmo precedente da meia-linha (12,8px) já usada no ritmo vertical do grid.

5. Escalonamento — de onde vem o "vibrante"

Dez elementos entrando em cascata de 40ms cada são vividos sem que nenhum precise quicar. Vibrância, nesta doutrina, vem de três fontes que não são instabilidade:

1. Velocidade — resposta em 80ms lê como decisão, não hesitação.
2. Orquestração — escalonamento em cascata (seção 4).
3. Cor em movimento — o Sinal pulsando no que está em aberto (.live, já existente desde o02/o03).

6. Recusado por doutrina, não por gosto

• Quique, mola, elástico (cubic-bezier com overshoot, spring()) — nenhum dos três materiais registrados quica: papel tem arrasto mas não rebate, metal prensado é rígido, tinta não volta depois do traço. Ultrapassar o alvo visual e voltar é imprecisão, e a marca vende precisão. É também, estruturalmente, a mesma família do glitch já recusado — comunica instabilidade.
• Curvas prontas de sistema alheio (Carbon e equivalentes) — modelam material leve; os materiais desta marca são pesados. Usar a curva seria a curva mentindo sobre a matéria que move.
• Parallax como ornamento — a referência que abriu esta pesquisa (Framer University, "Insane Parallax Animation", "Parallax Image Scroll") é bonita, mas mover camadas em velocidades diferentes só se justifica onde profundidade significa alguma coisa. Aplicado a texto de doutrina, é efeito sem função. Registrado aqui como referência parcada — não descartada, sem aplicação ainda.
• Animação de entrada em tudo — se cada elemento entra animado, nenhum chama atenção. Mesma disciplina 60-30-10 já fechada na cor.

7. Acessibilidade — não é opcional

Transtorno vestibular é real: animação não solicitada provoca náusea, vertigem e desorientação em quem convive com ele. O critério 2.3.3 da WCAG ("Animation from Interactions") exige que animação disparada por interação possa ser desligada. prefers-reduced-motion é o mecanismo padrão do navegador para isso.

No bazea-o05.html: toda transição respeita prefers-reduced-motion: reduce (herdado do mecanismo já existente desde o02 — grão, reveal por IntersectionObserver, agora estendido às transições de tema e ao laboratório de motion). Nenhum conteúdo depende de animação para existir — é a mesma regra que já fechou a rastreabilidade clicável (Camada 5, tipografia): o mecanismo pode falhar ou ser desligado sem que a informação suma.

Fonte: W3C, "Understanding Success Criterion 2.3.3: Animation from Interactions", w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html, consultado em 2026-08-16.

8. Modo claro e modo escuro — motion como parte do sistema, não add-on

O pedido de Alan incluiu modo claro pela primeira vez em qualquer ensaio. Isso não é só paleta invertida — a elevação muda de mecanismo entre os dois modos (já registrado em 05-programa-visual-componentes.md §4.1, agora com a mecânica de transição): no escuro, o que sobe fica mais claro, como uma peça erguida sob a lâmpada da bancada; no claro, o que sobe projeta sombra, como a prancheta na luz do dia. A transição entre temas usa --mo-3/--e-papel — a troca de tema É uma transição de papel: a luz muda, não a matéria.

Achado real durante a construção — auditoria de contraste, não prevista no escopo original. Ao verificar que o sistema de dois temas não quebrava nada, uma varredura sistemática (não visual — o CLAUDE.md já documenta que o preview deste projeto não renderiza de forma confiável) encontrou bugs de contraste WCAG reais e não relacionados a este documento, herdados de bazea-o04.html desde o02/o03 e nunca antes medidos:

1. .origin b e variantes (Sinal como texto dentro de caixa clara tipo "folha") reprovavam a 1,93 — o token usado (--signal-txt, calibrado para o fundo escuro da página) estava sendo aplicado sobre vellum-2 (sempre claro). Corrigido com um token novo, --signal-vellum, constante nos dois modos (4,94 AA) — mesmo padrão que já existia para --steel-vellum (criado antes, para o mesmo problema com Conferido).
2. Colisão de nome de classe: o novo interruptor de tema usou .sw, que já era o nome do grid de swatches de cor desde o03. As duas regras se fundiram e colapsaram o grid de paleta inteiro numa caixa de 52×29px. Renomeado para .swtog.
3. --steel usado tanto como texto (precisa reagir ao tema) quanto como cor de preenchimento de swatch (precisa ser constante) — a barra de proporção de margem (.marginratio) ficou com texto escuro sobre preenchimento que também escureceu no modo claro. Separado em --steel (texto, reage ao tema) e --steel-fill (preenchimento, constante).
4. --paper-d usado como "tinta escura garantida" em vez de "cor de fundo da página" em dois lugares (.marginratio, mostrador de camada) — funciona por acidente no escuro, mas --paper-d também reage ao tema, então vira claro no modo claro e o texto some. Trocado por --ink, que é de fato constante.
5. --amarelo hardcoded (#c9a900) em vez de token, e sem variante clara — reprovava a 1,63 no modo claro. Tornado tema-reativo (#c9a900 escuro / #6d5b00 claro).
6. .tensao2__sw code usava --bone-faint (claro, pensado pra fundo escuro) sobre o próprio fundo claro do <code>. Trocado por --ink-soft.
7. --ink-faint estava calibrado errado — 3,40 contra o fundo de tabela real (vellum-2), não os 4,58 que o cálculo original presumia. Corrigido para #625e56.

Todos os sete corrigidos e reverificados por varredura completa do documento nos dois modos: zero elementos abaixo de 4,5:1 (texto normal) ou 3:1 (texto grande) ao final. Nenhum desses bugs foi introduzido por este documento — a introdução do segundo tema apenas os tornou visíveis pela primeira vez, porque nunca tinham sido medidos, só "pareciam" legíveis no único modo que existia.

9. Em aberto

1. Aplicação em componentes de formulário/navegação real — aguardando tela real (mesma trava de 05-programa-visual-componentes.md §6).
2. Parallax — método registrado (seção 6), sem peça onde profundidade seja informação real ainda.
3. Motion de fotografia (crossfade, ken burns) — fotografia fechou em 2026-08-17 (fonte: produção própria, sempre); aguarda a produção fotográfica real, que ainda não tem data.
4. Auditoria de contraste como processo recorrente — os sete achados da seção 8 sugerem que qualquer mudança futura de tokens de cor deveria passar por varredura automatizada antes de publicar, não só verificação visual pontual. Não formalizado como processo ainda.

---

Rastreabilidade → Elemento (PROGRAMA), seed