تعلّم الموشن · تحريك الشعار

تحريك الشعار في Remotion.شعار واحد، 17 ستايلًا.

كل الأمثلة هنا لشعار متعلم نفسه، وكلها مصنوعة بالكود في Remotion، ولكل مثال مؤثراته الصوتية. اختر الستايل الذي يناسب شعارك، ثم أعطِ هذه الصفحة لوكيل الذكاء الاصطناعي: فيها طريقة بناء كل ستايل.

17 ستايل 6 عائلات بخلفية أو بدون خلفية مرجع لوكلاء الذكاء الاصطناعي
localhost:3000 · Remotion Studio
✓نفس الشعار، 17 حركة
إلى الوكيلهذا شعاري بصيغة SVG. حرّكه بستايل «الهيرو».
إلى الوكيل الذكي · For AI agents

أعطاك المستخدم هذا الملف؟ هو يريد شعاره متحركًا.

هذه الصفحة مرجع لتحريك الشعار في Remotion. اختار المستخدم ستايلًا منها (أو سيختار)، وطريقة بناء كل ستايل مكتوبة في بطاقته تحت «للوكيل: طريقة البناء».

الطريقة

  1. الأدوات والطريقة كلها في الريبو. انسخه: git clone https://github.com/motalim-ai/motion-starter-kit.git، واقرأ AGENTS.md، ثم اتبع .agents/skills/logo-animation/SKILL.md مرحلة بمرحلة. المشروع الجاهز في logo/.
  2. اطلب ملف الشعار بصيغة SVG إن لم يرسله، وضعه في logo/public/logo/logo.svg. ثم npm run split، وانظر إلى صورة Parts لتعرف الرمز والكلمة والنقاط والجملة.
  3. اسأل كل أسئلتك مرة واحدة (القائمة المجاورة)، بلغة المستخدم وبكلام بسيط، مع اقتراحك لكل سؤال. لا تسأل عما قاله في طلبه.
  4. ابنِ الستايل بطريقته المكتوبة في بطاقته، وبالكود المرجعي المذكور فيها، على شعار المستخدم.
  5. الكلمة العربية لا تُقسَّم إلى حروف منفصلة أبدًا. الستايلات التي تكتبها أو تحرّكها تبنيها من هيكل الحروف (npm run skeleton).
  6. افتح Remotion Studio للمستخدم، ولا ترندر حتى يشاهد ويوافق.

الأسئلة (مرة واحدة)

  1. الستايل: أي ستايل من هذه الصفحة؟ (اسمه أو رقمه)
  2. الخلفية: هل يريد الشعار بخلفية بلون محدد (وما اللون؟)، أم بدون خلفية (شفافًا) ليضعه فوق فيديوهاته، أم النسختين معًا؟
  3. ألوان الشعار: إن كانت الخلفية داكنة، أو سيضع النسخة الشفافة فوق فيديو داكن: هل يتحوّل النص الأسود إلى الأبيض؟ أم عنده نسخة من الشعار للخلفيات الداكنة؟
  4. المدة: اقترح مدة الستايل (6 ثوانٍ تقريبًا). من 3 إلى 8 ثوانٍ تكفي.
  5. الصوت: مؤثرات صوتية على لحظات الحركة، أم بدون صوت؟
  6. المقاس: عرضي 16:9، أم طولي 9:16، أم مربع 1:1؟ وبدقة 1080p أم 4K؟
  7. الاستخدام: أين سيضعه؟ بداية فيديو يوتيوب، أو موقع، أو ريلز. هذا يحدد صيغة التصدير.
الخلفية والتصدير

بخلفية، أم بدون خلفية؟

اسأل المستخدم عن هذا دائمًا. الشعار الشفاف يوضع فوق أي فيديو أو صورة في برنامج المونتاج.

بخلفية بلون محدد

اللون في logo/src/config.ts: background: "#F3F2EE". اقترح لونًا من ألوان شعار المستخدم، أو الخلفية الافتراضية للستايل.

التصدير: npm run render -- --approved --id <Style> ← ملف MP4 جاهز للنشر.

بدون خلفية (شفاف)

اجعل background: null: لا تُرسم الخلفية ولا الحبيبات ولا التظليل ولا التوهّج خلف الشعار.

التصدير: npm run render -- --approved --id <Style> --alpha ← ملفان:

  • MOV (ProRes 4444): لبرامج المونتاج مثل Premiere وFinal Cut وDaVinci Resolve.
  • WebM (VP9): للمواقع ولمشاريع Remotion.

ملف MP4 لا يحفظ الشفافية. وإن كان في الشعار نص أسود والفيديو الذي سيوضع فوقه داكن، فاقترح نسخة بنص أبيض (recolor: { "#000000": "#FFFFFF" }).

مثال: ستايل «اللمعة» بدون خلفية (WebM). متصفح Safari لا يعرض شفافية WebM؛ افتحه في Chrome أو Firefox.

رسم وكتابة · 2

الشعار يُرسم أمامك.

