Editor de Cubic Bezier

Editor de Cubic Bezier - Gerador Visual de Curvas Easing CSS

Desenhe curvas de easing personalizadas para CSS com um editor visual interativo. Arraste dois pontos de controle para moldar qualquer função cubic-bezier(), veja a animação ao vivo e compare com palavras-chave padrão como ease-in-out. Copie o código CSS pronto para colar em transições e animações.

O que é uma função cubic-bezier() no CSS?

Uma função cubic-bezier() descreve como uma transição ou animação CSS progride ao longo do tempo. Em vez de andar a velocidade constante, a animação pode acelerar, desacelerar, ultrapassar a meta ou quicar de acordo com uma curva definida por quatro números.

Sintaxe: cubic-bezier(x1, y1, x2, y2)

A curva sempre começa em (0, 0) e termina em (1, 1). Os pontos de controle P1 = (x1, y1) e P2 = (x2, y2) deformam a curva. O eixo X representa o tempo (0 a 1) e o eixo Y representa o progresso da animação.

Se a curva sobe rapidamente no início, a animação começa rápida. Se sobe devagar e acelera depois, sente-se um ease-in. Quando os valores Y saem do intervalo [0, 1], a animação ultrapassa o destino — é assim que surgem os efeitos back/bounce.

Como usar este editor de cubic-bezier?

Três formas de criar a curva:

1. Arraste os dois controles azuis no canvas para remodelar a curva visualmente. Eles correspondem a P1 e P2 em cubic-bezier(x1, y1, x2, y2).
2. Digite valores exatos nos campos X1/Y1/X2/Y2 se precisar de precisão.
3. Clique em qualquer predefinição (ease, ease-in-out, ease-out-back, etc.) para carregar uma curva conhecida e modificá-la.

Depois clique em Reproduzir para ver uma bolinha animada com o seu easing. Use o menu Comparar para rodar uma segunda bolinha com uma palavra-chave CSS padrão e perceber a diferença. O código CSS aparece embaixo — clique em Copiar para colar na sua folha de estilo.

Para acessibilidade, os controles recebem foco com Tab e movem-se com as setas (Shift para passos maiores).

Diferença entre ease, ease-in, ease-out e ease-in-out?

São as quatro palavras-chave de easing padrão do CSS e cada uma equivale a um cubic-bezier() específico:

- ease: cubic-bezier(0.25, 0.1, 0.25, 1) — início rápido, fim lento. Valor padrão quando não se especifica timing function.
- ease-in: cubic-bezier(0.42, 0, 1, 1) — início lento, acelera no fim. Útil quando um elemento sai da tela.
- ease-out: cubic-bezier(0, 0, 0.58, 1) — início rápido, desacelera no fim. Ideal para elementos que entram na tela.
- ease-in-out: cubic-bezier(0.42, 0, 0.58, 1) — lento nos dois extremos, rápido no meio. Simétrico e natural.

Obs.: 'linear' equivale a cubic-bezier(0, 0, 1, 1) — velocidade constante sem easing. Para a maioria das animações de UI, ease-out é a escolha mais polida pois transmite inércia física.

O que são curvas overshoot e anticipation?

Curvas overshoot empurram a animação além do valor final antes de se acomodar, criando um efeito de quique ou 'back' divertido. Anticipation faz o oposto: recua um pouco antes de avançar, imitando como um objeto real toma impulso.

Em cubic-bezier(), isso é feito com valores Y fora do intervalo [0, 1]:

- Overshoot (ease-out-back): cubic-bezier(0.34, 1.56, 0.64, 1) — o Y do segundo ponto passa de 1, a curva ultrapassa 100% antes de estabilizar.
- Anticipation (ease-in-back): cubic-bezier(0.36, 0, 0.66, -0.56) — o Y do segundo ponto é negativo, o valor cai abaixo de 0 momentaneamente.
- Forte em ambos os lados: cubic-bezier(0.68, -0.6, 0.32, 1.6).

Este editor permite Y entre -2 e 2 para você experimentar livremente. Esses easings funcionam ótimo em modais, marcas de sucesso e animações que precisam de personalidade.

