badanibex
badanibex
مكتبة JavaScript خفيفة (~3KB) لإضافة حركات بصرية جذابة على التشكيل العربي. 7 أنواع أنيميشن، IntersectionObserver، auto-init بدون كود، RTL-first， بلا أي تبعيات خارجية.
اضغط على النص لإعادة الأنيميشن - جرّب بأنواع مختلفة
fade، slide، bounce، glow، flip، pop، typewriter — كل نوع مصمم ليناسب سياقاً مختلفاً في الواجهة.
الأنيميشن يُشغَّل فقط عند ظهور العنصر في الشاشة - أداء مثالي حتى مع صفحات طويلة ونصوص كثيرة.
أضف data-harakat-auto لأي div وستبدأ المكتبة تلقائياً - لا JavaScript مطلوب
للحالات البسيطة.
HarakAt.strip() لإزالة التشكيل، HarakAt.count() لعدّ الحركات، HarakAt.hasHarakat() للتحقق — أدوات مفيدة لمعالجة النصوص.
index.d.ts مع تعريفات كاملة للـ HarakAtOptions وكل الأساليب الثابتة - intellisense في VS Code بلا إعداد.
مصممة من الأساس للنصوص العربية - التشكيل فوق وتحت الحروف، الأنيميشن لا يكسر اتجاه النص أو ترتيب الحركات.
تحكم بالـ delay بين كل حركة وأخرى بالمللي ثانية - سريع للقراءة الانسيابية أو بطيء للتأثير التدريجي.
harakat.min.js للـ CDN (IIFE)، harakat.esm.js للـ bundlers، harakat.js للـ CJS - مرونة كاملة لأي بيئة.
اختر نوع الأنيميشن واللون والتأخير - وجرّب بنصك الخاص مباشرة.
كل نوع مناسب لسياق مختلف في الواجهة
ظهور هادئ من الشفافية الكاملة - مناسب للنصوص الرئيسية وعناوين الأقسام.
ينزل التشكيل من الأعلى ليستقر - مناسب للنصوص الدينية والاقتباسات.
ارتداد لطيف عند الهبوط - مناسب للعناوين التفاعلية وصفحات الهبوط.
يظهر مع هالة ضوئية تختفي - مناسب للتشكيل في القرآن والتطبيقات التعليمية.
يقلب من الأفق ثلاثي الأبعاد - مناسب للبطاقات والمحتوى التفاعلي.
ينبثق من نقطة مركزية - مناسب للتنبيهات وإبراز الكلمات المهمة.
script tag واحد في الـ HTML أو npm install - بلا إعداد إضافي. الـ CSS تُحقن تلقائياً.
أضف data-harakat للـ HTML أو استخدم new HarakAt() في JavaScript - خيارات لكل المستويات.
animation: 'bounce' وdelay: 40 وcolor: '#6C3FC5' - تحكم كامل بخيار بسيط.
IntersectionObserver يشغّل الأنيميشن عند الظهور تلقائياً — أداء مثالي بلا جهد.
JavaScript ES2018
TypeScript
esbuild
CSS Animations
React
Compatible
Vue
CompatibleHarakAt هي مكتبة JavaScript خفيفة الوزن (~3KB مضغوطة) مصممة خصيصاً لإضافة حركات بصرية جذابة على التشكيل العربي (الحركات). تستهدف المطورين الذين يبنون تطبيقات عربية وتحتاج لإحياء النصوص المُشَكَّلة بطريقة مميزة - سواء كانت آيات قرآنية أو محتوى تعليمي أو بطاقات تفاعلية.
التشكيل العربي (الفتحة، الضمة، الكسرة، الشدة...) هو نظام unicode خاص يختلف عن أحرف النص العادي. عند محاولة تحريكه بـ CSS عادي، تواجه مشاكل: كيف تميز الحركات عن الأحرف？ كيف تضيف تأخيراً تدريجياً لكل حركة على حدة？ كيف تجعل الأنيميشن يبدأ عند الظهور فقط؟ HarakAt تحل هذه المشاكل جميعاً.
لا توجد مكتبة مخصصة لتحريك التشكيل العربي في السوق - معظم المطورين يلجأون إلى حلول CSS عامة أو كود مخصص معقد. HarakAt تملأ هذا الفراغ بحل جاهز، محسّن، وسهل التكامل مع أي framework.
يتوفر المنتج للشراء عبر منصة BadanIbex® بسعر $39. يتضمن الكود المصدري الكامل، 3 مخرجات بناء، TypeScript declarations، صفحة معاينة تفاعلية، ودعم تقني.
HarakAt جاهزة للتكامل الفوري مع مشروعك — Vanilla JS أو React أو Vue، بـ script tag واحد أو npm install.