Liquid Glass UI

اہم خصوصیات

Liquid Glass UI ایک React کمپوننٹ لائبریری ہے جو Apple کے visionOS ڈیزائن سسٹم سے متاثر ہے۔

• Liquid Glass اثرات: کارڈز، بٹن، نیویگیشن، ان پٹس، موڈلز اور دیگر کمپوننٹس میں شفاف مواد اور متحرک بیک ڈراپ بلر۔
• ریئل ٹائم رینڈرنگ: GPU سے تیز رفتار بیک ڈراپ فلٹرز اور متحرک رنگوں کی سیمپلنگ اردگرد کے مواد کے مطابق گلاس اثرات بدلتی ہے۔
• Specular highlights: انٹرایکٹو روشنی کے انعکاسات صارف کے عمل پر ردعمل دیتے ہیں۔
• Fluid motion system: Apple کی easing curves اور physics-based motion قدرتی تعاملات پیدا کرتے ہیں۔

تکنیکی خصوصیات

• 60fps اینیمیشنز اور بیٹری کی بہتر کارکردگی کے لیے GPU پر چلنے والے اثرات۔
• تمام اثرات CSS کے ذریعے، JavaScript runtime overhead کے بغیر۔
• تمام اسکرین سائزز اور ڈیوائسز کے لیے mobile-first responsive ڈیزائن۔
• اسکرین ریڈرز، کی بورڈ نیویگیشن اور reduced-motion ترجیحات کی معاونت؛ WCAG 2.1 AA کے مطابق۔
• مکمل TypeScript definitions اور React 18+ compatibility۔

انسٹالیشن اور استعمال

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 سپورٹ