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

AR

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

Simple Motion

عرض ريل بطباعة حركية من جزأين على إيقاع الموسيقى

عرض ريل مرسوم مدته 32 ثانية: كرة ترتد وكلمات حركية وشبكات أشكال وأعمدة ثلاثية الأبعاد وجسيمات، ثم شرائح تحريرية على الإيقاع مع أجسام ثلاثية الأبعاد تدور.

تاريخ النشر 10 نوفمبر 2026استُخدم مرة واحدة

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

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

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

الفكرة

اصنع عرض ريل موشن جرافيك أفقيًا مدته 32 ثانية (1920x1080، 60 إطارًا في الثانية) لـ [your brand]، من نصفين بمظهرين مختلفين، مقطوعًا بإحكام على إيقاع الموسيقى. كل شيء مرسوم: بلا لقطات مصوّرة ولا مقاطع جاهزة. الجزء الأول (0–15.9 ث، 128 BPM) تتابع داكن وحبيبي وعالي الطاقة من الطباعة الحركية والأشكال وثلاثي الأبعاد والجسيمات داخل إطار HUD رفيع. الجزء الثاني (15.9–31.8 ث، 144 BPM) مجموعة من الشرائح التحريرية النظيفة، في كل منها جسم ثلاثي الأبعاد يدور ببطء. بلا تعليق صوتي. تجنّب اللقطات المصوّرة، والانتقالات المتداخلة البطيئة الناعمة بين المشاهد، والقطعات التي تقع خارج الإيقاع، وأي خطوط غير العائلتين المذكورتين أدناه.

البنية

الجزء الأول (0–15.9 ث، 128 BPM)، داخل إطار HUD:

0–0.9 ث: بطاقة عنوان "[Your brand]" مع "01 / 02" تحتها، تظهر تدريجيًا في 0.17 ث وتختفي في 0.18 ث.
0.9–2.7 ث: كرة وردية تسقط على خط أرضي مسطّر وترتد ثلاث مرات على الإيقاع (1.40، 1.88، 2.36 ث). كل هبوط يحصل على مسار طيران منقّط وحلقة تتسع وتعليق صغير بخط أحادي المسافة ("BIGGER"، "SLOWER"، "ANOTHER COLOUR"). ثم تطير الكرة عائدة إلى المركز وتكبر حتى تملأ الإطار بالوردي.
2.7–3.25 ث: على الوردي، تصعد كلمة "YOUR" بالأسود بوزن عريض حرفًا حرفًا من خلف خط الأساس، ويُرسم تحتها خط، وتجلس فوقها علامة صغيرة "(01)".
3.25–3.7 ث: كلمة "IDEA" بالوردي تتحول من وزن شعري إلى وزن أسود في 0.11 ث داخل مربع تحديد بنفسجي كما في أدوات التصميم، بثمانية مقابض وكبسولة حجم تعدّ تصاعديًا.
3.7–4.1 ث: كلمة "is" مائلة خفيفة بالبنفسجي على خلفية خزامية تكبر مع تمويه. تتحول نقطتها إلى بقعة تغمر الإطار بالبنفسجي.
4.1–4.65 ث: كلمة "READY" بالأبيض الضيّق تُفكّ شفرتها من رموز عشوائية مع انقسام ماجنتا/سماوي وإزاحات شرائحية، فوق أسطر باهتة بخط أحادي المسافة لأوامر دردشة (مثل 'chat.say("Bigger")'، 'export("mp4")') وكتلة مؤشر وردية تومض. ثم ينهار الإطار إلى خط متوهج مثل شاشة CRT وهي تنطفئ، يليه وميض رمادي.
4.65–6.5 ث: شبكة نقاط 19 x 11 تنمو من المركز. حلقة بنفسجية تجعل النقاط تتموج إلى علامات زائد. مسح من اليسار إلى اليمين يحوّل علامات الزائد إلى علامات ضرب ودوائر ومعينات، مع خلايا وردية وبنفسجية عشوائية. مسح ثانٍ سريع يجعلها كلها مربعة.
6.5–8.4 ث: الشبكة المربعة تميل إلى الخلف لتصبح حقلًا ثلاثي الأبعاد من أعمدة مستديرة الزوايا ترتفع في موجات. كرة وردية لامعة تقفز فوق قممها على الإيقاع، مع عمق مجال ضحل، وتنتهي بتمويه تكبير.
8.4–10.25 ث: جدار طباعي من سبعة أشرطة أفقية يندفع من اليمين مع تمويه حركة، بدءًا بالشريط الأوسط. الأشرطة البنفسجية والفاتحة تكرر "[YOUR BRAND]" بأربعة أوزان من الخط المتغير (مائل ثقيل عريض، مائل خفيف ضيق، مستقيم ثقيل، مستقيم خفيف)، مع نقاط وردية بينها، وتتحرك في اتجاهات متبادلة. الشريط الأوسط وردي، والاسم عليه ثابت وكبير. تنزلق الأشرطة جانبًا وتترك الكلمة وحدها بالأبيض.
10.25–12.1 ث: تذوب الكلمة من اليسار إلى اليمين إلى نحو 3000 جسيم. تشكّل كرة تدور، ثم حلقتين متقاطعتين بنواة وردية، ثم مجرة بذراعين (إحداهما وردية)، ثم تنطلق شعاعيًا إلى الخارج.
12.1–14.2 ث: ملخص للمشاهد السابقة بشاشة منقسمة (لوحتان، ثم أربع، ثم تسع)، مع وميضات غلتش بإطار واحد ووميض رمادي في النهاية.
14.2–15.9 ث: بطاقة النهاية. تصعد "[YOUR BRAND]" حرفًا حرفًا ويُرسم خط تحتها. تُفكّ شفرة "YOUR AI MOTION DESIGNER" و"[YOURSITE.COM]" بخط أحادي المسافة متباعد الأحرف. تسقط الكرة الوردية وتهبط لتكون النقطة الأخيرة. ثم تنزلق "● TRY IT FREE" وعبارة مائلة "describe the video. the agent animates it.".
الجزء الثاني (15.9–31.8 ث، 144 BPM)، شرائح تحريرية:

