Generator Cubic Bezier

Rancang kurva easing CSS kustom secara visual

Generator cubic-bezier ini mengubah nilai abstrak cubic-bezier(x1, y1, x2, y2) menjadi sesuatu yang bisa Anda lihat dan rasakan. Seret dua pegangan titik kontrol pada grafik untuk membentuk kurva akselerasi, saksikan pratinjau langsung bergerak dengan timing yang persis sama, lalu salin nilai yang siap pakai untuk transisi dan animasi CSS Anda. Ini adalah editor kurva easing sekaligus visualisator cubic-bezier dalam satu halaman yang berjalan sepenuhnya di browser — tanpa instalasi, tanpa akun.

Setiap kurva selalu berjalan dari (0,0) ke (1,1). Sumbu horizontal adalah waktu dan sumbu vertikal adalah progres, sehingga kurva yang naik curam di awal berarti gerakan cepat di awal, dan kurva yang mendatar menjelang akhir berarti pemberhentian yang halus. Anda bisa mengetik angka presisi ke dalam empat kolom input, menyeret pegangan, atau menempel nilai cubic-bezier() yang sudah ada untuk dimuat dan disesuaikan. Hasilnya diperbarui secara real time setiap kali pegangan digerakkan.

Lima kata kunci timing CSS sebenarnya hanyalah alias untuk nilai cubic-bezier tertentu: linear = cubic-bezier(0, 0, 1, 1); ease = cubic-bezier(0.25, 0.1, 0.25, 1.0); ease-in = cubic-bezier(0.42, 0, 1.0, 1.0); ease-out = cubic-bezier(0, 0, 0.58, 1.0); dan ease-in-out = cubic-bezier(0.42, 0, 0.58, 1.0). Setiap browser menerjemahkan kata kunci tersebut menjadi bentuk empat angka ini sebelum menghitung animasi, jadi transition-timing-function: ease dan cubic-bezier(0.25, 0.1, 0.25, 1) menghasilkan efek yang identik.

30+ preset: kata kunci CSS dan kurva easing bernama

Bilah preset menggabungkan dua hal yang biasanya dipisahkan oleh tool pesaing. Anda mendapatkan lima kata kunci CSS — linear, ease, ease-in, ease-out, dan ease-in-out — ditambah katalog lengkap kurva easing bernama yang dipopulerkan easings.net: Sine, Quad, Cubic, Quart, Quint, Expo, Circ, dan Back, masing-masing dalam varian In, Out, dan In-Out. Artinya easeInOutCubic, easeOutQuart, easeOutBack, dan lainnya hanya berjarak satu klik, sudah dikonversi menjadi nilai css cubic-bezier.

Setiap preset menampilkan thumbnail kurva kecil sehingga Anda bisa mengenali bentuknya sekilas, lalu memuatnya langsung ke editor untuk disempurnakan. Easings.net hanya menampilkan daftar nama dan gambar statis — Anda tidak bisa mengedit atau mengekspor dari sana. cubic-bezier.com menampilkan lima kata kunci CSS tetapi tidak menyediakan set Penner lengkap. Tool ini memberi Anda keduanya, lengkap dengan kemampuan editing, dalam satu tempat. Sebagai contoh konversi: easeInOutQuad = cubic-bezier(0.45, 0, 0.55, 1), easeOutCubic = cubic-bezier(0.33, 1, 0.68, 1), dan easeInOutCubic = cubic-bezier(0.65, 0, 0.35, 1).

Overshoot, bounce, dan antisipasi

Nilai y pada cubic-bezier tidak terbatas pada rentang 0–1. Dorong pegangan ke atas kotak dan animasi akan melampaui targetnya sebelum kembali menetap — sensasi pegas dari easeOutBack = cubic-bezier(0.34, 1.56, 0.64, 1). Tarik pegangan ke bawah kotak dan elemen akan bergerak mundur dulu, seperti ancang-ancang sebelum melompat. Grafik editor ini meluas melampaui kotak unit sehingga Anda bisa menyeret ke wilayah overshoot dan langsung melihat hasilnya. Overshoot 'back' yang populer adalah cubic-bezier(0.68, -0.55, 0.27, 1.55).

Perlu dicatat, nilai x (waktu) selalu dibatasi pada rentang 0–1 agar fungsi timing tetap valid — tidak ada pembalikan waktu. Selain itu, efek multi-bounce sejati (bola yang memantul beberapa kali) tidak bisa dibuat dengan satu cubic-bezier karena hanya ada satu kurva; gunakan animasi @keyframes CSS atau ease bounce dari GSAP untuk itu. Tool ini mengekspor kode @keyframes dan GSAP CustomEase persis untuk kasus tersebut.

