Jelly UI - Menerapkan efek fisika soft body pada kontrol formulir HTML native

 (jelly-ui.com)
2 poin oleh GN⁺ 11 jam lalu | 1 komentar | Bagikan ke WhatsApp
  • Jelly UI v1.1 adalah library web component tanpa dependensi yang menggabungkan kontrol formulir nyata dengan efek fisika soft body yang empuk, menyediakan 40 custom element
  • Dipasang dengan satu skrip modul, serta mendukung dark mode, pelacakan otomatis tema sistem operasi, perubahan warna aksen, dan tata letak RTL dari kanan ke kiri
  • Tombol menggunakan <button> native, sementara slider memakai input range tersembunyi untuk mempertahankan struktur semantik native bagi operasi keyboard, screen reader, dan partisipasi formulir
  • Menerapkan animasi taktil seperti ditekan, meregang, riak, dan memantul pada berbagai elemen, mulai dari checkbox dan kolom input hingga toast, tab, dan dialog
  • Dengan token warna WCAG AA dan pola ARIA bawaan, Anda dapat membangun antarmuka produk yang aksesibel sambil tetap mempertahankan efek visual yang halus

Instalasi dan tema

  • Jelly UI dapat digunakan tanpa dependensi, hanya dengan 40 custom element dan satu tag <script type="module"> 
    <script type="module" src="https://jelly-ui.com/package.js"></script>;

<jelly-theme mode="auto">
  <jelly-button variant="mint">Publish</jelly-button>
</jelly-theme>
  • <jelly-theme> adalah penyedia tema yang menerapkan token desain secara terbatas pada subtree di bawahnya
    • mode mendukung auto, light, dan dark, sehingga dapat mengikuti pengaturan sistem operasi atau memaksa tema tertentu
    • accent dapat digunakan untuk menetapkan ulang warna aksen
  • Variasi warna umum mencakup azure, rose, amber, mint, graphite, platinum, white, sementara ukuran umumnya terdiri dari small, medium, large

Tombol dan elemen aksi

  • <jelly-button> adalah tombol berbentuk kapsul yang memasukkan <button> native sungguhan di dalamnya untuk mendukung keyboard dan screen reader
    • Dapat mengatur warna, ukuran, bentuk pill atau square, status nonaktif, dan tata letak blok
  • <jelly-icon-button> adalah tombol persegi atau bundar yang disesuaikan untuk satu ikon
    • Atribut label digunakan untuk menentukan nama yang dikenali screen reader

Kontrol input formulir

  • <jelly-checkbox> berpartisipasi dalam formulir, mendukung checked dan status tidak tentu (indeterminate), dan saat status berubah, kotak jelly memantul ke atas
  • <jelly-input> adalah kolom input satu baris untuk text, email, dan password
    • Saat mendapat fokus, permukaannya terangkat dan border muncul; setiap kali mengetik, riak menyebar dari posisi kursor
    • Mendukung disabled dan readonly
  • <jelly-label> terhubung ke kontrol melalui for
    • Saat diklik, fokus berpindah ke target dan teks label menjadi nama yang aksesibel; status wajib dan ukuran dapat ditentukan
  • <jelly-otp> adalah input kode sekali pakai yang menyediakan satu kotak untuk setiap digit
    • Menangani input, backspace, tombol panah, dan paste, serta dapat mengatur panjang, warna, ukuran, dan status nonaktif
  • <jelly-radio> membentuk grup antar item yang berbagi name yang sama dalam root yang sama
    • Mendukung tabindex yang dapat berpindah dan navigasi tombol panah yang mempertimbangkan arah dokumen
  • <jelly-radio-group> adalah kontainer radiogroup berlabel untuk jelly-radio
    • Menyediakan legend, tata letak alur horizontal atau vertikal, dan penerusan ukuran ke elemen anak
  • <jelly-range> adalah slider dua handle untuk memilih rentang nilai minimum dan maksimum
    • Menerapkan role="slider", fokus, dan ARIA pada kedua handle; saat diseret, handle jelly akan tertekan
  • <jelly-segmented> adalah track berbentuk kapsul yang berisi pilihan yang saling eksklusif
    • Indikator pilihan bergerak di antara segmen sambil miring dan meregang seperti pil jelly
  • <jelly-select> adalah dropdown yang terhubung ke formulir dan menggunakan pola ARIA combobox/listbox
    • Trigger dan panel opsi sama-sama tersusun dari permukaan soft body
    • Panel terbuka dari field, dan jika ruang di bawah tidak cukup, panel beralih ke atas
  • <jelly-slider> adalah slider untuk memilih satu nilai
    • Input range native tersembunyi menangani struktur semantik dan partisipasi formulir, sementara di layar ditampilkan handle jelly yang dapat ditekan
  • <jelly-switch> adalah switch yang dapat diseret; handle-nya meregang seperti tetesan cairan, dan warna off/on berganti silang
  • <jelly-textarea> otomatis membesar di antara tinggi minimum dan maksimum sesuai input multi-baris
    • Permukaannya juga meregang mengikuti tinggi, riak muncul dari posisi kursor saat mengetik, dan mendukung disabled serta readonly

