مصمّم موشن بالذكاء الاصطناعي

AR

فتح التطبيق تجريبي

Simple Motion

شرح المنتج على شكل وصفة مشروب مرسومة يدويًا

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

تاريخ النشر 10 نوفمبر 2026

استخدام الموجّه

يُفتح الموجّه في التطبيق: أضِف موادك وسيبني الوكيل الفيديو.

الإبلاغ عن هذا الموجّه

الفكرة

اصنع موشن جرافيك مربعًا مدته 30 ثانية (1080x1080، 30 إطارًا في الثانية) بموسيقى لاونج خفيفة في الخلفية، ومؤثرات صوتية مرحة مع كل حركة، وبدون صوت تعليق. إنه فيديو توضيحي مرسوم يدويًا على شكل «وصفة» لمنتجي: تُعرض خطواته كمشروب يُحضَّر خطوة بخطوة داخل كأس. هو مشهد مرسوم متواصل واحد بلا قطعات، وكل شيء يتغير في مكانه. الشكل رسم ثنائي الأبعاد مسطح على صفحة بلون لافندر أبيض باهت، بخطوط خارجية بلون حبر داكن «تغلي» مثل الرسوم المتحركة المرسومة يدويًا، وحروف كبيرة كرتونية عريضة بأسلوب الملصقات. استبدل كل كلمة بين علامتي اقتباس أدناه بكلمات منتجي، مع إبقاء كل كلمة بطول مماثل تقريبًا ليبقى التصميم متماسكًا. تجنب القطعات وحركات الكاميرا والتظليل أو التدرجات خارج التعبئة المسطحة، وتجنب التعليق الصوتي.

البنية

الإيقاع هادئ ومتساوٍ. المقدمة سريعة ومرتدة، وكل سكب يستغرق 5 ثوانٍ ثابتة، والتحريك والقشرة الملتوية أسرع قليلًا، والخاتمة تستمر 3 ثوانٍ. كل تغيير للبطاقة يقع على نبضة من الموسيقى بإيقاع 120 نبضة في الدقيقة: 6.0 و11.0 و16.0 و21.0 و24.5 و27.0 ثانية.

0–2.5 ث، العنوان: «YOUR BRAND» (استبدله باسم علامتك) يُوضع كبيرًا في المنتصف بعرض نحو 920 بكسل. ابتداءً من 0.15 ث تُختم حروفه واحدًا تلو الآخر في أماكنها خلال 0.83 ث. يبدأ كل حرف بحجم 10%، وأخفض بمقدار 22 بكسل ومائلًا بزاوية ±8–14°، ويهبط في 0.36 ث مع تجاوز ناعم (back.out 1.7). عند 1.4 ث يظهر سطر صغير، «what your product is»، تدريجيًا تحته، ويختفي عند 2.45 ث.
2.5–3.6 ث، التسليم: يرتفع العنوان 365 بكسل ويصغر إلى 58% في 0.8 ث (power3.inOut) ليصبح الترويسة. في الأثناء، ابتداءً من 2.87 ث، يرسم الكأس نفسه كرسم تخطيطي بالقلم: الجدار الأيسر، ثم الأيمن، ثم قطع حافة الكأس، ثم منحنى القاع، في نحو 0.4 ث إجمالًا. بعد ذلك يظهر تعبئته تدريجيًا (0.28 ث)، ويظهر العنوان الفرعي للترويسة تدريجيًا تحت العنوان.
3.6–6.0 ث، الخطوة 1: تدخل البطاقة بميل 4° وظهور تدريجي سريع (0.15 ث)، وتُختم قيمتها الكبيرة من تلقاء نفسها. تقرأ البطاقة «STEP 01» و«PICK» و«TEMPLATE» و«vertical, horizontal or square». يظهر المتتبع تدريجيًا مع أول دائرة نشطة. تسقط ثلاث مكعبات ثلج من أعلى الإطار بفاصل 0.35 ث. يسقط كل منها بالجاذبية (power2.in، نحو 0.3 ث)، ويرتد نحو 140 بكسل، ويقفز 20 بكسل ثم يستقر: اثنان في القاع وواحد في الأعلى. تومض ثلاث خطوط شرارة صغيرة فوق كل مكعب أثناء مروره بحافة الكأس. كل هبوط يملأ ثلث شريط تقدم البطاقة ويضيف كلمة واحدة من الحالة «three short words».
6.0–21.0 ث، الخطوات 2–4: ثلاث عمليات سكب مدة كل منها 5 ثوانٍ، وكلها على النمط نفسه. تقرأ البطاقات «STEP 02 / SAY / KINETIC TYPE / tell the chat what to show»، ثم «STEP 02 / SAY / SHAPES / the agent builds the animation»، ثم «STEP 02 / SAY / SOUND / music and sound effects to the rhythm». تنزلق زجاجة من اليسار (0.23 ث) وتقف. ثم تميل إلى 115° على قوس صغير، قليلًا إلى الأعلى ثم إلى الأسفل نحو نقطة السكب (0.37 ث)، وتسكب تيارًا منحنيًا في الكأس. الزجاجات لافندر، ثم وردية، ثم بلون الحبر الداكن. على كل منها ملصق أبيض عليه شعاري كأيقونة صغيرة مربعة بحواف مدورة، وكلمة («TYPE» و«SHAPES» و«SOUND») وسطر صغير («kinetic» و«3D effects» و«music»). تظهر علامة هدف رمادية («01» ثم «02» ثم «03») بجانب الكأس مع خط متقطع يعبرها. يرتفع المشروب إلى تلك العلامة خلال 2 ث (sine.inOut)، ويطفو الثلج معه، وتقفز قطرات الرذاذ حيث يسقط التيار. يبدأ المشروب أبيض صافيًا، ثم يتحول إلى الوردي مع السكب الثاني، ثم إلى أرجواني داكن (وردي ممزوج بحبر داكن) مع الثالث، ويمتزج كل لون خلال نحو 1.3 ث. يمتلئ شريط التقدم وتُكتب عبارة «live preview» من تلقاء نفسها في عشر خطوات. ثم تتحول العلامة إلى الوردي، ويترك أعلى التيار ويسقط، وتميل الزجاجة عائدة وتنزلق خارجة.
21.0–24.5 ث، الخطوة 5: تقرأ البطاقة «STEP 03 / REFINE / IN WORDS / “bigger”, “slower”, “another colour”». ملعقة بار خفيفة برأس كروي تسقط بتباطؤ سريع. تتأرجح 8° ذهابًا وإيابًا بدورة مدتها 0.8 ث بينما تتزاحم المكعبات وتخفت، ثم ترتفع خارجة. يمتلئ الشريط بخطوات من 4 إطارات بينما تُكتب «live preview».
24.5–27.0 ث، الخطوة 6: تقرأ البطاقة «STEP 03 / MP4 / EXPORT / download the MP4». تظهر فجأة قشرة برتقال ملتوية فوق الكأس، وتلتف وتنضغط نحو 0.8 ث بينما تسقط قطرات برتقالية. ثم تنزلق إلى الحافة (0.5 ث، power2.inOut) بينما تنتهي كتابة «try it free».
27.0–30 ث، الخاتمة: تُعاد البطاقة كـ «YOUR TAGLINE / OPEN APP / YOURSITE.COM / pick · describe · refine». تنطلق سبع شرطات قصيرة وردية وبرتقالية حول الكأس (0.16 ث) وتستمر في «التنفس» بلطف. يكبر الكأس 4% خلال 0.6 ث ويثبت حتى النهاية.

التكوين

الألوان:

