Generatore di Cubic Bezier

Scrivere cubic-bezier(x1, y1, x2, y2) a mano e ricaricare la pagina per verificarne l'effetto è un modo lento per regolare un'animazione. Questo generatore chiude il cerchio: trascina una maniglia di controllo sulla curva o inserisci numeri esatti nei campi x1/y1/x2/y2 e la curva, la stringa CSS copiabile e l'anteprima animata si aggiornano a ogni modifica — senza build, senza ricaricare.

I due assi funzionano in modo diverso per scelta progettuale. x1 e x2 rimangono vincolati tra 0 e 1, perché è ciò che la specifica CSS richiede per una funzione di temporizzazione cubic-bezier() — un valore fuori da questo intervallo semplicemente non è valido. y1 e y2 non hanno questo limite: trascina una maniglia sopra il bordo superiore o sotto quello inferiore e la curva andrà oltre l'inizio o la fine, che è esattamente il modo in cui si creano effetti molla e rimbalzo a partire da una singola curva di easing.

Vedere un numero non è come vedere il movimento, quindi l'anteprima mostra due palline identiche che scorrono affiancate in loop: una si muove con la tua curva personalizzata, l'altra a un passo lineare costante. Vederle gareggiare è il modo più rapido per capire se una curva di easing produce davvero la sensazione desiderata, prima ancora che finisca in un foglio di stile. Le pagine preset — i numeri reali dietro la keyword ease-in-out dei CSS, un'onesta approssimazione con overshoot che alcuni chiamano rimbalzo e la curva standard di Material Design pubblicata da Google — sono punti di partenza già pronti da cui iniziare a modificare, invece che partire da zero.

Tutto funziona in locale nel tuo browser: nessun upload, nessun account, nessun viaggio di andata e ritorno al server, e il generatore continua a funzionare offline dopo che la pagina è stata caricata.