--- title: "Animate Your UI With One Prompt: The Engineering Guide to AI-Built Motion" title_ar: "حرّك واجهاتك ببرومبت واحد: الدليل الهندسي لأنيميشن مبني بالذكاء الاصطناعي" url: "https://www.aiwithmo.com/prompts/ai-ui-animation-engineering" canonical: "https://www.aiwithmo.com/prompts/ai-ui-animation-engineering" published: 2026-06-10 updated: 2026-06-22 category: ai-tools languages: [ar, en] author: Mohamed Khair site: aiwithmo --- # Animate Your UI With One Prompt: The Engineering Guide to AI-Built Motion ## حرّك واجهاتك ببرومبت واحد: الدليل الهندسي لأنيميشن مبني بالذكاء الاصطناعي Source: https://www.aiwithmo.com/prompts/ai-ui-animation-engineering · Author: Mohamed Khair (محمد خير), aiwithmo · Published in Arabic and English. ## English Smooth animation is what separates a project that looks amateur from one that looks premium. The right motion (an element that eases in, a list that staggers gracefully, a section that reveals on scroll) signals polish and care. The problem is that building it by hand is slow, fiddly work: tuning timing curves, chasing janky frames, debugging why an animation stutters on mobile. AI changes the economics of this completely, but only if you direct it the right way. The mistake most people make is asking an AI to just make it animated. That produces generic, often janky motion, because the AI is guessing at the library, the timing, and the performance constraints. The professional approach is to do the engineering thinking first, then let the AI execute it: you tell it which library to use, what kind of motion you want, and the performance rules it must respect. Done that way, the output looks like a senior front-end developer built it, in a fraction of the time. This guide covers the engineering layer. It explains which animation library to specify for which job: Motion (formerly Framer Motion) as the safe default for React UI, GSAP for complex scroll-driven and timeline sequences, React Spring for physics-based motion, AutoAnimate for effortless list transitions, Lottie and Rive for designer-authored vector animation. And it gives you the exact prompt structure that turns any of them into clean, production-grade motion in one shot. The key insight: the AI is not the bottleneck, and neither is your design taste. The bottleneck is knowing what to ask for. Once you can specify the library, the motion pattern, and the performance budget, AI-built animation genuinely rivals hand-crafted work, at a tiny fraction of the effort. This works in Claude, Cursor, Lovable, and any AI coding tool. Follow for more: - https://www.instagram.com/ai.with.mo/ Course Registration: https://halaqa.app/enrollment?course=start-with-ai ## العربية الأنيميشن السلس هو اللي بيفصل بين مشروع شكله هاوي ومشروع شكله فخم. الحركة الصح (عنصر بيدخل بنعومة، لستة بتظهر عناصرها بتتابع أنيق، قسم بينكشف مع السكرول) بتعطي إشارة إتقان واهتمام. المشكلة إن بناءها يدوياً شغل بطيء ومتعب: تعيير منحنيات التوقيت، ومطاردة الفريمات المتقطّعة، وتصحيح ليش الأنيميشن بيتلكّأ عالموبايل. الذكاء الاصطناعي بيقلب اقتصاديات هالموضوع كلياً، بس إذا وجّهته صح. الغلطة اللي معظم الناس بيعملوها إنهم بيطلبوا من الذكاء الاصطناعي بس "خليه متحرّك". هاد بينتج حركة عامة وكتير مرات متقطّعة، لأن الذكاء الاصطناعي عم يخمّن المكتبة والتوقيت وقيود الأداء. النهج الاحترافي إنك تعمل التفكير الهندسي أول، وبعدين تخلّي الذكاء الاصطناعي ينفّذه: بتقلّه أي مكتبة يستخدم، وأي نوع حركة بدك، وقواعد الأداء اللي لازم يحترمها. بهالطريقة، المخرج بيطلع متل ما بناه مطوّر واجهات خبير، بجزء بسيط من الوقت. هالدليل بيغطّي الطبقة الهندسية. بيشرح أي مكتبة أنيميشن تحدّد لأي مهمة: Motion (المعروفة سابقاً بـ Framer Motion) كخيار افتراضي آمن لواجهات React، وGSAP للتسلسلات المعقّدة المبنية على السكرول والخطوط الزمنية، وReact Spring للحركة الفيزيائية، وAutoAnimate لانتقالات اللستات بلا جهد، وLottie وRive للأنيميشن المتجهي المصمّم من مصممين. وبيعطيك بنية البرومبت بالضبط اللي بتحوّل أي وحدة منها لحركة نظيفة بجودة إنتاج بخطوة وحدة. الفكرة المفتاح: الذكاء الاصطناعي مو عنق الزجاجة، ولا ذوقك التصميمي. عنق الزجاجة هو إنك تعرف شو تطلب. بمجرد ما تقدر تحدّد المكتبة، ونمط الحركة، وميزانية الأداء، أنيميشن الذكاء الاصطناعي بينافس فعلاً الشغل اليدوي، بجزء ضئيل من المجهود. بيشتغل مع Claude وCursor وLovable وأي أداة برمجة بالذكاء الاصطناعي. تابع حسابي على الانستغرام: - https://www.instagram.com/ai.with.mo/ رابط الانضمام للدورة: https://halaqa.app/enrollment?course=start-with-ai ## Steps ### 1. Why "Just Make It Animated" Produces Janky, Generic Motion *The AI is not the limit - the vagueness of the request is* When you ask an AI to make a section animated with no further direction, you are forcing it to guess at three separate engineering decisions: which library to use, what timing and easing to apply, and what performance constraints to respect. It will pick something, but its guesses tend toward the generic and often the inefficient - animating properties that trigger expensive layout recalculations, ignoring reduced-motion accessibility, or reaching for a heavy library when native CSS would do. The result looks amateurish in exactly the ways that are hard to articulate but easy to feel: motion that stutters on mid-range phones, transitions that feel a beat too slow, animations that fire on everything until the page feels busy rather than polished. The fix is not a smarter model or better design taste. It is precision in the request. The moment you specify the library, the motion pattern, and the performance budget, the AI stops guessing and starts executing - and the same model that produced janky output now produces motion that looks professionally engineered. ### 2. The Library Map: Which Tool for Which Job *Motion, GSAP, React Spring, AutoAnimate, Lottie - each has a lane* Specifying the right library is the highest-leverage decision you make, so it helps to know the landscape. Motion - formerly Framer Motion, with around six million weekly downloads - is the default for React UI in 2026, and the right call for roughly ninety percent of interface work: enter and exit animations, hover and tap effects, automatic layout animations when content shifts, and route transitions. Its standout feature is layout animation, which smoothly animates size and position changes that are notoriously hard to do by hand. GSAP is the fifteen-year industry standard for anything complex: scroll-driven storytelling through its ScrollTrigger plugin, intricate timelines, SVG motion paths, and it holds a clear performance edge when you have fifteen or more scroll animations or sixty-plus elements moving at once. React Spring takes a physics-based approach, ideal when motion should respond naturally to user input rather than follow a scripted timeline. AutoAnimate is the pragmatic middle ground - one hook on a container and your list items animate automatically on add, remove, or reorder, with zero configuration. Lottie and Rive handle designer-authored vector animations delivered as JSON, perfect for onboarding flows, empty states, and loading indicators. And native CSS, with modern features like linear() easing and scroll-timeline, now covers many reveals and spring-like transitions with no library overhead at all. ### 3. The Engineering Prompt That Produces Pro-Grade Motion *Persona, library, motion spec, and non-negotiable performance rules* A prompt that produces professional animation has four parts, and skipping any of them is where generic output comes from. First, a persona: tell the AI to act as a senior front-end engineer specializing in web animation - this alone shifts the quality of its choices. Second, the library: name exactly which one to use and explicitly forbid it from pulling in any other, so you do not end up with two animation libraries fighting in the same project. Third, the motion spec: state the easing, the duration, the stagger between elements, and the trigger - whether the animation fires on mount, on scroll into view, on hover, or on a state change. Vague timing is the single biggest cause of motion that feels off. Fourth, and most important, the performance rules, stated as non-negotiable: animate only transform and opacity because those are GPU-accelerated, never animate top, left, width, or height because they force expensive layout recalculation, target a smooth sixty frames per second, and respect the prefers-reduced-motion setting so the animation softens or disables for users who need it. Add one final instruction - keep it subtle, animate key moments rather than everything - and the AI produces motion that a senior developer would sign off on. ### 4. Performance: The Part That Separates Premium From Janky *Smoothness is an engineering property, not a design one* The difference between animation that feels premium and animation that feels cheap is almost never the visual design - it is whether it runs at a smooth sixty frames per second on real devices. And that is an engineering property you can specify. The single most important rule is to animate only transform and opacity; these are handled by the GPU and do not force the browser to recalculate the page layout, whereas animating width, height, top, or left does, which is the usual cause of stutter. Beyond that: limit parallax to three or four layers maximum, lazy-load heavy animation libraries so they do not block the initial page load, use passive or debounced scroll listeners, and remember that image optimization affects perceived performance more than your choice of library ever will. Accessibility belongs in this same checklist: always respect prefers-reduced-motion, because motion that delights most users can cause genuine discomfort or nausea for some. Hand these rules to the AI as explicit constraints, not suggestions, and they become part of the output by default. The reason this matters so much is that performance problems are invisible on your fast development machine and only appear on a mid-range phone in a user's hand - so building the rules in from the start is far cheaper than debugging jank after the fact. ## الخطوات ### 1. ليش "بس خليه متحرّك" بينتج حركة متقطّعة وعامة *الذكاء الاصطناعي مو الحد - غموض الطلب هو الحد* لما بتطلب من الذكاء الاصطناعي "خلي هالقسم متحرّك" بدون أي توجيه إضافي، أنت عم تجبره يخمّن ثلاث قرارات هندسية منفصلة: أي مكتبة يستخدم، أي توقيت وإيزينغ يطبّق، وأي قيود أداء يحترم. رح يختار شي، بس تخميناته بتميل للعام وكتير مرات لغير الكفؤ - بيحرّك خصائص بتطلق إعادة حسابات تخطيط مكلفة، أو بيتجاهل إعدادات تقليل الحركة، أو بيمدّ إيده لمكتبة ثقيلة بينما الـ CSS الأصلي بيكفي. النتيجة بتطلع شكلها هاوي بالضبط بالطرق اللي صعب توصّفها بس سهل تحسّها: حركة بتتقطّع عالموبايلات المتوسطة، انتقالات بتحسّها أبطأ بشوي، أنيميشن بيشتغل على كل شي لحتى الصفحة تصير مزدحمة بدل ما تكون مصقولة. الحل مو موديل أذكى ولا ذوق تصميمي أحسن. الحل الدقة بالطلب. بلحظة ما بتحدّد المكتبة، ونمط الحركة، وميزانية الأداء، الذكاء الاصطناعي بيوقف يخمّن وبيبلّش ينفّذ - ونفس الموديل اللي أنتج حركة متقطّعة هلق بينتج حركة شكلها مهندَس باحتراف. ### 2. خريطة المكتبات: أي أداة لأي مهمة *Motion وGSAP وReact Spring وAutoAnimate وLottie - كل وحدة إلها مسار* تحديد المكتبة الصح هو أكثر قرار بيعطيك رافعة، فبيفيد تعرف المشهد. Motion - المعروفة سابقاً بـ Framer Motion، بحوالي ستة ملايين تنزيل أسبوعي - هي الافتراضي لواجهات React في 2026، والخيار الصح لحوالي تسعين بالمئة من شغل الواجهات: أنيميشن الدخول والخروج، تأثيرات الهوفر واللمس، أنيميشن التخطيط التلقائي لما المحتوى يتغيّر، وانتقالات المسارات. ميزتها البارزة هي أنيميشن التخطيط، اللي بيحرّك تغييرات الحجم والموضع بنعومة، وهي معروفة بصعوبتها يدوياً. GSAP هي المعيار الصناعي من خمستعشر سنة لأي شي معقّد: السرد المبني على السكرول عبر إضافة ScrollTrigger، والخطوط الزمنية المتشابكة، ومسارات حركة الـ SVG، وإلها تفوّق أداء واضح لما يكون عندك خمستعشر أنيميشن سكرول أو أكثر، أو ستين عنصر وأكثر بيتحرّكوا بنفس الوقت. React Spring بتاخد نهج فيزيائي، مثالية لما الحركة لازم تستجيب طبيعياً لإدخال المستخدم بدل ما تتبع خط زمني مكتوب مسبقاً. AutoAnimate هي الوسط العملي - هوك واحد على حاوية وعناصر لستتك بتتحرّك تلقائياً عند الإضافة أو الحذف أو إعادة الترتيب، بدون أي إعداد. Lottie وRive بيتعاملوا مع الأنيميشن المتجهي المصمّم من مصممين والمسلّم كـ JSON، مثالي لتدفقات الـ onboarding، والحالات الفارغة، ومؤشّرات التحميل. والـ CSS الأصلي، بميزات حديثة متل linear() easing وscroll-timeline، صار يغطّي كتير كشوفات وانتقالات شبه فيزيائية بدون أي عبء مكتبة إطلاقاً. ### 3. البرومبت الهندسي اللي بينتج حركة بمستوى احترافي *شخصية، مكتبة، مواصفات حركة، وقواعد أداء ما إلها نقاش* البرومبت اللي بينتج أنيميشن احترافي إله أربع أجزاء، وتفويت أي وحدة منها هو من وين بتجي المخرجات العامة. أول شي، شخصية: قول للذكاء الاصطناعي يتصرّف كمطوّر واجهات خبير متخصّص بأنيميشن الويب - هاد لحاله بيغيّر جودة خياراته. ثاني شي، المكتبة: سمّي بالضبط أي وحدة يستخدم وامنعه صراحة إنه يجيب أي مكتبة ثانية، حتى ما تنتهي بمكتبتين أنيميشن عم يتصارعوا بنفس المشروع. ثالث شي، مواصفات الحركة: حدّد الإيزينغ، والمدّة، والتتابع (stagger) بين العناصر، والمُطلِق - إذا الأنيميشن بيشتغل عند التحميل، أو عند دخوله بالسكرول، أو عند الهوفر، أو عند تغيّر الحالة. التوقيت المبهم هو أكبر سبب وحيد لحركة بتحسّها غلط. رابع شي، والأهم، قواعد الأداء، مكتوبة كقواعد ما إلها نقاش: حرّك بس transform وopacity لأنهم مسرّعين بالـ GPU، لا تحرّك أبداً top أو left أو width أو height لأنهم بيجبروا إعادة حساب تخطيط مكلفة، استهدف ستين فريم بالثانية بسلاسة، واحترم إعداد prefers-reduced-motion حتى الأنيميشن يخفّ أو يتعطّل لمن يحتاج. ضيف تعليمة أخيرة - خليه خفيف، حرّك اللحظات المهمة مو كل شي - والذكاء الاصطناعي بينتج حركة مطوّر خبير بيوافق عليها. ### 4. الأداء: الجزء اللي بيفصل الفخم عن المتقطّع *السلاسة خاصية هندسية، مو تصميمية* الفرق بين أنيميشن بتحسّه فخم وأنيميشن بتحسّه رخيص بيكاد ما يكون أبداً التصميم البصري - هو إذا كان بيشتغل بستين فريم بالثانية بسلاسة على أجهزة حقيقية. وهاد خاصية هندسية بتقدر تحدّدها. أهم قاعدة وحيدة إنك تحرّك بس transform وopacity؛ هدول بيتعامل معهم الـ GPU وما بيجبروا المتصفّح يعيد حساب تخطيط الصفحة، بينما تحريك width أو height أو top أو left بيعمل هيك، وهو السبب المعتاد للتقطّع. أبعد من هيك: حُدّ الـ parallax لثلاث أو أربع طبقات كحد أقصى، حمّل مكتبات الأنيميشن الثقيلة بشكل كسول حتى ما تعطّل تحميل الصفحة الأولي، استخدم مستمعي سكرول سلبيين أو مُخمّدين، وتذكّر إن تحسين الصور بيأثّر على الأداء المُحسّ أكثر من اختيار مكتبتك بأي وقت. إمكانية الوصول بتنتمي لنفس هالقائمة: احترم دايماً prefers-reduced-motion، لأن الحركة اللي بتبهج معظم المستخدمين بتقدر تسبّب انزعاج حقيقي أو غثيان لبعضهم. سلّم هالقواعد للذكاء الاصطناعي كقيود صريحة، مو اقتراحات، وبتصير جزء من المخرجات افتراضياً. السبب اللي بيخلّي هاد مهم لهالدرجة إن مشاكل الأداء بتكون مخفية على جهاز التطوير السريع تبعك وبتظهر بس على موبايل متوسط بإيد مستخدم - فبناء القواعد من البداية أرخص بكثير من تصحيح التقطّع بعد فوات الأوان. ## Prompt (البرومبت) ```text # AI-BUILT UI ANIMATION: THE ENGINEERING PROMPT GUIDE # Works in Claude, Cursor, Lovable, and any AI coding tool. # ════════════════════════════════════════ # STEP 1: PICK THE RIGHT LIBRARY FOR THE JOB # ════════════════════════════════════════ # Motion (formerly Framer Motion) → THE DEFAULT for React UI # ~6M weekly downloads. Best for: enter/exit animations, hover/tap, # layout animations (auto size/position), route transitions, drag. # npm: npm i motion · import { motion } from "motion/react" # # GSAP → complex timelines + scroll-driven storytelling # The 15-year industry standard. Best for: hero choreography, # ScrollTrigger sequences, SVG/motion paths, 60fps at scale (15+ # scroll animations, 60+ elements moving together). # # React Spring → physics-based, natural motion # ~18KB. Best for: motion tied to user input/state, organic feel. # # AutoAnimate → zero-config list transitions # One hook on a container = items animate on add/remove/reorder. # Best for: dashboards, lists, "CSS too manual, Motion too much". # # Lottie / Rive → designer-authored vector animation (JSON) # Best for: onboarding, empty states, loading indicators, mascots. # # Native CSS → no library needed # Modern CSS (linear() easing, scroll-timeline, transforms) handles # many reveals + spring-like transitions with ZERO runtime cost. # ════════════════════════════════════════ # STEP 2: THE ENGINEERING PROMPT TEMPLATE # ════════════════════════════════════════ """ Act as a senior front-end engineer specializing in web animation. TASK: Add [describe the animation, e.g. "a staggered fade-and-rise entrance for the feature cards, triggered when they scroll into view"] LIBRARY: Use [Motion / GSAP + ScrollTrigger / React Spring / AutoAnimate]. Do not introduce any other animation library. MOTION SPEC: - Easing: [e.g. ease-out, or a custom cubic-bezier for a premium feel] - Duration: [e.g. 400-600ms, long enough to feel smooth, short enough to not feel slow] - Stagger: [e.g. 80ms between each card] - Trigger: [on mount / on scroll into view / on hover / on state change] PERFORMANCE RULES (non-negotiable): - Animate only transform and opacity (GPU-accelerated). Never animate top/left/width/height. - Target a smooth 60fps; no layout thrashing. - Respect prefers-reduced-motion: disable or soften motion for users who request it. - Keep it subtle. Animate key moments, not everything. OUTPUT: Clean, production-ready component code with the animation fully wired. Add a one-line comment above each animation explaining the intent. Do not over-animate. """ # ════════════════════════════════════════ # STEP 3: REFINE WITH TARGETED FOLLOW-UPS # ════════════════════════════════════════ "Make the easing snappier: more ease-out, less linear." "The stagger feels too slow. Tighten it to 50ms." "Add an exit animation when the card is removed." "This janks on mobile. Move everything to transform/opacity only." # ─── PERFORMANCE CHECKLIST (give this to the AI as rules) ─── # ✓ transform + opacity only (hardware-accelerated) # ✓ prefers-reduced-motion respected # ✓ 3-4 parallax layers MAX for 60fps # ✓ lazy-load heavy libraries (React.lazy + Suspense) # ✓ passive/debounced scroll listeners # ✓ image optimization (impacts perf MORE than library choice) # ✓ do not mix multiple animation libraries without a reason # ─── QUICK DECISION RULE ─── # Simple UI transitions/reveals → Motion (or native CSS / AutoAnimate) # Scroll storytelling / complex timelines → GSAP + ScrollTrigger # Physics / drag / natural feel → React Spring # Designer-made vector animation → Lottie or Rive ``` --- More free bilingual AI guides: https://www.aiwithmo.com/prompts · One to one AI mentorship in Arabic or English: https://www.aiwithmo.com/mentorship