Status dan umpan balik

  • <jelly-alert> adalah banner yang menyediakan empat tone: info, success, warning, danger, serta tombol tutup opsional
  • <jelly-badge> adalah elemen kecil untuk badge, tag, atau indikator status, yang memantul saat teks berubah
    • Dapat mengatur bentuk isi atau outline, bentuk pil atau persegi, serta perilaku live dan instant
  • <jelly-progress> adalah progress bar yang bagian depan isiannya bergoyang mengikuti progres
    • Dalam mode tidak tentu, gumpalan memantul di antara kedua dinding
  • <jelly-skeleton> adalah placeholder loading yang bergoyang lembut seperti bernapas, bukan berkilau
    • Mendukung bentuk line, rect, dan circle
  • <jelly-spinner> menyediakan indikator dots berbentuk gumpalan lendir yang bergerak di antara tiga titik, serta indikator blob yang berputar sambil berubah bentuk
  • <jelly-toaster> mengelola notifikasi toast yang muncul dari arah ujung inline lalu menghilang
    • Umumnya dipanggil dengan helper jellyToast('Saved!', { tone: 'success' })
    • Jika elemen yang ditempatkan diberi position="bottom", tumpukan notifikasi akan tumbuh ke atas

Permukaan konten

  • <jelly-accordion> mengelompokkan beberapa item <jelly-collapsible>
    • Dalam mode single, saat satu item terbuka, item lain menutup dengan efek memantul
  • <jelly-card> adalah kontainer permukaan jelly yang berada di bawah konten
    • Jika squish ditambahkan, elemen akan berperan sebagai tombol sambil tertekan seperti bantalan lembut
  • <jelly-chip> dapat digunakan sebagai label statis, filter yang dapat di-toggle, atau tag yang dapat dihapus
    • Mengatur apakah dapat dipilih, status terpilih, dapat dihapus, dan nonaktif
  • <jelly-collapsible> adalah area buka/tutup yang membuka dan menutup panel dengan efek memantul melalui tombol header
    • Disusun agar permukaannya yang bergerak, bukan teksnya
  • <jelly-divider> adalah garis pemisah tipis horizontal, vertikal, atau berlabel
  • <jelly-kbd> adalah keycap jelly yang bisa ditekan
    • Jika dikaitkan dengan tombol nyata melalui key, keycap juga akan turun selama tombol tersebut ditekan di mana pun pada halaman

Navigasi dan tata letak

  • <jelly-resizable> adalah grid panel yang ukurannya dapat disesuaikan dengan menyeret divider jelly atau menggunakan keyboard
    • Mendukung arah row, vertical, dan both
  • <jelly-tabs> adalah tampilan tab yang menggunakan struktur semantik tablist sungguhan
    • Indikator pilihan berbentuk pil jelly bergerak, dan panel tab muncul dengan efek memantul

Overlay

  • <jelly-dialog> adalah dialog modal yang muncul dengan pantulan seperti jelly
    • Mengunci halaman dan mengembalikan fokus ke posisi sebelumnya setelah ditutup
    • Dapat ditutup dengan tombol Escape, tombol tutup, atau klik latar belakang
  • <jelly-drawer> adalah floating sheet yang muncul dengan efek pegas, sedikit melewati ujung lalu kembali
    • Dapat dibuka dari awal atau akhir inline, atau dari bawah
  • <jelly-popover> adalah panel non-modal yang dibuka dengan klik
    • Terkunci pada trigger dan tertutup dengan tombol Escape atau klik di luar
    • Mendukung penempatan top, bottom, start, dan end
  • <jelly-tooltip> menampilkan balon teks bertema di atas trigger saat mouse diarahkan atau fokus keyboard diterima
    • Mendukung empat arah penempatan dan tiga ukuran

Bacaan terkait

