Liquid Glass UI

मुख्य विशेषताएँ

Liquid Glass UI Apple के visionOS डिज़ाइन सिस्टम से प्रेरित React कंपोनेंट लाइब्रेरी है।

• Liquid Glass प्रभाव: कार्ड, बटन, नेविगेशन, इनपुट और मोडल जैसे कंपोनेंट, पारदर्शी सामग्री और गतिशील बैकड्रॉप ब्लर के साथ।
• रीयल-टाइम रेंडरिंग: GPU-त्वरित बैकड्रॉप फ़िल्टर और गतिशील रंग सैंपलिंग से आसपास की सामग्री के अनुसार ग्लास प्रभाव बदलता है।
• स्पेक्युलर हाइलाइट: इंटरैक्टिव प्रकाश प्रतिबिंब उपयोगकर्ता की क्रियाओं पर प्रतिक्रिया देते हैं।
• फ्लूइड मोशन सिस्टम: Apple की easing curves और physics-आधारित मोशन से स्वाभाविक इंटरैक्शन।

तकनीकी विशेषताएँ

• GPU पर चलने वाले प्रभाव, 60fps एनिमेशन और बेहतर बैटरी दक्षता।
• CSS के माध्यम से सभी प्रभाव; JavaScript runtime overhead नहीं।
• मोबाइल-फर्स्ट और सभी स्क्रीन आकारों के लिए responsive।
• स्क्रीन रीडर, कीबोर्ड नेविगेशन और reduced-motion प्राथमिकताओं का समर्थन; WCAG 2.1 AA अनुरूप।
• पूर्ण TypeScript परिभाषाएँ और React 18+ संगतता।

इंस्टॉलेशन और उपयोग

npm install liquid-glass-ui

git clone liquid-glass-ui

उदाहरण: <GlassCard variant="intense" interactive specular>Your content</GlassCard>

ब्राउज़र समर्थन

Chrome 76+, Firefox 72+, Safari 14+, iOS Safari 14+ और Chrome for Android 76+ पर काम करता है। पुराने ब्राउज़र में सुविधाएँ सीमित रूप में उपलब्ध रहती हैं।

कस्टमाइज़ेशन और उपयोगकर्ता

CSS custom properties, component props और modifier classes से blur intensity, पारदर्शिता, animation timing और color schemes समायोजित करें। यह React/Next.js डेवलपर, UI/UX डिज़ाइनर, frontend टीमों और उच्च-प्रदर्शन glassmorphism प्रभाव चाहने वाली परियोजनाओं के लिए है।

मुख्य लाभ

• मैन्युअल CSS के बिना अंतर्निहित ग्लास प्रभाव
• GPU-त्वरित रीयल-टाइम रेंडरिंग
• Apple डिज़ाइन सिस्टम से प्रेरित उच्च-गुणवत्ता कंपोनेंट
• न्यूनतम CSS bundle size
• पूर्ण TypeScript समर्थन