Generador de curvas Bézier cúbicas

Escribir cubic-bezier(x1, y1, x2, y2) a mano y recargar la página para comprobar la sensación es una forma lenta de ajustar una animación. Este generador cierra ese ciclo: arrastra cualquiera de los tiradores de los puntos de control sobre la curva o escribe los números exactos en los campos x1/y1/x2/y2, y la curva, el código CSS listo para copiar y la vista previa animada se actualizan con cada cambio, sin proceso de compilación y sin necesidad de recargar.

Los dos ejes funcionan de manera diferente a propósito. x1 y x2 se mantienen acotados entre 0 y 1, porque eso es lo que la especificación de CSS exige realmente de una función de tiempo cubic-bezier(): un valor fuera de ese rango simplemente no es válido. y1 e y2 no tienen ese límite: arrastra un tirador por encima del borde superior del cuadro o por debajo del inferior y la curva sobrepasará su inicio o su final, que es exactamente como se construyen los efectos de muelle y rebote a partir de una única curva de aceleración.

Ver un número no es lo mismo que ver el movimiento, así que la vista previa muestra dos bolas idénticas moviéndose en bucle una junto a la otra: una sigue tu curva personalizada, la otra avanza a un ritmo lineal constante. Verlas competir es la forma más rápida de saber si una curva de aceleración produce realmente la sensación que buscas, antes de llevarla a una hoja de estilos. Las páginas de valores predefinidos —los números reales que hay detrás de la palabra clave ease-in-out de CSS, una aproximación honesta de sobreimpulso que algunos llaman rebote y la curva estándar de Material Design publicada por Google— son puntos de partida listos para usar desde los que puedes arrastrar, en lugar de partir de puntos de control en blanco.

Todo se ejecuta localmente en tu navegador: sin subidas, sin cuentas, sin peticiones al servidor, y el generador sigue funcionando sin conexión una vez que la página ha cargado.