Jelly UI - नेटिव HTML फॉर्म कंट्रोल्स पर सॉफ्ट-बॉडी फिजिक्स इफेक्ट लागू करता है

 (jelly-ui.com)
2 पॉइंट द्वारा GN⁺ 14 시간 전 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • Jelly UI v1.1 एक dependency-free web component library है जो वास्तविक फॉर्म कंट्रोल्स को मुलायम soft-body physics effects के साथ जोड़ती है, और 40 custom elements देती है
  • इसे एक module script से install किया जाता है और यह dark mode, operating system theme की automatic tracking, accent color बदलने और right-to-left RTL layout को support करता है
  • Buttons नेटिव <button> का उपयोग करते हैं, और sliders छिपे हुए range input का उपयोग करके keyboard operation, screen readers और form participation के लिए native semantic structure बनाए रखते हैं
  • Checkbox और input fields से लेकर toast, tabs और dialogs तक, विभिन्न elements पर दबना, खिंचना, ripple और bounce जैसे tactile animations लागू किए जाते हैं
  • WCAG AA color tokens और ARIA patterns built-in हैं, जिससे मुलायम visual effects बनाए रखते हुए भी accessible product interfaces बनाए जा सकते हैं

Installation और theme

  • Jelly UI को बिना dependencies के, 40 custom elements और एक <script type="module"> tag के साथ इस्तेमाल किया जा सकता है 
    <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> एक theme provider है जो child tree पर design tokens को सीमित रूप से लागू करता है
    • mode auto, light, dark को support करता है, जिससे OS settings का पालन किया जा सकता है या कोई specific theme force की जा सकती है
    • accent से accent color फिर से set किया जा सकता है
  • Common color variants azure, rose, amber, mint, graphite, platinum, white हैं, और sizes मुख्य रूप से small, medium, large हैं

Buttons और action elements

  • <jelly-button> एक capsule-shaped button है जिसमें अंदर वास्तविक नेटिव <button> होता है, ताकि keyboard और screen reader support मिल सके
    • Color, size और pill/square shape, disabled state और block layout set किए जा सकते हैं
  • <jelly-icon-button> एक icon के लिए बनाया गया square या circular button है
    • label attribute से screen reader द्वारा पहचाने जाने वाला नाम specify किया जाता है

Form input controls

  • <jelly-checkbox> forms में participate करता है, checked और indeterminate state (indeterminate) को support करता है, और state बदलने पर jelly square उछलता है
  • <jelly-input> text, email, password के लिए single-line input field है
    • Focus मिलने पर surface उठती है और border दिखाई देता है; हर input पर caret position से ripple फैलता है
    • disabled और readonly को support करता है
  • <jelly-label> for के जरिए control से जुड़ता है
    • Click करने पर target पर focus जाता है और label text accessible name बनता है; required status और size specify किए जा सकते हैं
  • <jelly-otp> हर digit के लिए एक box देने वाला one-time code input है
    • Input, backspace, arrow keys और paste को handle करता है, और length, color, size व disabled state set किए जा सकते हैं
  • <jelly-radio> एक ही root में समान name share करने वाले items के बीच group बनाता है
    • Movable tabindex और document direction को ध्यान में रखकर arrow-key navigation support करता है
  • <jelly-radio-group> jelly-radio के लिए label वाला radiogroup container है
    • Legend, horizontal/vertical flow layout और child elements को size propagation देता है
  • <jelly-range> minimum और maximum value range चुनने वाला dual-handle slider है
    • दोनों handles पर role="slider", focus और ARIA लागू होते हैं; drag करते समय jelly handle दबता है
  • <jelly-segmented> mutually exclusive choices वाला capsule-shaped track है
    • Selection indicator segments के बीच move करते हुए tilt और stretch होने वाली jelly pill की तरह काम करता है
  • <jelly-select> ARIA combobox/listbox patterns का इस्तेमाल करने वाला form-linked dropdown है
    • Trigger और options panel दोनों soft-body surfaces से बने होते हैं
    • Panel field से expand होता है, और नीचे जगह कम हो तो ऊपर की ओर switch हो जाता है
  • <jelly-slider> single value select करने वाला slider है
    • Hidden native range input semantic structure और form participation संभालता है, और screen पर दबने वाला jelly handle दिखता है
  • <jelly-switch> draggable switch है; handle liquid droplet की तरह stretch होता है और off/on colors cross-transition करते हैं
  • <jelly-textarea> multi-line input के अनुसार minimum और maximum height के बीच automatically बढ़ता है
    • Surface भी height के हिसाब से stretch होती है; input पर caret position से ripple बनता है, और disabled व readonly support हैं