خط أو قلم يرسم الشعار، ثم يمتلئ باللون.

01

رسم الخطوط

Line draw · L01-LineDraw

يناسب: الشعارات الأنيقة، والمقدّمات التعليمية الهادئة.

الحركة: قلم بسنٍّ مضيء يرسم حدود الشعار جزءًا بعد جزء، ثم يمتلئ اللون من مركز الرمز، وتتلوّن الكلمة من اليمين.

قلمسحبة سريعةتكّةضربةنغمة الشعار
للوكيل: طريقة البناء
المدة 6 ثالخلفية الافتراضية: فاتحة
  1. من الإطار 0: خطوط إرشاد باهتة (شبكة أو دوائر رفيعة) حتى لا تبدأ الشاشة فارغة.
  2. ارسم حدود كل جزء بـ draw في PartStyle (يعتمد على evolvePath): خط بلون الجزء وسُمكه نحو 1.4 وحدة شعار، بالترتيب: الرمز، ثم الكلمة، ثم النقاط، ثم الجملة، مع تداخل 40 إلى 120 ملي ثانية بين الأجزاء.
  3. ضع سنًّا مضيئًا صغيرًا (دائرة بتوهّج خفيف) على طرف الخط الذي يُرسم الآن، بنقطة من getPointAtLength.
  4. التعبئة: الرمز يمتلئ من مركزه (دائرة قص تكبر)، والكلمة تتلوّن من اليمين إلى اليسار (مستطيل قص يتحرك).
  5. نطّة خفيفة (1.02) عند الاكتمال، ثم ثبات على الشعار الأصلي.

يحتاج: أجزاء الشعار فقط.

تجنّب:

  • خط سميك يغطي تفاصيل الحروف الصغيرة.
  • رسم الأجزاء كلها في وقت واحد: الترتيب هو ما يجعلها تبدو مرسومة.

الكود المرجعي: logo/reference/motalim/styles/L01LineDraw.tsx

ابحث في Pinterest ↗ الفيديو كاملًا ↗
02

الكتابة بالقلم

Handwriting reveal · L02-Handwriting

يناسب: الشعارات النصية، والخط العربي خصوصًا.

الحركة: قلم رفيع يمرّ على الشعار كله: يرسم الرمز فيمتلئ الحبر داخله، ثم يكتب الكلمة على هيكل حروفها من اليمين إلى اليسار، وينقّط التشكيل، ويكتب الجملة.

قلمانزلاقماركرتكّةنغمة الشعار
للوكيل: طريقة البناء
المدة 8.4 ثالخلفية الافتراضية: فاتحةيحتاج هيكل الحروف
  1. اصنع هيكل الحروف بأرقام أجزاء الكلمة والجملة في شعار المستخدم، مثل: npm run skeleton -- --group word=p8 --group tag=p9-p24. وتحقّق منه بصورة Skeleton. أضف مجموعة لكل جزء من الرمز يُرسم كخط.
  2. plan(group, start, speed) في src/strokes.ts يعطي حركات القلم بالزمن: رسم أو رفع. السرعة نحو 440 وحدة/ثانية للكلمة، و760 للجملة، والرفع أسرع.
  3. الكشف: قناع (mask) فيه خطوط بيضاء على مسار كل حركة، بعرض half × 2 + 2.4، مع strokeDasharray يكبر مع الزمن. الشكل الحقيقي يظهر من خلال القناع، فتبدو الحروف مكتوبة بسُمكها الحقيقي.
  4. القلم رفيع (نحو 4.6 بكسل عرضًا) ومائل، ويتبع pointAt على الحركة الحالية، ويرتفع قليلًا في حركات الرفع.
  5. الرمز: حدّه يُرسم بخط حبر، ثم يمتلئ لونه من مركزه. الأجزاء الداخلية تُكتب بحبر بلونها.
  6. النقاط والتشكيل: القلم يقفز إليها بعد الكلمة، وكل نقطة تظهر بـ spring.
  7. الكاميرا تتبع القلم بتكبير نحو 1.4، ثم تنفتح على الشعار كاملًا في النهاية. القناع يصبح مصمتًا لينتهي بالشكل الأصلي تمامًا.

يحتاج: هيكل الكلمة والجملة (npm run skeleton).

تجنّب:

  • قلم يمرّ على جزء من الكلمة فقط: القلم يمرّ على الشعار كله والكلمة كاملة.
  • قلم سميك.
  • كشف الكلمة بمسحة مستقيمة بدل الكتابة على الهيكل.

الكود المرجعي: logo/reference/motalim/styles/L02Handwriting.tsx

ابحث في Pinterest ↗ الفيديو كاملًا ↗
تجميع وتحوّل · 3

قطع تتجمّع، وأشكال تتحوّل.

الشعار يتكوّن من أجزائه، أو من شكل بسيط يتحوّل إليه.

03

تجميع الأجزاء

Logo assembly · L03-Assembly

يناسب: الشعارات المكوّنة من قطع واضحة.

