প্রকল্প সম্পর্কে
tailwindcss-motion হলো RomboHQ-তে তৈরি একটি Tailwind CSS প্লাগইন। এটিকে একটি সরল কিন্তু শক্তিশালী অ্যানিমেশন লাইব্রেরি হিসেবে বর্ণনা করা হয়েছে, যা ডেভেলপারদের কাস্টম কীফ্রেম লেখার বদলে সরাসরি ইউটিলিটি ক্লাস দিয়ে এলিমেন্ট অ্যানিমেট করার সুযোগ দেয়।
ইনস্টলেশন npm-এর মাধ্যমে ডেভ ডিপেন্ডেন্সি হিসেবে করা হয়, তারপর tailwind.config.js-এর plugins অ্যারেতে প্লাগইনটি যোগ করা হয়। CommonJS require এবং ESM import—দুই স্টাইলই দেখানো হয়েছে। প্যাকেজটির সাথে TypeScript ডেফিনিশন আসে, এবং motionScale ও motionTimingFunction-এর মতো থিম কাস্টমাইজেশন টাইপড।
মূল ধারণা হলো প্রতিটি ডাইমেনশন অ্যানিমেট করার জন্য একটি ইনলাইন সিনট্যাক্স। উদাহরণস্বরূপ, motion-translate-x-in-25 এবং motion-opacity-in-0-এর মতো ক্লাস দিয়ে, অথবা motion-preset-fade-এর মতো প্রিসেট ব্যবহার করে স্লাইড-অ্যান্ড-ফেড ইফেক্ট পাওয়া যায়। সম্পূর্ণ ডকুমেন্টেশন docs.rombo.co/tailwind-এ হোস্ট করা হয়েছে।
ব্রাউজারে ভিজ্যুয়ালি অ্যানিমেশন তৈরির জন্য একটি সহযোগী Chrome এক্সটেনশন দেওয়া হয়। এটি লুপিং অ্যানিমেশন, পুনরায় ব্যবহারযোগ্য প্রিসেট সংরক্ষণ এবং ফলাফল Tailwind ক্লাস, পিওর CSS বা Framer Motion কোড হিসেবে এক্সপোর্ট সমর্থন করে।
README-তে Tailwind Play প্লেগ্রাউন্ডে কয়েকটি লাইভ উদাহরণের লিংক আছে, যার মধ্যে একটি ল্যান্ডিং পেজ, চ্যাট ডায়ালগ, লো ব্যাটারি ডায়নামিক আইল্যান্ড, Apple কালার সোয়াচ, একটি Rombo লুপ এবং ইমোজি অ্যানিমেশন রয়েছে। এতে Rombo-কে ইন্টারঅ্যাকটিভ ইন্টারফেসের জন্য টুল তৈরি করা একটি প্রাথমিক পর্যায়ের কোম্পানি হিসেবেও উল্লেখ করা হয়েছে, এবং অতিরিক্ত রিসোর্স তালিকাভুক্ত করা হয়েছে: প্লাগইন তৈরির বিষয়ে একটি ব্লগ পোস্ট, একটি অ্যানিমেটর বিল্ডার এবং একটি কমিউনিটি UnoCSS পোর্ট।
রিপোজিটরিতে শুধু প্রদত্ত README টেক্সট রয়েছে; উপাদানটিতে কোনো লাইসেন্স, কন্ট্রিবিউশন গাইডলাইন, টেস্ট সেটআপ বা বেঞ্চমার্ক ডেটা অন্তর্ভুক্ত নেই।
Comments
0 people shared their preference · Deer Point appears after 10 participants
Sign in to join the discussion.