Onde uso o valor cubic-bezier() gerado?

Cole em qualquer propriedade timing-function do CSS. Os dois casos mais comuns:

1. transition-timing-function em uma transição:
.button {
transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

2. animation-timing-function em @keyframes:
.card {
animation: fadeIn 600ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

O valor também funciona em bibliotecas de animação:
- Framer Motion: transition={{ ease: [0.34, 1.56, 0.64, 1] }}
- GSAP: gsap.to(el, { x: 100, ease: 'cubicBezier(0.34, 1.56, 0.64, 1)' })
- Web Animations API: el.animate(frames, { easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)' })

Alguns sistemas como Material Design 3 publicam tokens cubic-bezier recomendados — digite-os em X1/Y1/X2/Y2 para visualizar.

Por que os valores X são limitados a 0–1?

As coordenadas X (x1 e x2) precisam ficar entre 0 e 1, e este editor força isso automaticamente. Motivo matemático: o eixo X representa o tempo, que deve avançar monotonicamente. Se um ponto de controle saísse de [0, 1] ou voltasse atrás, a curva poderia se dobrar sobre si mesma, criando dois progressos diferentes para o mesmo instante — comportamento não definido no CSS.

Os valores Y, em compensação, podem sair livremente de [0, 1]. Y representa o progresso, que pode ultrapassar o destino (Y > 1) ou recuar momentaneamente (Y < 0). É isso que possibilita os efeitos back/bounce.

Se você digitar um X fora do intervalo, o editor corta para 0 ou 1 automaticamente.

Qual a diferença para CSS spring() ou linear()?

cubic-bezier() é a função de easing original do CSS, suportada em todos os navegadores desde 2008. Usa dois pontos de controle para descrever uma curva.

Alternativas mais novas:

- Função linear() (CSS Easing Functions Level 2): descreve um easing como uma lista de pontos. Útil para curvas arbitrárias ou medidas — por exemplo, molas com vários quiques que um bezier não consegue representar. Suporte em Chromium moderno, Safari 17.4+ e Firefox 112+.

- @starting-style e view transitions continuam usando funções de easing padrão como cubic-bezier().

- Spring physics (Framer Motion, React Spring) é outro modelo — simula um sistema massa-mola em vez de avaliar uma curva fixa.

Para CSS em produção hoje, cubic-bezier() permanece o mais compatível e previsível. Use linear() quando precisar de um quique real (vários picos) que um bezier sozinho não consegue criar.

Esta ferramenta é privada? Envia minhas curvas para algum lugar?

Totalmente privada. Tudo acontece no seu navegador:

- Nenhum dado é enviado a servidores
- Sem contas, sem cadastros e sem rastreamento da sua edição
- Funciona offline depois que a página carrega
- Não carrega bibliotecas externas para o editor — é JavaScript puro
- O código CSS gerado só sai do seu dispositivo quando você decide copiar

Dá para verificar abrindo a aba Rede do navegador enquanto edita a curva: nenhuma requisição aparece. Apenas o carregamento inicial e os recursos comuns do site (fontes, ícones).

Principais Recursos

• Editor de curva interativo com arrastar e soltar
• Dois pontos de controle arrastáveis com atualização em tempo real
• Bolinha de animação que reproduz o seu easing
• Comparação lado a lado com palavras-chave CSS padrão
• Duração de animação ajustável de 0,2s a 4s
• 12 predefinições de easing nomeadas (ease, ease-in-out, ease-out-back e mais)
• Campos numéricos para coordenadas X/Y precisas
• Suporta overshoot e anticipation (Y de -2 a 2)
• Gera código CSS cubic-bezier() pronto para copiar
• Exporta transition-timing-function e animation-timing-function
• Pontos de controle acessíveis pelo teclado com setas
• Compatível com Framer Motion, GSAP e Web Animations API
• 100% no cliente, sem envio de dados a servidores
• Funciona offline após o primeiro carregamento
• Modo escuro e layout responsivo amigável ao celular