animata
v2.0.0
مصنوع يدويًا ✍ الرسوم المتحركة التفاعلية والتأثيرات المرئية التي يتم الحصول عليها من جميع أنحاء الإنترنت؟ ، على استعداد لك لنسخ ولصق في مشروعك بسلاسة.
مرحبًا بك في Animata ، وهي مجموعة مجانية ومفتوحة المصدر من الرسوم المتحركة والآثار والتفاعلات التي يمكنك من خلالها بسلاسة دمجها في مشروعك مع نسخة بسيطة ولصق. تم تصميم الرسوم المتحركة باستخدام Tailwindcss و React.js ، بحيث يمكن تخصيصها بسهولة لتناسب تصميم مشروعك.
Animata ليست مكتبة واجهة المستخدم كاملة مثل Material-Ui أو Chakra-Ui. إنها مجموعة من الرسوم المتحركة والتأثيرات التي يمكنك استخدامها لتعزيز تصميم مشروعك. يمكنك أيضًا استخدام Animata جنبًا إلى جنب مع مكتبات واجهة المستخدم الأخرى أو أنظمة التصميم (ستحتاج إلى إعداد TailwindCSS لهذا الغرض).
لا تحتاج إلى تثبيته كاعتماد بدلاً من ذلك ، يمكنك ببساطة نسخ الكود ولصقه ، مثل Shadcn/UI ، في مشروعك. ومع ذلك ، لا تزال بحاجة إلى تثبيت التبعية الأخرى التي يحتاجها الرمز.
/
/components
/ui أين / هو جذر مشروعك ، /components هي المكان الذي تحتفظ به مكوناتك وتم إعداد المشروع باستخدام مسارات في ملف tsconfig.json .
{
"compilerOptions" : {
"baseUrl" : " . " ,
"paths" : {
"@/*" : [ " ./* " ]
}
}
}قم بتثبيت التبعيات المطلوبة ، إذا لم تقم بالفعل:
npm install tailwind-merge clsx lucide-react tailwindcss-animate إضافة tailwindcss-animate إلى ملحقات الإضافات في ملف tailwind.config.js :
module . exports = {
plugins : [ require ( "tailwindcss-animate" ) ] ,
} ;إنشاء ملف utils.ts في مجلد LIBS والصق الكود التالي:
import { type ClassValue , clsx } from "clsx" ;
import { twMerge } from "tailwind-merge" ;
export function cn ( ... inputs : ClassValue [ ] ) {
return twMerge ( clsx ( inputs ) ) ;
} المساهمات في Animata هي دائما موضع ترحيب!
يذهب الامتنان القلبي إلى كل واحد منكم لمساهماتك المذهلة في هذا المشروع. لم يكن عملك الشاق والإبداع والتفاني أقل من لا يصدق. سواء كان ذلك الترميز أو تصحيح الأخطاء أو الاختبار أو مشاركة الأفكار ، فقد أحدث كل جهد فرقًا كبيرًا.
هذا المشروع مرخص بموجب ترخيص معهد ماساتشوستس للتكنولوجيا. انظر ملف الترخيص للحصول على التفاصيل.