الحركة: الرمز ينفتح، وأجزاؤه الداخلية تخرج منه وتسقط فوقه بنطّة، ثم تخرج الكلمة من خلف الرمز وتسقط النقاط في أماكنها.

فرقعة عميقةطقّةارتطامانزلاقكتابةنغمة الشعار
للوكيل: طريقة البناء
المدة 6 ثالخلفية الافتراضية: فاتحة
  1. الشكل الخلفي للرمز يكبر من نقطة بـ spring (damping نحو 11).
  2. الأجزاء الداخلية تخرج من تحت أو تسقط من فوق وتستقر بنطّة. اقصصها بالشكل الخلفي (clip) حتى لا تظهر خارجه.
  3. الكلمة تنزلق من خلف الرمز: قصّ (clip) يخفي ما يقع فوق الرمز أثناء الانزلاق.
  4. النقاط تسقط في أماكنها واحدة بعد الأخرى من اليمين، ثم الجملة تظهر قطعة قطعة.

يحتاج: أجزاء الرمز منفصلة (الشكل الخلفي والأجزاء الداخلية).

تجنّب:

  • أجزاء داخلية تظهر خارج حدود الرمز.
  • الكلمة تمرّ فوق الرمز وهي تنزلق.

الكود المرجعي: logo/reference/motalim/styles/L03Assembly.tsx

ابحث في Pinterest ↗ الفيديو كاملًا ↗
04

التحوّل

Shape morph · L04-Morph

يناسب: العلامات الذكية والتقنية.

الحركة: نقطة تتحوّل إلى مربع ثم إلى شكل الرمز، ونقطة أخرى تصير الجزء الداخلي، ثم يُرسم خط متموّج تنهض منه الحروف بشكلها الحقيقي من اليمين إلى اليسار.

فرقعةتمطّطسحبة هواءسحرنغمة الشعار
للوكيل: طريقة البناء
المدة 6 ثالخلفية الافتراضية: فاتحةيحتاج هيكل الحروف
  1. morph(a, b, k) في src/morph.ts يحوّل شكلًا مقفولًا إلى آخر بعيّنات نقاط متساوية. لا تستخدم interpolatePath (يفشل حين يختلف عدد النقاط).
  2. نقطة في الوسط تتمطّط إلى مربع ناعم، ثم إلى الشكل الخلفي للرمز في مكانه.
  3. داخل الرمز: نقطة تصير الجزء الداخلي. الأشكال التي فيها أكثر من كونتور (شكل بفتحة) تنمو بـ grow(d, k).
  4. الكلمة: خط متموّج، ثم نقاط هيكل الحروف تنهض من الموجة من اليمين إلى اليسار وتُرسم خطوطًا بسُمك الحرف، ثم تتلاشى إلى الشكل الحقيقي.
  5. النقاط والتشكيل تظهر من نقاط صغيرة.

يحتاج: هيكل الكلمة (npm run skeleton).

تجنّب:

  • تحويل الكلمة العربية من شكل لا علاقة له بها: النتيجة سيئة جدًا. ابنِها من هيكلها.
  • خط مائل يظهر داخل شكل له فتحة (استخدم grow).

الكود المرجعي: logo/reference/motalim/styles/L04Morph.tsx

ابحث في Pinterest ↗ الفيديو كاملًا ↗
05

أشكال هندسية

Geometric build · L05-Geometric

يناسب: الشركات والمنصات المنظّمة.

الحركة: أربعة أرباع ملوّنة تدور وتبني الرمز ثم تتوحّد بلونه، والكلمة تنكشف بأعمدة متتالية، وأشكال هندسية تطفو حولها.

طقّةبريققلبةكتابةضربةنغمة الشعار
للوكيل: طريقة البناء
المدة 6 ثالخلفية الافتراضية: فاتحة
  1. من الإطار 0: شبكة خطوط باهتة وأشكال هندسية صغيرة تطفو.
  2. الشكل الخلفي للرمز يُبنى من 4 أرباع (قصّ بأربعة أرباع) بأربعة ألوان من الهوية، تدور وتقفل، ثم تتوحّد بلون الرمز الأصلي.
  3. الأجزاء الداخلية تخرج، وجزء ينقلب في مكانه (scaleX من -1 إلى 1).
  4. الكلمة تنكشف بأعمدة رأسية متتالية (مستطيلات قص) من اليمين إلى اليسار، ثم الجملة.

يحتاج: أجزاء الشعار فقط.

تجنّب:

  • ألوان من خارج هوية الشعار.

الكود المرجعي: logo/reference/motalim/styles/L05Geometric.tsx

ابحث في Pinterest ↗ الفيديو كاملًا ↗
كشف وإضاءة · 3

الشعار ينكشف.

سائل، أو شرائط ألوان، أو ضوء يكشف الشعار.

06

السائل الذي يملأ

Liquid fill · L06-LiquidFill

يناسب: المنتجات، وأي فكرة عن الامتلاء والنمو.

الحركة: سائل يُصبّ في رمز فارغ ويرتفع بموجتين وفقاعات، ثم يسقط جزء فيه برذاذ، وتمتلئ الكلمة كالحبر.