Chrome DevTools memiliki editor cubic-bezier bawaan tetapi mengunci pegangan di dalam kotak 0–1, sehingga Anda tidak bisa membuat efek overshoot atau antisipasi di sana. Firefox DevTools punya keterbatasan yang sama. Keduanya juga tidak memiliki katalog preset bernama dan opsi ekspor yang Anda dapatkan di sini. Jika Anda butuh overshoot, ini adalah salah satu dari sedikit tool yang benar-benar mendukungnya.

Perbandingan dengan tool cubic-bezier lainnya

cubic-bezier.com karya Lea Verou adalah referensi yang mempopulerkan format seret-dan-pratinjau, dan tetap sangat baik untuk membuat kurva CSS dengan cepat. Namun tool itu tidak punya ekspor GSAP, tidak menghasilkan fungsi easing JavaScript, tidak ada mode compare, tidak ada pustaka preset Penner, dan antarmukanya bermasalah di perangkat mobile. Easings.net adalah referensi baca-saja — Anda memilih kurva bernama dan melihat nilainya, tetapi tidak ada editor dan tidak ada yang bisa disesuaikan.

Chrome dan Firefox DevTools masing-masing menyertakan editor cubic-bezier ringan di dalam inspector, yang praktis saat Anda sudah membuka DevTools. Kompromi-nya: editor itu tidak bisa digunakan tanpa DevTools terbuka, pegangannya dikunci di 0–1 (tanpa overshoot), tidak bisa mengekspor kode GSAP atau JS, dan sama sekali tidak berfungsi di mobile. Generator UtiloKit menggabungkan editor interaktif, pustaka preset, alat perbandingan, dan tiga format ekspor dalam satu halaman yang berjalan di perangkat apa pun — termasuk iPhone dan Android, teruji di iOS Safari dan Android Chrome, dengan pegangan seret yang cukup besar untuk jari.

Pratinjau langsung dan mode compare berdampingan

Tekan tombol play dan sebuah elemen demo akan bergerak berulang mengikuti kurva Anda, sehingga Anda menilai gerakannya, bukan sekadar angkanya. Ganti demo antara translate, scale, dan opacity serta sesuaikan durasinya agar cocok dengan animasi Anda yang sebenarnya. Aktifkan Compare untuk menempatkan kurva kedua di samping kurva pertama — sempurna untuk memilih transition timing function yang tepat sebelum masuk ke produksi.

Slider durasi mengatur kecepatan pratinjau dari 200ms hingga 3 detik, sehingga Anda bisa menguji bagaimana kurva yang sama terasa pada kecepatan berbeda. Pratinjau gerak lambat sering mengungkap masalah — seperti tersendat di awal — yang tak terlihat pada durasi 300ms. Sebagian besar tool lain, termasuk cubic-bezier.com, hanya menampilkan pratinjau pada satu kecepatan tetap dan tidak menawarkan perbandingan berdampingan.

Ekspor ke CSS, GSAP, dan JavaScript — gratis

Salin sesuai kebutuhan stack Anda. Tab CSS memberikan satu baris transition sekaligus blok animasi @keyframes lengkap. Tab GSAP menghasilkan pemanggilan CustomEase.create() sehingga animasi GSAP Anda cocok persis dengan kurvanya. Tab JS membuat fungsi easing javascript cubic-bezier mandiri — solver Newton-Raphson yang bisa Anda tempel langsung ke requestAnimationFrame atau tween loop apa pun tanpa dependensi. Pengguna Framer Motion cukup meneruskan empat angka tersebut ke prop ease sebagai array.

Menemukan kurva yang Anda suka? Bagikan. Tool ini menyandikan keempat nilai ke dalam URL halaman, sehingga sebuah tautan mereproduksi easing Anda persis sama di perangkat mana pun. Semuanya berjalan di browser Anda — tidak ada yang diunggah, disimpan, atau dicatat — dan sepenuhnya gratis tanpa perlu mendaftar.

Matematika dan sejarah di balik kurva Bézier

