Gerador de Curvas Bézier Cúbicas

Escrever cubic-bezier(x1, y1, x2, y2) manualmente e recarregar a página para verificar a sensação é uma forma lenta de afinar uma animação. Este gerador fecha esse ciclo: arraste um dos pontos de controlo na curva ou introduza números exatos nos campos x1/y1/x2/y2, e a curva, o código CSS pronto a copiar e a pré-visualização da animação em direto atualizam-se a cada alteração — sem passo de compilação, sem recarregamento.

Os dois eixos funcionam de forma diferente, e isso é intencional. x1 e x2 permanecem limitados entre 0 e 1, porque é exatamente isso que a especificação do CSS exige de uma função de temporização cubic-bezier() — um valor fora desse intervalo é simplesmente inválido. y1 e y2 não têm essa limitação: arraste um ponto acima do topo ou abaixo da base da caixa e a curva ultrapassa o seu início ou fim, que é precisamente como se constroem efeitos de mola e ricochete a partir de uma única curva de easing.

Ver um número não é o mesmo que ver o movimento, por isso a pré-visualização mostra duas bolas idênticas lado a lado em ciclo: uma move-se usando a sua curva personalizada, a outra move-se a um ritmo linear constante. Vê-las em corrida é a forma mais rápida de perceber se uma curva de easing produz realmente a sensação pretendida, antes sequer de chegar a uma folha de estilos. As páginas de predefinições — os números reais por trás da palavra-chave ease-in-out do próprio CSS, uma aproximação honesta de ultrapassagem a que alguns chamam ricochete e a curva padrão do Material Design publicada pela Google — são pontos de partida prontos de onde pode começar a arrastar, em vez de pontos de controlo em branco.

Tudo funciona localmente no seu browser: sem envio de dados, sem conta, sem comunicação com o servidor, e o gerador mantém-se operacional offline depois de a página ser carregada.