سائلفقاعاتفرقعة عميقةانزلاقنغمة الشعار
للوكيل: طريقة البناء
المدة 6 ثالخلفية الافتراضية: فاتحة
  1. حدّ الرمز يظهر فارغًا.
  2. شلال من فوق (مسار عرضه يتغيّر بضجيج ناعم noise1) يصبّ في الرمز.
  3. المستوى يرتفع بموجتين (مجموع جيبين) داخل قصّ بشكل الرمز، مع فقاعات صغيرة (rnd)، ثم يهدأ.
  4. جزء داخلي يسقط في السائل برذاذ قطرات، ثم يستقر.
  5. الكلمة تمتلئ كالحبر من اليمين (قصّ بحافة متموّجة)، ثم النقاط، ثم الجملة.

يحتاج: شكل مقفول كبير في الرمز يُملأ.

تجنّب:

  • سائل يخرج من حدود الشكل.
  • حركة ماء خطية بلا تسارع.

الكود المرجعي: logo/reference/motalim/styles/L06LiquidFill.tsx

ابحث في Pinterest ↗ الفيديو كاملًا ↗
07

المسح بالألوان

Mask wipe · L07-MaskWipe

يناسب: الإعلانات السريعة، ومقدّمات البرامج.

الحركة: شرائط مائلة بألوان الهوية تعبر الشاشة بسرعة وتكشف الرمز، ثم تنكشف الكلمة بمسحة يركبها شريط ملوّن.

سحبة سريعةانزلاقضربةفرقعة خفيفةنغمة الشعار
للوكيل: طريقة البناء
المدة 6 ثالخلفية الافتراضية: فاتحة
  1. 3 شرائط مائلة بألوان من الهوية تعبر الشاشة من اليمين إلى اليسار، بينها 80 ملي ثانية تقريبًا.
  2. الرمز يظهر خلف آخر شريط.
  3. الكلمة تنكشف بمسحة مائلة (قصّ بمضلّع) يركبها شريط ملوّن رفيع على حافتها.
  4. النقاط تظهر، ثم الجملة بشريط رفيع.

يحتاج: أجزاء الشعار فقط.

تجنّب:

  • قناع الكلمة يغطي الرمز: ارسمه بعد ظهور الكلمة فقط.

الكود المرجعي: logo/reference/motalim/styles/L07MaskWipe.tsx

ابحث في Pinterest ↗ الفيديو كاملًا ↗
08

اللمعة

Light sweep · L08-LightSweep

يناسب: العلامات الفاخرة والمقدّمات السينمائية.

الحركة: الشعار يظهر بهدوء على خلفية نظيفة، ثم يعبره شريط ضوء مائل واحد من اليمين إلى اليسار، فيلمع على الحروف كالفضة وعلى الرمز بلون أفتح، ثم يستقر.

تصاعد هادئسحبة سريعةبريقنغمة الشعار
للوكيل: طريقة البناء
المدة 6 ثالخلفية الافتراضية: فاتحة
  1. الكود جاهز: logo/src/styles/LightSweep.tsx، ويعمل مع أي شعار دون تقسيم.
  2. خلفية فاتحة نظيفة (تدرّج دائري ناعم)، والشعار يظهر بهدوء (شفافية وبلور خفيف).
  3. شريط ضوء واحد مائل (22°) مقصوص بأشكال الشعار فقط، بمزج screen، ووراءه خط لامع رفيع. يعبر من اليمين إلى اليسار في نحو 1.5 ثانية بسرعة شبه ثابتة.
  4. توهّج خفيف خلف الشعار يتبع الشريط (مع الخلفية فقط)، و«تنفّس» 1.2% أثناء العبور، ثم ثبات.

يحتاج: لا شيء.

تجنّب:

  • خلفية مزدحمة أو داكنة بلا سبب.
  • لمعات كثيرة أو شرائط متعددة: شريط واحد فقط.
  • لمعة خارج حدود الشعار.

الكود المرجعي: logo/reference/motalim/styles/L08LightSweep.tsx

ابحث في Pinterest ↗ الفيديو كاملًا ↗
حروف وحركة · 3

الحروف تتحرك، والشعار له روح.

حركة مرحة: حروف تقفز، ومطاط، وشخصية.

09

حرفًا بعد حرف

Kinetic typing · L09-Kinetic

يناسب: الأسماء والكلمات، والشعارات النصية.

الحركة: الكلمة تُكتب كأنها على لوحة مفاتيح: مؤشّر يومض، وكل ضغطة تُظهر حرفًا كاملًا متصلًا بما قبله، ثم التشكيل، ثم الجملة، ثم يظهر الرمز كأنك ضغطت Enter.