State और feedback

  • <jelly-alert> info, success, warning, danger चार tones और optional close button देने वाला banner है
  • <jelly-badge> badges, tags और status display के लिए छोटा element है, जो text बदलने पर उछलता है
    • Filled/outline, pill/square shape और live, instant behavior set किए जा सकते हैं
  • <jelly-progress> progress bar है जिसमें progress के साथ fill का अगला हिस्सा हिलता है
    • Indeterminate mode में blob दोनों walls के बीच bounce करता है
  • <jelly-skeleton> shimmer के बजाय धीरे-धीरे सांस लेने जैसा हिलने वाला loading placeholder है
    • line, rect, circle shapes को support करता है
  • <jelly-spinner> तीन dots के बीच move करने वाला slime-like dots और shape बदलते हुए rotate करने वाला blob indicator देता है
  • <jelly-toaster> inline end direction से appear होकर disappear होने वाली toast notifications manage करता है
    • आम तौर पर jellyToast('Saved!', { tone: 'success' }) helper से call किया जाता है
    • Placed element को position="bottom" देने पर notification stack ऊपर की ओर बढ़ता है

Content surfaces

  • <jelly-accordion> कई <jelly-collapsible> items को group करता है
    • single mode में जब एक item खुलता है तो बाकी bounce करते हुए बंद हो जाते हैं
  • <jelly-card> content के नीचे रखा जाने वाला jelly surface container है
    • squish जोड़ने पर यह नरम cushion की तरह दबते हुए button role निभाता है
  • <jelly-chip> static label, toggleable filter या removable tag के रूप में इस्तेमाल किया जा सकता है
    • Selectable, selected state, removable और disabled status set किए जा सकते हैं
  • <jelly-collapsible> header button से panel को bounce करते हुए खोलने-बंद करने वाला expandable/collapsible area है
    • इसे इस तरह बनाया गया है कि text नहीं बल्कि surface move करे
  • <jelly-divider> horizontal/vertical या label वाली thin separator line है
  • <jelly-kbd> दबाकर देखी जा सकने वाली jelly keycap है
    • key से actual key के साथ link करने पर page में कहीं भी वह key दबाए रखने के दौरान keycap भी नीचे जाती है

Navigation और layout

  • <jelly-resizable> jelly separator को drag करके या keyboard से size adjust करने वाला panel grid है
    • row, vertical, both directions support करता है
  • <jelly-tabs> वास्तविक tablist semantic structure इस्तेमाल करने वाला tab view है
    • Jelly pill-style selection indicator move करता है और tab panel bounce के साथ दिखाई देता है