15.9 ث: بطاقة عنوان "Your AI motion designer" مع "02 / 02".
16.8 ث، شبه أسود: "EDIT" / "IN WORDS." (السطر الثاني برتقالي)، نص "TELL THE CHAT WHAT TO SHOW. / THE AGENT BUILDS THE ANIMATION."، تسميات "LIVE PREVIEW / MP4 EXPORT"، عقدة حلقية كرومية بانعكاسات برتقالية وشعاري في أعلى اليمين.
19.2 ث، برتقالي: "IDEAS" / "IN MOTION." بشبه الأسود، كبسولة "NO KEYFRAMES"، "FONTS FOR EVERY SCRIPT."، "BIGGER / SLOWER / ANOTHER COLOUR" وحلقة شريط داكنة ملتوية مطبوع عليها "IDEAS IN MOTION •".
21.7 ث، شبه أسود: "IDEA." / "TO VIDEO." / "ONE CHAT."، "SHAPES / 3D EFFECTS / SOUND"، أنبوب كرومي متعرّج، أقواس زوايا وعدّاد نسبة مئوية مع شريط تقدّم.
24.2 ث، صفحة فاتحة: "MUSIC" / "TO RHYTHM."، "MUSIC AND / SOUND EFFECTS."، نجمة برتقالية لامعة منتفخة وكرة سوداء ترتد على الإيقاع فوق شكل موجي متحرك.
26.7 ث، 27.6 ث، 28.5 ث: كلمة واحدة في المنتصف لكل شريحة. "BIGGER." على شبه الأسود، "SLOWER." على صفحة فاتحة مع خربشة كرومية صغيرة في الزاوية، "COLOUR." على البرتقالي. التعليقات: "SAY WHAT SHOULD CHANGE."، "NO KEYFRAMES TO HUNT FOR."، "THE PREVIEW UPDATES AS YOU TALK.".
29.2 ث، شبه أسود: "OPEN" / "[YOUR BRAND]."، "[YOURSITE.COM]"، "IDEA → CHAT → VIDEO"، زر برتقالي "TRY IT FREE" ونجمة كرومية منتفخة رباعية الرؤوس. ينتهي الفيديو على الضربة الموسيقية الأخيرة عند 31.5 ث، بإجمالي 31.8 ث.
كل النص بين علامات الاقتباس مثال. استبدله بكلماتك الخاصة بطول مشابه كي يبقى التخطيط سليمًا.

التكوين

ألوان الجزء الأول: شبه أسود #0D0B1E مع حبيبات فيلم وتظليل ناعم للحواف؛ صفحة فاتحة #FAF9FF للكتابة؛ وردي #FB2D89 كلون التمييز الرئيسي؛ بنفسجي #7C6CF2 كلون ثانٍ؛ خزامي #F0EDFF فقط كخلفية لقطة "is". ألوان الجزء الثاني: شرائح مسطحة بشبه الأسود والبرتقالي #FE9117 والصفحة الفاتحة #FAF9FF مع شبكة خافتة 96 بكسل. الكتابة بشبه الأسود على الشرائح البرتقالية والفاتحة، وبالفاتح على الشرائح شبه السوداء.
الخطوط: عائلة عرض نيو-غروتيسك متغيرة بمحوري العرض والوزن لكل العناوين (Mona Sans). وخط أحادي المسافة لكل تسمية صغيرة وسطر HUD وتعليق وعدّاد (JetBrains Mono).
الـ HUD في الجزء الأول: أقواس زوايا رفيعة. أعلى اليسار "[YOUR BRAND] [YOURSITE.COM]". أعلى اليمين "LIVE PREVIEW MP4 EXPORT NO KEYFRAMES". أسفل اليسار رمز زمني جارٍ وأربعة مربعات صغيرة وخط تقدّم. أسفل اليمين اسم القسم الحالي، يتغير مع المشاهد: "IDEAS IN MOTION"، "KINETIC TYPE"، "SHAPES"، "3D EFFECTS"، "EDIT IN WORDS"، "LIVE PREVIEW"، "MP4 EXPORT"، "TRY IT FREE".
شرائح الجزء الثاني تتشارك رأسًا وتذييلًا. الرأس: "● [YOUR BRAND] / IDEAS IN MOTION" على اليسار، "MP4 [YOURSITE.COM]" على اليمين، وخط شعري تحته. التذييل: "[YOUR BRAND]"، ست شرطات صغيرة تحدد الشريحة الحالية، رمز زمني جارٍ وخط تقدّم برتقالي ينمو عبر النصف كله. العناوين كبيرة على اليسار. لكل شريحة جسم ثلاثي الأبعاد على اليمين يدور ببطء داخل شكل بيضاوي رفيع للمدار. يظهر شعاري كشارة صغيرة على الشرائح.

التقنيات

الكرة: انضغاط إلى 1.9 x 0.45 لمدة 60 مللي ثانية عند كل ارتطام وتمدد على امتداد سرعتها أثناء الطيران.
صعود الحروف: يستغرق كل حرف 0.2 ث مع cubic out وفارق 35 مللي ثانية، صاعدًا من خلف خط الأساس. تُرسم الخطوط التحتية والخطوط المسطرة بـ expo out.
قطعات الكلمات في الجزء الأول حادة وعلى الإيقاع. تحصل كل كلمة على معالجتها الخاصة: صعود، تدرّج وزن، غمر ببقعة، فكّ شفرة غلتش.
فكّ شفرة الغلتش: رموز عشوائية تتضح مع انقسام RGB وإزاحات شرائحية، وتنتهي بانطفاء شاشة CRT.
التسميات أحادية المسافة تُفكّ شفرتها من رموز عشوائية.
الجدار الطباعي: تندفع الأشرطة مع تمويه حركة، وتتحرك بسرعة 260 بكسل/ث وتنزلق جانبًا للخروج.
عناوين الجزء الثاني تنزلق من 90 بكسل يسارًا، والشفافية من 0.35 إلى 1 في 0.3 ث، cubic out. السطر الثاني يتبعه بعد 30 مللي ثانية.
انتقالات الجزء الثاني: لوحة بلون الشريحة التالية تكتسح من اليسار في 83 مللي ثانية. تبدأ قبل الميزان بقليل لتهبط الشريحة الجديدة تمامًا على النبضة القوية.
شرائح الكلمة الواحدة: قطعات حادة بينها. تجلس كل كلمة بين نسختين خافتتين بخطوط خارجية من نفسها تتباعدان.
الأجسام ثلاثية الأبعاد: خامات كرومية ولامعة بدوران بطيء مستمر.
الشكل الموجي: تضيء أعمدته بالبرتقالي عند مرور رأس التشغيل.
الحبيبات والتظليل في الجزء الأول فقط. يبقى الجزء الثاني مسطحًا.

الموسيقى