الصفحة: لافندر أبيض باهت (#FAF9FF).
الخطوط الخارجية: حبر داكن (#1C0B5D)، نحو 3 بكسل بأطراف مستديرة.
الكأس: لافندر (#F0EDFF) مع قاعدة بصبغة بنفسجية.
مكعبات الثلج: مربعات مدورة، بيضاء بنسبة 40% فوق ما خلفها، مع خط في الزاوية الداخلية.
البطاقات: بيضاء بظل لافندر ناعم مزاح.
البرتقالي (#FE9117): الزينة ونصف شرطات الخاتمة.
الخطوط:
خط العرض: حروف كبيرة كرتونية عريضة (شيء مثل Lalezar) بأسلوب الملصقات. الوجه وردي (#FB2D89)، مع خط خارجي بلون الحبر الداكن خلفه وبروز بنفسجي (#7C6CF2) مزاح نحو الأسفل واليسار.
النص الصغير: خط يدوي طباعي ودود (شيء مثل Playpen Sans)، رمادي أرجواني خافت (#6B6385) للنص الأساسي ووردي للتسميات.
التخطيط بعد المقدمة:
الترويسة: أعلى المنتصف، بعرض نحو 540 بكسل، مع سطر صغير تحتها: «first benefit · second benefit · third benefit».
الكأس: كأس قصير مخروطي يسار المنتصف، بعرض نحو 290 بكسل، الحافة عند y 457 والقاعدة عند y 797.
بطاقة المعلومات: على اليمين، 390x248 بكسل بزوايا 14 بكسل وإطار بلون الحبر الداكن. من الأعلى إلى الأسفل تضم عنوانًا تمهيديًا ورديًا صغيرًا، والقيمة الكبيرة بحروف الملصقات، وعنوانًا بحروف كبيرة داكنة، وسطرًا مكتوبًا بخط اليد، وشريط تقدم على شكل حبة مع كلمة حالة قصيرة على يمينه.
المتتبع: ست خطوات على طول الأسفل. الدوائر بعرض 43 بكسل وتبعد 156 بكسل عن بعضها على سكة رفيعة، مع تسميات صغيرة بحروف كبيرة مصغرة تحتها: «TEMPLATE» و«TYPE» و«SHAPES» و«SOUND» و«REFINE» و«EXPORT».

التقنيات

الخطوط الغالية: يحصل كل خط مرسوم على اهتزاز خفيف بمقدار 1–2 بكسل يتغير إلى اهتزاز جديد كل 4 إطارات، في القطعة كلها، مثل إزاحة اضطراب فوق الخطوط.
إعادة تركيب البطاقة: في أول إطار من كل خطوة، تظهر القيمة الكبيرة الجديدة وحدها لإطار واحد، ثم تعود البطاقة. تُختم القيمة الكبيرة من تلقاء نفسها من حجم 72% مع تجاوز back.out.
الكتابة: تُكتب كلمات الحالة من تلقاء نفسها على خطوات.
المتتبع، الخطوة الحالية: دائرتها بحلقة بلون الحبر الداكن ونقطة وردية وتسمية وردية، و«تتنفس» بين 100% و112% كل ثانية.
المتتبع، الخطوة المنتهية: قبل البطاقة التالية بنحو 0.1 ث، تمتلئ دائرتها بالوردي وتُرسم علامة صح بيضاء في 0.17 ث. تتحول تسميتها إلى لون الحبر الداكن، وتمتلئ السكة إلى الدائرة التالية بالوردي في 0.37 ث.
المتتبع، الخطوات القادمة: تبقى خافتة مع نقطة رمادية صغيرة.

الموسيقى

مقطوعة موسيقية لاونج-بوب دافئة ومريحة بإيقاع 120 نبضة في الدقيقة في مقام كبير: طبول بالفرش، وكونترباص مستدير، وفيبرافون، وأوتار بيتزيكاتو، وطقطقة أصابع، وقليل من الشيكر. اجعلها قليلة الكثافة بلا لحن رئيسي، لتبقى تحت المؤثرات. تبدأ ببضع نوتات منقورة من الفيبرافون والبيتزيكاتو بلا طبول، ويدخل باص ناعم عند 2 ث. الإيقاع الكامل بالفرش مع الباص المتنقل يبدأ تمامًا عند بطاقة السكب الأولى عند 6.0 ث. يبقى ثابتًا خلال عمليات السكب والتحريك والقشرة الملتوية، ويصل إلى ضربة وتر ختامية عند 28.0 ث بينما يستقر الكأس المنتهي، ويتلاشى حتى النهاية. اجعلها 30 ثانية بالضبط، بمزج نحو -14 LUFS وذروة حقيقية تحت -1 dBTP.

الصوت

بدون صوت تعليق. كل مؤثر يقع على إطاره، واضحًا فوق الموسيقى؛ ولا تحتاج الموسيقى أبدًا إلى أن ترتفع لتفسح له المجال.

العنوان: فرقعة ناعمة لكل حرف، ترتفع قليلًا في النغمة وتتحرك من اليسار إلى اليمين بينما تُبنى الكلمة.
التسليم: صوت اندفاع لطيف تحت ارتفاع العنوان، وخدش قلم خافت لكل خط بينما يرسم الكأس نفسه.
البطاقات: خفقة ورق وضربة خافتة في كل مرة تُوزَّع فيها بطاقة وتُختم كلمتها الكبيرة.
هبوط الثلج: طرقة جافة قصيرة من الثلج على الكأس لكل مكعب، مع اتصالين أو ثلاثة بفارق بضعة ميلي ثوانٍ وضربة منخفضة تحت السقوط. أنعم للارتداد وأصغر للقفزة الأخيرة، وكل ضربة بارزة بوضوح عن الموسيقى.
الزجاجات: صوت اندفاع ناعم عند انزلاق كل زجاجة وعند ميلانها.
عمليات السكب: كل واحدة مسموعة بوضوح ومختلفة. أولًا تيار صافٍ فوّار ومتناثر يطرق الثلج، ثم سكب أكثر امتلاءً بقرقرات سريعة، ثم سكب داكن شرابي بقرقرات بطيئة وعميقة. امنح كل سكب جسمًا في نطاق 1–4 كيلوهرتز حيث يقع التيار وجيب الهواء الرنان في الكأس، ليبدو أعلى بنحو 8 ديسيبل من الثواني المحيطة هناك. اجعلها نقية: في الغالب زجاج رنان وفقاعات، وقليل من الهسهسة.
حول كل سكب: ترتفع نغمة جيب الهواء من سكب إلى آخر مع امتلاء الكأس، وتسقط بضع قطرات أخيرة بعد كل منها. تنخفض الموسيقى نحو 5 ديسيبل تحت كل سكب وتعود بلطف، ويتبع صوت اندفاع الزجاجة وهي تخرج.
المتتبع: رنين تأكيد ناعم من نغمتين كلما أُنجزت خطوة، أعلى قليلًا للأخيرة.
الملعقة: رنة معدنية عند سقوطها، وثلج يطرق الكأس عند كل طرف من تأرجحها، وصوت اندفاع عند خروجها.
القشرة: نقرة عند ظهورها، وثلاث رشات رذاذ ناعمة أثناء التفافها، وطرقة خفيفة عند استقرارها على الحافة.
الخاتمة: رنين ساطع مع انفجار الشرطات، فوق لمعان زجاجي خافت حتى النهاية.
المزج النهائي: نحو -14 LUFS، وذروة حقيقية تحت -1 dBTP.

المراجع

رسوم متحركة مرسومة يدويًا بخطوط تغلي، وفيديوهات توضيحية مسطحة للتطبيقات بأسلوب الملصقات، ورسوم وصفات الكوكتيل حيث يمثل كل مكوّن ميزة.

ما يلزم تجهيزه

شعارك أو أيقونة تطبيقك، علامة مربعة بسيطة تُقرأ بحجم صغير؛ تظهر على الملصقات البيضاء للزجاجات الثلاث.

حيل الموشن ديزاين التي بُني منها الفيديو، ولكل منها كود مستقل تفتحه في المتصفح أو تعطيه لوكيلك.

معاينة تقنية «ارتجاف الخطوط المرسومة يدويًا» — عند 0:16 من الفيديو

الملمس

ارتجاف الخطوط المرسومة يدويًا

يهتز كل خط مرسوم بمقدار بكسل أو اثنين ويستقر على اهتزاز جديد كل 4 إطارات، كما في الرسوم المتحركة المرسومة يدويًا حيث يُعاد تتبع كل رسم. يوضع فلتر SVG (feTurbulence بقيمة baseFrequency 0.016 وأوكتاف واحد، ثم feDisplacementMap بقيمة scale 3.6) على الحدود الخارجية، ويقوم الخط الزمني المتوقف بتغيير بذرة التشويش كل 4/30 ثانية، فيمكن التنقل داخل الارتجاف ويقع على إطارات كاملة.

متى تُستخدم لإضفاء إحساس دفتر الرسم اليدوي على الرسومات المتجهة المسطحة والخطوط الخارجية وخطوط العناوين.

عرض الكود

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ارتجاف الخطوط المرسومة يدويًا</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1080px; height: 1080px; overflow: hidden; background: #FAF9FF; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #FAF9FF; }
.art { position: absolute; inset: 0; width: 1080px; height: 1080px; }
.ink { fill: none; stroke: #1C0B5D; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fill { fill: #F0EDFF; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1080" data-height="1080">
  <svg width="0" height="0" style="position:absolute"><filter id="boil" x="-10%" y="-10%" width="120%" height="120%"><feTurbulence id="boilNoise" type="fractalNoise" baseFrequency="0.016" numOctaves="1" seed="1" result="n"/><feDisplacementMap in="SourceGraphic" in2="n" scale="3.6" xChannelSelector="R" yChannelSelector="G"/></filter></svg>
  <svg class="art clip" data-start="0" data-duration="4" viewBox="0 0 1080 1080"><g transform="translate(188 40)" filter="url(#boil)"><path class="fill" d="M209,460 L234,786 Q352,808 470,786 L495,460 Z"/><ellipse class="fill" cx="352" cy="457.5" rx="143" ry="22"/><path class="ink" d="M209,461 L234,786"/><path class="ink" d="M495,461 L470,786"/><path class="ink" d="M209,457.5 A143,22 0 1 1 495,457.5 A143,22 0 1 1 209,457.5"/><path class="ink" d="M234,786 Q352,808 470,786"/></g></svg>
</div>
<script>
const DURATION = 4;
const tl = gsap.timeline({ paused: true });
// Boil: a new noise seed every 4 frames at 30 fps (7.5 drawings a second, whole frames each).
for (let k = 0; k * 4 / 30 < DURATION; k++) tl.set("#boilNoise", { attr: { seed: 1 + (k % 9) } }, k * 4 / 30);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

معاينة تقنية «حروف ملصقات تظهر واحدًا تلو الآخر» — عند 0:00 من الفيديو

الطباعة

حروف ملصقات تظهر واحدًا تلو الآخر

يُرتَّب عنوان سميك كاملًا أولًا، ثم يُختم كل حرف في مكانه: من scale 0.1 وأسفل بمقدار 22 px ومائلًا (بالتناوب من -14 إلى +12 درجة) حتى يستقر خلال 0.36 ثانية مع back.out(1.7)، بمعدل حرف كل 0.14 ثانية. كل حرف ملصق: تعبئة وردية، وحد بحبر داكن خلفه مرسوم بـ text-stroke على ::before، وبروز بنفسجي مزاح نحو الأسفل واليسار على ::after.

متى تُستخدم لكشف عنوان مرح يُقرأ حرفًا حرفًا دون تحريك تخطيط الكلمة.

عرض الكود

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>حروف ملصقات تظهر واحدًا تلو الآخر</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Lalezar&family=Playpen+Sans:wght@400&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1080px; height: 1080px; overflow: hidden; background: #FAF9FF; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #FAF9FF; }
.art { position: absolute; inset: 0; width: 1080px; height: 1080px; }
#word { position: absolute; left: 0; right: 0; top: 440px; text-align: center; font: 176px/1 "Lalezar", sans-serif; letter-spacing: -4px; white-space: nowrap; --sw: 7px; --sd: 7px; --ssw: 2.6px; }
.pop { position: relative; display: inline-block; color: #FB2D89; isolation: isolate; }
.pop::before, .pop::after { content: attr(data-ch); position: absolute; left: 0; top: 0; }
.pop::before { z-index: -1; color: #1C0B5D; -webkit-text-stroke: var(--sw) #1C0B5D; }   /* outline, behind the fill */
.pop::after { z-index: -2; transform: translate(calc(-1 * var(--sd)), var(--sd)); color: #7C6CF2; -webkit-text-stroke: var(--ssw) #1C0B5D; } /* extruded depth */
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1080" data-height="1080">
  <div id="word" class="clip" data-start="0" data-duration="3"></div>
</div>
<script>
const TEXT = "HELLO";            // the word
const START = 0.15, STAGGER = 0.14;   // first letter, gap between letters (s)
const word = document.getElementById("word");
for (const ch of TEXT) { const s = document.createElement("span"); s.className = "pop"; s.dataset.ch = ch; s.textContent = ch; word.appendChild(s); }
const tl = gsap.timeline({ paused: true });
gsap.utils.toArray("#word .pop").forEach((el, i) => {
  const t0 = START + i * STAGGER, tilt = [-14, 10, -8, 12, -10, 8, -12][i % 7];
  gsap.set(el, { opacity: 0 });
  tl.set(el, { opacity: 1 }, t0);
  tl.fromTo(el, { scale: 0.1, y: 22, rotation: tilt }, { scale: 1, y: 0, rotation: 0, duration: 0.36, ease: "back.out(1.7)", immediateRender: true }, t0);
});
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

معاينة تقنية «عنوان رئيسي يصعد ليصبح الترويسة» — عند 0:02 من الفيديو

التخطيط

عنوان رئيسي يصعد ليصبح الترويسة

يبقى العنوان الافتتاحي في منتصف الإطار وتحته سطر صغير؛ يتلاشى السطر خلال 0.16 ثانية، ثم يرتفع العنوان 365 px ويصغر إلى 0.576 خلال 0.8 ثانية مع power3.inOut، بشكل متماثل حول منتصفه، ويصبح الترويسة. ثم يظهر عنوان فرعي جديد من ثلاثة أجزاء تحته خلال 0.4 ثانية عند الاستقرار، فتنتقل المقدمة إلى التخطيط دون قطع.

متى تُستخدم عندما تتحول بطاقة المقدمة إلى ترويسة دائمة لمحتوى توضيحي.

عرض الكود

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>عنوان رئيسي يصعد ليصبح الترويسة</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Lalezar&family=Playpen+Sans:wght@400&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1080px; height: 1080px; overflow: hidden; background: #FAF9FF; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #FAF9FF; }
.art { position: absolute; inset: 0; width: 1080px; height: 1080px; }
#titleBox { position: absolute; left: 40px; top: 378px; width: 1000px; height: 220px; }
#title { position: absolute; left: 0; width: 1000px; top: 36px; text-align: center; font: 176px/1 "Lalezar", sans-serif; color: #FB2D89; -webkit-text-stroke: 3px #1C0B5D; }
#intro, #sub { position: absolute; left: 0; width: 1080px; text-align: center; font-family: "Playpen Sans", sans-serif; color: #6B6385; }
#intro { top: 586px; font-size: 28.5px; }
#sub { top: 181px; font-size: 24px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1080" data-height="1080">
  <div id="titleBox" class="clip" data-start="0" data-duration="4"><div id="title">BIG IDEA</div></div>
  <div id="intro" class="clip" data-start="0" data-duration="4">a short line</div>
  <div id="sub" class="clip" data-start="0" data-duration="4">first part · second part · third part</div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
tl.fromTo("#intro", { opacity: 0, y: 6 }, { opacity: 1, y: 0, duration: 0.24, ease: "power1.out" }, 0.3);
tl.to("#intro", { opacity: 0, duration: 0.16, ease: "power1.in" }, 1.35);
// The move: 0.8 s, power3.inOut, to the header place and size.
tl.fromTo("#titleBox", { y: 0, scale: 1 }, { y: -365, scale: 0.576, duration: 0.8, ease: "power3.inOut" }, 1.4);
tl.fromTo("#sub", { opacity: 0 }, { opacity: 1, duration: 0.4, ease: "power1.out" }, 2.1);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

معاينة تقنية «مخطط يرسم نفسه ثم يمتلئ» — عند 0:03 من الفيديو

أشكال

مخطط يرسم نفسه ثم يمتلئ

يظهر الكائن كرسم: تُرسم مسارات حدوده بـ stroke-dashoffset بالتتابع (الجدار الأيسر 0.17 ثانية، الجدار الأيمن 0.14 ثانية من +0.10 ثانية، الحافة 0.20 ثانية من +0.20 ثانية، القاع 0.17 ثانية من +0.23 ثانية، power1.inOut)، وبعدها فقط يظهر اللون الداخلي تدريجيًا خلال 0.28 ثانية. مصفوفة الشرطات تساوي طول المسار زائد 24 ويبدأ الإزاحة بعد النهاية بـ 12، حتى لا تترك الأطراف المستديرة نقطة قبل بدء الخط.

متى تُستخدم لتقديم كائن مرسوم كأن قلمًا يرسمه، قبل أن يحصل على اللون والمحتوى.

عرض الكود

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>مخطط يرسم نفسه ثم يمتلئ</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1080px; height: 1080px; overflow: hidden; background: #FAF9FF; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #FAF9FF; }
.art { position: absolute; inset: 0; width: 1080px; height: 1080px; }
.ink { fill: none; stroke: #1C0B5D; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fill { fill: #F0EDFF; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1080" data-height="1080">
  <svg class="art clip" data-start="0" data-duration="3" viewBox="0 0 1080 1080"><g transform="translate(188 40)">
    <g id="fills"><path class="fill" d="M209,460 L234,786 Q352,808 470,786 L495,460 Z"/><ellipse class="fill" cx="352" cy="457.5" rx="143" ry="22"/></g>
    <path id="l" class="ink" d="M209,461 L234,786"/><path id="r" class="ink" d="M495,461 L470,786"/>
    <path id="rim" class="ink" d="M209,457.5 A143,22 0 1 1 495,457.5 A143,22 0 1 1 209,457.5"/><path id="b" class="ink" d="M234,786 Q352,808 470,786"/>
  </g></svg>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const START = 0.4;
const drawOn = (id, t0, dur) => {
  const el = document.getElementById(id), L = el.getTotalLength();
  tl.fromTo(el, { strokeDasharray: L + " " + (L + 24), strokeDashoffset: L + 12 }, { strokeDashoffset: 0, duration: dur, ease: "power1.inOut", immediateRender: true }, t0);
};
drawOn("l", START, 0.17);
drawOn("r", START + 0.1, 0.14);
drawOn("rim", START + 0.2, 0.2);
drawOn("b", START + 0.23, 0.17);
tl.fromTo("#fills", { opacity: 0 }, { opacity: 1, duration: 0.28, ease: "power1.out", immediateRender: true }, START + 0.4);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

معاينة تقنية «إعادة تركيب بطاقة الخطوة مع قيمة مختومة» — عند 0:06 من الفيديو

انتقال

إعادة تركيب بطاقة الخطوة مع قيمة مختومة

تعيد كل خطوة جديدة تركيب بطاقة المعلومات بدل المزج بينها: في إطار الخطوة تختفي البطاقة وتظهر القيمة الكبيرة الجديدة فقط بـ scale 0.72؛ تنطلق القيمة إلى حجمها الكامل خلال 0.3 ثانية (back.out(2.6)) بينما تعود البطاقة من ميل 4 درجات وscale 0.965 وشفافية صفر خلال 0.15 ثانية (power2.out). يختفي المحتوى القديم في الإطار نفسه فلا يبقى شيء.

متى تُستخدم للشروحات خطوة بخطوة حيث يجب أن تبدو كل خطوة جديدة كبطاقة وُزّعت للتو على الطاولة.

عرض الكود

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>إعادة تركيب بطاقة الخطوة مع قيمة مختومة</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Lalezar&family=Playpen+Sans:wght@400&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1080px; height: 1080px; overflow: hidden; background: #FAF9FF; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #FAF9FF; }
.art { position: absolute; inset: 0; width: 1080px; height: 1080px; }
#card, #bigs { position: absolute; left: 345px; top: 416px; width: 390px; height: 248px; }
#card .frame { position: absolute; inset: 0; border: 3px solid #1C0B5D; border-radius: 14px; background: #FFFFFF; box-shadow: 7px 8px 0 #F0EDFF; }
.pane { position: absolute; inset: 0; opacity: 0; }
.kicker { position: absolute; left: 27px; top: 32px; font: 17.5px/1 "Playpen Sans", sans-serif; color: #FB2D89; }
.name { position: absolute; left: 29px; top: 135px; font: 47px/1 "Lalezar", sans-serif; color: #1C0B5D; }
.note { position: absolute; left: 29px; top: 183px; font: 17.5px/1.2 "Playpen Sans", sans-serif; color: #6B6385; }
.big { position: absolute; left: 27px; top: 58px; font: 76px/1 "Lalezar", sans-serif; color: #FB2D89; -webkit-text-stroke: 2.5px #1C0B5D; opacity: 0; transform-origin: 30% 55%; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1080" data-height="1080">
  <div id="card" class="clip" data-start="0" data-duration="4"><div class="frame"></div>
    <div class="pane" id="p0"><div class="kicker">"STEP 01"</div><div class="name">"FIRST THING"</div><div class="note">"a short note about it"</div></div>
    <div class="pane" id="p1"><div class="kicker">"STEP 02"</div><div class="name">"NEXT THING"</div><div class="note">"another short note"</div></div>
  </div>
  <div id="bigs" class="clip" data-start="0" data-duration="4"><div class="big" id="b0">GO</div><div class="big" id="b1">NOW</div></div>
</div>
<script>
const STEPS = [0.6, 2.2];           // when each step arrives (s)
const tl = gsap.timeline({ paused: true });
gsap.set("#card", { opacity: 0 });
STEPS.forEach((s, i) => {
  tl.fromTo("#card", { opacity: 0, rotation: 4, scale: 0.965 }, { opacity: 1, rotation: 0, scale: 1, duration: 0.15, ease: "power2.out", immediateRender: false }, s);
  tl.set("#p" + i, { opacity: 1 }, s);
  tl.set("#b" + i, { opacity: 1 }, s);
  tl.fromTo("#b" + i, { scale: 0.72 }, { scale: 1, duration: 0.3, ease: "back.out(2.6)", immediateRender: false }, s);
  if (i > 0) { tl.set("#p" + (i - 1), { opacity: 0 }, s); tl.set("#b" + (i - 1), { opacity: 0 }, s); }
});
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

معاينة تقنية «متتبع الخطوات: نبض وعلامة وامتلاء المسار» — عند 0:05 من الفيديو

بيانات

متتبع الخطوات: نبض وعلامة وامتلاء المسار

صف من دوائر الخطوات على مسار. تتنفس دائرة الخطوة الحالية من 1 إلى 1.12 والعودة كل 1.03 ثانية (نصفا sine.inOut بمقدار 0.515 ثانية) مع نقطتها وتسميتها بلون التمييز. عند اكتمال الخطوة تمتلئ الدائرة بالوردي وتُرسم علامة صح بيضاء خلال 0.17 ثانية ويغمق النص، وبعد 0.03 ثانية يمتلئ المسار إلى الدائرة التالية خلال 0.37 ثانية (power1.inOut) بينما تبدأ الدائرة التالية بالتنفس.

متى تُستخدم لإظهار التقدم عبر تسلسل خطوات في أي شرح أو درس.

عرض الكود

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>متتبع الخطوات: نبض وعلامة وامتلاء المسار</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Lalezar&family=Playpen+Sans:wght@400&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1080px; height: 1080px; overflow: hidden; background: #FAF9FF; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #FAF9FF; }
.art { position: absolute; inset: 0; width: 1080px; height: 1080px; }
.rail { stroke: rgba(107, 99, 133, 0.3); stroke-width: 3; stroke-linecap: round; }
.railOn { stroke: #FB2D89; stroke-width: 3.4; stroke-linecap: round; }
.ring { fill: #FFFFFF; stroke: rgba(107, 99, 133, 0.3); stroke-width: 2.6; }
.dot { fill: rgba(107, 99, 133, 0.62); }
.done { fill: #FB2D89; stroke: #1C0B5D; stroke-width: 2.8; opacity: 0; }
.check { fill: none; stroke: #FFFFFF; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
#labels { position: absolute; inset: 0; }
.lbl { position: absolute; top: 580px; width: 200px; margin-left: -100px; text-align: center; font: 18px/1.2 "Playpen Sans", sans-serif; color: rgba(107, 99, 133, 0.62); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="5" data-width="1080" data-height="1080">
  <svg class="art clip" data-start="0" data-duration="5" viewBox="0 0 1080 1080" id="tracker"></svg>
  <div id="labels" class="clip" data-start="0" data-duration="5"></div>
</div>
<script>
const LABELS = ["FIRST", "SECOND", "THIRD", "FOURTH"];
const X = LABELS.map((_, i) => 306 + i * 156), Y = 540, R = 21.5;
const STARTS = [0.4, 1.6, 2.8, 4.0], DONE = [1.5, 2.7, 3.9];   // each step starts, and ends (s)
const NS = "http://www.w3.org/2000/svg", svg = document.getElementById("tracker");
const el = (tag, a, p) => { const e = document.createElementNS(NS, tag); for (const k in a) e.setAttribute(k, a[k]); p.appendChild(e); return e; };
for (let i = 0; i < X.length - 1; i++) {
  el("line", { class: "rail", x1: X[i] + R + 3.5, y1: Y, x2: X[i + 1] - R - 3.5, y2: Y }, svg);
  const on = el("line", { class: "railOn", id: "on" + i, x1: X[i] + R + 3.5, y1: Y, x2: X[i + 1] - R - 3.5, y2: Y }, svg);
  const len = X[i + 1] - X[i] - 2 * R - 7; on.style.strokeDasharray = len + " " + len; on.style.strokeDashoffset = len; on.dataset.len = len;
}
X.forEach((x, i) => {
  const n = el("g", { transform: "translate(" + x + " " + Y + ")" }, svg), g = el("g", { id: "n" + i }, n);
  el("circle", { class: "ring", r: R, id: "ring" + i }, g);
  el("circle", { class: "done", r: R, id: "done" + i }, g);
  el("circle", { class: "dot", r: 5.5, id: "dot" + i }, g);
  const ck = el("path", { class: "check", id: "ck" + i, d: "M-8.5,0.5 L-2.5,6.5 L8.5,-6" }, g); ck.style.strokeDasharray = "28 28"; ck.style.strokeDashoffset = 28;
  const l = document.createElement("div"); l.className = "lbl"; l.id = "l" + i; l.style.left = x + "px"; l.textContent = LABELS[i]; document.getElementById("labels").appendChild(l);
});
const tl = gsap.timeline({ paused: true });
STARTS.forEach((s, i) => {
  tl.set("#ring" + i, { stroke: "#1C0B5D" }, s);
  tl.set("#dot" + i, { fill: "#FB2D89" }, s);
  tl.set("#l" + i, { color: "#FB2D89" }, s);
  const end = DONE[i] ?? 5, cycles = Math.max(1, Math.floor((end - s) / 1.03));
  tl.fromTo("#n" + i, { scale: 1, svgOrigin: "0 0" }, { scale: 1.12, svgOrigin: "0 0", duration: 0.515, ease: "sine.inOut", yoyo: true, repeat: cycles * 2 - 1, immediateRender: false }, s);
  if (DONE[i] === undefined) return;
  tl.set("#n" + i, { scale: 1 }, end);
  tl.set("#done" + i, { opacity: 1 }, end);
  tl.set("#dot" + i, { opacity: 0 }, end);
  tl.fromTo("#ck" + i, { strokeDashoffset: 28 }, { strokeDashoffset: 0, duration: 0.17, ease: "power1.out", immediateRender: false }, end);
  tl.set("#l" + i, { color: "#1C0B5D" }, end);
  const on = document.getElementById("on" + i);
  tl.fromTo(on, { strokeDashoffset: on.dataset.len }, { strokeDashoffset: 0, duration: 0.37, ease: "power1.inOut", immediateRender: false }, end + 0.03);
});
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

معاينة تقنية «صبّ يملأ كوبًا» — عند 0:13 من الفيديو

أشكال

صبّ يملأ كوبًا

تنزلق زجاجة إلى الإطار وتميل إلى 115 درجة على قوس صغير (ترتفع 18 px ثم تنزل إلى نقطة الصب، 0.37 ثانية)، ويُرسم تيار من فوهتها على منحنى تربيعي نحو المشروب خلال 0.17 ثانية. يرتفع المستوى مع sine.inOut خلال 2 ثانية بينما يمتزج اللون باللون الجديد في نحو 1.3 ثانية؛ وتقفز قطرات الرذاذ فوق السطح حيث يسقط التيار. في النهاية ينفصل أعلى التيار ويسقط خلال 0.2 ثانية (power2.in) بينما تعود الزجاجة إلى وضعها. كل شيء يُحسب من الزمن في دالة تعيين واحدة، لذا يمكن تصيير أي إطار منفردًا.

متى تُستخدم للوصفات والخلط واستعارات الملء: كل ما يُصبّ في وعاء خطوة بخطوة.

عرض الكود

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>صبّ يملأ كوبًا</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1080px; height: 1080px; overflow: hidden; background: #FAF9FF; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #FAF9FF; }
.art { position: absolute; inset: 0; width: 1080px; height: 1080px; }
.ink { fill: none; stroke: #1C0B5D; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fill { fill: #F0EDFF; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="5" data-width="1080" data-height="1080">
  <svg class="art clip" data-start="0" data-duration="5" viewBox="0 0 1080 1080"><g transform="translate(188 40)">
    <path class="fill" d="M209,460 L234,786 Q352,808 470,786 L495,460 Z"/><ellipse class="fill" cx="352" cy="457.5" rx="143" ry="22"/>
    <path id="liq" stroke-width="2"/><ellipse id="top" stroke-width="2"/>
    <g id="drops"><circle r="3"/><circle r="4.6"/><circle r="3"/><circle r="4.6"/></g>
    <path id="sOut" fill="none" stroke="#1C0B5D" stroke-width="10.5" stroke-linecap="round"/><path id="sIn" fill="none" stroke="#FB2D89" stroke-width="6.4" stroke-linecap="round"/>
    <path class="ink" d="M209,461 L234,786"/><path class="ink" d="M495,461 L470,786"/><path class="ink" d="M209,457.5 A143,22 0 1 1 495,457.5 A143,22 0 1 1 209,457.5"/><path class="ink" d="M234,786 Q352,808 470,786"/>
    <g id="bottle"><path d="M-44,-12 Q-44,-27 -32,-34 Q-12,-46 -12,-62 L-12,-121 L12,-121 L12,-62 Q12,-46 32,-34 Q44,-27 44,-12 L44,123 Q44,135 32,135 L-32,135 Q-44,135 -44,123 Z" fill="#FB2D89" stroke="#1C0B5D" stroke-width="3" stroke-linejoin="round"/><rect x="-17.5" y="-135" width="35" height="15" rx="3" fill="#FB2D89" stroke="#1C0B5D" stroke-width="3"/><rect x="-36" y="20" width="73" height="75" rx="6" fill="#FFFFFF" stroke="#1C0B5D" stroke-width="2.6"/></g>
  </g></svg>
</div>
<script>
const FROM = "#FFFFFF", TO = "#FB2D89";   // drink before and after this pour
const LEVEL0 = 750, LEVEL1 = 621;            // surface y before and after
const ease = (n) => gsap.parseEase(n), c01 = (v) => Math.max(0, Math.min(1, v)), lerp = (a, b, p) => a + (b - a) * p;
function kf(track, t) { if (t <= track[0][0]) return track[0][1]; for (let i = 1; i < track.length; i++) { const [t1, v1, e] = track[i]; if (t <= t1) { const [t0, v0] = track[i - 1], p = (t - t0) / (t1 - t0); return v0 + (v1 - v0) * (e ? ease(e)(p) : p); } } return track[track.length - 1][1]; }
const BX = [[0.2, -60], [0.45, 107, "power2.out"], [0.8, 107], [0.97, 112, "power1.inOut"], [1.17, 130, "power2.out"], [3.6, 130], [3.82, 120, "power1.in"], [4.04, 107, "power2.out"]];
const BY = [[0.8, 300], [0.97, 282, "power1.out"], [1.17, 337, "power2.inOut"], [3.6, 337], [3.82, 300, "power1.in"], [4.04, 300, "power2.out"]];
const BR = [[0.8, 0], [0.97, 70, "power1.in"], [1.17, 115.3, "power2.out"], [3.6, 115.3], [3.82, 62, "power1.in"], [4.04, 0, "power2.out"]];
const hex = (h) => [1, 3, 5].map((i) => parseInt(h.slice(i, i + 2), 16));
const mix = (a, b, p) => "rgb(" + hex(a).map((v, i) => Math.round(lerp(v, hex(b)[i], p))).join(",") + ")";
const inL = (y) => 217 + 25 * (y - 460) / 326, inR = (y) => 487 - 25 * (y - 460) / 326;
const $ = (id) => document.getElementById(id);
function render(t) {
  const level = lerp(LEVEL0, LEVEL1, ease("sine.inOut")(c01((t - 1.37) / 2))), q = ease("sine.inOut")(c01((t - 1.6) / 1.33));
  const col = mix(FROM, TO, q), edge = mix("#9E9E9E", "#1C0B5D", q * 0.6);
  const xl = inL(level), xr = inR(level), on = level < LEVEL0 - 1;
  $("liq").setAttribute("d", on ? "M" + xl + "," + level + " L" + inL(746) + ",746 Q352,764 " + inR(746) + ",746 L" + xr + "," + level + " Z" : "");
  $("liq").setAttribute("fill", col); $("liq").setAttribute("stroke", edge);
  Object.entries({ cx: (xl + xr) / 2, cy: level, rx: on ? (xr - xl) / 2 : 0, ry: Math.min(12.5, (LEVEL0 - level) * 0.5 + 2) }).forEach(([k, v]) => $("top").setAttribute(k, v));
  const c = hex(FROM).map((v, i) => lerp(v, hex(TO)[i], q)), surf = c.map((v) => Math.round(v + (255 - v) * 0.22));   // the surface: the drink, a touch lighter
  $("top").setAttribute("fill", "rgb(" + surf.join(",") + ")"); $("top").setAttribute("stroke", edge);
  const bx = kf(BX, t), by = kf(BY, t), br = kf(BR, t), a = br * Math.PI / 180;
  $("bottle").setAttribute("transform", "translate(" + bx + " " + by + ") rotate(" + br + ")");
  const pouring = t >= 1.17 && t < 3.77, mx = bx + 128.5 * Math.sin(a), my = by - 128.5 * Math.cos(a) + 6, ey = Math.min(level, 752);
  const s1 = c01((t - 1.17) / 0.17), s0 = t > 3.57 ? ease("power2.in")(c01((t - 3.57) / 0.2)) : 0;
  ["sOut", "sIn"].forEach((id) => { const p = $(id); p.setAttribute("d", "M" + mx + "," + my + " Q" + (mx + 47) + "," + (my + 102) + " " + (mx + 66) + "," + ey); const L = p.getTotalLength(); p.style.strokeDasharray = Math.max(0, (s1 - s0) * L) + " " + (L + 10); p.style.strokeDashoffset = -s0 * L; p.style.opacity = pouring ? 1 : 0; });
  [...$("drops").children].forEach((d, i) => { const ph = (t * 2.4 + i * 0.27) % 1; d.setAttribute("cx", mx + 36 + i * 9); d.setAttribute("cy", level - 8 - Math.sin(ph * Math.PI) * 14 - (i % 2) * 5); d.setAttribute("fill", TO); d.setAttribute("stroke", "#1C0B5D"); d.setAttribute("stroke-width", 1.6); d.style.opacity = pouring && on ? 1 : 0; });
}
let now = 0; const driver = {}; Object.defineProperty(driver, "t", { get: () => now, set: (v) => { now = v; render(v); } });
const tl = gsap.timeline({ paused: true });
tl.fromTo(driver, { t: 0 }, { t: 5, duration: 5, ease: "none", immediateRender: true }, 0);
render(0);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

معاينة تقنية «سقوط مع ارتداد وشرر الاصطدام» — عند 0:04 من الفيديو

أخرى

سقوط مع ارتداد وشرر الاصطدام

تسقط الأجسام من أعلى الإطار تحت تأثير الجاذبية (power2.in، نحو 0.32 ثانية لمسافة 760 px)، وتضرب الأرض وترتد إلى الأعلى نحو 140 px (power2.out، 0.13 ثانية)، ثم تسقط ثانية وتقفز قفزة صغيرة بمقدار 20 px وتستقر، كل ذلك مع دوران خفيف ينحل إلى زاوية الاستقرار. ثلاث شرطات شرر قصيرة تومض فوق كل جسم لمدة 0.3 ثانية أثناء مروره بالحافة. يبدأ كل جسم بعد 0.35 ثانية من سابقه ويهبط في موضع مختلف، والأخير فوق البقية.

متى تُستخدم للأشياء التي تسقط في وعاء أو على سطح: الثلج والعملات والمكعبات والمنتجات في سلة.

عرض الكود

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>سقوط مع ارتداد وشرر الاصطدام</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1080px; height: 1080px; overflow: hidden; background: #FAF9FF; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #FAF9FF; }
.art { position: absolute; inset: 0; width: 1080px; height: 1080px; }
.ink { fill: none; stroke: #1C0B5D; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fill { fill: #F0EDFF; }
.cube { fill: rgba(255, 255, 255, 0.6); stroke: #1C0B5D; stroke-width: 2.6; }
.spark { fill: none; stroke: #1C0B5D; stroke-width: 2; stroke-linecap: round; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1080" data-height="1080">
  <svg class="art clip" data-start="0" data-duration="3" viewBox="0 0 1080 1080"><g transform="translate(188 40)"><path class="fill" d="M209,460 L234,786 Q352,808 470,786 L495,460 Z"/><ellipse class="fill" cx="352" cy="457.5" rx="143" ry="22"/><g id="items"></g><path class="ink" d="M209,461 L234,786"/><path class="ink" d="M495,461 L470,786"/><path class="ink" d="M209,457.5 A143,22 0 1 1 495,457.5 A143,22 0 1 1 209,457.5"/><path class="ink" d="M234,786 Q352,808 470,786"/></g></svg>
</div>
<script>
// Each item: x, rest y, rest angle, start time.
const ITEMS = [[296, 711, 14, 0.2], [402, 704, -15, 0.55], [351, 645, 31, 0.92]];
const NS = "http://www.w3.org/2000/svg", host = document.getElementById("items");
const el = (tag, a, p) => { const e = document.createElementNS(NS, tag); for (const k in a) e.setAttribute(k, a[k]); p.appendChild(e); return e; };
const tl = gsap.timeline({ paused: true });
ITEMS.forEach(([x, rest, ang, t0], i) => {
  const pos = el("g", { id: "pos" + i }, host), rot = el("g", {}, pos);
  el("rect", { class: "cube", x: -35, y: -35, width: 70, height: 70, rx: 13 }, rot);
  const sp = el("g", { opacity: 0 }, pos);
  ["M-44,-34 L-56,-44", "M-12,-52 L-15,-66", "M18,-50 L25,-63"].forEach((d) => el("path", { class: "spark", d }, sp));
  const fall = Math.sqrt((rest + 50) / 760) * 0.32;          // time to fall from y = -50
  gsap.set(pos, { x, y: -50 });
  tl.to(pos, { y: rest, duration: fall, ease: "power2.in" }, t0)
    .to(pos, { y: rest - 140, duration: 0.13, ease: "power2.out" })
    .to(pos, { y: rest, duration: 0.13, ease: "power2.in" })
    .to(pos, { y: rest - 20, duration: 0.06, ease: "power2.out" })
    .to(pos, { y: rest, duration: 0.06, ease: "power2.in" });
  tl.fromTo(rot, { rotation: ang - 40, svgOrigin: "0 0" }, { rotation: ang, svgOrigin: "0 0", duration: fall + 0.38, ease: "power1.out", immediateRender: true }, t0);
  const enter = t0 + fall * Math.sqrt((470 + 50) / (rest + 50));   // when it passes the rim (y 470)
  tl.set(sp, { opacity: 1 }, enter).to(sp, { opacity: 0, duration: 0.1 }, enter + 0.2);
});
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

معاينة تقنية «انفجار ختامي من الشرطات يتنفس» — عند 0:27 من الفيديو

جسيمات

انفجار ختامي من الشرطات يتنفس

عند اكتمال العمل تنطلق سبع شرطات قصيرة بلونين مميزين على أشعة حول الجسم الرئيسي (نصف قطر داخلي نحو 180-200 px وطول 26 px) خلال 0.16 ثانية مع power2.out، بعضها متأخر حتى 0.1 ثانية، ثم تواصل التنفس للداخل والخارج بمقدار 7 px في دورات sine مدتها 1.3 ثانية وبأطوار مختلفة. وفي الوقت نفسه يكبر الجسم 4.2% خلال 0.6 ثانية (sine.inOut) ويبقى كذلك.

متى تُستخدم للحظة هادئة تعني «انتهى» أو «تادا» في ختام بناء تدريجي، دون قصاصات ملونة.

عرض الكود

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>انفجار ختامي من الشرطات يتنفس</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1080px; height: 1080px; overflow: hidden; background: #FAF9FF; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #FAF9FF; }
.art { position: absolute; inset: 0; width: 1080px; height: 1080px; }
.ink { fill: none; stroke: #1C0B5D; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fill { fill: #F0EDFF; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1080" data-height="1080">
  <svg class="art clip" data-start="0" data-duration="4" viewBox="0 0 1080 1080"><g transform="translate(188 -70)"><g id="hero"><path class="fill" d="M209,460 L234,786 Q352,808 470,786 L495,460 Z"/><ellipse class="fill" cx="352" cy="457.5" rx="143" ry="22"/><path class="ink" d="M209,461 L234,786"/><path class="ink" d="M495,461 L470,786"/><path class="ink" d="M209,457.5 A143,22 0 1 1 495,457.5 A143,22 0 1 1 209,457.5"/><path class="ink" d="M234,786 Q352,808 470,786"/></g><g id="bursts"></g></g></svg>
</div>
<script>
const CX = 352, CY = 610, START = 0.5;
// angle (deg), radius, colour, delay
const RAYS = [[-104.8, 212, "#FE9117", 0], [-142.4, 228, "#FB2D89", 0.1], [181, 230, "#FE9117", 0], [164, 212, "#FB2D89", 0.03], [-65, 209, "#FB2D89", 0.06], [-27, 215, "#FE9117", 0], [8.3, 222, "#FB2D89", 0.04]];
const PHASE = [0, 2.2, 4.1, 1.3, 3.3, 5.2, 0.7];
const NS = "http://www.w3.org/2000/svg", host = document.getElementById("bursts");
const lines = RAYS.map(([, , c]) => { const l = document.createElementNS(NS, "line"); l.setAttribute("stroke", c); l.setAttribute("stroke-width", 4); l.setAttribute("stroke-linecap", "round"); host.appendChild(l); return l; });
const ease = (n) => gsap.parseEase(n), c01 = (v) => Math.max(0, Math.min(1, v));
function render(t) {
  RAYS.forEach(([a, r, , d], i) => {
    const t0 = START + d, l = lines[i];
    if (t < t0) { l.style.opacity = 0; return; }
    const p = ease("power2.out")(c01((t - t0) / 0.16));
    const wob = 7 * Math.sin(2 * Math.PI * Math.max(0, t - t0 - 0.16) / 1.3 + PHASE[i]) * c01((t - t0 - 0.16) / 0.3);
    const rad = a * Math.PI / 180, r0 = r - 34 + 18 * p + wob, r1 = r0 + 26 * p;
    l.setAttribute("x1", CX + r0 * Math.cos(rad)); l.setAttribute("y1", CY + r0 * Math.sin(rad));
    l.setAttribute("x2", CX + r1 * Math.cos(rad)); l.setAttribute("y2", CY + r1 * Math.sin(rad));
    l.style.opacity = 1;
  });
}
let now = 0; const driver = {}; Object.defineProperty(driver, "t", { get: () => now, set: (v) => { now = v; render(v); } });
const tl = gsap.timeline({ paused: true });
tl.fromTo(driver, { t: 0 }, { t: 4, duration: 4, ease: "none", immediateRender: true }, 0);
tl.fromTo("#hero", { scale: 1, svgOrigin: "352 623" }, { scale: 1.042, svgOrigin: "352 623", duration: 0.6, ease: "sine.inOut", immediateRender: false }, START + 0.36);
render(0);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

موجّهات أخرى

معاينة الموجّه «الغوص في جدار تطبيقات ثلاثي الأبعاد: عرض منتج في ثلاث خطوات»

الغوص في جدار تطبيقات ثلاثي الأبعاد: عرض منتج في ثلاث خطوات

<direction> أنشئ عرضًا توضيحيًا أفقيًا لمنتج بمقاس 1280x720 ومدته 31 ثانية، مبنيًا بالكامل على الرسوم المتحركة ومعه صوت. يُعرض كحركة كاميرا واحدة متواصلة بلا قطع ويتكرر بسلاسة: الإطار الأخير يلتقي بالأول. الفكرة: جدار من شاشات التطبيق مائل إلى الخلف في 3D، تغوص الكاميرا في إحدى الشاشات، فتصبح تلك الشاشة نافذة التطبيق، وتعرض ثلاث خطوات مرقمة ما يفعله المنتج قبل بطاقة ختامية بشعاري. المظهر نظيف وعصري: واجهة متجهية مسطحة ترسمها أنت، وعمق ناعم، ومساحة واسعة، وحركة هادئة ودقيقة. تجنب القطع الحادة واللقطات الحقيقية والصور الجاهزة والخلفيات المزدحمة وحركات التسارع المرتدة أو الكرتونية وأي شيء يكسر التكرار. </direction> <structure> البداية، من 0 إلى 4 ث تقريبًا: جدار من شاشات التطبيق مائل إلى الخلف في 3D ينجرف ببطء. يظهر فوقه عنوان في المنتصف مثل "Your ideas, in motion" (استبدله بعنوانك)، ثم يتلاشى بضبابية. الغوص، من 4 إلى 6 ث تقريبًا: تندفع الكاميرا إلى إحدى الشاشات، فتكبر لتصبح نافذة التطبيق وتستقر في جانب من الإطار. الخطوة 01، من 6 إلى 13 ث تقريبًا: رقم خطوة صغير "01" وعنوان مثل "Sketch your idea" (استبدله بعنوانك) ينزلقان للأعلى سطرًا بسطر بجانب النافذة. داخل النافذة، تُرسم ضربة فرشاة على اللوحة. الخطوة 02، من 13 إلى 20 ث تقريبًا: ينزلق النص السابق للأعلى ويخرج، ثم ينزلق "02" وعنوان مثل "Chat to shape it" بالطريقة نفسها. يتغير محتوى النافذة ليتناسب. الخطوة 03، من 20 إلى 26 ث تقريبًا: يدخل "03" وعنوان مثل "Export in one click" بالطريقة نفسها، وتعرض النافذة طرفية تكتب أسطرًا من النص مع مؤشر وامض. البطاقة الختامية، من 26 إلى 31 ث تقريبًا: شعاري و"[your brand]" مع شعار قصير مثل "Make it move" (استبدله بشعارك). ثم تتراجع الكاميرا إلى جدار الشاشات المائل ليطابق الإطار الأخير الأول ويتكرر الفيديو. </structure> <composition> اجعل النافذة كبيرة، بحوالي 60% من عرض الإطار، في أحد الجانبين. ضع عمود النص في الجانب الآخر، محاذيًا لليسار. اجعل رقم الخطوة صغيرًا، بلون التمييز، فوق العنوان. اكتب العناوين بخط سان سيريف نظيف وعريض، في سطرين قصيرين على الأكثر، مع وزن أخف لأي سطر مساند. استخدم شعاري كأيقونة للتطبيق في إطار النافذة وفي منتصف البطاقة الختامية. استخدم ألوانًا حسب الدور من علامتي، مثل خلفية شبه سوداء (#0E0F13)، ونص أبيض مائل للرمادي (#F4F4F6)، ولون تمييز ساطع واحد لأرقام الخطوات والتمييزات وضربة الفرشاة، ورمادي هادئ لإطار النافذة والواجهة الثانوية. أبقِ جدار الشاشات بالألوان نفسها مع تباين أقل ليُقرأ العنوان فوقه. </composition> <techniques> كل شيء يحدث ضمن حركة كاميرا واحدة متواصلة: انجراف بطيء فوق الجدار ثلاثي الأبعاد، المائل إلى الخلف بحوالي 25 درجة، مع تأثير بارالاكس لطيف بين الشاشات. يغادر العنوان بضبابية متزايدة وتلاشٍ خلال حوالي 0.6 ث. الغوص دفعة سلسة ease-in-out نحو شاشة واحدة بينما تكبر وتتسطح لتصبح نافذة التطبيق. تنزلق أسطر العنوان للأعلى بحوالي 30 px مع تلاشٍ، بفارق حوالي 0.1 ث، بتباطؤ ease-out ناعم. ينزلق النص الخارج للأعلى ويتلاشى قبل دخول الخطوة التالية. يتغير محتوى النافذة في مكانه بتلاشيات متقاطعة وانزلاقات قصيرة. تُرسم ضربة الفرشاة تدريجيًا. تكتب الطرفية حرفًا بحرف مع مؤشر وامض. في البطاقة الختامية، يكبر الشعار برفق، ثم تتراجع الكاميرا بسلاسة إلى جدار البداية لتكرار سلس. </techniques> <music> استخدم مقطوعة synthwave هادئة instrumental بإيقاع حوالي 100 BPM، مدتها 31 ثانية بالضبط، مع القطعات والضربات على شبكة الإيقاع. يعزف pad دافئ تحت العنوان. يدخل الإيقاع بدويّ ناعم عندما تغوص الكاميرا في النافذة. ترتفع المقطوعة قليلًا للخطوة 02 وتخف تحت الطرفية. يقود riser إلى البطاقة الختامية، وتنتهي المقطوعة بحيث يكون التكرار إلى البداية سلسًا. استهدف حوالي -14 LUFS مع true peak أقل من -1 dBTP. </music> <sound> أضف صوت whoosh عند الغوص في النافذة، ونقرة UI ناعمة عند هبوط كل سطر من العنوان، وحفيف فرشاة خفيف على الضربة في الخطوة 01، ونقرات لوحة مفاتيح هادئة تحت الكتابة في الطرفية. أضف صدمة لطيفة أو رنينًا عند هبوط الشعار على البطاقة الختامية. أبقِ المؤثرات تحت الموسيقى، بلا تعليق صوتي. </sound> <references> يشبه أنيميشن مصقولًا لإطلاق تطبيق أو جولة تعريفية: كاميرا تحلق فوق شبكة ثلاثية الأبعاد من شاشات الواجهة إلى نافذة منتج نظيفة، مع خطوات ميزات مرقمة، كما في العروض التوضيحية الحديثة لصفحات هبوط البرمجيات. </references>

معاينة الموجّه «عرض تعريفي سلس للتطبيق مدته 15 ثانية بموشن غرافيك خالص»

عرض تعريفي سلس للتطبيق مدته 15 ثانية بموشن غرافيك خالص

<direction> اصنع عرضًا تعريفيًا أفقيًا بالموشن غرافيك مدته 15 ثانية لتطبيقي، بدقة 1920x1080 و60 إطارًا في الثانية. كل شيء رسومات مرسومة بلا لقطات مصوّرة. الشيء الوحيد الذي أقدّمه هو شعار تطبيقي (أيقونة تطبيق مربعة بزوايا مستديرة). الفكرة حركة واحدة متواصلة يسلّم فيها كل قسم آخر عنصر فيه إلى القسم التالي. نقطة تصبح الشعار، والشعار يصبح الاسم، والحروف تصبح نقاطًا، والنقاط تصبح كرات سباق، وكرة تغمر الإطار، وشكل ينكسر إلى بلاطات، والبلاطات تصبح سحابة نقاط ثلاثية الأبعاد، ثم تأتي كلمات حركية وبطاقة ختامية. كل قسم يعرض مهارة حركة واحدة. استخدم ألوانًا مسطحة وأشكال متجهة حادة وواجهة HUD لمنظار كاميرا فوق كل شيء، مع قطعات مثبّتة على مقطوعة بإيقاع 128 BPM. تجنّب اللقطات المصوّرة والتدرجات والخامات والتعليق الصوتي وأي قسم يبدأ من العدم بدل أن ينمو من القسم السابق. </direction> <structure> 1. 0–1.9 ث، قريب من الأسود: نقطة وردية تجلس داخل حلقة رمادية رفيعة، وتنفتح الحلقة بـ expo.out. تنفرد حلقة ثانية حتى تصبح دائرة كبيرة باهتة (0.45 ث، expo.out). عند 0.5 ث ينمو شعاري من النقطة، وتظهر طبقاته واحدة تلو الأخرى بـ back.out. يستقر أكبر عند 0.92 ث وهو يدور برفق. تظهر حولها حلقة وردية رفيعة من نص mono دائري ("APP NAME · IDEAS IN MOTION · APPNAME.APP ·"، استبدله بنصك) وتدور ببطء. عند 1.7 ث تتقلص العلامة مع قليل من التمويه عائدة إلى نقطة صغيرة فاتحة. 2. 1.9–3.5 ث: عند الدروب في 1.93 ث ينفجر قرصان من النقطة، الفاتح أولًا والوردي بعده بـ 30 م ث (expo.out، 0.3 ث)، فتركب حلقة فاتحة رفيعة على الحافة الوردية. يصعد اسم تطبيقي بالخط العريض (grotesque) حرفًا بحرف من خط الأساس: كل حرف مقصوص داخل صندوقه الخاص، بفارق 30 م ث و0.26 ث expo.out. يملأ الاسم دائمًا العرض نفسه 1640 بكسل. يُرسم خط داكن رفيع من المركز فوقه، مع كتابة "01" على اليسار وعنوان موقعي على اليمين. من 2.55 ث تمر موجة عرض عبر الحروف: يضيق كل حرف من 150% إلى نحو 55% من العرض ثم يعود خلال 0.6 ث، بعد 0.1 ث من الذي قبله. تُعاد مواءمة الكلمة إلى 1640 بكسل في كل إطار، فتزداد الحروف الضيقة ارتفاعًا. عند 2.84 ث يصعد شعار فاتح بخط serif مائل ("ideas in motion") كلمة بكلمة تحته. عند 3.3 ث تنهار الحروف إلى نقاط داكنة ويسقط الشعار. 3. 3.5–5.6 ث: يأتي مسح قطري فاتح من أسفل اليمين (0.16 ث). تنطلق ست نقاط داكنة في منحنى إلى بداية ستة صفوف (power2.inOut، متعاقبة) وتأخذ ألوان الصفوف. يُكتب عنوان بخط serif مائل من اليسار ("Chat instead of a timeline.")، مع ملاحظة mono على اليمين ("NO KEYFRAMES · LIVE PREVIEW") وتسميتا المسار "IDEA" و"MP4" عند الطرفين. - لكل صف رقم وردي، واسم mono ("animated type"، "shapes"، "transitions"، "3D effects"، "sound"، "live preview")، وأيقونة منحنى صغيرة ترسم نفسها، وخط مسار يُرسم من اليسار إلى اليمين. - عند 4.215 ث تتسابق ست كرات (داكنة، بنفسجية، وردية، بالتكرار) مسافة 1040 بكسل في 0.94 ث بالضبط، لكل منها منحناها الخاص: linear وpower2.inOut وexpo.out وback.out(1.7) وelastic.out(1, 0.3) وbounce.out. - علامات فوق كل مسار تحدد موضع الكرة عند كل 1/16 من السباق. ثلاث حلقات شبحية تتلاشى تتبع كل كرة، وتتمدد الكرات على امتداد سرعتها، وتركب نقطة على كل أيقونة منحنى بتزامن، وتحصل كل كرة على هالة محيطية عند وصولها. - عند 5.3 ث تتلاشى الصفوف، وتطير الكرات إلى المركز وتندمج، وتنتفخ البنفسجية حتى تملأ الإطار. 4. 5.6–7.5 ث، بنفسجي: تقفز دائرة فاتحة من نقطة (elastic.out، 0.45 ث). تنطلق اثنتا عشرة نقطة تابعة إلى مدار (expo.out، بفارق 12 م ث). - خلفها خطوط إرشاد رفيعة متقاطعة، ودائرة مدار منقطة مع علامات تدريج والتسميتان "270°" و"90°". - قراءات mono على الجانبين: "SHAPES NO KEYFRAMES" على اليسار، وطلبات تعديل بين علامات اقتباس على اليمين ("“BIGGER” “SLOWER”"، "“ANOTHER COLOUR”"). - حلقات تموج وردية تنبض حول الدائرة. - ثم يتحول الشكل: دائرة ← مثلث ← نجمة ← مربع. يستغرق كل تحول 0.26–0.3 ث بـ back.out(2.2) مع دوران 120°، وتتبع الشكلَ خطوطٌ محيطية وردية صدوية فقط أثناء دورانه. - تتحول التوابع بعده بلحظة، واحدًا تلو الآخر، وتختفي عند 7.22 ث. يستقر كمربع قائم بحجم 360 بكسل. 5. 7.5–9.75 ث، قريب من الأسود: ينقسم المربع إلى تسع بلاطات بحجم 120 بكسل. تنمو متاهة truchet حلقة بحلقة حتى تملأ الإطار (back.out، نحو 30 م ث لكل حلقة)؛ تحمل كل بلاطة قوسين ربع دائريين في ركنين متقابلين، مرسومين كخطوط فاتحة بسماكة 20 بكسل. تعبرها موجات وردية: أولًا شريطان يمسحان من اليسار إلى اليمين، ثم حلقة تنغلق نحو المركز. تدور البلاطات داخل الموجة 90 أو 180 درجة، وتنكمش إلى 80% وتتحول إلى الوردي، فتنكسر الخطوط إلى شرطات، ثم تعود بعد مرور الشريط. تُكتب تسمية mono صغيرة في الأسفل ("SHAPES · TRANSITIONS · NO KEYFRAMES"). من 9.45 ث تنهار البلاطات من المركز إلى الخارج. 6. 9.5–11.25 ث: تظهر شبكة نقاط 24 × 24 حيث كانت البلاطات، منظورة من الأعلى. تميل إلى مستوى منظوري وتنطوي إلى كرة، ثم مزهرية، ثم كتلة مضغوطة، ثم torus وهي تدور حول محورها الرأسي. بين الأشكال تتحرك بـ power2.inOut، مع خطوط باهتة بين الجيران، ونقطة وردية تقريبًا من كل تسع، وتزداد النقاط خفوتًا مع العمق. تسمية mono أسفلها ("3D EFFECTS · LIVE PREVIEW · MP4 EXPORT"). تقترب عبر الكاميرا وتتلاشى عند 11 ث. 7. 11.25–13.0 ث، كلمات حركية: كلمة كل 0.23 ث، لكل منها خلفية مسطحة خاصة وتملأ العرض بعرض مختلف من الخط نفسه. استبدل الكلمات الست بعبارتك. - "IDEA": داكنة على وردي، تنزلق من اليسار، تدرج من 1.3 إلى 1، ويزول التمويه خلال 0.14 ث. - "IN.": فاتحة على قريب من الأسود مع نقطة ختام وردية، تدخل من اليمين مع تمويه، وملاحظة mono صغيرة في أعلى اليسار ("EDIT IN WORDS ↗"). - "VIDEO": مضغوطة جدًا بنفسجية على الصفحة الفاتحة، وتصعد الحروف من الأسفل بفارق 25 م ث. - "OUT.": فاتحة على بنفسجي، تدخل من اليسار مع تمويه، مع ملاحظة في أعلى اليمين ("↘ MP4 EXPORT"). - "NO": داكنة على أصفر. تسقط الحروف بزوايا مع back.out، ثم تملأ نسخ محددة الحواف من الكلمة صفوفًا أعلى وأسفل وتتحرك في اتجاهات متبادلة بينما ينجرف الصف الرئيسي إلى اليسار. - "KEYFRAMES.": فاتحة على قريب من الأسود، تنزلق إلى اليسار بسرعة ثابتة مع خط قطري رفيع، ثم تغادر بسرعة مع تمويه. 8. 13.0–15 ث، البطاقة الختامية: يغمر الوردي من اليمين وتنفرد حلقة فاتحة من المركز (0.42 ث). يدور شعاري إلى المركز (back.out) مع انفجار صغير من القصاصات من نقاط وحلقات ومثلثات بالداكن والفاتح والبنفسجي، ثم ينتقل إلى يسار التشكيل. يسقط اسم تطبيقي حرفًا بحرف بجانبه، من الضبابي إلى الحاد، 0.22 ث لكل حرف. يصعد تحته شعار بخط serif مائل ("your AI motion designer"). يُرسم خط، ويُكتب تحته سطر mono: "PICK A TEMPLATE · DESCRIBE YOUR IDEA · MP4 EXPORT"، ثم نقطة تسجيل صغيرة، ثم عنوان موقعي على اليمين. ثبّت اللقطة في الثانية الأخيرة. </structure> <composition> لوحة الألوان، كلها مسطحة: - أسود داكن عميق #0d0b1e - وردي ساطع #fb2d89 (اللون المميز الرئيسي) - صفحة فاتحة #faf9ff - بنفسجي ناعم #7c6cf2 - أصفر دافئ #ffd23f، لقطعة حركية واحدة فقط الخطوط: - خط grotesque عريض متغير بمحور عرض (Anybody، وزن 900، عرض 50–150%) للاسم والكلمات الحركية. - خط serif مائل تحريري مضغوط (Instrument Serif Italic) للعناوين والشعارات. - خط mono (JetBrains Mono) لتسميات الواجهة، 14 بكسل، تباعد الأحرف 0.16em. تغطي واجهة HUD لمنظار كاميرا الفيديو كله: - أقواس زوايا رفيعة بسماكة 2 بكسل، على بعد 44 بكسل من كل زاوية. - أعلى اليسار: اسم تطبيقي بأحرف mono كبيرة عريضة يليه شعار أخفت ("APP NAME IDEAS IN MOTION"). - أعلى اليمين: تسمية القسم الحالي ("01 — APP NAME"، "02 — NO KEYFRAMES"، "03 — SHAPES"، "04 — EDIT IN WORDS"، "05 — 3D EFFECTS"، "06 — KINETIC TYPE"، "07 — TRY IT FREE"). - أسفل اليسار: رمز زمني جارٍ مع الإطارات ("00:00:03:09") وشعار قصير ("LIVE PREVIEW"). - أسفل اليمين: شعار آخر ("NO KEYFRAMES")، وأربعة مربعات صغيرة يضيء واحد منها مع كل نبضة، و"MP4". - على امتداد الحافة السفلية: خط تقدم بسماكة 2 بكسل ينمو مع الزمن. يتبدل الـ HUD بين حبر داكن وفاتح عند كل قطع ليبقى مقروءًا على أي خلفية. كل الكلمات على الشاشة أمثلة استبدلها بكلماتك. </composition> <techniques> - ينتهي كل قسم بعنصر ينمو منه القسم التالي: نقطة إلى شعار، شعار عائد إلى نقطة، أقراص إلى اسم، حروف إلى نقاط، نقاط إلى كرات، كرة إلى فيضان بنفسجي، مربع إلى بلاطات، بلاطات إلى شبكة نقاط، سحابة نقاط تقترب عبر الكاميرا إلى الكلمات الحركية. - تُكتب كل تسمية قسم جديدة في الـ HUD خلال 0.3 ث، مع رموز عشوائية تسبق المؤشر. وتُكتب سطور mono الأخرى أيضًا. - خط بعرض متغير: حرّك محور عرض كل حرف وأعد مواءمة الكلمة كلها إلى عرض ثابت في كل إطار. - تُقص كشوف الحروف داخل صندوق كل حرف. - استخدم تمويه حركة خفيفًا في الحركات السريعة فقط، وحافة لونية بنفسجية باهتة على مسح القزحية الكبير. - الخطوط الصدوية والحلقات الشبحية والهالات خطوط رفيعة وردية أو بلون مطابق وتتلاشى بسرعة. </techniques> <music> سينث بوب إلكتروني حيوي بإيقاع 128 BPM، النبضة الأولى عند 0.06 ث، بطول 15 ث بالضبط: - أوتار باد ناعمة تشبه الأجراس في الميزان الأول. - بعد الدروب عند 1.93 ث، طبلة كيك four-on-the-floor مع تصفيق على 2 و4، وهاي-هات على النبضات الضعيفة، وباص سينث قوي، وضربات أوتار قصيرة تحت الأقسام. - بريك من نحو 10 ث يتصاعد نحو القسم الحركي. - وتر باد ختامي رنّان على البطاقة الختامية. تتغير الأقسام عند خطوط الموازين، ويحط الاسم على الدروب عند 1.93 ث، وتقع قطعات الكلمات الحركية على الأنصاف المضاعفة (ثُمنيات النوتة). </music> <sound> بلا صوت بشري. ضربات فوق الموسيقى: - رايزر خلال الميزان الأول - بوم على الدروب عند 1.93 ث - رايزر من نحو 10 ث إلى ضربة punch عند 11.25 ث - كيك وووش قصير عند كل قطع كلمة حركية - ضربة صنج crash عند 12.71 ث - بوم مع وتر الباد الرنّان عند هبوط البطاقة الختامية - blip صغير عند 14.1 ث تحمل الموسيقى المقطوعة وتهبط الضربات بوضوح فوقها. </sound> <references> عرض تعريفي لمصمم موشن مدمج مع فيديو إطلاق منتج تقني. يجمع بين طبقة منظار كاميرا، وطباعة حركية جريئة بالطراز السويسري، وعروض لمنحنيات التسهيل، وأنماط بلاطات truchet توليدية، وسحابة نقاط ثلاثية الأبعاد تدور. </references>

معاينة الموجّه «فيديو ترويجي لصفحة هبوط بانتقالات قائمة على الأجسام»

فيديو ترويجي لصفحة هبوط بانتقالات قائمة على الأجسام

<direction> اصنع فيديو ترويجيًا بالموشن غرافيك أفقيًا مدته 15 ثانية بدقة 1920x1080 لـ [your brand]، مبنيًا كأن صفحة هبوط تنبض بالحياة. اقطعه على إيقاع مقطوعة إلكترونية بسرعة 128 BPM بدون تعليق صوتي. الفكرة أنه لا يوجد قطع بسيط أبدًا: كل مشهد يسلّم إلى التالي عبر جسم (نقطة، أو اختيار من البكرة، أو هاتف، أو بلاطة فائزة). حافظ على مظهر واجهة منتج نظيف ومشرق: خلفيات فاتحة، وأزرار كبسولية مستديرة، وبطاقات، وهاتف، ولوحة معلومات، وجدار فيديوهات، مع كل التسميات كنص داكن على لوحات بيضاء واستخدام ألوان علامتي التجارية حسب الدور. تجنب القطع الحاد والتلاشي المتقاطع والصوت البشري والنص الأبيض على خلفيات فاتحة أو مخططة والتسميات التي تتداخل مع الحلقات أو الأشكال المجاورة. </direction> <structure> خمس ضربات متساوية تقريبًا في الطول، نحو 3 ثوانٍ لكل منها، وكل تسليم يقع على الإيقاع. 1. الافتتاح: تظهر نقطة واحدة في المنتصف وتكبر لتصبح كبسولة أفقية تحمل صفًا من الدوائر: صور شخصية صغيرة وأيقونات مثل "Aa" وأشكال بسيطة ومكعب. كل أيقونة ظاهرة بالكامل وغير مغطاة بالدائرة المجاورة. تتراجع الكاميرا لتكشف عنوانًا من سطرين، كلاهما في المنتصف. السطر الأول مثل "No … keyframes." (استبدله بعنوانك). الكلمة الأخيرة من العنوان تظل تتقلب بين بدائل مثل بكرة ماكينة الحظ. 2. تغوص حركة تكبير إلى بكرة دوّارة من صور المبدعين والبطاقات. تتباطأ البكرة وتستقر على اختيار واحد، فيُبرَز. 3. يتحول الاختيار إلى هاتف، وتنفرد حوله مروحة من بطاقات الميزات. تقول إحدى البطاقات "Edit in words" مع الرقم الكبير "03" ووسم صغير "Live preview" بجوار الرقم مباشرة (استبدلها بميزاتك). تظهر تسميات البطاقات على لوحات بيضاء. 4. تقود حركة بانوراما سريعة إلى لوحة معلومات من بلاطات الفيديو بتسميات على لوحات بيضاء. تقيّمها وتختار فيديو فائزًا، فيُبرَز. 5. تنفتح البلاطة الفائزة إلى جدار مائل من الفيديوهات بتسميات على لوحات بيضاء. ثم يطوي الجدار نفسه ليصبح شعاري في بطاقة النهاية، مع "[your website]" بجوار الشعار على لوحة بيضاء. </structure> <composition> تأطير متمركز ومتماثل للعنوان وبطاقة النهاية مع الشعار. تُرتَّب عناصر الواجهة كما في صفحة هبوط حقيقية: صف من الكبسولات، وبطاقات بأرقام كبيرة ووسوم صغيرة، ونموذج هاتف، وشبكة لوحة معلومات، وجدار مائل بمنظور. استخدم ألوان علامتي التجارية حسب الدور: درجات الخلفية (فاتحة مع بعض التعبئات المخططة)، ولونًا مميزًا واحدًا للإبرازات والتحديدات والحلقات، ولون نص داكنًا. كل تسمية على البطاقات والبلاطات والجدار نص داكن على لوحة بيضاء مستديرة لتُقرأ على أي خلفية. استخدم عائلة خطوط واحدة نظيفة بدون زوائد: عنوان بخط عريض، وتسميات بوزن عادي، وتسميات الأزرار بخط عريض. اترك هوامش سخية حتى لا يلامس أي نص الحلقات أو الحواف. </composition> <techniques> كل انتقال هو جسم يتحول إلى المشهد التالي، وليس قطعًا أبدًا. تكبر النقطة لتصبح الكبسولة بتباطؤ ناعم في النهاية، وتظهر الدوائر بقفزة مع فارق زمني طفيف. تراجع الكاميرا تصغير سلس للمقياس يكشف العنوان. الكلمة المتقلبة هي بكرة عمودية تدور بين الكلمات في حلقة. يمر التكبير عبر الكبسولة إلى البكرة. تدور البكرة بسرعة ثم تتباطأ بتباطؤ طويل لتستقر بدقة على الاختيار. يتغير مقياس الاختيار وشكله ليصبح الهاتف، وتنفرد البطاقات حوله بدوران وانزلاق متتابعين. البانوراما السريعة حركة أفقية سريعة مع ضبابية حركة وتسارع وتباطؤ حادين. تحديد لوحة المعلومات حلقة إبراز وتكبير للفائز. يتمدد الفائز إلى الجدار ثلاثي الأبعاد المائل الذي ينطوي وينهار إلى الشعار باستقرار أخير. كل الحركات والهبوطات الرئيسية تصيب شبكة الإيقاع. </techniques> <music> أنشئ مقطوعة إلكترونية أصلية حماسية بسرعة 128 BPM ومدتها 15 ثانية بالضبط، بمسار واضح: بداية خفيفة، وتصاعد عبر مشهدي البكرة والهاتف، وذروة (drop) حول البانوراما السريعة، ونهاية نظيفة على الشعار. ضعها على شبكة إيقاع المونتاج، مع ضربات مؤلفة فوقها لكل تسليم، وصعود (riser) نحو الذروة، وضربة أخيرة عندما ينطوي الجدار إلى الشعار. اضبط الماستر عند نحو -14 LUFS مع ذروة حقيقية أقل من -1 dBTP. </music> <sound> بدون تعليق صوتي. أضف أصوات whoosh عند التكبير والبانوراما السريعة، وطقة قصيرة مع توقف عند استقرار البكرة، وصدمة ناعمة على الشعار. أبقها كلها تحت الموسيقى وعلى الإيقاع. </sound> <references> صفحة هبوط لـ SaaS محركة لتصبح فيديو ترويجيًا لمنتج: بطاقات واجهة، ونموذج هاتف، ولوحة تحليلات، وجدار فيديوهات، بأسلوب فيديوهات إطلاق التطبيقات الحديثة مع انتقالات سلسة من جسم إلى آخر. </references>

تحفظ ملفات تعريف الارتباط الضرورية إعداداتك على الموقع. وبإذنك، يساعدنا Google Analytics على فهم طريقة استخدام Motion Fab. يمكنك تغيير اختيارك من تذييل الصفحة.

خياراتك المتعلقة بالخصوصية بموجب قوانين الخصوصية المعمول بها في الولايات الأمريكية. سياسة الخصوصية