1 komentar

 
GN⁺ 11 jam lalu
Komentar Hacker News

  • Jendelanya agak tersendat, jadi saya mencoba menggali penyebabnya, dan library ini ternyata menjalankan loop animasi requestAnimationFrame (RAF) setiap 8ms di semua komponen pada halaman sehingga seluruh dokumen digambar ulang
    Komentar di atas yang berbunyi “memproses komponen aktif bersama dalam satu frame dan berhenti saat idle” juga terasa seperti dibuat AI. JellyEngine tidak menghitung animasi jelly hanya saat event pointer terjadi, tetapi menghitung ulang semua komponen aktif di halaman pada setiap frame. Bagi kebanyakan orang, ini akan terlihat seperti implementasi yang membuat orang berkata, “ini tidak seharusnya dilakukan, terlalu berlebihan”

    • Setelah melakukan profiling performa di Chrome, saya tidak menemukan dukungan untuk penjelasan itu. Loop tersebut tampaknya mengelola komponen yang perlu diperbarui dengan Set() aktif dan menghapusnya saat gerakan berhenti
      Saya setuju komentarnya memang terasa agak asal dibuat AI, tetapi saya tidak menemukan masalah yang jelas pada pendekatannya, dan saat tidak ada apa pun yang terjadi, loop intinya selesai hanya dalam beberapa mikrodetik
    • Ini bukan pendekatan yang berlebihan. 99,99% video game secara harfiah bekerja seperti ini, terus menggambar ulang seluruh layar selama refresh rate vsync atau performa hardware mengizinkan

  • Saya suka, tetapi sepertinya tidak sesuai dengan praktik UX standar
    Jika mouse dipindahkan ke luar elemen saat masih ditekan, menurut saya itu tidak seharusnya dihitung sebagai klik. Saat ini tombol dihitung sebagai klik, tetapi checkbox tidak, jadi tidak konsisten

    • Ini masalah yang selalu kami hadapi saat bekerja dengan developer Flash. Prinsip “jika Anda tidak bisa mengimplementasikan semua fungsi scrollbar, jangan implementasikan ulang scrollbar” cukup umum, tetapi pada akhirnya kami tetap menghabiskan berhari-hari untuk memperbaikinya lebih dari lima kali
    • Temuan yang bagus, jadi saya memperbaiki logika tombol, dan sekarang klik tidak akan terjadi jika kursor berada di luar batas tombol

  • Ini sungguh imut, dan saya juga suka bahwa fitur ini secara alami dikurangi di @media (prefers-reduced-motion: reduce)
    Namun, di situs demo akan lebih baik jika pengguna bisa menimpanya tanpa mengubah pengaturan sistem, atau setidaknya ada pemberitahuan bahwa animasi tidak ditampilkan

    • Saya melewatkan fakta bahwa mode gerakan yang dikurangi memang disengaja dan mengira ini rusak. Saya bahkan lupa pernah mengaktifkan pengaturan itu sebelumnya
    • Di Apple menu > System Settings > Accessibility > Motion Anda bisa mengatur Reduce Motion
      Setiap kali demo keren seperti ini muncul, saya butuh waktu sejenak untuk mengingat pengaturan itu, dan selama itu saya mengklik sambil kecewa, berpikir “apa yang spesial di sini?”
    • Sekarang saya menampilkan notifikasi, dan Anda juga bisa menekan ikon kelinci yang lucu untuk menimpa pengaturan sistem

  • Kalau saya masih muda, saya pasti akan sangat menyukainya, tetapi belakangan ini saya lebih banyak menghabiskan waktu menghapus efek seperti ini lewat stylesheet lokal atau memakai mode gelap dan mode baca. Zaman memang banyak berubah

    • Saya suka animasi sebagai umpan balik yang menyoroti apa yang sedang terjadi atau berubah saat ini. Komponen native tidak selalu mengekspresikan hal itu dengan baik, dan animasi yang digunakan dengan tepat bukan sekadar hiasan, tetapi punya nilai UX yang nyata
    • Sekali setahun saya ingin software punya lebih banyak kesenangan, lalu kembali berharap software itu tidak mengganggu saja

  • Akan bagus jika efeknya juga muncul dengan intensitas lemah saat hover. Beberapa kontrol seperti progress bar dan toast tampaknya tidak memiliki efek jelly
    Performa halaman demo juga tidak terlalu bagus dan terasa seperti merebut scroll, tetapi secara keseluruhan tetap lucu dan tampaknya cocok untuk UI game

  • Elemen Chip seharusnya tetap di tempat saat bertransisi, tetapi ketika diklik ia keluar dari batasnya, dan saya tidak menyukainya

  • Lucu, tetapi kecepatan respons beberapa kontrol terlalu buruk. Jika slider diseret maju-mundur, ia tertinggal jauh dari kursor mouse, padahal seharusnya mengikuti kursor seperti menempel dengan lem
    Sebaliknya, kontrol lain seperti jelly-resizable bergerak dengan baik mengikuti kursor. Kontrol "Placeholder" tampaknya tidak menghilangkan placeholder meskipun diklik

  • Saya penasaran apakah ada yang ingat bahwa sekitar 2007~2010, di situs, blog, dan showcase Paul Neave ada efek jelly serupa di tepi halaman. Waktu itu dibuat dengan Flash
    Pada masa itu Paul Neave adalah pahlawan pribadi saya, dan jika ia membaca ini, semoga kabarnya baik

  • Sulit menemukan sesuatu yang benar-benar bisa disebut efek fisika dalam sistem desain UI ini

    • Library ini menghormati pengaturan Reduce Motion milik klien dengan menonaktifkan semua efek animasi

  • Mungkin karena jenis buta warna saya atau pengaturan monitor saya, tetapi merah dan amber terlihat terlalu mirip sehingga saya bahkan tidak bisa membedakan apakah tombolnya sudah ditekan