مقطوعة موسيقية آلية أصلية، بطول الفيديو تمامًا وموضوعة على شبكة إيقاعه. يفتتح الجزء الأول بـ riser متوتر فوق هاي-هات تدق. يضرب drop إلكتروني ثقيل عند نحو 2.8 ث (باص مشوّه، وميضات غلتش، 128 BPM) ويدفع كل شيء حتى بطاقة النهاية. تتبع ذلك استراحة لمدة ثانية عند 15.6 ث. الجزء الثاني إيقاع إلكترو-بوب أكثر إشراقًا ونشاطًا بـ 144 BPM من 16.8 ث حتى ضربة أخيرة عند 31.5 ث. ارتدادات الكرة وقطعات الكلمات والانتقالات وهبوط الشرائح كلها تقع على النبضات أو النبضات القوية.

الصوت

بلا تعليق صوتي. مؤثرات صوتية فوق الموسيقى:

نقرة عند كل ارتداد للكرة
riser نحو الـ drop وبوم عند الكلمة الأولى
whooshes قصيرة عند قطعات الكلمات
downer عندما تنطفئ الشاشة
whooshes نحو الغوص ثلاثي الأبعاد ونحو الجدار الطباعي
sub drop نحو الملخص
بوم عندما يهبط الاسم على بطاقة النهاية
riser وبوم نحو الجزء الثاني
whoosh عند كل انتقال بين الشرائح ونقرة عند كل قطع حاد
ماسترينغ بنحو -14 LUFS مع true peak أقل من -1 dBTP.

المراجع

ريل لاستوديو تصميم حركة أو عرض إطلاق تطبيق. النصف الأول طباعة حركية بروتاليّة مع عناصر أدوات التصميم والـ HUD. النصف الثاني شرائح تحريرية بالأسلوب السويسري مع أجسام كرومية ثلاثية الأبعاد.

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

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

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

معاينة تقنية «الحروف تصعد من خلف خط الأساس ويُرسم خط التسطير» — عند 0:02 من الفيديو

الطباعة

الحروف تصعد من خلف خط الأساس ويُرسم خط التسطير