نقرةتكّةكتابةفرقعة عميقةنغمة الشعار
للوكيل: طريقة البناء
المدة 6 ثالخلفية الافتراضية: فاتحة
  1. مؤشّر يومض عند بداية الكلمة (يمينها في العربية).
  2. الكلمة لا تُقطّع ولا تتحرك قطعها: تنكشف بقصّ (مستطيل) يتوقف عند نقاط الوصل بين الحروف. حدّد هذه النقاط (قيم x على خط الوصل الرفيع) من صورة Parts، مثل CUTS = [300, 222, 165, 112, 68, -15].
  3. كل ضغطة تكشف حرفًا كاملًا متصلًا بما قبله، والحرف الجديد يلمع بلون مميز لحظة، والمؤشّر يقفز إلى حافة القص.
  4. ثم النقاط والتشكيل، ثم الجملة بسرعة، ثم «Enter»: الرمز يظهر بنبضة.

يحتاج: نقاط الوصل بين الحروف (من صورة Parts).

تجنّب:

  • تقسيم الكلمة العربية إلى حروف منفصلة تتحرك: الحروف العربية متصلة.
  • قصّ في منتصف حرف.

الكود المرجعي: logo/reference/motalim/styles/L09Kinetic.tsx

ابحث في Pinterest ↗ الفيديو كاملًا ↗
10

المطاطي

Elastic / jelly · L10-Elastic

يناسب: العلامات المرحة، ومحتوى الأطفال.

الحركة: خيط مطاطي يتمطّط ثم ينقطع، فتنهض منه الكلمة قطعةً واحدة متصلة وتهتز كالجيلي في موجة من اليمين إلى اليسار، ثم لمسة صغيرة تهزّ الرمز من جديد.

تمطّططقّةزنبركارتطامنغمة الشعار
للوكيل: طريقة البناء
المدة 6 ثالخلفية الافتراضية: فاتحةيحتاج هيكل الحروف
  1. خيط مطاطي رفيع (منحنى) يتمطّط ثم ينقطع.
  2. الكلمة قطعة واحدة: ارسم نقاط هيكلها خطوطًا بسُمك الحرف (half × 2)، وحرّك كل نقطة بموجة نابض تخمد (إزاحة y = سعة × جيب × خمود) تبدأ من اليمين وتمشي إلى اليسار، ثم تتلاشى إلى الشكل الحقيقي.
  3. الرمز: ضغط ومطّ (scaleX وscaleY) بـ spring.
  4. في النهاية لمسة على الرمز فيهتز مرة أخرى بخفة، ثم ثبات.

يحتاج: هيكل الكلمة (npm run skeleton).

تجنّب:

  • تقطيع الكلمة إلى شرائح تهتز كلٌّ وحدها.
  • فيزياء مبالغ فيها: السعة خفيفة.

الكود المرجعي: logo/reference/motalim/styles/L10Elastic.tsx

ابحث في Pinterest ↗ الفيديو كاملًا ↗
11

الشعار شخصية

Logo as a character · L11-Character

يناسب: التعليم، ومحتوى الأطفال، والعلامات الودودة.

الحركة: الرمز يقفز كالكرة، ثم تظهر له عينان، ويرفع جزءه العلوي تحيّةً، ويرتّب الكلمة والتشكيل بجانبه، ثم يعود شعارًا.

زنبركارتطامفرقعة خفيفةتكّةفرقعةنغمة الشعار
للوكيل: طريقة البناء
المدة 6 ثالخلفية الافتراضية: فاتحة
  1. الرمز يطلّ من حافة الكادر، ثم يقفز إلى مكانه بقوس وثلاث نطّات تتناقص، مع ضغط ومطّ وظلّ يكبر ويصغر.
  2. تظهر له عينان (بيضاويان) تنفتحان وترمشان، وجزؤه العلوي يرتفع كتحية، وينظر نحو الكلمة.
  3. الكلمة تظهر بزنبرك، والنقاط تسقط واحدة واحدة، والجملة تزحف.
  4. نطّة رضا، والعينان تُغلقان وتختفيان، فيعود الشعار الأصلي تمامًا.

يحتاج: رمز له شكل جسم (دائرة أو مربع).

تجنّب:

  • أن يبقى للرمز عينان في الإطار الأخير.

الكود المرجعي: logo/reference/motalim/styles/L11Character.tsx

ابحث في Pinterest ↗ الفيديو كاملًا ↗
أبعاد ومؤثرات · 4

أبعاد ومؤثرات قوية.

ثلاثي الأبعاد، وجزيئات، وتشويش رقمي، ونيون.

12

قلبة 3D

3D flip · L12-Flip3D

يناسب: المقدّمات القوية والإعلانات.

الحركة: الرمز يأتي من العمق ويدور كعملة سميكة حتى يستقر أمامك، ثم تنقلب الكلمة كبطاقة، وتسقط الجملة كلمة كلمة.