Pierre Bézier, insinyur Prancis di Renault, dan Paul de Casteljau, insinyur di pabrikan pesaing Citroën, secara independen menemukan kurva parametrik yang kini menyandang nama Bézier — keduanya berusaha mendeskripsikan permukaan bodi mobil yang mulus secara matematis pada era 1960-an. Algoritma rekursif de Casteljau lahir lebih dulu pada 1959 tetapi dirahasiakan oleh Citroën; Bézier memublikasikan formulasinya pada 1962, itulah sebabnya kurva ini membawa namanya di sebagian besar buku teks. Wawasan intinya: sejumlah kecil titik kontrol dapat sepenuhnya mendefinisikan kurva mulus yang dapat diskalakan tanpa batas, tanpa perlu menyimpan ribuan koordinat.

Definisi parametrik kurva Bézier kubik adalah P(t) = (1−t)³P₀ + 3(1−t)²t·P₁ + 3(1−t)t²·P₂ + t³·P₃ dengan t bergerak dari 0 hingga 1. P₀ adalah titik awal, P₃ titik akhir, sementara P₁ dan P₂ adalah dua pegangan kontrol yang menarik kurva ke arahnya tanpa kurva benar-benar melewatinya. Salah satu sifat terpentingnya adalah convex hull property: kurva selalu berada sepenuhnya di dalam convex hull — poligon cembung terkecil — yang memuat keempat titik kontrol. Jaminan geometris inilah yang membuat kurva Bézier stabil untuk rekayasa dan rendering. Kurva ini juga terdegradasi dengan anggun: jika P₁ = P₀ maka kubik tereduksi menjadi Bézier kuadratik; jika P₁ = P₀ dan P₂ = P₃ ia runtuh menjadi interpolasi linear lurus.

Kurva Bézier juga menjadi geometri fundamental tipografi digital: font PostScript/Type 1 buatan Adobe memakai Bézier kubik, sementara TrueType dari Apple dan Microsoft memakai Bézier kuadratik yang lebih sederhana; OpenType mendukung keduanya. Di SVG, kurva Bézier muncul sebagai perintah path dalam atribut d — C x1,y1 x2,y2 x,y untuk kubik dan Q x1,y1 x,y untuk kuadratik. Pen tool di Adobe Illustrator, motion path di After Effects, hingga NURBS dalam grafika 3D — semuanya mewarisi matematika yang sama yang diterapkan Pierre Bézier pada panel bodi Renault pada 1962.

Fisika gerakan alami dan easing dalam desain UI

Gerakan linear terlihat mekanis karena tidak ada benda di dunia nyata yang bergerak dengan kecepatan konstan. Setiap objek nyata punya inersia: dibutuhkan gaya untuk berakselerasi dari diam dan gaya untuk melambat hingga berhenti. Saat elemen UI bergerak secara linear — panel yang bergeser, kartu yang mengembang, modal yang memudar — gerakannya terasa robotik dan mengganggu sistem visual manusia, bahkan ketika pengguna tidak bisa menjelaskan alasannya secara sadar. Solusinya adalah easing: menerapkan kurva yang meniru profil akselerasi dan deselerasi objek fisik sungguhan.

Empat kategori easing masing-masing menangkap skenario fisik yang berbeda. Ease-in (mulai lambat, akhir cepat) terasa seperti benda jatuh atau dilempar — alami untuk elemen yang meninggalkan layar. Ease-out (mulai cepat, akhir lambat) meniru objek yang melambat hingga berhenti — pilihan paling alami untuk elemen yang muncul di layar, karena terlihat bertujuan dan menetap dengan tenang. Ease-in-out (lambat di kedua ujung, cepat di tengah) cocok untuk elemen yang melintasi layar dan butuh peluncuran serta pendaratan yang mulus. Kategori keempat — ease-out dengan sedikit overshoot, dicontohkan oleh kurva standar Material Design — menambahkan pantulan mikro seperti pegas di akhir, memperkuat kesan massa fisik yang berhenti pada sebuah batas.

Landasan teori desain gerak UI modern berakar pada buku Disney tahun 1981, The Illusion of Life, yang mengodifikasi 12 prinsip animasi termasuk squash and stretch, anticipation, dan follow-through. Anticipation (gerakan mundur singkat sebelum aksi utama) dan follow-through (overshoot yang terkoreksi setelah gerakan utama berhenti) adalah persis efek yang dihasilkan nilai y cubic-bezier di bawah 0 dan di atas 1 pada CSS. Alasan ease-out menjadi rekomendasi default untuk kebanyakan animasi UI juga berakar pada prinsip ini: elemen yang melambat saat tiba di layar terkesan datang dengan sengaja, sementara ease-in terasa seperti antarmuka yang terbang menjauhi Anda.