Alerta de pagamento
ease-entrance · 800ms
cubic-bezier(0.80, 0.00, 0.20, 1.0)
Entrada com força, desaceleração precisa. Comunica urgência controlada - o usuário sabe que algo precisa de atenção.
Exploração autoral de Motion Design com o objetivo de estruturar uma linguagem única de motion, consistente e escalável, para a Conta Azul
Era o único motion da empresa - atendendo produto e marca. A demanda surgiu do time de marca para o novo Brandbook.
Vi a oportunidade de ir além: criar um sistema que servisse tanto produto quanto marca, aproveitando o que havia em comum - easing, timing, padrões de transição.
Decisão por entrega
Easing e timing redefinidos a cada projeto, sem critério documentado.
Inconsistência
O usuário encontrava comportamentos diferentes dependendo de onde interagia com o produto.
Dependência de pessoa
Qualquer decisão de motion passava por mim. Não escalava.
Analisei sistemas de produto e guias de marca - buscando entender onde os dois territórios se sobrepõem.
IBM Carbon
Categorias productive e expressive - motion com intenção funcional
QuickBooks Bolt
Easing tokens nomeados por contexto de componente
Adobe Spectrum
Princípios funcionais - motion que comunica estado
Nubank
Motion sistemático em produto financeiro - escalável e acessível
Audi CI
Easing como atributo de personalidade antes de qualquer palavra
Kaspersky · Unity · Compass · Material · Vevo · Vivo · Atlassian
Decisão, não feeling
Toda escolha de easing e timing deve referenciar um token. Se não existe token para o contexto, cria-se um novo.
Simetria de easing
Entrada e saída sempre simétricas: X1 + X2 = 1. O movimento não tem peso visual diferente em direções opostas.
Confiança pelo controle
A curva acentuada transmite precisão e intenção. Motion reflete a personalidade de um produto financeiro sério.
Sistema que transfere
Qualquer designer do time deve conseguir tomar a decisão certa sem me consultar. Conhecimento, não dependência.
Range 60-90% · Simetria obrigatória X1 + X2 = 1
Curvas Bézier sobrepostas
Selecione um easing para destacar a curva sem esconder as outras.
Cada duration carrega seu easing paired - a decisão vem embalada.
Regra geral: quanto mais pronunciada a curva, mais tempo ela precisa para ser percebida como intenção, não como corte.
Transições entram quando há mudança de estado, hierarquia ou continuidade entre elementos. O token combina intenção, duration e easing.
Transparência
Use para revelar feedbacks leves, overlays e mudanças de estado que não reorganizam a interface — hover, tooltip, estado disabled.
Scale
Use quando um elemento ganha ou perde ênfase sem mudar o contexto — hover de destaque, foco em card, expansão de componente.
Morphing
Use para mudanças de forma entre estados relacionados. A curva acentuada do ease-default cria um jump cut no pico de velocidade — o olho não percebe a troca, a transição some.
Conta Azul é um produto B2B de contabilidade - a personalidade do motion é confiante e precisa, não lúdica.
Do
O que o sistema permite
Don't
O que o sistema proíbe
Três animações GSAP feitas para a Conta Azul - tokens de easing aplicados. Não é documentação: é código pronto para o dev encaixar.
Entrada com força, desaceleração precisa. Comunica urgência controlada - o usuário sabe que algo precisa de atenção.
Ver códigoA curva mais acentuada do sistema. O usuário precisa sentir que uma ação financeira importante foi concluída.
Ver códigoLoop suave para duração curta. Mantém o usuário informado sem ocupar o foco durante a espera.
Ver códigoConectar os tokens ao repositório de componentes para que o código consuma as decisões de motion sem intermediação.
Definir criação, nomenclatura, versionamento e depreciação de tokens para o sistema evoluir sem perder consistência.
Transformar padrões de transição em componentes com estados definidos, especificação de handoff e validação no dispositivo real.
Criar uma camada própria para movimentos orgânicos e contínuos, ampliando o sistema além dos comportamentos de interface.
Carregando código local...