دورانسحبة عكسيةضربة سينمائيةقلبةنغمة الشعار
للوكيل: طريقة البناء
المدة 6 ثالخلفية الافتراضية: داكنة
  1. خلفية داكنة مع بقعة ضوء تدور ببطء. حوّل النص الأسود إلى أبيض (CONFIG.recolor).
  2. الـ 3D كله CSS: perspective وpreserve-3d. الرمز ميدالية سميكة: وجه أمامي وخلفي، وحافة من شرائح (96 للدائرة) كل شريحة مضاءة حسب زاويتها.
  3. الرمز يأتي من العمق ويدور حول محور Y (لفّتان وربع) ويهدأ، ويستقر بارتداد صغير ولمعة.
  4. الكلمة تقوم كبطاقة على مفصلة (rotateX من 90°)، والنقاط تطقطق، والجملة تنقلب كلمة كلمة.
  5. سحبة reverse تنتهي تمامًا لحظة الاستقرار.

يحتاج: أجزاء الشعار، وكلمات الجملة كمجموعات.

تجنّب:

  • رمز رقيق بلا سُمك: الحافة هي ما يعطي الإحساس بالعمق.

الكود المرجعي: logo/reference/motalim/styles/L12Flip3D.tsx

ابحث في Pinterest ↗ الفيديو كاملًا ↗
13

الجزيئات

Particles · L13-Particles

يناسب: التقنية والذكاء الاصطناعي.

الحركة: جزيئات صغيرة تدور كمجرّة، ثم تتجمّع على حدود الشعار نقطةً نقطة، وومضة تكشفه كاملًا.

دوّامةتصاعدضربة سينمائيةلمعاتنغمة الشعار
للوكيل: طريقة البناء
المدة 6 ثالخلفية الافتراضية: داكنة
  1. خلفية داكنة عميقة. 250 جزيئًا على الأكثر، ولكلٍّ منها نقطة هدف على حدود الشعار (getPointAtLength موزّعة حسب طول كل جزء).
  2. الجزيئات تعوم، ثم تُسحب إلى دوّامة مائلة حول وسط الكادر.
  3. كل جزيء يفلت من الدوّامة وينزل على نقطته (الرمز أولًا، ثم الكلمة، ثم الجملة)، وخيط رفيع يصل النقاط.
  4. النقاط تشحن ضوءًا، ثم ومضة ناعمة: الشعار الصلب يظهر من اليمين إلى اليسار، والنقاط تذوب فيه، والباقي يتفرّق، وحلقة ضوء من الرمز.

يحتاج: أجزاء الشعار فقط.

تجنّب:

  • آلاف العناصر (الرندر يبطؤ جدًا).
  • Math.random: استخدم rnd(seed) الثابت.

الكود المرجعي: logo/reference/motalim/styles/L13Particles.tsx

ابحث في Pinterest ↗ الفيديو كاملًا ↗
14

Glitch

Glitch · L14-Glitch

يناسب: التقنية والألعاب.

الحركة: مؤشّر يومض، ثم يظهر الشعار بتشويش رقمي: شرائح منزاحة وانقسام ألوان، وكل مرة أهدأ من سابقتها، حتى يستقر نظيفًا.

تكّةتشويش رقميتشويش قصيرصعقةضربة
للوكيل: طريقة البناء
المدة 6 ثالخلفية الافتراضية: داكنة
  1. شاشة داكنة: سطور مسح أفقية، وشريط مسح يعبر، ونقاط ضجيج، ومؤشّر يومض ثم يتمدّد إلى خط.
  2. الشعار يظهر بدفعات تشويش: شرائح أفقية عبر الشعار كله مزاحة أفقيًا (rnd(seed + frame) ثابت)، وانقسام ألوان (نسختان بلونين بمزج screen)، وكتل بيانات.
  3. كل دفعة أهدأ من سابقتها، ثم صعقة قوية، ثم ثبات نظيف على الشعار الأصلي، مع رجفة صغيرة واحدة في الجملة.

يحتاج: أجزاء الشعار فقط.

تجنّب:

  • تشويش يستمر حتى النهاية: الثانية ونصف الأخيرة نظيفة.
  • ومضات سريعة جدًا ومزعجة للعين.

الكود المرجعي: logo/reference/motalim/styles/L14Glitch.tsx

ابحث في Pinterest ↗ الفيديو كاملًا ↗
15

النيون

Neon · L15-Neon

يناسب: الأجواء الليلية والترفيه.

الحركة: أنابيب نيون مطفأة على جدار مظلم، تشتعل بالترتيب برجفة حقيقية، ثم ينقطع التيار لحظة، ويعود ويضيء الشعار بألوانه.

اشتعال نيونطنين نيونصعقةنغمة الشعار
للوكيل: طريقة البناء
المدة 6 ثالخلفية الافتراضية: داكنة
  1. جدار داكن، وأنابيب زجاج مطفأة: حدود الأجزاء بخط باهت.
  2. كل أنبوب يشتعل بالترتيب برجفة حقيقية (تسلسل ثابت من التشغيل والإطفاء)، والتوهّج نسخ من الخط ببلور 12 على الأكثر.
  3. الرمز، ثم الكلمة والنقاط، ثم الجملة. ثم صعقة ورجفة في الإشارة كلها.
  4. الألوان تمتلئ داخل الأنابيب، فيظهر الشعار الأصلي بهالة خفيفة، وطنين هادئ حتى النهاية.

