Liquid Glass UI

প্রধান বৈশিষ্ট্য

Liquid Glass UI হলো Apple-এর visionOS ডিজাইন সিস্টেম থেকে অনুপ্রাণিত একটি React কম্পোনেন্ট লাইব্রেরি।

• Liquid Glass ইফেক্ট: স্বচ্ছ উপাদান ও গতিশীল ব্যাকড্রপ ব্লারসহ কার্ড, বোতাম, নেভিগেশন, ইনপুট, মডাল এবং আরও অনেক কম্পোনেন্ট।
• রিয়েল-টাইম রেন্ডারিং: GPU-চালিত ব্যাকড্রপ ফিল্টার ও গতিশীল রঙের স্যাম্পলিং আশপাশের কনটেন্ট অনুযায়ী গ্লাস ইফেক্ট বদলায়।
• Specular highlights: ইন্টার‌্যাক্টিভ আলোর প্রতিফলন ব্যবহারকারীর কার্যকলাপে সাড়া দেয়।
• Fluid motion system: Apple-এর easing curves ও physics-based motion স্বাভাবিক ইন্টার‌্যাকশন তৈরি করে।

প্রযুক্তিগত বৈশিষ্ট্য

• 60fps অ্যানিমেশন ও ব্যাটারি দক্ষতার জন্য GPU-তে সব ইফেক্ট চালিত হয়।
• JavaScript runtime overhead ছাড়াই CSS-এর মাধ্যমে সব ইফেক্ট বাস্তবায়িত।
• সব স্ক্রিন ও ডিভাইসের জন্য mobile-first 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 সমর্থন