التفاعلات الحية: دليل بناء مايكرو-إنيميشن احترافي بـ Framer Motion

الحركة المدروسة هي ما يفصل المواقع العادية عن التجارب الرقمية الفاخرة الحائزة على جوائز مثل Awwwards. مع مكتبة Framer Motion في React، يمكنك تطبيق حركات فيزيائية قائمة على النوابض (Spring Physics) تحاكي الواقع.

مبادئ الحركة الفاخرة (Subtle & Purposeful)

• السرعة والانسيابية: يجب ألا تتجاوز مدة الحركة 300ms إلى 400ms حتى لا يشعر المستخدم بالانتظار.
• تسهيل التفاعل (Easing Curves): استخدم منحنيات [0.16, 1, 0.3, 1] لحركة انسيابية وناعمة.
• احترام خيارات إمكانية الوصول: راعِ إيقاف الحركة للمستخدمين الذين يفضلون prefers-reduced-motion.

مثال كود: بطاقة تفاعلية بحركة ثلاثية الأبعاد خفيفة

import { motion } from 'framer-motion';

export function InteractiveCard({ title, desc }: { title: string; desc: string }) {
  return (
    <motion.div
      whileHover={{ y: -6, scale: 1.01 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: 'spring', stiffness: 400, damping: 25 }}
      className="p-6 rounded-2xl border bg-surface shadow-md"
    >
      <h3>{title}</h3>
      <p>{desc}</p>
    </motion.div>
  );
}