Visualizador de Easing e Animação CSS

Ajuste o tempo de animação CSS vendo a curva de easing e uma pré-visualização ao vivo simultaneamente.

Entradas:

• Insira um cubic-bezier(x1, y1, x2, y2) personalizado, escolha uma predefinição nomeada (linear, ease, ease-in/out, ease-in/out-back, ease-in/out-expo, snappy…) ou uma palavra-chave.
• Ajuste duração (ms) e atraso (ms).

O relatório mostra:

• A curva de easing (progresso vs tempo) como SVG, com os dois pontos de controle Bézier, contra uma referência linear tracejada. Curvas com ultrapassagem (y<0 ou y>1, como ease-out-back) são sinalizadas pois produzem ricocheteio mas podem causar saltos de layout.
• Três pré-visualizações ao vivo — translateX, opacity e scale — animadas com o easing CSS real, com botão de repetição.
• CSS pronto para copiar nos formatos transition e @keyframes.

O solver Bézier usa Newton-Raphson com recuo de bissecção para mapear tempo → progresso como os navegadores.