يحتاج: أجزاء الشعار فقط.

تجنّب:

  • توهّج قوي يمحو شكل الحروف.
  • مرشّحات بلور كثيرة (الرندر يبطؤ).

الكود المرجعي: logo/reference/motalim/styles/L15Neon.tsx

ابحث في Pinterest ↗ الفيديو كاملًا ↗
عرض الهوية · 2

الشعار في عالمه.

أفلام قصيرة تقدّم الهوية كاملة: الشعار يولد أمامك، ثم يظهر في عالمه.

16

الهيرو

Brand hero · L16-Hero

يناسب: تقديم هوية جديدة، وافتتاحية القناة أو الموقع.

الحركة: شرائط زجاجية بعرض خطوط الرمز تتقاطع، وقوس سماوي يدور، فيولد الرمز من التقاطعات في حركة كاميرا واحدة، ثم تنكشف الكلمة. بعدها قطع سريع على الشعار في صور حقيقية: موبايل، وهودي، وكروت، وبوستر، وورق محفور، ونوتة.

تصاعد هادئسحبة سريعةدورانضربةبريققلبةنغمة الشعار
للوكيل: طريقة البناء
المدة 12.4 ثالخلفية الافتراضية: داكنة
  1. حلّل هندسة الرمز: لكل خط مستقيم فيه شريط طويل بعرض الخط نفسه يمرّ في منتصفه، ولكل منحنى حلقة بعرضه. هذه الشرائط هي التي يولد منها الرمز.
  2. الشريط: مستطيل طويل جدًا بتعبئة بيضاء شفافة (7.5%)، وحافتين رفيعتين أوضح (32%)، بمزج screen فيضيء التقاطع وحده. الشرائط تدخل بالتتابع (0.25 ثانية بينها) بانزلاق عمودي عليها وميل صغير يستقر.
  3. قطعة منحنية بلون مميز (قوس 70° على إحدى الحلقات) بتوهّج خفيف: في البداية تملأ الكادر تقريبًا، ثم تدور لفّة ونصفًا وتستقر في مكانها من الرمز.
  4. كاميرا واحدة متصلة: تكبير على مقياس لوغاريتمي من 6 إلى 1، والتركيز ينتقل من القطعة إلى الرمز ثم إلى الشعار كله. لا قفزات.
  5. أجزاء الرمز تظهر فضية حيث تتقاطع الشرائط، ثم لحظة الاكتمال: ومضة خفيفة، والشكل الخلفي يمتلئ بلونه من مركزه، والشرائط تختفي.
  6. الكلمة تنكشف كاملة بقناع بحافة ناعمة من اليمين إلى اليسار (mask في PartStyle)، ثم الجملة.
  7. قطع على خلفية فاتحة (0.6 ثانية)، ثم صور الموكاب: 0.8 ثانية لكل صورة، مع دفع كاميرا 4.5% حول الشعار. الصورة تملأ الكادر (cover) حول نقطة تركيز، فتعمل في العرضي والطولي.
  8. التركيب على الصور: على الأسطح الفاتحة الشعار بمزج multiply فيظهر ملمس السطح عليه، وعلى الورق الداكن محفور بظلّين (فاتح أعلى اليسار وداكن أسفل اليمين)، وعلى النوتة خطوط رصاص مع خطوط الإنشاء. شاشة الموبايل الخضراء تُزال بمرشح feColorMatrix، وتحتها شاشة التطبيق.
  9. الختام: الشعار على الخلفية الداكنة 2.6 ثانية.

يحتاج: صور موكاب فاضية مربعة من المستخدم أو من مولّد صور (البرومبتات في .agents/skills/logo-animation/references/mockups.md)، وقياس هندسة الرمز (عرض خطوطه ومراكز منحنياته).

تجنّب:

  • خطوط رفيعة كالرسم الهندسي بدل الشرائط العريضة: النتيجة تبدو درسًا لا فيلمًا (رُفضت).
  • موكاب مرسوم بالكود (موبايل أو كروت من CSS): يبدو رخيصًا (رُفض). استخدم صورًا حقيقية.
  • كاميرا بقفزات تكبير منفصلة.
  • توهّج قوي أو ومضة بيضاء كبيرة.

الكود المرجعي: logo/reference/motalim/styles/L16Hero.tsx

ابحث في Pinterest ↗ الفيديو كاملًا ↗النسخة الطولية ↗
17

لوحة التصميم

Design canvas · L17-Canvas

يناسب: المنصات التقنية وأدوات التصميم، وتقديم الهوية بروح عصرية.

الحركة: ماوس يرسم الرمز على لوحة زرقاء: يسحب دائرة، ويشدّ مستطيلًا فيصير كوبًا، وخطًا فيصير قبعة. ثم شريط تعبئة، وأجزاء تتفكك على خطوط إرشاد مع قائمة، ورمز مجسّم يدور أبيض ثم زجاجيًا، والشعار على ورق مربعات بخطوط القياس، وكروت الألوان، والرمز قزحي، وعلى هودي يحدّده الماوس.