Overlays

  • <jelly-dialog> jelly की तरह उछलते हुए दिखाई देने वाला modal dialog है
    • Page को lock करता है और बंद होने के बाद focus को पिछली जगह लौटाता है
    • Escape key, close button या background click से बंद किया जा सकता है
  • <jelly-drawer> end से थोड़ा आगे जाकर वापस आने वाले spring effect के साथ दिखने वाली floating sheet है
    • Inline start/end या bottom से खुल सकता है
  • <jelly-popover> click से खुलने वाला non-modal panel है
    • Trigger से anchored रहता है और Escape key या outside click से बंद होता है
    • top, bottom, start, end placements support करता है
  • <jelly-tooltip> mouse hover या keyboard focus मिलने पर trigger के ऊपर themed speech bubble दिखाता है
    • चार दिशाओं में placement और तीन sizes support करता है

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 14 시간 전
Hacker News की राय

  • विंडो थोड़ी अटक रही थी, इसलिए वजह खंगाली। यह लाइब्रेरी पेज के सभी components में हर 8ms पर requestAnimationFrame(RAF) animation loop चलाती है और पूरे document को फिर से draw करवाती है।
    ऊपर की “active components को एक frame में साथ process करें और idle होने पर रोक दें” वाली टिप्पणी भी AI-generated लगती है। JellyEngine pointer events होने पर ही jelly animation calculate नहीं करता, बल्कि पेज के सभी active components को हर frame पर दोबारा calculate करता है। आम तौर पर कोई इंसान देखे तो कहेगा, “ऐसा नहीं करना चाहिए, यह बहुत ज्यादा है।”

    • Chrome में performance profiling करके देखा, तो यह व्याख्या support नहीं हुई। loop update किए जाने वाले components को active Set() से manage करता दिखता है और movement रुकने पर उन्हें हटा देता है।
      इस बात से सहमत हूं कि comment कुछ हद तक AI ने जल्दबाजी में बनाया हुआ लगता है, लेकिन approach में कोई साफ समस्या नहीं मिली, और जब कुछ भी नहीं हो रहा होता तो core loop कुछ microseconds में खत्म हो जाता है।
    • यह overkill नहीं है। 99.99% video games सचमुच इसी तरह चलते हैं, और vertical sync refresh rate या hardware performance जितनी अनुमति दे, उतनी देर तक पूरा screen redraw करते रहते हैं।

  • पसंद आया, लेकिन यह standard UX practices से मेल नहीं खाता लगता।
    मेरा मानना है कि अगर दबाए रखते हुए mouse को element के बाहर ले जाया जाए, तो उसे click नहीं माना जाना चाहिए। अभी button उसे click मानता है, लेकिन checkbox नहीं, इसलिए consistency नहीं है।

    • Flash developers के साथ काम करते समय यह हमेशा होने वाली समस्या थी। “अगर scrollbar की सारी functionality implement नहीं कर सकते, तो scrollbar को फिर से implement मत करो” वाला principle आम था, लेकिन आखिर में पांच से ज्यादा बार fix करते हुए कई दिन लग जाते थे।
    • अच्छा catch है, इसलिए button logic ठीक कर दिया है; अब cursor button boundary के बाहर हो तो click trigger नहीं होता।

  • सच में प्यारा है, और @media (prefers-reduced-motion: reduce) में graceful तरीके से feature कम करना भी अच्छा है।
    हालांकि demo site में अच्छा होगा कि user system setting बदले बिना इसे override कर सके, या कम से कम animation न दिखने की सूचना हो।

    • मैं यह नहीं समझ पाया कि motion जानबूझकर reduce किया गया है, लगा कि यह broken है। यह भी भूल गया था कि पहले मैंने वह setting on की थी।
    • Apple menu > System Settings > Accessibility > Motion में Reduce Motion set किया जा सकता है।
      हर बार ऐसा कोई शानदार demo आता है, तो setting याद करने में थोड़ा समय लगता है, और तब तक मैं निराश होकर click करता रहता हूं कि “इसमें खास क्या है?”
    • अब notification दिखाया जाता है, और सुंदर bunny icon दबाकर system setting को override भी किया जा सकता है।

  • जब मैं युवा था तो यह मुझे सच में बहुत पसंद आता, लेकिन आजकल local stylesheet से ऐसे effects हटाने या dark mode और reading mode इस्तेमाल करने में ज्यादा समय बिताता हूं। वक्त काफी बदल गया है।

    • animation अच्छा feedback है, क्योंकि यह इस बात को highlight करता है कि अभी क्या हो रहा है या क्या बदल रहा है। native components हमेशा यह ठीक से नहीं दिखाते, और सही तरीके से इस्तेमाल की गई animation केवल decoration नहीं बल्कि वास्तविक UX value रखती है।
    • हर साल लगभग एक बार मैं software में ज्यादा मजा चाहता हूं, फिर वापस बस यही चाहता हूं कि वह रुकावट न बने।

  • mouse hover करने पर भी हल्की intensity में effect दिखे तो अच्छा होगा। progress bar और toast जैसे कुछ controls में jelly effect नहीं दिखता।
    demo page की performance भी खास अच्छी नहीं है और scroll hijack करता हुआ महसूस होता है, लेकिन कुल मिलाकर प्यारा है और game UI में अच्छी तरह fit होगा।

  • Chip element को अपनी जगह पर रहते हुए transition होना चाहिए, लेकिन click करने पर वह boundary के बाहर निकल जाता है, इसलिए पसंद नहीं आया।

  • प्यारा है, लेकिन कुछ controls की responsiveness बहुत खराब है। slider को आगे-पीछे drag करने पर वह mouse cursor से काफी पीछे रह जाता है; उसे glue से चिपका हुआ जैसा cursor को follow करना चाहिए।
    इसके उलट jelly-resizable जैसे दूसरे controls cursor से अच्छी तरह जुड़े हुए चलते हैं। "Placeholder" control पर click करने पर भी placeholder गायब नहीं होता लगता।

  • जानना चाहता हूं कि क्या किसी और को 2007–2010 के आसपास Paul Neave की website, blog और showcase में page borders पर ऐसा ही jelly effect याद है। उस समय यह Flash में implement किया गया था।
    उस दौर में Paul Neave मेरे personal hero थे, और अगर वे यह पढ़ रहे हों तो उम्मीद है कि वे अच्छे होंगे।

  • इस UI design system में physics effect कहे जाने लायक चीज ढूंढना बहुत मुश्किल है।

    • यह library client की Reduce Motion setting का सम्मान करते हुए सभी animation effects disable कर देती है।

  • शायद यह मेरे color vision deficiency type या monitor settings की वजह से हो, लेकिन red और amber इतने मिलते-जुलते थे कि मैं यह भी नहीं पहचान पाया कि button दबाया गया था या नहीं।