كلمة عريضة وممتدة على خلفية لونية مسطحة بلون التمييز: يصعد كل حرف 360 px من تحت خط قص غير مرئي عند خط الأساس (0.2 ث، cubic out، تأخير 35 مللي ثانية)، ثم يُرسم خط تسطير بسماكة 8 px من اليسار إلى اليمين بحركة expo out ابتداءً من 0.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>
@import url("https://fonts.googleapis.com/css2?family=Mona+Sans:ital,wdth,wght@0,75..125,200..900;1,75..125,200..900&family=JetBrains+Mono:wght@400;500&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#field { position: absolute; inset: 0; background: #FB2D89; }
.word { position: absolute; left: 0; right: 0; top: 330px; height: 390px; overflow: hidden; display: flex; justify-content: center; clip-path: inset(0 0 0 0); }
.word span { display: inline-block; font: 900 440px/0.88 'Mona Sans'; font-stretch: 125%; color: #0D0B1E; }
.rule { position: absolute; left: 190px; top: 731px; width: 1540px; height: 8px; background: #0D0B1E; transform-origin: 0 50%; }
.tag { position: absolute; left: 196px; top: 330px; font: 500 19px 'JetBrains Mono'; color: rgba(13,11,30,.7); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080"><div id="field" class="clip" data-start="0" data-duration="3"><div class="tag">(01)</div><div class="word"><div class="mask"></div></div><div class="rule"></div></div></div>
<script>
const word = "YOUR"; // the word
const box = document.querySelector('.word');
box.innerHTML = '';
for (const ch of word) { const s = document.createElement('span'); s.textContent = ch; box.appendChild(s); }
const tl = gsap.timeline({ paused: true });
tl.fromTo('.word span', { y: 360 }, { y: 0, duration: 0.2, ease: 'power3.out', stagger: 0.035 }, 0.1); // rise from below the clip
tl.fromTo('.rule', { scaleX: 0 }, { scaleX: 1, duration: 0.3, ease: 'expo.out' }, 0.22);            // underline
tl.fromTo('.tag', { opacity: 0 }, { opacity: 1, duration: 0.1 }, 0.15);
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 من الفيديو

الطباعة

تدرّج السماكة داخل مربع تحديد على طريقة أدوات التصميم

تدخل كلمة بسماكة hairline وتتدرج إلى سماكة black خلال 0.11 ث (cubic out) بخط متغيّر؛ ويظهر حولها مربع تحديد بسماكة 3 px وثمانية مقابض مربعة مع تجاوز للهدف (back out، 0.14 ث)، وتحته حبّة تعدّ حجمه تصاعديًا حتى الأبعاد النهائية بالبكسل.

متى تُستخدم لإظهار أن النص يُصمَّم مباشرة كما في المحرر.

عرض الكود

<!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=Mona+Sans:ital,wdth,wght@0,75..125,200..900;1,75..125,200..900&family=JetBrains+Mono:wght@400;500&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#s { position: absolute; inset: 0; }
.w { position: absolute; left: 0; right: 0; top: 345px; text-align: center; font: 150 360px/1 'Mona Sans'; color: #FB2D89; font-variation-settings: 'wght' 150; }
.sel { position: absolute; left: 520px; top: 368px; width: 880px; height: 343px; border: 3px solid #7C6CF2; }
.sel i { position: absolute; width: 12px; height: 12px; background: #fff; border: 2px solid #7C6CF2; }
.sel i:nth-child(1){left:-8px;top:-8px}.sel i:nth-child(2){left:calc(50% - 6px);top:-8px}.sel i:nth-child(3){right:-8px;top:-8px}.sel i:nth-child(4){left:-8px;top:calc(50% - 6px)}.sel i:nth-child(5){right:-8px;top:calc(50% - 6px)}.sel i:nth-child(6){left:-8px;bottom:-8px}.sel i:nth-child(7){left:calc(50% - 6px);bottom:-8px}.sel i:nth-child(8){right:-8px;bottom:-8px}
.pill { position: absolute; left: 898px; top: 731px; width: 124px; height: 30px; border-radius: 4px; background: #7C6CF2; color: #fff; font: 500 16px/30px 'JetBrains Mono'; text-align: center; }
.tag { position: absolute; left: 528px; top: 330px; font: 500 19px 'JetBrains Mono'; color: #FAF9FF; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080"><div id="s" class="clip" data-start="0" data-duration="3"><div class="w">IDEA</div><div class="sel"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><div class="pill">0 × 0</div><div class="tag">(02)</div></div></div>
<script>
const tl = gsap.timeline({ paused: true });
const wv = { w: 150 }, size = { n: 0 };
tl.to(wv, { w: 900, duration: 0.11, ease: 'power3.out', onUpdate: () => (document.querySelector('.w').style.fontVariationSettings = `'wght' ${wv.w}`) }, 0.2); // hairline to black
tl.fromTo('.sel', { scale: 0.92, opacity: 0 }, { scale: 1, opacity: 1, duration: 0.14, ease: 'back.out(2)' }, 0.26);
tl.to(size, { n: 1, duration: 0.24, ease: 'power3.out', onUpdate: () => (document.querySelector('.pill').textContent = `${Math.round(880 * size.n)} × ${Math.round(343 * size.n)}`) }, 0.26);
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 من الفيديو

أشكال

شبكة تحويل الأشكال: تموّج ومسح

شبكة من 19 x 11 خلية بمسافة 100 px، تُرسم كل خلية على شكل مستطيلين مستديري الزوايا متقاطعين؛ وبحساب القيم الوسيطة لطول الذراع وعرضها ونصف قطر الزاوية يتحول شكل إلى آخر (دائرة، زائد، مربع)، ويعطي الدوران بزاوية 45 درجة حرف x والمعيّن. تتمدد حلقة من المركز بسرعة 15 خلية في الثانية فتحوّل الدوائر إلى علامات زائد بحافة ملونة، ثم يمر مسح من اليسار إلى اليمين بسرعة 26 خلية في الثانية عبر الزائد وx والدائرة والمعيّن بينما تأخذ الخلايا ألوان تمييز عشوائية، ويحوّلها مسح ثانٍ سريع إلى مربعات.

متى تُستخدم فاصل توليدي بين مشاهد النصوص، أو خلفية تتحرك مع الإيقاع.

عرض الكود

<!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=Mona+Sans:ital,wdth,wght@0,75..125,200..900;1,75..125,200..900&family=JetBrains+Mono:wght@400;500&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#c { position: absolute; inset: 0; width: 1920px; height: 1080px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080"><canvas id="c" class="clip" data-start="0" data-duration="3" width="1920" height="1080"></canvas></div>
<script>
const c = document.getElementById('c'), x = c.getContext('2d');
const COLS = 19, ROWS = 11, PITCH = 100;                       // the grid
const INK = '#FAF9FF', A = '#FB2D89', B = '#7C6CF2';          // colours
// a shape is two crossed rounded rects: [arm length, arm width, corner radius] in cell units
const SH = { circle: [1, 1, .5], plus: [1.25, .36, .18], diamond: [.84, .84, .16], square: [1.08, 1.08, .15] };
const mix = (a, b, k) => a.map((v, i) => v + (b[i] - v) * k);
const cl = (v) => Math.max(0, Math.min(1, v));
const hash = (i, j) => { const s = Math.sin(i * 127.1 + j * 311.7) * 43758.5453; return s - Math.floor(s); };
function cell(cx, cy, D, s, rot) {
  const L = s[0] * D, W = s[1] * D, r = Math.min(s[2] * D, W / 2);
  x.save(); x.translate(cx, cy); x.rotate(rot); x.beginPath(); x.roundRect(-L / 2, -W / 2, L, W, r); x.roundRect(-W / 2, -L / 2, W, L, r); x.fill(); x.restore();
}
function draw(t) {
  x.fillStyle = '#0D0B1E'; x.fillRect(0, 0, 1920, 1080);
  for (let j = 0; j < ROWS; j++) for (let i = 0; i < COLS; i++) {
    const d = Math.hypot(i - 9, (j - 5) * 1.1);
    let s = SH.circle, rot = 0, col = INK, D = 52 * cl((t - d * 0.03) / 0.25);
    const R = (t - 0.6) * 15;                                  // ripple: circles become pluses
    if (R > 0) { const k = cl((R - d) / 2); s = mix(SH.circle, SH.plus, k); D = 52 + 4 * k; if (R - d > -0.5 && R - d < 3) col = B; }
    if (t > 1.2) {                                             // sweep: plus -> x -> circle -> diamond
      const p = cl((4 + (t - 1.2) * 26 - i) / 5);
      s = p < .33 ? SH.plus : p < .66 ? mix(SH.plus, SH.circle, (p - .33) / .33) : mix(SH.circle, SH.diamond, (p - .66) / .34);
      rot = p < .33 ? p / .33 * Math.PI / 4 : Math.PI / 4; D = 58;
      const h = hash(i, j); col = p > .4 ? (h < .2 ? A : h < .3 ? B : INK) : INK;
    }
    if (t > 1.7) { const q = cl(((t - 1.7) * 90 - i) / 5); s = mix(SH.diamond, SH.square, q); rot = Math.PI / 4 * (1 - q); }
    if (D < 1) continue; x.fillStyle = col; cell(60 + i * PITCH, 40 + j * PITCH, D, s, rot);
  }
}
const tl = gsap.timeline({ paused: true });
tl.to({}, { duration: 3 });
tl.eventCallback('onUpdate', () => draw(tl.time()));
draw(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>

معاينة تقنية «فك تشفير بتشويش مع فصل RGB ثم إطفاء على طريقة CRT» — عند 0:04 من الفيديو

انتقال

فك تشفير بتشويش مع فصل RGB ثم إطفاء على طريقة CRT

تتكوّن كلمة ضيقة بسماكة black حرفًا بحرف من رموز عشوائية تتغير في كل إطار بمعدل 30 fps خلال 0.34 ث، وتُرسم ثلاث مرات (نسختان بالماجنتا والسماوي بإزاحة 12 px بوضع screen تحت الأبيض) مع ثلاث شرائح أفقية عشوائية تُزاح حتى 60 px. ثم ينهار المشهد إلى خط أبيض متوهج بسماكة 3 px بحركة expo out خلال 0.08 ث.

متى تُستخدم لحظة تقنية أو برمجية، وخروج حاد إلى المشهد التالي.

عرض الكود

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>فك تشفير بتشويش مع فصل RGB ثم إطفاء على طريقة CRT</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=Mona+Sans:ital,wdth,wght@0,75..125,200..900;1,75..125,200..900&family=JetBrains+Mono:wght@400;500&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#c { position: absolute; inset: 0; width: 1920px; height: 1080px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="1.6" data-width="1920" data-height="1080"><canvas id="c" class="clip" data-start="0" data-duration="1.6" width="1920" height="1080"></canvas></div>
<script>
const c = document.getElementById('c'), x = c.getContext('2d');
const WORD = "READY";                       // the word that decodes
const GLY = "}#!/$1<>%&@";                  // scramble glyphs
const hash = (a, b) => { const s = Math.sin(a * 91.7 + b * 47.3) * 43758.5; return s - Math.floor(s); };
function word(s, dx, col) { x.font = "900 420px 'Mona Sans'"; x.fontStretch = 'condensed'; x.textAlign = 'center'; x.fillStyle = col; x.fillText(s, 945 + dx, 691); }
function draw(t) {
  x.fillStyle = '#7C6CF2'; x.fillRect(0, 0, 1920, 1080);
  const k = Math.min(1, t / 0.34), f = Math.floor(t * 30);
  let s = ''; for (let i = 0; i < WORD.length; i++) s += k > (i + 1) / (WORD.length + 1) ? WORD[i] : GLY[Math.floor(hash(i, f) * GLY.length)];
  const g = t < 0.36 ? 1 - k * 0.7 : 0;
  if (g > 0) { x.globalCompositeOperation = 'screen'; word(s, -12 * g, '#ff2a6a'); word(s, 12 * g, '#2affe0'); x.globalCompositeOperation = 'source-over'; }
  word(s, 0, '#FAF9FF');
  if (g > 0) for (let n = 0; n < 3; n++) { const y = 389 + hash(n, f) * 300, h = 10 + hash(f, n) * 30; x.drawImage(c, 400, y, 1100, h, 400 + (hash(n + 3, f) - .5) * 120 * g, y, 1100, h); }
  if (t > 1.2) {                                     // CRT switch-off
    const e = Math.min(1, (t - 1.2) / 0.08), ex = 1 - Math.pow(2, -10 * e), h = 1080 + (3 - 1080) * ex;
    x.fillStyle = '#000'; x.fillRect(0, 0, 1920, 1080);
    x.shadowColor = '#fff'; x.shadowBlur = 30; x.fillStyle = e > 0.9 ? '#FAF9FF' : '#7C6CF2';
    x.fillRect(290 * ex, 540 - h / 2, 1920 - 580 * ex, h); x.shadowBlur = 0;
  }
}
const tl = gsap.timeline({ paused: true });
tl.to({}, { duration: 1.6 });
tl.eventCallback('onUpdate', () => draw(tl.time()));
draw(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:09 من الفيديو

الطباعة

جدار طباعي حركي من الأشرطة

سبعة أشرطة بعرض الإطار كاملًا تتناوب بين لونين؛ يكرر كل شريط كلمة واحدة بأربعة أنماط من خط متغيّر (مائل ثقيل ممتد، مائل خفيف ضيق، مستقيم ثقيل، مستقيم خفيف) تفصل بينها نقاط التمييز، ويتحرك بسرعة 260 px/s، والصفوف الفردية في الاتجاه المعاكس؛ ويتبدل النمط مع كل نبضة. الشريط الأوسط بلون التمييز وكلمته كبيرة وثابتة. تقتحم الأشرطة من اليمين بدءًا من المركز (تأخير 25 مللي ثانية، expo out، motion blur) وتغادر جانبيًا مع طمس.

متى تُستخدم فاصل طباعي صاخب يستعرض خطًا متغيّرًا.

عرض الكود

<!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=Mona+Sans:ital,wdth,wght@0,75..125,200..900;1,75..125,200..900&family=JetBrains+Mono:wght@400;500&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#c { position: absolute; inset: 0; width: 1920px; height: 1080px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080"><canvas id="c" class="clip" data-start="0" data-duration="3" width="1920" height="1080"></canvas></div>
<script>
const c = document.getElementById('c'), x = c.getContext('2d');
const WORD = "MOTION FAB";                                   // the repeated word
const ROWS = 7, H = 1080 / ROWS;
const STYLES = [[900, 'expanded', 'italic '], [300, 'condensed', 'italic '], [800, 'expanded', ''], [400, 'condensed', '']];
function row(r, t, x0) {
  const y = r * H, blue = r % 2 === 0;
  if (r === 3) { x.fillStyle = '#FB2D89'; x.fillRect(x0, y, 1920, H); x.font = "800 140px 'Mona Sans'"; x.fontStretch = 'expanded'; x.textAlign = 'center'; x.fillStyle = '#0D0B1E'; x.fillText(WORD, 960 + x0, y + H / 2 + 50); x.textAlign = 'left'; return; }
  x.fillStyle = blue ? '#7C6CF2' : '#FAF9FF'; x.fillRect(x0, y, 1920, H);
  const dir = r % 2 ? -1 : 1; let px = -((t * 260 * dir + r * 333) % 900 + 900) % 900 - 900 + x0, k = r;
  while (px < 1920 + x0) {
    const [w, st, it] = STYLES[(k + Math.floor(t / 0.47)) % 4];
    x.font = `${it}${w} 140px 'Mona Sans'`; x.fontStretch = st; x.fillStyle = blue ? '#FAF9FF' : '#7C6CF2';
    x.fillText(WORD, px, y + H / 2 + 50); px += x.measureText(WORD).width + 28;
    x.fillStyle = '#FB2D89'; x.beginPath(); x.arc(px + 4, y + H / 2, 9, 0, 7); x.fill(); px += 36; k++;
  }
}
function draw(t) {
  x.fillStyle = '#0D0B1E'; x.fillRect(0, 0, 1920, 1080);
  for (let r = 0; r < ROWS; r++) {
    const o = Math.abs(r - 3), a = Math.min(1, Math.max(0, (t - o * 0.025) / 0.16)), inK = 1 - Math.pow(2, -10 * a);
    const b = Math.min(1, Math.max(0, (t - 2.6 - o * 0.02) / 0.12)), outK = b * b * b;
    x.save(); x.filter = `blur(${(1 - inK) * 18 + outK * 26}px)`; row(r, t, (1 - inK) * 1920 + outK * (r % 2 ? -2100 : 2100)); x.restore();
  }
}
const tl = gsap.timeline({ paused: true });
tl.to({}, { duration: 3 });
tl.eventCallback('onUpdate', () => draw(tl.time()));
draw(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>

معاينة تقنية «من كلمة إلى جسيمات: كرة، مجرة، warp» — عند 0:10 من الفيديو

جسيمات

من كلمة إلى جسيمات: كرة، مجرة، warp

نحو 3000 نقطة مأخوذة من بكسلات كلمة تتفكك من اليسار إلى اليمين (جبهة تمر خلال 0.2 ث بينما يبقى باقي الكلمة صلبًا)، وتتناثر في سحابة (cubic out)، ثم تنساب إلى كرة فيبوناتشي تدور، ثم إلى مجرة حلزونية مائلة بذراعين، وكل ذلك بمنظور بسيط قدره 1400 px؛ وتُرسم كل نقطة كخط قصير من موضعها قبل 30 مللي ثانية، فتترك الحركات السريعة أثرًا. وتنتهي بـ warp: تنطلق كل نقطة شعاعيًا بتسارع.

متى تُستخدم لتحويل عنوان إلى فاصل تجريدي والانتقال بعده عبر warp.

عرض الكود

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>من كلمة إلى جسيمات: كرة، مجرة، warp</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=Mona+Sans:ital,wdth,wght@0,75..125,200..900;1,75..125,200..900&family=JetBrains+Mono:wght@400;500&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#c { position: absolute; inset: 0; width: 1920px; height: 1080px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2.2" data-width="1920" data-height="1080"><canvas id="c" class="clip" data-start="0" data-duration="2.2" width="1920" height="1080"></canvas></div>
<script>
const c = document.getElementById('c'), x = c.getContext('2d');
const N = 3000, WORD = "MOTION FAB";                       // particle count, the word
let P = null;
const rnd = (() => { let s = 7; return () => (s = (s * 16807) % 2147483647) / 2147483647; })();
function build() {
  const o = document.createElement('canvas'); o.width = 1920; o.height = 1080; const g = o.getContext('2d');
  g.font = "900 170px 'Mona Sans'"; g.textAlign = 'center'; g.fillStyle = '#fff'; g.fillText(WORD, 960, 600);
  const d = g.getImageData(0, 0, 1920, 1080).data, pts = [];
  for (let y = 430; y < 640; y += 2) for (let X = 0; X < 1920; X += 2) if (d[(y * 1920 + X) * 4 + 3] > 128) pts.push([X - 960, y - 540]);
  P = []; for (let i = 0; i < N; i++) {
    const p = pts[Math.floor(rnd() * pts.length)], ph = Math.acos(1 - 2 * (i + .5) / N), th = Math.PI * (1 + Math.sqrt(5)) * i;
    const arm = i % 2, rad = 30 + rnd() * 430, an = rad * .0085 + arm * Math.PI + (rnd() - .5) * .7;
    P.push({ t: p, s: (p[0] + 500) / 1000, sph: [Math.sin(ph) * Math.cos(th) * 300, Math.cos(ph) * 300, Math.sin(ph) * Math.sin(th) * 300],
      cl: [(rnd() - .5) * 760, (rnd() - .5) * 640, (rnd() - .5) * 500], gal: [Math.cos(an) * rad, (rnd() - .5) * 40, Math.sin(an) * rad], col: arm === 0 && rad > 180 ? '#FB2D89' : '#FAF9FF' });
  }
}
const cl = (v) => Math.max(0, Math.min(1, v)), io = (k) => (k < .5 ? 4 * k * k * k : 1 - Math.pow(-2 * k + 2, 3) / 2);
const ry = (v, a) => [v[0] * Math.cos(a) + v[2] * Math.sin(a), v[1], -v[0] * Math.sin(a) + v[2] * Math.cos(a)];
const rx = (v, a) => [v[0], v[1] * Math.cos(a) - v[2] * Math.sin(a), v[1] * Math.sin(a) + v[2] * Math.cos(a)];
const lerp3 = (a, b, k) => a.map((v, i) => v + (b[i] - v) * k);
function pos(p, t) {
  const ds = .2 + p.s * .2; if (t < ds) return null;                 // the word dissolves left to right
  let v = lerp3([p.t[0], p.t[1], 0], p.cl, 1 - Math.pow(1 - cl((t - ds) / .3), 3));
  v = lerp3(v, ry(p.sph, (t - .4) * 1.3), io(cl((t - .4) / .2)));     // -> sphere
  v = lerp3(v, rx(ry(p.gal, -(t - 1.2) * 1.6), -1.2), io(cl((t - 1.2) / .2))); // -> galaxy
  return v;
}
function draw(t) {
  if (!P) build();
  x.fillStyle = '#0D0B1E'; x.fillRect(0, 0, 1920, 1080);
  if (t < .45) { x.save(); x.beginPath(); x.rect(460 + 1000 * cl((t - .2) / .2), 0, 1920, 1080); x.clip(); x.font = "900 170px 'Mona Sans'"; x.textAlign = 'center'; x.fillStyle = '#FAF9FF'; x.fillText(WORD, 960, 600); x.restore(); }
  const warp = cl((t - 1.8) / .2);
  for (const p of P) {
    const v = pos(p, t); if (!v) continue; const v0 = pos(p, t - .03) || v;
    const f = 1400 / (1400 + v[2]), f0 = 1400 / (1400 + v0[2]);
    let a = [960 + v[0] * f, 540 + v[1] * f], b = [960 + v0[0] * f0, 540 + v0[1] * f0];
    if (warp > 0) { const s = 1 + warp * warp * 3; b = [960 + (a[0] - 960) * (1 + warp * .2), 540 + (a[1] - 540) * (1 + warp * .2)]; a = [960 + (a[0] - 960) * s * 1.4, 540 + (a[1] - 540) * s * 1.4]; }
    x.strokeStyle = t > 1.2 ? p.col : '#FAF9FF'; x.lineWidth = 2.2 * f; x.globalAlpha = .85;
    x.beginPath(); x.moveTo(b[0], b[1]); x.lineTo(a[0] + .5, a[1] + .5); x.stroke();
  }
  x.globalAlpha = 1;
}
const tl = gsap.timeline({ paused: true });
tl.to({}, { duration: 2.2 });
tl.eventCallback('onUpdate', () => draw(tl.time()));
document.fonts.load("900 170px 'Mona Sans'").then(() => draw(tl.time()));
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:19 من الفيديو

انتقال

مسح بلوحة لونية نحو شريحة تحريرية

لوحة بلون خلفية الشريحة التالية تغطي الإطار من اليسار خلال 83 مللي ثانية (sine out)؛ وتظهر الشريحة الجديدة تحتها ويدخل سطرا العنوان منزلقين من 90 px على اليسار مع تعتيم من 0.35 إلى 1 خلال 0.3 ث (cubic out)، والسطر الثاني بعد 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>
@import url("https://fonts.googleapis.com/css2?family=Mona+Sans:ital,wdth,wght@0,75..125,200..900;1,75..125,200..900&family=JetBrains+Mono:wght@400;500&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#a, #b, #w { position: absolute; inset: 0; }
#a { background: #0D0B1E; } #b { background: #FE9117; }
h1 { position: absolute; left: 78px; font: 900 205px/0.95 'Mona Sans'; color: #FAF9FF; }
#a h1 { top: 240px; } #a b { color: #FE9117; }
#b h1 { color: #0D0B1E; } .l1 { top: 220px; font-size: 300px !important; } .l2 { top: 500px; font-size: 145px !important; }
.p { position: absolute; inset: 0; background: #FE9117; transform-origin: 0 50%; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2" data-width="1920" data-height="1080"><div id="a" class="clip" data-start="0" data-duration="0.583"><h1>EDIT<br><b>IN WORDS.</b></h1></div><div id="b" class="clip" data-start="0.583" data-duration="1.417"><h1 class="l1">IDEAS</h1><h1 class="l2">IN MOTION.</h1></div><div id="w" class="clip" data-start="0.5" data-duration="0.083"><div class="p"></div></div></div>
<script>
const tl = gsap.timeline({ paused: true });
tl.fromTo('.p', { scaleX: 0 }, { scaleX: 1, duration: 0.083, ease: 'sine.out' }, 0.5);   // the panel
tl.fromTo('.l1', { x: -90, opacity: 0.35 }, { x: 0, opacity: 1, duration: 0.3, ease: 'power3.out' }, 0.583);
tl.fromTo('.l2', { x: -90, opacity: 0.35 }, { x: 0, opacity: 1, duration: 0.3, ease: 'power3.out' }, 0.613);
tl.to({}, { duration: 0.1 }, 1.9);
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:01 من الفيديو

شخصية

ارتداد بتمدد وانضغاط على مسطرة

تسقط كرة على خط أرضية مدرّج وترتد مع الإيقاع (الاصطدامات بينها 0.48 ث، وقمم الأقواس على ارتفاع 310 px) على مسار طيران منقّط؛ وخلال 60 مللي ثانية من كل اصطدام تنضغط إلى 1.9 x 0.45 مع تثبيت أسفلها على الأرض، وفي الهواء تتمدد باتجاه سرعتها (حتى +32%)، ويترك كل اصطدام حلقة إهليلجية متوسعة على الأرض.

متى تُستخدم افتتاحية تثبت مبادئ الرسوم المتحركة في ثانيتين.

عرض الكود

<!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=Mona+Sans:ital,wdth,wght@0,75..125,200..900;1,75..125,200..900&family=JetBrains+Mono:wght@400;500&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#c { position: absolute; inset: 0; width: 1920px; height: 1080px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2.2" data-width="1920" data-height="1080"><canvas id="c" class="clip" data-start="0" data-duration="2.2" width="1920" height="1080"></canvas></div>
<script>
const c = document.getElementById('c'), x = c.getContext('2d');
const IMP = [0.5, 0.98, 1.46], R = 45;          // impact times, ball radius
function state(t) {
  if (t < IMP[0]) { const u = Math.max(0, (t - 0.05) / 0.45); return [608 + 92 * u, -80 + (655 - R + 80) * u * u, 92, 1500 * u]; }
  for (let k = 0; k < 2; k++) if (t < IMP[k + 1]) { const u = (t - IMP[k]) / 0.48; return [[700, 965][k] + 265 * u, 655 - R - 1240 * u * (1 - u), 550, -2600 * (1 - 2 * u)]; }
  const u = Math.min(1, (t - IMP[2]) / 0.5); return [1220 + 200 * u, 655 - R - 1240 * u * (1 - u) * 0.5, 400, -1300 * (1 - 2 * u)];
}
function draw(t) {
  x.fillStyle = '#0D0B1E'; x.fillRect(0, 0, 1920, 1080);
  x.strokeStyle = '#FAF9FF'; x.lineWidth = 3; x.beginPath(); x.moveTo(360, 700); x.lineTo(1560, 700); x.stroke();
  x.lineWidth = 1.5; for (let X = 360; X <= 1560; X += 40) { x.beginPath(); x.moveTo(X, 707); x.lineTo(X, X % 200 === 160 ? 721 : 714); x.stroke(); }
  x.save(); x.setLineDash([3, 7]); x.globalAlpha = .5; x.beginPath(); for (let tt = .05; tt < 1.9; tt += .01) { const s = state(tt); tt === .05 ? x.moveTo(s[0], s[1] + R) : x.lineTo(s[0], s[1] + R); } x.stroke(); x.restore();
  IMP.forEach((ti) => { if (t < ti) return; const k = Math.min(1, (t - ti) / .3), e = 1 - Math.pow(1 - k, 3), X = state(ti)[0];
    x.save(); x.globalAlpha = (1 - k) * .8; x.beginPath(); x.ellipse(X, 700, 40 + 40 * e, 10 + 10 * e, 0, 0, 7); x.stroke(); x.restore(); });
  const [bx, by, vx, vy] = state(t); let sx = 1, sy = 1, rot = 0, y = by;
  for (const ti of IMP) { const d = Math.abs(t - ti); if (d < .06) { const k = 1 - d / .06; sx = 1 + .9 * k; sy = 1 - .55 * k; } }
  if (sx === 1) { const st = Math.min(.32, Math.hypot(vx, vy) / 6000); rot = Math.atan2(vy, vx); sx = 1 + st; sy = 1 - st * .55; } else y = 655 - R * sy;
  x.save(); x.translate(bx, y); x.rotate(rot); x.fillStyle = '#FB2D89'; x.beginPath(); x.ellipse(0, 0, R * sx, R * sy, 0, 0, 7); x.fill(); x.restore();
}
const tl = gsap.timeline({ paused: true });
tl.to({}, { duration: 2.2 });
tl.eventCallback('onUpdate', () => draw(tl.time()));
draw(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>

موجّهات أخرى

معاينة الموجّه «عرض تعريفي سلس للتطبيق مدته 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>

معاينة الموجّه «فيديو إطلاق تطبيق حركي مع نموذج واجهة متحرك»

فيديو إطلاق تطبيق حركي مع نموذج واجهة متحرك

<direction> اصنع فيديو إطلاق منتج حركيًا أفقيًا بدقة 1920x1080 ومدته 42 ثانية لـ [your app]. يُظهر كيف يصنع مؤسس فيديو إطلاق لشركته الناشئة بمجرد الدردشة في التطبيق. أعد بناء واجهة تطبيقي من لقطات الشاشة الخاصة بي كنموذج متحرك نظيف مصنوع من أشكال ونصوص، قريب من الواقع. في هذا الفيديو هو تطبيق داكن بلون كحلي-بنفسجي مع Live preview على اليسار، وتبويبات Chat / Files / Panels على اليمين، وأزرار تمييز وردية. لا تعرض لقطات الشاشة أبدًا كصور ثابتة: يجب أن يتحرك كل عنصر. حافظ على واجهة واحدة متصلة بلا قطعات حادة. تتقدم الكاميرا وتتحرك أفقيًا وتتراجع بين اللوحات بينما يتحرك المؤشر وينقر. التزم بشبكة إيقاع 120 BPM (النبضة الواحدة = 0.5 ثانية) واجعل شيئًا يحدث مع كل نبضة. كلمات حركية ضخمة تصطدم فوق الواجهة بين الخطوات. الشركة الناشئة للمؤسس هي تطبيق مُختلق، مثلًا "Pulse — standups your team actually reads" (استبدله بتطبيقك). تجنب القطعات الحادة ولقطات الشاشة الثابتة وأي شيء مقصوص عند حواف الإطار والنصوص أو أشرطة التظليل التي تمتد إلى الأعمدة المجاورة. </direction> <structure> 1) الافتتاحية، 0–3 ث: "YOUR LAUNCH VIDEO." ثم "IN ONE CHAT." بخط ضخم، تُقطع كلمة بكلمة على الإيقاع. تتحول "CHAT." إلى تبويب Chat وتتراجع الكاميرا لتُظهر نافذة التطبيق كاملة. 2) المراجع، 3–8 ث: يُلصق رابط "pulse-demo.app" في الدردشة. يطير عرض تقديمي PDF وشعار كبطاقات مرفقات ويستقران في مكانهما. الكلمة الكبيرة "DROP". 3) الطلب، 8–13 ث: يكتب المؤسس "Make a 30-second launch video for Pulse, kinetic style, our colours" حرفًا حرفًا، ثم ينقر المؤشر على إرسال. الكلمة الكبيرة "ASK". 4) الخطة، 13–18 ث: يرد الوكيل بخطة من خمس خطوات على شكل قائمة تحقق. تظهر الخطوات وتُعلَّم واحدة تلو الأخرى، وتتراجع الكاميرا قليلًا مع كل سطر جديد حتى لا يبدو الإطار فارغًا. الكلمة الكبيرة "PLAN". 5) المخطط وGo، حوالي 18–21 ث: مخطط رمادي هيكلي للإعلان يملأ Live preview بسرعة، مع ظهور تسمية "Live preview" وشريط التشغيل. ينقر المؤسس على Go، وتنمو خلفية وردية من الزر المضغوط وتغمر الشاشة خلف "GO!" ضخمة. 6) البث الحي، حوالي 21–31 ث: تظهر أسطر الحالة في الدردشة ("Picking fonts" و"Animating the title" و"Writing a soundtrack") بينما يتحول المخطط إلى الإعلان النهائي. تتقدم الكاميرا حتى يملأ الإعلان الإطار. عند حوالي 27 ث ينزلق عنوان الإعلان "Standups your team actually reads." ويُرسم شريط تظليل ليموني تحت "actually reads.". بجانبه عمود إحصائيات فيه "92%" و"updates read". الكلمة الكبيرة "LIVE". 7) التصدير، حوالي 31–37 ث: تتراجع الكاميرا إلى التطبيق. زر Export والتبويبات ظاهرة بالكامل بينما يعمل التصدير ويكتمل. الكلمة الكبيرة "DONE". 8) البطاقة الختامية، حوالي 37–42 ث: شعار [your app] و"Live on [launch site] today" (استبدله بما يخصك)، يستقران على النبضة الأخيرة ويبقيان حتى النهاية. </structure> <composition> لوحة الألوان: واجهة داكنة كحلية-بنفسجية، وأزرار تمييز بلون أرجواني وردي والفيضان الوردي، وتدرج وردي إلى برتقالي على الشعار، والليموني كلون تظليل داخل الإعلان التجريبي. الكلمات الحركية ضخمة وعريضة وبأحرف كبيرة بخط بلا زوائد بخطوط العلامة التجارية وتمتد على معظم عرض الإطار. صغّر الكلمة الطويلة قليلًا بدل أن تُقص. حافظ على هوامش آمنة في كل مكان. في اللقطات الواسعة تكون نافذة التطبيق كاملة داخل الإطار. في الدردشة يكون حقل الإدخال ظاهرًا بالكامل. في مشهد التصدير يكون زر Export والتبويبات داخل الإطار. في الإعلان يبقى العنوان وشريط الليمون في عمودهما مع مساحة كافية. يطابق الشريط عرض كلماته تمامًا ولا يتداخل أبدًا مع عمود "92%". </composition> <techniques> كاميرا افتراضية متصلة مع تقدم وتحريك أفقي وتراجع سلس (ease-in-out) بين اللوحات ودون قطعات. ينزلق المؤشر نحو أهدافه وينقر مع تصغير طفيف عند الضغط. تدخل كلمات الافتتاحية واحدة مع كل نبضة. تطير بطاقات المرفقات وتستقر في مكانها بتجاوز طفيف. يُكتب نص الدردشة حرفًا حرفًا. تظهر عناصر قائمة التحقق وتُعلَّم على نبضات متتالية. يمتلئ المخطط الرمادي بسرعة ثم يتحول عنصرًا بعنصر إلى الإعلان النهائي. ينمو الفيضان الوردي تحت "GO!" شعاعيًا من الزر المنقور. تصطدم الكلمات الكبيرة بتأثير تصغير سريع فوق الواجهة وتغادر بسرعة مع النبضة التالية. لكل نبضة حدث مرئي: كلمة أو نقرة أو بطاقة أو علامة أو سطر حالة أو حركة كاميرا. </techniques> <music> مقطوعة إلكترونية حيوية بإيقاع 120 BPM، يرتبط فيها كل قطع واصطدام كلمة وحدث في الواجهة بالإيقاع. تتصاعد خلال خطوات الإعداد، وترتفع نحو "GO!"، وتدفع البناء الحي، وتنتهي بضربة أخيرة على البطاقة الختامية. </music> <sound> نقرات لوحة المفاتيح تقع تمامًا على كل حرف يُكتب. نقرات الفأرة عند كل نقرة للمؤشر. أصوات whoosh عند حركات الكاميرا وعند طيران بطاقات المرفقات، وأصوات طقطقة عند هبوطها. نقرات خفيفة لخطوات القائمة وأسطر الحالة. تأثير قوي تحت كل كلمة كبيرة، وصوت riser نحو "GO!" وضربة أخيرة على البطاقة الختامية. أبقِ الموسيقى تحت المؤثرات حتى تُسمع النقرات والتأثيرات بوضوح. </sound> <references> إعلانات تشويقية حركية لإطلاق التطبيقات تعيد بناء واجهة SaaS كنموذج متحرك واضح بحركة كاميرا واحدة متصلة، على طراز إعلانات يوم إطلاق المنتج. </references>

استُخدم مرتين

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

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