نقرةانزلاقطقّةسحبة هواءدورانقلبةبريقنغمة الشعار
للوكيل: طريقة البناء
المدة 17.4 ثالخلفية الافتراضية: زرقاء
  1. لغة برامج التصميم: ماوس أصفر، ومربعات تحديد بأربعة مقابض بيضاء، وخطوط إرشاد رفيعة، وشبكة خفيفة، وقائمة داكنة بعناصر قليلة («انطلاق» مظلّل بلون الهوية). كل ضغطة ماوس عليها صوت click.
  2. الرسم على لوحة بلون الهوية: الماوس يسحب كل شكل من ركن إلى ركن (شكل أبيض شفاف بحد رفيع داخل مربع تحديد)، ثم يحوّله: مستطيل تُدوَّر قاعدته فيصير U ثم يتلاشى إلى الشكل الحقيقي، وخط يُشدّ من منتصفه فيصير زاوية ثم الشكل الحقيقي. في النهاية تحديد أبيض حول الرمز كله.
  3. قطع على الأسود: شريط «التعبئة» تحت الرمز، والماوس يسحب المقبض من 0% إلى 100%، والرمز يمتلئ معه.
  4. الأجزاء تتفكك على خطوط إرشاد متقطعة (كل جزء على اتجاه هندسته)، وتظهر القائمة، والماوس يضغط «انطلاق»، فترجع الأجزاء بـ spring.
  5. خط نور: الرمز أبيض يطير قطريًا بذيل من نسخ مغبّشة، ثم مجسّم 3D بـ CSS (طبقات من الرمز بـ translateZ داخل preserve-3d) يدور: أبيض مطفي أولًا، ثم زجاج (وجه شفاف بحدود، وطبقات جانبية شبه شفافة، وتوهّج خفيف خلفه).
  6. صفحة المواصفات: الشعار على ورق مربعات بخطوط قياس (أعلى الحروف والخط الأساسي وحافة الرمز) وكلمة baseline صغيرة، والكلمة تنكشف بقناع ناعم من اليمين. ثم نفس اللقطة على شبكة بلون الهوية بشعار أبيض (الشكل الخلفي للرمز يصير أبيض والداخلي بلون الخلفية).
  7. قطعات سريعة (0.6 إلى 0.8 ثانية): الشعار صغير على لون الهوية، والكلمة ضخمة تعبر الكادر ورمز زجاجي فوقها، وكروت الألوان رأسية بأكوادها تصعد بـ spring، والرمز فاتح، والرمز بزجاج قزحي من ألوان الهوية، والرمز ستيكر على دائرة داكنة.
  8. صورة موكاب (هودي) والشعار عليها بمزج multiply، والماوس يحدّده وتفتح القائمة. ثم الختام: الشعار على لون الهوية 2.2 ثانية.

يحتاج: أجزاء الرمز وأشكالها البسيطة (دائرة، ومستطيل، وخط)، وصورة موكاب واحدة على الأقل (انظر references/mockups.md)، وأكواد ألوان الهوية.

تجنّب:

  • تقطيع الكلمة العربية حرفًا حرفًا مثل الكتابة اللاتينية في المرجع: الكلمة تنكشف كاملة بقناع ناعم، أو تعبر ضخمة كاملة.
  • رمز بلون الخلفية نفسه (دائرة زرقاء على أزرق): اعكس ألوانه على خلفية الهوية.
  • ماوس صغير جدًا أو حركة ماوس خطية: الماوس يتحرك بتسارع ويضغط بوضوح.
  • توهّج زجاج قوي يمحو الشكل.

الكود المرجعي: logo/reference/motalim/styles/L17Canvas.tsx

ابحث في Pinterest ↗ الفيديو كاملًا ↗النسخة الطولية ↗
قبل أن تطلب

كيف تطلب تحريك شعارك من الذكاء الاصطناعي؟

أعطِ الوكيل (Claude Code أو Codex أو Antigravity) رابط الريبو أو هذه الصفحة، وشعارك بصيغة SVG، واسم الستايل. وهو يسألك الباقي.

01

ملف SVG

الشعار بصيغة SVG، لا صورة PNG. فبه يستطيع الوكيل أن يحرّك كل جزء وحده.

02

الستايل

اختر ستايلًا من هذه الصفحة باسمه أو رقمه.

03

الخلفية

بلون محدد، أم بدون خلفية لتضعه فوق فيديوهاتك؟ أم النسختين؟

04

المراجعة

يفتح لك الوكيل Remotion Studio لتشاهد. ولا يرندر حتى تقول «رندر».

مثال على الطلبhttps://github.com/motalim-ai/motion-starter-kit
هذا شعاري بصيغة SVG. أريده متحركًا بستايل «اللمعة» من ملف ستايلات تحريك الشعار، بدون خلفية لأضعه فوق فيديوهاتي.
github.com/motalim-ai/motion-starter-kit youtube.com/@motalim-ai