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

AR

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

Simple Motion

النص المكتوب يتحول إلى خط مصمم: إعلان ترويجي لتطبيق مدته 30 ثانية

إعلان تطبيق مرسوم مدته 30 ثانية: أسطر مكتوبة تتحول إلى عناوين serif وانفجار شعار ونافذة تطبيق وبطاقات ميزات وبطاقة ختامية على إيقاع 128 BPM.

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

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

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

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

استخدمه مع وكيلكمع وكيلك

الفكرة

اصنع إعلانًا ترويجيًا لمنتج مدته 30 ثانية، متحركًا بالكامل، لتطبيقي، بأبعاد 1920x1080 أفقيًا وبمعدل 60 إطارًا في الثانية. الفكرة: النص المكتوب يتحول باستمرار إلى خط مصمم مكتمل. تتحول أسطر mono المكتوبة إلى عناوين serif كبيرة، ثم يدور العنوان في انفجار يصبح الشعار، وتعرض نافذة تطبيق ما يُكتب، ثم تتبع ذلك بطاقات الميزات وشبكة أيقونات وبطاقة ختامية. كل شيء مرسوم: الخط والواجهة والأشكال، دون لقطات مصورة. يجب أن يبدو كعمل موشن ديزاين فاخر، مع تخفيف سلس لكل حركة وكل قطع على إيقاع مقطوعة بسرعة 128 BPM. استخدم اسم منتجي "[your brand]" وأيقونة تطبيقي المربعة (أو ارسم علامة بسيطة على شكل مربع مستدير بألواني)، وشعارًا نصيًا من سطر واحد، وثلاث خطوات توضح طريقة العمل، وبضعة أسطر قصيرة للميزات، وعنوان موقعي. استبدل كل مثال بين علامات الاقتباس أدناه بكلماتي، مع إبقاء كل سطر بطول المثال تقريبًا حتى يبقى التخطيط متماسكًا. تجنب اللقطات المصورة والصور، والحركات الخطية، والقطع خارج الإيقاع، والموسيقى التي تتوقف قبل النهاية.

البنية

الأزمنة بالثواني؛ الميزان الواحد = 1.875 ث.

0–7.5، المقدمة المكتوبة. يُكتب سطر mono "# Ideas" في المنتصف، حرف واحد لكل نغمة سادسة عشرة، مع مؤشر وردي (علامة "#" بالوردي). على الإيقاع ترتفع الحروف mono بمقدار 26 px وتتلاشى بالضبابية بتتابع سريع بينما ترتفع الكلمة نفسها كعنوان serif ضخم (نحو 228 px)، حرفًا بحرف من 74 px أسفل، والضبابية من 10 إلى 0، والمقياس من 1.12 إلى 1 (0.3 ث، power3.out). يقفز المؤشر إلى نهايتها بتجاوز طفيف ويومض على أنصاف الإيقاعات. يُكتب سطر mono ثانٍ "in motion" بضعف السرعة ويتحول بالطريقة نفسها إلى السطر الثاني الوردي المائل "in motion."، وتتناثر رموز صغيرة "#" و"*" بينما ينهار نص mono. من 3.75 ث تظهر أربع رقائق بيضاء بالتتابع على إيقاعات متتالية حول العنوان (back.out، بميلان خفيف). تعرض كل واحدة أولًا أمرًا قصيرًا بخط mono ثم تتبدل إلى ما يفعله: "bigger" تصبح "Bigger" بخط عريض، و"slower" تصبح "slower" مائلة مع شريط، و"colour" تحصل على عينة لون وردية، و"MP4" تصبح "export". تتأرجح الرقائق بلطف. عند 6.0 ث ينحني سطرا العنوان إلى أقواس حول المركز، ويدوران حتى نحو 330 درجة، ثم يتقلصان إلى لا شيء في أقل من ثانية، بينما تدور الرقائق إلى الخارج وتتلاشى بالضبابية. تندفع 48 شعاعًا رفيعًا (كل خامس شعاع وردي والبقية رمادية لافندر) من الخارج وتقف حول المركز، وتظهر نقطة وردية في الوسط، ويخفت الإطار قليلًا إلى رمادي بنفسجي، وتنضغط النقطة قبل القطع مباشرة.
7.5–9.75، كشف الشعار عند الدروب. تتوسع حلقتان ورديتان من المركز وتتلاشيان، وينفجر نحو 70 رمزًا صغيرًا ("+"، "×"، "~"، "/"، "°"، "< >") ويدور ثم ينجرف بعيدًا. تظهر أيقونة التطبيق في المركز (المقياس 0.4، 1.55، 1.22، 1.0 خلال 0.3 ث) وتنزلق يسارًا إلى تركيبة الشعار. يرتفع اسم المنتج "[your brand]" (نحو 205 px، serif عريض) حرفًا بحرف، حرف كل 60 ms، من 70 px أسفل مع ميلان وضبابية. تسقط النقطة الوردية التي انطلقت عند القطع عائدة وتهبط كنقطة حرف "i" (أو كنقطة ختامية) وهي تنضغط. يرتفع الشعار النصي "Your AI motion designer" (خافت، 45 px) كلمة بكلمة تحته ويمتد خط وردي قصير تحته بحركة expo.out. عند 9.55 ث يسقط الشعار النصي وتتقلص التركيبة كلها وتطير إلى الزاوية العلوية اليسرى، حيث تصبح الشعار في ترويسة نافذة تطبيق.
9.75–15.0، التطبيق. تنمو نافذة تطبيق بيضاء بزوايا مستديرة (1600x900) من شعار الترويسة بحركة expo.out. تظهر أزرار الترويسة واحدًا تلو الآخر (زر شبحي "Preview"، وزر وردي "Export" مع سهم، وأيقونات خطية صغيرة)، ويمتد فاصل، وتظهر تسميات الألواح "CHAT" و"PREVIEW" بالتلاشي. تُكتب على اليسار أسطر بخط mono مع علامات وردية ومؤشر: "# Ideas in motion"، "Tell the chat what to show."، "## Features"، "- Fonts for every script"، "- Vertical or square"، "- [x] Live preview"، "- [ ] MP4 export"، "> Edit in words." وسطر كود محاط بكلمتين بين علامتي اقتباس. عند انتهاء كل سطر يرمي خط بيزيه وردي رفيعًا عبر الفاصل؛ وحيث يهبط يظهر العنصر المعروض على اليمين بضبابية من 8 إلى 0 وانزلاق صغير (عنوان serif، وسطر نص بكلمات عريضة ومائلة، وعنوان بخط رفيع، ونقاط تعداد، ومربع اختيار وردي محدد، وآخر فارغ، واقتباس مع شريط، وصندوق كود ملون برموز برتقالية وبنفسجية)، ويومض شريط وردي ناعم خلفه وتبقى نقطة وردية صغيرة. تتحرك الكاميرا طوال الوقت (انظر التقنيات) وتنتهي بتكبير عبر المعاينة عند 14.8 ث.
15.0–24.4، خمس بطاقات ميزات، نحو ميزان لكل واحدة. لكل بطاقة الكتلة نفسها على اليسار: عنوان تمهيدي وردي بخط mono متباعد الحروف يُفك تشفيره من حروف عشوائية، وسطر serif عريض وسطر وردي مائل (نحو 119 و114 px) يرتفعان حرفًا بحرف من خط الأساس، وشريط تظليل وردي شفاف يمسح تحت السطر المائل، وسطر نص خافت ينفتح من اليسار إلى اليمين. العناصر المرئية على اليمين:
1. "01 — PICK A TEMPLATE" / "Live" / "preview." / "Tell the chat what to show. The agent builds the animation." تدخل بطاقتان بدوران ثلاثي الأبعاد: بطاقة دردشة تكتب "# Ideas" و"Edit in words" و"- bigger" و"- slower"، وبطاقة معاينة تعرض كل ضغطة مفتاح؛ وبينهما شارة وردية دائرية عليها برق تظهر وتدور عند كل سطر منتهٍ. تخرج بدفعة قصيرة وسحبة رأسية إلى الأعلى.
2. "02 — DESCRIBE YOUR IDEA" / "Chat instead" / "of a timeline." / "No keyframes to hunt for. Say what should change." تدخل بسحبة من الأسفل. ترسم دائرة كبيرة باهتة ومخطط حاسوب محمول نفسيهما، وتسقط أيقونة التطبيق على الشاشة مع انضغاط وارتداد، وتنطلق حلقات نبض، وتُشطب ثلاث أيقونات أدوات رمادية حولها (معين إطار مفتاحي، وخط زمني، ومنحنى) بالوردي واحدة تلو الأخرى. تخرج بسحبة أفقية.
3. "03 — REFINE IN WORDS" / "Edit" / "in words." / "“Bigger”, “slower”, “another colour”: the preview updates as you talk." بطاقة دردشة بأسطر مرقمة تعلّم سطرًا بشريط برتقالي وأيقونة، وتنفتح ملاحظة "Say what should change." منزلقة فوق الأسطر، ويُدرج سطر فارغ، وتُغلق الملاحظة، وتتوسع حلقة تحقق بلون أزرق مخضر مع نقاط قصاصات ملونة. ثم تعبر ستارة وردية مائلة الإطار والبطاقة التالية تحتها بالفعل.
4. "NO KEYFRAMES" / "Another" / "colour." / "Kinetic type, shapes, 3D effects and sound." تظهر بطاقة بيضاء بأيقونة شمس بدوران ثلاثي الأبعاد، وتتبعها أربع عينات ألوان؛ ينقر مؤشر على البطاقة، وتنطلق حلقة وردية، وتتحول الشمس إلى قمر، ويتفتح المشهد كله على السمة الداكنة في دائرة تكبر من البطاقة.
5. وميض رمادي بنفسجي لإطار واحد، ثم على حبر عميق: "MP4 EXPORT" / "Your idea is" / "ready to move." / "Vertical, horizontal or square." يفتح مؤشر قائمة "Export" بجانب زر "Open app" ويختار "Vertical MP4" ثم "Square MP4"؛ وفي كل مرة تسقط بطاقة ملف داكنة عليها ".mp4" من القائمة بميلان وبعض الشرر.
24.4–26.25، شبكة الأيقونات. شبكة داكنة 11 × 6 من أيقونات موشن ديزاين رفيعة (play، film، music، type، layers، wand، image، video، shapes، mic، chat، palette، sun، sparkles) مع ست بلاطات وردية مضاءة تظهر على الإيقاعات وبعضها يرتعش؛ تخفت الشبكة بعد القطع وتقترب ببطء. تنقلب كلمات مفردة ضخمة في المركز على كل نصف إيقاع، بالتناوب بين الأبيض العريض والوردي المائل: "Type." "Shapes." "3D." "Sound." "Footage." "Free." تظهر كل واحدة من مقياس 1.12 مع ضبابية، وواحدة تنضغط. تتعطل الكلمة الأخيرة بتأثير glitch، ثم تدور الشبكة كلها حلزونيًا نحو المركز وتترك نقطة وردية واحدة.
26.25–30، البطاقة الختامية. تنفجر حلقات ورموز من مكان الأيقونة، وتظهر الأيقونة، ويطير الاسم من اليمين حرفًا بحرف مع ضبابية، ويرتفع الشعار النصي كلمة بكلمة ويمتد الخط السفلي. ثم تظهر ثلاثة أقراص بيضاء بأيقونات وردية صغيرة بفاصل ربع ثانية: "Live preview" و"Try it free" و"[your web address]". يومض مؤشر وردي بعد الاسم مباشرة على الإيقاع، وتقترب البطاقة ببطء شديد حتى النهاية.

التكوين

صفحة فاتحة #FAF9FF في المركز، تتدرج عبر #F4F2FE إلى تظليل ناعم للأطراف #D9D4EA في الزوايا، مع وهجين لافندر-ورديين ناعمين جدًا ينجرفان ببطء وشبكة نقاط خافتة. البطاقات بيضاء بظلال ناعمة مصبوغة بـ #1C0B5D، وخطوط رفيعة #E9E4F2، ولوحات ناعمة #F0EDFF. الخط الداكن والمشاهد الداكنة بلون الحبر العميق #1C0B5D (تدرج شعاعي إلى #0D0B1E عند الأطراف)؛ النص الخافت #6B6385؛ اللون المميز الرئيسي وردي #FB2D89، واللون الثاني برتقالي #FE9117، مع لمسات صغيرة من البنفسجي #7C6CF2 والأزرق المخضر #2DD4B0 (حلقة النجاح).
الخطوط: serif عرض عالي التباين، Fraunces بحجم بصري 72، للعناوين، عريض مستقيم للسطر الأول ومائل متوسط بالوردي للسطر الثاني؛ Onest لأسطر النص والشعار النصي والأقراص؛ JetBrains Mono للنص المكتوب والعناوين التمهيدية المتباعدة وتسميات الواجهة.
الأحجام: عنوان المقدمة نحو 228 px، اسم المنتج نحو 205 px، الشعار النصي 45 px، أسطر الميزات نحو 119 px (عريض) و114 px (مائل)، نافذة التطبيق 1600x900 بزوايا مستديرة. تضع تركيبة الشعار الأيقونة على اليسار والاسم على اليمين، مع الشعار النصي وخط وردي قصير تحتهما. تبقي بطاقات الميزات كتلة النص على اليسار والعنصر المرئي على اليمين.

التقنيات

كل حركة بتخفيف سلس ولا شيء خطي: power3.out لارتفاع الحروف، وback.out للظهور المفاجئ (الرقائق والأقراص وبطاقات الملفات)، وexpo.out للنوافذ والفواصل والخطوط السفلية النامية.
يدخل النص حرفًا بحرف من تحت خط الأساس مع ضبابية وتصغير طفيف للمقياس أو ميلان؛ وترتفع الشعارات النصية كلمة بكلمة؛ وتنفتح أسطر النص من اليسار إلى اليمين؛ وتُفك تشفيرات العناوين التمهيدية من حروف عشوائية.
تحول من mono إلى serif: ترتفع الحروف mono المكتوبة بمقدار 26 px وتتلاشى بالضبابية بتتابع سريع بينما ترتفع كلمة serif مكانها وتتناثر رموز صغيرة.
الظهور المفاجئ يتجاوز الهدف (مقياس الأيقونة 0.4، 1.55، 1.22، 1.0 خلال 0.3 ث)؛ وتنضغط النقاط والأيقونة عند الهبوط.
تُرسم خطوط بيزيه الوردية في نحو 0.1 ث وتُمحى من الذيل في 0.14 ث.
الكاميرا في مشهد التطبيق: دفع بطيء، ودفع سريع إلى نحو 1.4x على أعلى النافذة عند 11 ث، وتحريك بطيء للأسفل يتبع الكتابة، وسحب سريع للخلف مع إمالة النافذة نحو 10 درجات ثلاثية الأبعاد عند 14 ث، وتكبير عبر المعاينة مع ضبابية شديدة عند 14.8 ث. دفع بطيء على شبكة الأيقونات والبطاقة الختامية.
الانتقالات: دوامة قوس ودوران إلى أشعة، وانفجار حلقات ورموز، وطيران تركيبة الشعار إلى ترويسة النافذة، وتكبير عبر مع ضبابية، ودفعة قصيرة مع سحبة رأسية، وسحبة أفقية، وستارة وردية مائلة بأربع حواف أفتح متدرجة تعبر من اليسار إلى اليمين في نحو 0.22 ث، وكشف دائري على السمة الداكنة، ووميض رمادي بنفسجي لإطار واحد، والشبكة تدور حلزونيًا إلى نقطة واحدة.
تدخل البطاقات بدوران ثلاثي الأبعاد، وتتأرجح الرقائق بلطف، ويومض المؤشر على أنصاف الإيقاعات.

الموسيقى

سينث ويف آلي مشرق بسرعة 128 BPM مع آلات سينثسايزر تناظرية دافئة، مؤلف من جديد وبطول 30 ثانية بالضبط، موضوع على شبكة إيقاع الصورة. كل قطع يقع على ميزان: الدروب والشعار عند 7.5 ث، وميزة لكل ميزان، والكلمات على أنصاف الإيقاعات، والبطاقة الختامية عند 26.25 ث. المسار: أربعة موازين بناء مع أربيجيو وصاعد ضجيج، ثم الدروب مع كراش عند الشعار، ثم إيقاع دافع مع باص سايدتشين يستمر دون أي انقطاع حتى البطاقة الختامية وآخر نبضة فيها وتلاشٍ طويل للسينثسايزر يستمر حتى النهاية تمامًا. المزج عند نحو -14 LUFS، وذروة حقيقية تحت -1 dBTP.

الصوت

تصميم صوتي على لحظات الصورة فقط، فوق الموسيقى: نقرات كتابة ناعمة تحت الأسطر المكتوبة، وصوت blip عند تحول كل سطر إلى خط مصمم، وأصوات pop صغيرة للرقائق والأقراص وبطاقات الملفات، وصوت whoosh للدوامة ولكل سحبة وللستارة وللتكبير عبر وللكشف الداكن، وصاعد riser إلى الدروب وصوت boom عليه، وضربة مكتومة قصيرة عندما تهبط الأيقونة على الحاسوب المحمول، ورنين صاعد لعلامة التحقق الزرقاء المخضرة، ونقرات للمؤشر، وصوت glitch عند الوميض الرمادي، وضربة عند قطع الشبكة، ونقرة لكل كلمة تنقلب، وصاعد riser قصير إلى boom ختامي على أول نبضة من البطاقة الختامية. بلا تعليق صوتي.

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

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

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

معاينة تقنية «سطر أحادي المسافة مكتوب يتحول إلى عنوان بخط سيريف» — عند 0:01 من الفيديو

الطباعة

سطر أحادي المسافة مكتوب يتحول إلى عنوان بخط سيريف

يُكتب سطر أحادي المسافة حرفًا واحدًا لكل نوتة سادسة عشرة بمؤشر وردي؛ وعلى النبضة ترتفع حروفه 26 px وتتلاشى بالضبابية بفارق 22 ms بين حرف وآخر، بينما يصعد عنوان السيريف حرفًا حرفًا من 74 px أسفل (blur من 10 إلى 0، وscale من 1.12 إلى 1، و0.3 s power3.out، وفارق 36 ms). يقفز المؤشر إلى نهاية العنوان بـ back.out(2.2)، ويكبر حتى ارتفاع الأحرف الكبيرة، ويومض على أنصاف النبضات.

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

عرض الكود

<!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=Fraunces:ital,opsz,wght@0,9..144,500..800;1,9..144,500&family=JetBrains+Mono:wght@400;500;700&family=Onest:wght@400;500&display=block");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(ellipse farthest-corner at 50% 50%, #faf9ff 0%, #f4f2fe 62%, #d9d4ea 100%); }
#stage { position: absolute; inset: 0; }
#mono { position: absolute; left: 0; right: 0; top: 480px; text-align: center; font: 400 107px/1 "JetBrains Mono", monospace; color: #6b6385; white-space: pre; }
#mono .mk { color: #fb2d89; }
#serif { position: absolute; left: 0; right: 0; top: 420px; text-align: center; font: 760 228px/1 "Fraunces", serif; font-variation-settings: "opsz" 72; color: #1c0b5d; white-space: pre; }
#mono span, #serif span { display: inline-block; }
#caret { position: absolute; left: 0; top: 0; width: 6px; height: 120px; background: #fb2d89; border-radius: 1px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1920" data-height="1080">
  <div id="stage" class="clip" data-start="0" data-duration="4">
    <div id="mono"># Ideas</div>
    <div id="serif">Ideas</div>
    <div id="caret"></div>
  </div>
</div>
<script>
document.fonts.ready.then(() => {
const tl = gsap.timeline({ paused: true });
const BEAT = 60 / 128;                                   // the music's beat: typing runs on 16th notes
const split = (el, mk) => { const t = el.textContent; el.textContent = ""; return Array.from(t).map((c, i) => { const s = document.createElement("span"); s.textContent = c; if (mk.includes(i)) s.className = "mk"; el.appendChild(s); return s; }); };
const mono = split(document.getElementById("mono"), [0]), serif = split(document.getElementById("serif"), []);
const caret = document.getElementById("caret");
const right = (s) => s.getBoundingClientRect().right;    // measured once, at build time
gsap.set([...mono, ...serif], { opacity: 0 });
gsap.set(caret, { x: mono[0].getBoundingClientRect().left, y: 472 });
// 1. Type the mono line, the caret after the last character.
mono.forEach((s, i) => { const t = 0.12 + i * BEAT / 4; tl.set(s, { opacity: 1 }, t); tl.set(caret, { x: right(s) + 4 }, t); });
// 2. Morph: mono letters lift and blur away while the serif letters rise in.
tl.to(mono, { y: -26, opacity: 0, filter: "blur(5px)", duration: 0.13, stagger: 0.022, ease: "power2.in" }, 1.0);
tl.fromTo(serif, { y: 74, opacity: 0, scale: 1.12, filter: "blur(10px)" }, { y: 0, opacity: 1, scale: 1, filter: "blur(0px)", duration: 0.3, stagger: 0.036, ease: "power3.out" }, 1.02);
// 3. The caret jumps to the end of the headline, grows to its height and blinks on half beats.
tl.to(caret, { x: right(serif[serif.length - 1]) + 18, y: 430, height: 196, duration: 0.22, ease: "back.out(2.2)" }, 1.02);
for (let t = 1.3, on = false; t < 4; t += BEAT / 2, on = !on) tl.set(caret, { opacity: on ? 1 : 0 }, t);
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 من الفيديو

انتقال

دوامة عنوان تنهار إلى انفجار شعاعي

ينحني سطرا العنوان في أقواس حول مركز الإطار، ويدوران حتى 330 درجة ويتقلصان إلى لا شيء في أقل من ثانية (إطارات مفتاحية مقطعية للدوران والحجم والانحناء، تُحسب في كل إطار من زمن الخط الزمني). في الأثناء تندفع 48 شعاعًا رفيعًا من مسافة 500-1000 px لتقف حول المركز (cubic ease out، كل شعاع خامس وردي والباقي رمادي لافندري)، وتظهر نقطة وردية في الوسط بـ back.out(2.5) وتنضغط قبل القطع، ويخفت الإطار إلى رمادي بنفسجي.

متى تُستخدم تسليم عالي الطاقة من مقدمة طباعية إلى شعار أو المشهد التالي، تمامًا على الدروب.

عرض الكود

<!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=Fraunces:ital,opsz,wght@0,9..144,500..800;1,9..144,500&family=JetBrains+Mono:wght@400;500;700&family=Onest:wght@400;500&display=block");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(ellipse farthest-corner at 50% 50%, #faf9ff 0%, #f4f2fe 62%, #d9d4ea 100%); }
#stage { position: absolute; inset: 0; }
.line { position: absolute; left: 0; width: 1920px; text-align: center; font: 760 228px/1 "Fraunces", serif; font-variation-settings: "opsz" 72; color: #1c0b5d; white-space: pre; }
#l1 { top: 317px; }
#l2 { top: 537px; font-style: italic; font-weight: 560; font-size: 222px; color: #fb2d89; }
.line span { display: inline-block; }
#burst { position: absolute; left: 960px; top: 538px; }
#burst i { position: absolute; left: 0; top: -1.5px; height: 3px; width: 300px; border-radius: 2px; transform-origin: 0 50%; opacity: 0; }
#dot { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%; background: #fb2d89; opacity: 0; }
#dim { position: absolute; inset: 0; background: #77708f; opacity: 0; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2" data-width="1920" data-height="1080">
  <div id="stage" class="clip" data-start="0" data-duration="2">
    <div id="l1" class="line">Ideas</div>
    <div id="l2" class="line it">in motion.</div>
    <div id="burst"><div id="dot"></div></div>
    <div id="dim"></div>
  </div>
</div>
<script>
document.fonts.ready.then(() => {
const tl = gsap.timeline({ paused: true });
const key = (t, ts, vs) => { if (t <= ts[0]) return vs[0]; for (let i = 1; i < ts.length; i++) if (t <= ts[i]) return vs[i - 1] + (vs[i] - vs[i - 1]) * (t - ts[i - 1]) / (ts[i] - ts[i - 1]); return vs[vs.length - 1]; };
let seed = 11; const rnd = () => (seed = (seed * 16807) % 2147483647) / 2147483647;   // seeded, same every render
const CX = 960, CY = 540, letters = [];
for (const id of ["l1", "l2"]) { const el = document.getElementById(id); const t = el.textContent; el.textContent = "";
  const spans = Array.from(t).map((c) => { const s = document.createElement("span"); s.textContent = c; el.appendChild(s); return s; });
  const pts = spans.map((s) => { const r = s.getBoundingClientRect(); return { s, x: r.left + r.width / 2 - CX, y: r.top + r.height * 0.58 - CY }; });
  const yL = pts.reduce((a, p) => a + p.y, 0) / pts.length; pts.forEach((p) => letters.push({ ...p, yL })); }
const rays = []; const burst = document.getElementById("burst");
for (let k = 0; k < 48; k++) { const w = document.createElement("div"); w.style.cssText = `position:absolute;transform:rotate(${k * 7.5}deg)`; const i = document.createElement("i");
  const pink = k % 5 === 2; i.style.background = pink ? "#fb2d89" : "#bdb6d1"; w.appendChild(i); burst.insertBefore(w, burst.firstChild);
  rays.push({ i, rin: pink ? 70 + rnd() * 30 : 52 + rnd() * 60, len: pink ? 320 + rnd() * 90 : 220 + rnd() * 150, r0: 520 + rnd() * 520 }); }
const TS = [0.2, 0.35, 0.5, 0.63, 0.7, 0.77, 0.83, 0.9, 0.97, 1.03, 1.1, 1.17];      // seconds of the collapse
const SPIN = [0, 4, 18, 45, 70, 100, 130, 175, 220, 260, 300, 330], SCALE = [1, 1, 0.95, 0.86, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.15, 0], BEND = [0, 0.25, 0.55, 0.85, 1, 1.1, 1.15, 1.2, 1.2, 1.2, 1.2, 1.2];
function draw(t) {
  const sp = key(t, TS, SPIN) * Math.PI / 180, sc = key(t, TS, SCALE), bd = key(t, TS, BEND), c = Math.cos(sp), s = Math.sin(sp);
  for (const p of letters) { let x = p.x, y = p.y, rot = 0;
    if (bd > 0.001) { const rho = Math.abs(p.yL) / bd, phi = p.x / rho, off = p.y - p.yL; x = rho * Math.sin(phi);
      y = p.yL > 0 ? p.yL - rho + rho * Math.cos(phi) + off : p.yL + rho - rho * Math.cos(phi) + off; rot = p.yL > 0 ? -phi : phi; }
    const xr = (x * c - y * s) * sc, yr = (x * s + y * c) * sc;
    p.s.style.transform = t <= TS[0] ? "" : `translate(${xr - p.x}px, ${yr - p.y}px) rotate(${(rot + sp) * 57.2958}deg) scale(${Math.max(sc, 0.001)})`;
    p.s.style.opacity = t < 1.08 ? 1 : Math.max(0, 1 - (t - 1.08) / 0.08); }
  const q = Math.min(1, Math.max(0, (t - 0.55) / 0.58)), e = 1 - Math.pow(1 - q, 3);
  for (const r of rays) { const rin = r.r0 + (r.rin - r.r0) * e, len = 560 + (r.len - 560) * e;
    r.i.style.transform = `translateX(${rin}px) scaleX(${len / 300})`; r.i.style.opacity = t < 0.55 ? 0 : Math.min(1, (t - 0.55) / 0.1); }
}
const proxy = { t: 0 };
tl.to(proxy, { t: 2, duration: 2, ease: "none", onUpdate: () => draw(proxy.t) }, 0);
tl.fromTo("#dot", { scale: 0, opacity: 0 }, { scale: 1, opacity: 1, duration: 0.18, ease: "back.out(2.5)" }, 1.06);
tl.to("#dot", { scaleX: 1.9, scaleY: 0.6, duration: 0.12, ease: "power2.in" }, 1.58);
tl.fromTo("#dim", { opacity: 0 }, { opacity: 0.36, duration: 0.47, ease: "power2.in" }, 1.23);
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>

معاينة تقنية «تركيب الشعار مع حلقات صدمة وانفجار حروف ونقطة i ساقطة» — عند 0:08 من الفيديو

الطباعة

تركيب الشعار مع حلقات صدمة وانفجار حروف ونقطة i ساقطة

عند القطع تتمدد حلقتانورديتان من المركز (نصف القطر من 190 إلى 660 في 0.42 s مع تلاشٍ) بينما ينفجر نحو 70 حرفًا صغيرًا ويدور ويتلاشى بعيدًا. تظهر العلامة المربعة في المركز (scale 0.4 ثم 1.55 ثم 1.22 ثم 1.0 خلال 0.3 s) وتنزلق يسارًا إلى التركيب؛ وتصعد حروف الاسم واحدًا كل 60 ms من 70 px أسفل بميل 18 درجة وضبابية (0.24 s back.out(1.3))، وتسقط نقطة وردية انطلقت عند القطع بـ power2.in لتصبح نقطة حرف i وتنضغط عند الهبوط. تتبعها العبارة التعريفية كلمة بكلمة ويتمدد خط تحتها بـ expo.out.

متى تُستخدم كشف شعار أو اسم منتج يهبط على دروب الموسيقى.

عرض الكود

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>تركيب الشعار مع حلقات صدمة وانفجار حروف ونقطة i ساقطة</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=Fraunces:ital,opsz,wght@0,9..144,500..800;1,9..144,500&family=JetBrains+Mono:wght@400;500;700&family=Onest:wght@400;500&display=block");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(ellipse farthest-corner at 50% 50%, #faf9ff 0%, #f4f2fe 62%, #d9d4ea 100%); }
#stage { position: absolute; inset: 0; }
#rings { position: absolute; left: 0; top: 0; }
#rings circle { fill: none; stroke: #fb2d89; stroke-width: 7px; opacity: 0; filter: blur(1.6px); }
.pt { position: absolute; left: 0; top: 0; font: 700 22px/1 "JetBrains Mono", monospace; white-space: pre; opacity: 0; }
#mark { position: absolute; left: 322px; top: 392px; width: 172px; height: 172px; border-radius: 41px; background: linear-gradient(135deg, #1c0b5d 0%, #2a1a73 100%); box-shadow: inset 0 0 0 26px #1c0b5d, inset 0 0 0 52px #fb2d89; }
#word { position: absolute; left: 582px; top: 368px; font: 700 205px/1 "Fraunces", serif; font-variation-settings: "opsz" 72; color: #1c0b5d; white-space: pre; }
#word span { display: inline-block; }
#dot { position: absolute; left: -18px; top: -18px; width: 36px; height: 36px; border-radius: 50%; background: #fb2d89; }
#tag { position: absolute; left: 587px; top: 612px; font: 400 45px/1 "Onest", sans-serif; color: #6b6385; white-space: pre; }
#tag span { display: inline-block; opacity: 0; }
#under { position: absolute; left: 586px; top: 687px; width: 115px; height: 8px; border-radius: 4px; background: #fb2d89; transform-origin: 0 50%; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080">
  <div id="stage" class="clip" data-start="0" data-duration="3">
    <svg id="rings" width="1920" height="1080"><circle id="r1" cx="960" cy="540" r="190" /><circle id="r2" cx="960" cy="540" r="110" /></svg>
    <div id="pts"></div>
    <div id="mark"></div>
    <div id="word">Motıon Fab</div>
    <div id="dot"></div>
    <div id="tag"><span>Your AI </span><span>motion </span><span>designer</span></div>
    <div id="under"></div>
  </div>
</div>
<script>
document.fonts.ready.then(() => {
const tl = gsap.timeline({ paused: true });
let seed = 23; const rnd = () => (seed = (seed * 16807) % 2147483647) / 2147483647;   // seeded randomness
const word = document.getElementById("word"); const text = word.textContent; word.textContent = "";
const letters = Array.from(text).map((c) => { const s = document.createElement("span"); s.textContent = c; word.appendChild(s); return s; });
const ii = letters[3].getBoundingClientRect(); const dotX = ii.left + ii.width / 2, dotY = 423;   // the dotless i takes the falling dot
// Rings at the cut.
tl.fromTo("#r1", { attr: { r: 190 }, opacity: 0.75 }, { attr: { r: 660 }, opacity: 0, duration: 0.42, ease: "power2.out" }, 0);
tl.fromTo("#r2", { attr: { r: 110 }, opacity: 0.7 }, { attr: { r: 600 }, opacity: 0, duration: 0.5, ease: "power2.out", immediateRender: false }, 0.1);
// The mark pops at the centre, then slides left into the lockup.
gsap.set("#mark", { x: 552, y: 62, scale: 0.4, rotation: -12, opacity: 0 });
tl.to("#mark", { keyframes: [{ scale: 1.55, rotation: 6, opacity: 1, duration: 0.1, ease: "power2.out" }, { scale: 1.22, rotation: -2, duration: 0.09 }, { scale: 1, rotation: 0, duration: 0.12, ease: "power2.out" }] }, 0.08);
tl.to("#mark", { keyframes: [{ x: 451, y: 52, duration: 0.08, ease: "power2.in" }, { x: 124, y: 14, duration: 0.067, ease: "none" }, { x: 29, y: 3, duration: 0.05, ease: "power2.out" }, { x: -9, y: 0, duration: 0.066 }, { x: 0, duration: 0.1, ease: "sine.inOut" }] }, 0.42);
// Letters rise in one after another.
letters.forEach((s, i) => { if (s.textContent === " ") return;
  tl.fromTo(s, { x: 50, y: 70, rotation: 18, opacity: 0, filter: "blur(6px)" }, { x: 0, y: 0, rotation: 0, opacity: 1, filter: "blur(0px)", duration: 0.24, ease: "back.out(1.3)" }, 0.47 + i * 0.06); });
// The dot shoots up at the cut, falls into the i and squashes.
gsap.set("#dot", { x: 960, y: 540, scale: 0.8 });
tl.to("#dot", { x: dotX - 14, y: 6, scale: 1, duration: 0.06, ease: "power2.out" }, 0);
tl.to("#dot", { x: dotX, y: dotY, duration: 0.25, ease: "power2.in" }, 0.5);
tl.to("#dot", { keyframes: [{ scaleX: 1.35, scaleY: 0.7, duration: 0.05 }, { scaleX: 1, scaleY: 1, duration: 0.14, ease: "back.out(2)" }] }, 0.75);
// Tagline word by word, then the underline.
document.querySelectorAll("#tag span").forEach((s, i) => tl.fromTo(s, { y: 18, opacity: 0 }, { y: 0, opacity: 1, duration: 0.22, ease: "power2.out" }, 1.0 + i * 0.075));
tl.fromTo("#under", { scaleX: 0 }, { scaleX: 1, duration: 0.6, ease: "expo.out" }, 1.42);
// Glyph burst: out from the centre with a swirl, then a slow drift and fade.
const box = document.getElementById("pts"), G = ["+", "×", "~", "/", "°", "( )", "< >", "*", "·", "="], parts = [];
for (let i = 0; i < 70; i++) { const p = document.createElement("div"); p.className = "pt"; p.textContent = G[Math.floor(rnd() * G.length)];
  p.style.fontSize = (14 + rnd() * 22) + "px"; p.style.color = rnd() < 0.6 ? "#fb2d89" : "#6b6385"; box.appendChild(p);
  parts.push({ p, a0: rnd() * 6.283, r1: 140 + Math.pow(rnd(), 0.8) * 560, w: (rnd() < 0.5 ? -1 : 1) * (0.5 + rnd() * 0.9), rot: (rnd() - 0.5) * 60, fade: 0.95 + rnd() * 0.6 }); }
const draw = (t) => { for (const q of parts) { const u = Math.max(0, t - 0.02), r = q.r1 * (1 - Math.exp(-u / 0.2)) + 45 * u, a = q.a0 + q.w * (1 - Math.exp(-u / 0.35));
  q.p.style.transform = `translate(${960 + Math.cos(a) * r * 1.2}px, ${540 + Math.sin(a) * r * 0.82 + 22 * u}px) rotate(${q.rot + 40 * u}deg)`;
  q.p.style.opacity = t < 0.02 ? 0 : Math.min(1, (t - 0.02) / 0.06, Math.max(0, 1 - (t - q.fade) / 0.35)) * 0.9; } };
const proxy = { t: 0 }; tl.to(proxy, { t: 3, duration: 3, ease: "none", onUpdate: () => draw(proxy.t) }, 0); 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:11 من الفيديو

التخطيط

سطر مكتوب يرمي خطًا إلى توأمه المُصيَّر

نافذة تطبيق من لوحين: ينتهي كل سطر يُكتب على اليسار (أحادي المسافة، علامات بالوردي، ومؤشر يتبعه) برمي خط بيزيه وردي رفيع عبر الفاصل (يُرسم stroke-dashoffset في نحو 0.1 s بـ power1.in، ثم يُمحى من ذيله في 0.14 s). وحيث يهبط يظهر العنصر المُصيَّر على اليمين بـ blur من 8 px إلى 0 وانزلاق 8 px، ويومض خلفه شريط وردي ناعم يتلاشى خلال 0.55 s، وتبقى علامة نقطة صغيرة بشفافية 35 %. ويتبع الكتابةَ دفعٌ وتحريكٌ بطيئان للكاميرا.

متى تُستخدم إظهار المُدخل وهو يتحول فورًا إلى مُخرج: محرر ومعاينته، وprompt ونتيجته، ودردشة وما تنتجه.

عرض الكود

<!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=Fraunces:ital,opsz,wght@0,9..144,500..800;1,9..144,500&family=JetBrains+Mono:wght@400;500;700&family=Onest:wght@400;500&display=block");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(ellipse farthest-corner at 50% 50%, #faf9ff 0%, #f4f2fe 62%, #d9d4ea 100%); }
#stage { position: absolute; inset: 0; }
#win { position: absolute; left: 160px; top: 90px; width: 1600px; height: 900px; border-radius: 16px; background: #fff; box-shadow: 0 40px 90px rgba(28, 11, 93, 0.16); transform-origin: 30% 20%; }
#div { position: absolute; left: 800px; top: 40px; width: 1.5px; height: 820px; background: #e9e4f2; }
.ln { position: absolute; left: 90px; font: 400 19px/30px "JetBrains Mono", monospace; color: #1c0b5d; white-space: pre; }
.ln span { opacity: 0; }
.ln .mk { color: #fb2d89; }
#cur { position: absolute; left: 0; top: 0; width: 2.5px; height: 24px; background: #fb2d89; }
.pv { position: absolute; left: 898px; font: 400 19.5px/30px "Onest", sans-serif; color: #1c0b5d; white-space: pre; opacity: 0; transform-origin: 0 50%; }
.pv.h { font: 700 46px/1 "Fraunces", serif; font-variation-settings: "opsz" 72; }
.band { position: absolute; left: 872px; width: 696px; background: rgba(251, 45, 137, 0.13); opacity: 0; }
#strokes { position: absolute; left: 0; top: 0; overflow: visible; }
#strokes path { fill: none; stroke: #fb2d89; stroke-width: 2.5px; stroke-linecap: round; opacity: 0; }
.mark { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #fb2d89; opacity: 0; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3.2" data-width="1920" data-height="1080">
  <div id="stage" class="clip" data-start="0" data-duration="3.2">
    <div id="win">
      <div id="div"></div>
      <div id="ed"></div><div id="cur"></div>
      <div class="band" id="b0" style="top: 84px; height: 60px;"></div><div class="band" id="b1" style="top: 166px; height: 40px;"></div>
      <div class="pv h" id="p0" style="top: 90px;">Ideas in motion</div>
      <div class="pv" id="p1" style="top: 171px;">Tell the <b>chat</b> what to <i>show</i>.</div>
      <svg id="strokes" width="1600" height="900"></svg>
    </div>
  </div>
</div>
<script>
document.fonts.ready.then(() => {
// A scene that starts later is display: none until then, where every box measures 0: lay it out while building.
const held = []; for (let el = document.getElementById("win"); el; el = el.parentElement) if (getComputedStyle(el).display === "none") { held.push([el, el.style.getPropertyValue("display"), el.style.getPropertyPriority("display")]); el.style.setProperty("display", "block", "important"); }
const tl = gsap.timeline({ paused: true });
const LINES = [                                           // [tokens, typing start, end, preview item, its centre y]
  { tok: [["#", "mk"], [" Ideas in motion"]], t0: 0.2, t1: 0.55, item: "#p0", band: "#b0", py: 114 },
  { tok: [["Tell the "], ["**", "mk"], ["chat"], ["**", "mk"], [" what to "], ["*", "mk"], ["show"], ["*", "mk"], ["."]], t0: 0.8, t1: 1.2, item: "#p1", band: "#b1", py: 186 } ];
const ed = document.getElementById("ed"), cur = document.getElementById("cur"), svg = document.getElementById("strokes");
LINES.forEach((L, n) => {
  const y = 110 + n * 60.6, ln = document.createElement("div"); ln.className = "ln"; ln.style.top = (y - 15) + "px"; ed.appendChild(ln);
  const chars = []; L.tok.forEach(([t, c]) => Array.from(t).forEach((ch) => { const s = document.createElement("span"); s.textContent = ch; if (c) s.className = c; ln.appendChild(s); chars.push(s); }));
  chars.forEach((s, i) => { const t = L.t0 + (L.t1 - L.t0) * i / (chars.length - 1); tl.set(s, { opacity: 1 }, t); tl.set(cur, { x: 90 + s.offsetLeft + s.offsetWidth + 2, y: y - 12 }, t); });
  const last = chars[chars.length - 1], sx = 90 + last.offsetLeft + last.offsetWidth + 14, ex = 872;
  const p = document.createElementNS("http://www.w3.org/2000/svg", "path"); p.setAttribute("d", `M${sx} ${y} C${sx + 140} ${y + 46}, ${ex - 170} ${L.py + 36}, ${ex} ${L.py}`); svg.appendChild(p);
  const len = p.getTotalLength(); p.style.strokeDasharray = len; p.style.strokeDashoffset = len;
  const tp = L.t1 + 0.1;                                     // the moment the stroke lands
  tl.set(p, { opacity: 1 }, L.t1 + 0.02);
  tl.to(p, { strokeDashoffset: 0, duration: 0.08, ease: "power1.in" }, L.t1 + 0.02);
  tl.to(p, { strokeDashoffset: -len, duration: 0.14, ease: "power2.out" }, tp);
  const mk = document.createElement("div"); mk.className = "mark"; mk.style.left = (ex - 4) + "px"; mk.style.top = L.py + "px"; document.getElementById("win").appendChild(mk);
  tl.fromTo(mk, { scale: 0, opacity: 1 }, { scale: 1.5, duration: 0.08 }, tp); tl.to(mk, { scale: 1, opacity: 0.35, duration: 0.3 }, tp + 0.08);
  tl.fromTo(L.band, { opacity: 0 }, { opacity: 1, duration: 0.05 }, tp); tl.to(L.band, { opacity: 0, duration: 0.55, ease: "power1.in" }, tp + 0.2);
  tl.fromTo(L.item, { opacity: 0, x: -8, scale: n ? 1 : 1.08, filter: "blur(8px)" }, { opacity: 1, x: 0, scale: 1, filter: "blur(0px)", duration: 0.16, ease: "power2.out" }, tp);
});
tl.fromTo("#win", { scale: 1 }, { scale: 1.12, duration: 3.2, ease: "sine.inOut" }, 0);   // slow push that follows the typing
held.forEach(([el, v, p]) => (v ? el.style.setProperty("display", v, p) : el.style.removeProperty("display")));   // hand the scene back as it was
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:15 من الفيديو

الطباعة

كتلة ميزة: عنوان علوي يُفك ترميزه، حروف صاعدة، شريط تظليل، كشف النص

كتلة ميزة محاذاة لليسار من أربعة أجزاء: عنوان علوي أحادي المسافة متباعد الحروف يتحلل من رموز عشوائية من اليسار إلى اليمين في نحو 0.45 s؛ والسطر السميك بخط السيريف والسطر الوردي المائل يصعدان حرفًا حرفًا من تحت قناع خط الأساس الخاص بهما (yPercent من 105 إلى 0، و0.16-0.18 s power3.out، وفارق 12-15 ms، والسطر الثاني بعد 0.16 s)؛ ويمر شريط تظليل وردي شفاف تحت السطر المائل (scaleX من اليسار، 0.26 s power3.out)؛ ويُفتح النص الأساسي من اليسار إلى اليمين بكشف clip-path inset في 0.34 s.

متى تُستخدم بطاقات ميزات أو خطوات مرقمة في فيديو منتج، واحدة لكل نبضة أو مازورة.

عرض الكود

<!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=Fraunces:ital,opsz,wght@0,9..144,500..800;1,9..144,500&family=JetBrains+Mono:wght@400;500;700&family=Onest:wght@400;500&display=block");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(ellipse farthest-corner at 50% 50%, #faf9ff 0%, #f4f2fe 62%, #d9d4ea 100%); }
#stage { position: absolute; inset: 0; }
#eb { position: absolute; left: 160px; top: 320px; font: 500 22px/1 "JetBrains Mono", monospace; letter-spacing: 0.2em; color: #fb2d89; white-space: pre; }
.ln { position: absolute; left: 160px; font-family: "Fraunces", serif; line-height: 1; white-space: pre; font-variation-settings: "opsz" 72; clip-path: inset(-30px -40px 0 -40px); }
.ln span { display: inline-block; }
#l1 { top: 360px; font-weight: 600; font-size: 119px; color: #1c0b5d; }
#l2 { top: 483px; font-style: italic; font-weight: 500; font-size: 114px; color: #fb2d89; clip-path: inset(-30px -40px -8px -40px); }
#band { position: absolute; left: 156px; top: 541px; height: 48px; background: rgba(251, 45, 137, 0.13); transform-origin: 0 50%; }
#body { position: absolute; left: 160px; top: 640px; width: 760px; font: 400 29.5px/46px "Onest", sans-serif; color: #6b6385; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080">
  <div id="stage" class="clip" data-start="0" data-duration="3">
    <div id="eb">01 — PICK A TEMPLATE</div>
    <div id="l1" class="ln">Live</div>
    <div id="band"></div>
    <div id="l2" class="ln">preview.</div>
    <div id="body">Tell the chat what to show. The agent builds the animation.</div>
  </div>
</div>
<script>
document.fonts.ready.then(() => {
// A scene that starts later is display: none until then, where every box measures 0: lay it out while building.
const held = []; for (let el = document.getElementById("l2"); el; el = el.parentElement) if (getComputedStyle(el).display === "none") { held.push([el, el.style.getPropertyValue("display"), el.style.getPropertyPriority("display")]); el.style.setProperty("display", "block", "important"); }
const tl = gsap.timeline({ paused: true });
const split = (el) => { const t = el.textContent; el.textContent = ""; return Array.from(t).map((c) => { const s = document.createElement("span"); s.textContent = c; el.appendChild(s); return s; }); };
const T = 0.2;                                            // when the block comes in
const c1 = split(document.getElementById("l1")), c2 = split(document.getElementById("l2"));
tl.fromTo(c1, { yPercent: 105 }, { yPercent: 0, duration: 0.16, stagger: 0.015, ease: "power3.out" }, T);
tl.fromTo(c2, { yPercent: 115 }, { yPercent: 0, duration: 0.18, stagger: 0.012, ease: "power3.out" }, T + 0.16);
const band = document.getElementById("band"); band.style.width = (document.getElementById("l2").offsetWidth + 10) + "px";
tl.fromTo(band, { scaleX: 0 }, { scaleX: 1, duration: 0.26, ease: "power3.out" }, T + 0.5);
tl.fromTo("#body", { clipPath: "inset(-10px 100% -10px 0px)", opacity: 0.4 }, { clipPath: "inset(-10px 0% -10px 0px)", opacity: 1, duration: 0.34, ease: "power2.out" }, T + 0.3);
// Eyebrow decode: each character cycles through random glyphs, then settles, left to right.
const eb = document.getElementById("eb"), FINAL = eb.textContent, GL = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#*/<>-_";
const decode = (time) => { const n = FINAL.length, f = Math.floor(time * 30); let s = "";
  for (let i = 0; i < n; i++) { const shown = T + 0.04 + (i / n) * 0.2, fixed = T + 0.04 + ((i + 1) / n) * 0.46;
    s += time < shown ? " " : time >= fixed || FINAL[i] === " " ? FINAL[i] : GL[(i * 7 + f * 13) % GL.length]; }
  eb.textContent = s; };
const proxy = { t: 0 }; tl.to(proxy, { t: 3, duration: 3, ease: "none", onUpdate: () => decode(proxy.t) }, 0); decode(0);
held.forEach(([el, v, p]) => (v ? el.style.setProperty("display", v, p) : el.style.removeProperty("display")));   // hand the scene back as it was
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:20 من الفيديو

انتقال

مسح لوني مائل بحواف متدرجة

شريط أعرض من الإطار ومائل بزاوية 14 درجة يعبر الإطار من اليسار إلى اليمين في نحو 0.22 s: أربع درجات بعرض 60 px من الوردي الباهت إلى الوردي الكامل تسبق نواته الصلبة وتلحق بها، فتبدو الحواف كأثر حركة دون أي ضبابية. يُقطع المشهد الخارج لحظة يغطي الشريط الإطار كله، ويكون التالي تحته بالفعل عند مرور الدرجات اللاحقة.

متى تُستخدم تغيير مشهد حاد وغرافيكي على النبضة القوية بين مشهدين فاتحين.

عرض الكود

<!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=Fraunces:ital,opsz,wght@0,9..144,500..800;1,9..144,500&family=JetBrains+Mono:wght@400;500;700&family=Onest:wght@400;500&display=block");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(ellipse farthest-corner at 50% 50%, #faf9ff 0%, #f4f2fe 62%, #d9d4ea 100%); }
#stage { position: absolute; inset: 0; }
.scene { position: absolute; inset: 0; }
.t { position: absolute; left: 160px; top: 440px; font: 600 119px/1 "Fraunces", serif; font-variation-settings: "opsz" 72; color: #1c0b5d; white-space: pre; }
#b { opacity: 0; }
#wipe { position: absolute; left: 0; top: -210px; width: 2780px; height: 1500px; transform: skewX(-14deg); transform-origin: 0 50%;
  background: linear-gradient(90deg, #f9c7de 0 60px, #f9a2c8 60px 120px, #fa77b0 120px 180px, #fb529d 180px 240px, #fb2d89 240px 2540px, #fb529d 2540px 2600px, #fa77b0 2600px 2660px, #f9a2c8 2660px 2720px, #f9c7de 2720px); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="1.2" data-width="1920" data-height="1080">
  <div id="stage" class="clip" data-start="0" data-duration="1.2">
    <div id="a" class="scene"><div class="t">“Edit in words.”</div></div>
    <div id="b" class="scene"><div class="t">“Another colour.”</div></div>
    <div id="wipe"></div>
  </div>
</div>
<script>
document.fonts.ready.then(() => {
const tl = gsap.timeline({ paused: true });
const T = 0.2;                                            // the wipe starts here; it covers the frame at T + 0.1
gsap.set("#wipe", { x: -2780 });
tl.to("#wipe", { keyframes: [{ x: -2490, duration: 0.05, ease: "power1.in" }, { x: -1724, duration: 0.033, ease: "none" }, { x: -1302, duration: 0.017, ease: "none" },
  { x: 576, duration: 0.05, ease: "none" }, { x: 1400, duration: 0.033, ease: "none" }, { x: 1960, duration: 0.034, ease: "power1.out" }] }, T);
tl.set("#a", { opacity: 0 }, T + 0.117);                  // swap the scenes under full cover
tl.set("#b", { opacity: 1 }, T + 0.117);
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> اصنع كشف شعار أفقي مدته 21 ثانية بدقة 1920x1080 وبمعدل 60 إطارًا في الثانية. يجمّع شعاري ببطء من أوجه low-poly وينتهي بتصميم أفقي (lockup) يُكتب فيه اسم علامتي التجارية وتحته شعار نصي. الفكرة: بناء طويل وهادئ بلا أي قطع لمدة أربع عشرة ثانية، ثم انطلاق عند ذروة الموسيقى (drop) خلال ثانيتين، ثم نهاية هادئة بالكتابة. المظهر: خلفية شبه سوداء مع تعتيم دائري ناعم عند الحواف، وألوان العلامة مسطحة، وخط غروتيسك نظيف. تجنّب التدرجات على الشعار، والخطوط المرئية بين المثلثات، والقطع أثناء البناء، وأي شيء مزدحم خلف الشعار. </direction> <structure> 1. من 0 إلى 2.6 ث، الهيكل السلكي: يرسم هيكل سلكي low-poly لمحيط شعاري نفسه بدءًا من أسفل الشعار نحو الخارج. فيه نحو 35–45 رأسًا و90 خطًا رفيعًا. 2. من 1.9 إلى 13.3 ث، التجميع: يُقطَّع الشعار إلى نحو 55 مثلثًا على امتداد ذلك الهيكل، وتطير إلى الداخل قطعة بعد قطعة من خارج الإطار. تبدأ الهبوطات بطيئة عند أسفل الشعار وتزداد كثافة نحو الأعلى. تهبط القطعة الأخيرة عند 13.3 ث، ويصبح الشعار كاملًا ودقيقًا. أبقِ الشعار المكتمل نحو ثانية واحدة. 3. عند 14.38 ث، الوميض، تمامًا على ذروة الموسيقى. ينطلق انفجار ضوئي وحلقة برتقالية متوسعة ووميض ساطع على الشعار معًا. بعد 0.1 ث من الضربة، تنمو لوحة بلون حبر داكن خلف الشعار وتتحول إلى مربع بزوايا مدورة كأيقونة تطبيق. أبقِ الأيقونة في المنتصف لمدة ثانية. 4. من 15.74 إلى 16.15 ث، الانزلاق: تتقلص الأيقونة إلى نحو 42% وتنتقل إلى الثلث الأيسر لتفسح مجالًا للاسم. 5. من 16.1 إلى 21 ث، الاسم: يظهر مؤشر وردي إلى يمين الأيقونة ويُكتب الاسم، مثلًا "Brand Name" (استبدله بعلامتك). عند 18.15 ث يمرّ الشعار النصي تحته، مثلًا "Your tagline here" (استبدله بشعارك). يومض المؤشر ثلاث مرات مع الإيقاع ويختفي عند 19.9 ث. أبقِ التصميم الأفقي حتى النهاية. </structure> <composition> الخلفية: تعتيم شعاعي شبه أسود، #0D0B1E في المركز ويغمق حتى #040308 عند الزوايا. لوحة الألوان: - حبر عميق #1C0B5D للوحة الأيقونة. - وردي #FB2D89 كلون تمييز رئيسي. - برتقالي #FE9117. - أبيض #FFFFFF. - لافندر فاتح #E9E4F2 و#F0EDFF للخطوط والنص الناعم. - بنفسجي #7C6CF2 في توهج الخلفية فقط. يبقى الشعار بألوان مسطحة بلا تدرجات. الهيكل السلكي: خطوط بلون لافندر #E9E4F2 بشفافية 60%، بسماكة 1.3 بكسل؛ ونقاط الرؤوس بلون #F0EDFF بنصف قطر 2.6 بكسل. لوحة الأيقونة: دائرة بقطر 676 بكسل تتحول إلى مربع بزوايا مدورة بنصف قطر 24% وظل ناعم. الخط: الاسم بخط غروتيسك عريض (Golos Text 700، نحو 155 بكسل، أبيض). والشعار النصي تحته بخط غروتيسك خفيف (Onest 400، نحو 49 بكسل، لافندر بشفافية 74%). المؤشر: شريط وردي #FB2D89 بحجم 10 × 128 بكسل مع توهج وردي ناعم. التصميم الأفقي النهائي (الأيقونة على اليسار والاسم والشعار النصي على اليمين) متمركز في الإطار ككل. </composition> <techniques> التقريب: تبدأ اللقطة بتقريب بطيء جدًا نحو مركز الإطار، من مقياس 0.886 عند 0 ث إلى 0.998 عند 11 ث، ثم تثبت. رسم الهيكل السلكي: ينمو كل خط خطيًا من رأسه الأسبق إلى الأحدث خلال 0.08–0.45 ث. وتظهر نقطة صغيرة تدريجيًا عند كل رأس حين يصل إليه الخط. الطيران إلى الداخل: كل قطعة من مثلث إلى ثلاثة مثلثات. تأتي بسرعة على مسار منحنٍ وتتباطأ حتى تستقر في مكانها خلال نحو 0.5 ث، وهي تتقلب في 3D. يخفت الدوران والانقلاب والميلان تدريجيًا إلى الصفر عند وصولها. أثناء الطيران تكون معتمة إلى نحو 60% وناعمة قليلًا؛ وعند الهبوط تكون حادة ومضاءة بالكامل. يعرض كل مثلث الجزء الخاص به تمامًا من الشعار المسطح، فيكون التجميع النهائي بلا أي خطوط. التوهج: توهج وردي خافت #FB2D89 بشفافية أقل من 10% ويتحول إلى البنفسجي #7C6CF2 ينمو خلف الشعار مع اكتماله. الوميض عند 14.38 ث: - ينفجر ضوء وردي-أرجواني بوضع screen حول الشعار ويتلاشى خلال 0.8 ث. - حلقة رفيعة برتقالية دافئة بسماكة 7 بكسل تبدأ بنصف قطر 300 بكسل وتنطلق خارج الإطار بسرعة ثابتة خلال 0.38 ث. - يومض الشعار بشدة ثم يستقر خلال 0.3 ث. اللوحة: بعد 0.1 ث من الضربة، تنمو لوحة #1C0B5D من نقطة إلى دائرة 676 بكسل خلال 0.21 ث (sine ease-out). تكون مضاءة في البداية، ثم تتحول زواياها إلى مربعة بنصف قطر 24%. الانزلاق: تتحجم الأيقونة إلى نحو 42% وتنتقل إلى الثلث الأيسر خلال 0.415 ث (power3 ease-in-out). تتشوش حتى 7 بكسل عند أسرع لحظة وتستقر حادة. بعد ذلك تواصل النمو ببطء شديد، نحو 3% خلال خمس ثوانٍ. الكتابة: حرف واحد لكل نوتة سادسة عشرة في الموسيقى (0.156 ث عند 96 BPM). يظهر كل حرف تدريجيًا خلال 0.05 ث بينما يقفز المؤشر خلفه. الشعار النصي: يمرّ من اليسار إلى اليمين خلال نحو 0.2 ث، حرفًا بحرف. </techniques> <music> مقطوعة موسيقية آلية بإيقاع 96 BPM، متفائلة وعصرية، مدتها 21 ثانية بالضبط. - البداية: غلوكنشبيل ناعم بأسلوب صندوق الموسيقى فوق أصوات pads دافئة. - عند نحو 4.4 ث: يدخل توزيع كامل مفعم بالحيوية (طبول وباس وآلات وترية وخط غلوكنشبيل ساطع). يُفتح فلتر على مدى مازورتين ويتصاعد نحو الوميض. - عند 14.38 ث: ضربة صنج وآكورد كبير يقعان تمامًا على الوميض. - بعد الذروة: يعود صندوق الموسيقى فوق pads ممتدة تحت التصميم الأفقي ويتلاشى إلى الصمت عند 21 ث. أبقِ كل شيء على شبكة الإيقاع بحيث تقع الكتابة ووميض المؤشر على النوتات السادسة عشرة والنبضات. </music> <sound> مؤثرات صوتية فوق الموسيقى: - صوت riser ناعم نحو هبوط المثلث الأول. - riser نحو الوميض، ثم دويّ عميق وصدمة زجاجية خفيفة عليه. - صوت whoosh قصير حين تنطلق الحلقة، وآخر حين تنزلق الأيقونة. - نقرة مفتاح ناعمة لكل حرف يُكتب، ونقرة خافتة عند ظهور الشعار النصي. بلا تعليق صوتي. مستوى الصوت العام نحو -14 LUFS، وذروة حقيقية أقل من -1 dBTP. </sound> <references> مقدمة شعار راقية لتقنية أو لإطلاق تطبيق: تجميع من هيكل سلكي low-poly إلى شكل صلب بأسلوب بناء أوجه ثلاثي الأبعاد، يتحرر عند الذروة إلى كشف أيقونة تطبيق، مع تصميم أفقي لاسم يُكتب بأسلوب الطرفية. </references>

معاينة الموجّه «فيديو إطلاق تطبيق لامع على إيقاع 120 نبضة في الدقيقة»

فيديو إطلاق تطبيق لامع على إيقاع 120 نبضة في الدقيقة

<direction> اصنع فيلم إطلاق مدته 15 ثانية لتطبيقي (15.07 ث)، كله موشن جرافيك، بالعرض 1920x1080 بمعدل 60 إطارًا في الثانية، مقطوعًا بإحكام على إيقاع 120 نبضة في الدقيقة: نبضة كل 0.5 ث من الصفر، وميزان كل 2 ث. الفكرة سلسلة متصلة واحدة يتحول فيها كل عنصر إلى التالي. يتقلص برومبت طويل مكتوب إلى نقطة، وتتحول النقطة إلى رابط قصير، ونقرة عليه تُسقط الإيقاع. ثم تأتي كرة أرضية، وبطاقة منتج، وشبكة، وثماني بطاقات كلمات، وبطاقة ختامية. يجب أن يبدو كعرض منتج فاخر: داكن ولامع في معظمه، وينتهي ببطاقة ختامية مشرقة. لا شيء يُصوَّر. اسم منتجي وعنواني وشعاري وعباراتي الخاصة تحل محل كل الأمثلة المقتبسة أدناه (استبدلها بما يخصك). تجنب اللقطات المصورة أو الجاهزة، وأسماء أو ادعاءات أي علامات تجارية أخرى، والتوقيت غير الدقيق: كل تغيير يقع على شبكة الإيقاع. </direction> <structure> 1. من 0 إلى 1.5 ث، البرومبت الطويل. على صفحة داكنة يومض مؤشر وردي، وتظهر ترويسة "DESCRIBE YOUR IDEA · 02" (صف فكرتك · 02) تدريجيًا عند 0.2 ث. تُكتب جملة أطول بكثير من الشاشة من تلقاء نفسها بخط Geist Mono حجم 46 px: "أخبر الدردشة بما تريد عرضه. يبني الوكيل الرسوم المتحركة. لا إطارات مفتاحية للبحث عنها. قل ما الذي يجب أن يتغير...". تبدأ الكتابة بطيئة، وتنفجر في المنتصف (مئات الأحرف في الثانية)، وتهبط برفق عند 1.0 ث. الكلمات المفتاحية بيضاء والباقي خافت. يركض المؤشر إلى نحو 82% من العرض، ثم يتوقف بينما يتحرك السطر يسارًا تحته، والحافة اليسرى تتلاشى عبر قناع. من 1.05 ث يتلطخ السطر جانبيًا (ضبابية أفقية فقط) ويخفت. عند 1.38 ث ينضغط إلى خط متوهج وردي-أبيض بسمك 4 px تنغلق نهايتاه خلال خمسة إطارات إلى نقطة في المركز. 2. من 1.5 إلى 2.3 ث، الرابط القصير. إطار وميض مسطح رمادي-بنفسجي يتلاشى في 0.2 ث. من النقطة تولد حبة داكنة بحد رفيع فاتح: شعاري و"[علامتك]" بالأبيض مع ".app" بالوردي، بخط Manrope عريض. تُكتب الحروف، كل حرف يرتفع من ضبابية، بينما تتقدم الكاميرا إلى نحو 1.2x ثم تعود بنعومة. يطير مؤشر أبيض من أسفل اليمين وينقر بالضبط عند 2.0 ث (الإسقاط). عند النقر: - تنضغط الحبة إلى 0.96 وتزداد سطوعًا لإطارين؛ - تومض الصفحة بالوردي الداكن وتتلاشى في 0.12 ث؛ - تنمو حلقة فاتحة وحلقتان ورديتان من النقرة بمنحنى power4.out؛ - تنفجر نحو سبعين شرارة وردية وبيضاء مع مقاومة. 3. من 2.0 إلى 4.4 ث، الكرة الأرضية. ترتفع كرة أرضية داكنة (نصف قطر 780 px) من الأسفل وتدور ببطء. لها توهج وردي عند الحافة من الداخل، ونقاط بيضاء لليابسة وخطوط طول خافتة. تصغر الحبة إلى نحو النصف وترتفع إلى الأعلى. تحتها "● LIVE PREVIEW" (معاينة مباشرة) بخط مونو وردي، ثم عداد مونو ضخم بحجم 154 px "IDEAS IN MOTION" (أفكار في حركة) يدور كعداد المسافات: - عمود مقصوص لكل حرف، وكل عمود يدور عبر حروف عشوائية؛ - تهبط الأعمدة من اليسار إلى اليمين على منحنى power4.out خلال 2.5 ث؛ - الأعمدة التي لم تهبط بعد تبقى بلون شبحي خافت. تنحني مذنبات وردية من الحبة إلى الكرة وتترك حلقة نبض حيث تهبط. 4. من 4.4 إلى 7.5 ث، بطاقة المنتج. يقود انحلال ضبابي (4.41–4.52 ث) إلى بطاقة داكنة مستديرة الزوايا بمنظور ثلاثي الأبعاد خفيف تستقر من ميلان شديد وتواصل الانجراف. في الأعلى: حبة بأيقونة رابط و"[علامتك].app"، وحبة "Live preview" (معاينة مباشرة)، وشعاري في الأعلى يمينًا. ثلاثة إحصاءات في صف، بالعناوين "Pick a template" (اختر قالبًا) و"Describe your idea" (صف فكرتك) و"Refine in words, then export" (حسّن بالكلمات ثم صدّر)، بقيم تعد حتى "01" و"02" و"03". يجلس الإحصاء النشط على لوحة خافتة بخط سفلي متوهج. تقفز اللوحة إلى الإحصاء التالي عند 5.5 ث و6.0 ث، ويتحول خطها السفلي إلى البنفسجي ثم الوردي ثم الفيروزي. يُرسم مخطط مساحي بخط متوهج، ثم يتحول إلى منحنى ولون جديدين عند كل قفزة. من 6.3 ث يمشي شريط تمرير بتلميح صغير على الخط. يقرأ التلميح "Edit in words" (حرّر بالكلمات) / "Bigger" (أكبر)، ثم "Slower" (أبطأ). تنزلق أربعة إشعارات من اليمين وتدفع الكومة إلى الأعلى: - "Describe your idea" (صف فكرتك) / "Tell the chat what to show." (أخبر الدردشة بما تريد عرضه.) - "No keyframes" (بلا إطارات مفتاحية) / "Say what should change." (قل ما الذي يجب أن يتغير.) - "Live preview" (معاينة مباشرة) / "The preview updates as you talk." (تتحدث المعاينة أثناء حديثك.) - "MP4 export" (تصدير MP4) / "Vertical, horizontal or square" (عمودي أو أفقي أو مربع) عند 7.25 ث تتأرجح البطاقة بعيدًا بثلاثة أبعاد، وتتضبب وتختفي بحلول 7.48 ث. 5. من 7.5 إلى 10.5 ث، الشبكة. يظهر قرص أبيض بشعاري من العتمة داخل توهج بنفسجي، متجاوزًا إلى 1.12x ومستقرًا بحلول 7.9 ث. يرتفع العنوان "Edit in words." (حرّر بالكلمات.) كلمة كلمة من صندوق سطره الخاص في الأعلى، مع "words." (بالكلمات.) بتدرج بنفسجي-وردي-برتقالي. حول القرص تظهر نحو 37 صورة رمزية مستديرة (وجوه بسيطة بديلة في حلقات ملونة) حلقة بعد حلقة على طول إهليلجين منقطين. تصلها بالمركز خطوط بنفسجية رفيعة، وتدور ببطء. تجري شرارات فيروزية على طول الخطوط. كل حلقة تصل إليها تتحول إلى الفيروزي وتتوهج، وتظهر بجانبها حبة فيروزية صغيرة بميزة: "+Type" و"+Shapes" و"+3D" و"+Sound" و"+Music" و"+Fonts" و"+Photos" و"+Logos" (+نصوص، +أشكال، +3D، +صوت، +موسيقى، +خطوط، +صور، +شعارات). لا تتداخل أي حبة مع أخرى أبدًا. في الأسفل يتدحرج "[علامتك].app" حرفًا حرفًا بخط مونو فيروزي، وتحته "YOUR AI MOTION DESIGNER" (مصمم الموشن بالذكاء الاصطناعي الخاص بك). تنجرف الكاميرا يسارًا من 9.8 ث. 6. من 10.5 إلى 12.5 ث، ثماني بطاقات كلمات، واحدة كل 0.25 ث على الأثمان. تنطلق الأولى من الحافة اليمنى وتكبح بقوة، وعنوانها بضبابية حركة. كل بطاقة عنوان واحد بخط Manrope ExtraBold حجم 240 px: - "Kinetic type." (نصوص متحركة.) بحبر عميق على الصفحة الفاتحة؛ - "Shapes." (أشكال.) أبيض على شبه أسود، مع مربعات وردية داكنة تُضاء؛ - "3D effects." (مؤثرات ثلاثية الأبعاد.) حبر عميق على الوردي، والحروف ترتفع واحدًا تلو الآخر؛ - "Sound effects." (مؤثرات صوتية.) بخط أبيض مفرغ على شبه أسود؛ - "Another colour." (لون آخر.) على تدرج مخروطي من ألوان التمييز يدور ببطء؛ - "Your footage." (لقطاتك.) بنفسجي على الصفحة الفاتحة؛ - "Music." (موسيقى.) فيروزي متوهج فوق نوتات موسيقية تتساقط؛ - شعاري مع "[علامتك]." أبيض على شبه أسود. تحمل الزوايا نصًا صغيرًا بخط مونو: - أعلى اليسار: شعاري وعنواني؛ - أعلى اليمين: "0N / 08"؛ - أسفل اليسار: وسم قسم مثل "[ NO KEYFRAMES ]" ([ بلا إطارات مفتاحية ])؛ - أسفل اليمين: خط تقدم يمتلئ بمقدار ثُمن لكل بطاقة. 7. من 12.5 إلى 15.07 ث، البطاقة الختامية. إطار شاحب واحد، ثم تنفتح صفحة فاتحة كدائرة من المركز فوق صفحة رمادية-بنفسجية. من 12.5 إلى 13.0 ث يتراجع شعاري من نحو 3x، معتدلًا وينتقل من الرمادي الباهت إلى اللون الكامل. تتورم سحابة باستيلية (وردي، بنفسجي، خوخي، نعناعي، زبدي) من الأسفل وتنجرف. عند 13.15 ث ينزلق الشعار يسارًا ويخرج الاسم "[علامتك]" من خلفه إلى تركيب مركزي: حبر عميق، Manrope 600، نحو 170 px. يرتفع السطر "Your idea is ready to move." (فكرتك جاهزة للحركة.) كلمة كلمة من 13.46 ث، بفاصل 0.05 ث. "move." (للحركة.) وردية، ويُرسم تحتها خط سفلي وردي عند 14.06 ث. يظهر زران بمنحنى back: زر بحبر عميق "Try it free →" (جرّبه مجانًا ←) عند 14.16 ث، وزر أبيض بخط مونو "[علامتك].app" عند 14.25 ث. استمر حتى النهاية. </structure> <composition> الألوان: - خلفية شبه سوداء #0D0B1E؛ - حبر عميق #1C0B5D للنص الداكن على الصفحات الفاتحة؛ - صفحة فاتحة #FAF9FF ولافندر ناعم #F0EDFF؛ - نص خافت #6B6385، وخافت أفتح #8F89A8 على الداكن؛ - خطوط #E9E4F2؛ - أبيض #FFFFFF. الألوان المميزة: الوردي #FB2D89 هو الرئيسي (المؤشر، الروابط، الحلقات، الكلمة المميزة)، والبرتقالي #FE9117 ثانيًا. البنفسجي #7C6CF2 والفيروزي #2DD4B0 والأصفر #FFD23F تظهر فقط حيث يجب التمييز بين ثلاثة ألوان. الخطوط: Manrope (700–800) للعناوين والواجهة، وGeist Mono للنص المكتوب والتسميات والعدادات والعناوين. التسميات الصغيرة مونو 24 px بأحرف كبيرة وتباعد واسع (نحو 0.23 em). شبكة خافتة 96 px بلون الخطوط تقع تحت قناع شعاعي: 5% على الصفحات الداكنة، 3.5% على البطاقة الختامية الفاتحة. يظهر شعاري، أيقونة تطبيق مربعة مستديرة الزوايا، في حبة الرابط القصير، وعلى بطاقة المنتج، وفي مركز الشبكة، وفي زاوية بطاقات الكلمات، وعلى البطاقة الختامية. </composition> <techniques> كل مشهد يسلّم عنصره للتالي: يتقلص الخط إلى نقطة، وتنمو النقطة إلى حبة، وترتفع الحبة فوق الكرة، وتذوب الكرة في البطاقة، وتتأرجح البطاقة بعيدًا إلى الشبكة، وتنطلق الشبكة بسرعة إلى بطاقات الكلمات. تستخدم القطعات والضربات إطارات وميض مسطحة مفردة تتلاشى بسرعة: رمادي-بنفسجي خلال 0.2 ث عند 1.5 ث، ووردي داكن خلال 0.12 ث عند النقرة، وبنفسجي خافت يتلاشى خلال ثلاثة إطارات عند كل قطع لبطاقة كلمات، وشاحب عند البطاقة الختامية. المنحنيات: - power4.out للحلقات وهبوط العداد؛ - تجاوز (overshoot) لظهور قرص الشبكة؛ - منحنى back لأزرار البطاقة الختامية؛ - كبح شديد لانطلاقة بطاقة الكلمة الأولى. ضبابية الحركة والأقنعة: ضبابية أفقية فقط للتلطخ والانطلاقة، وارتفاع من الضبابية عند كل حرف مكتوب، وانحلال ضبابي إلى البطاقة، وضبابية عند خروجها ثلاثي الأبعاد، وتلاشي بالقناع على الحواف المتحركة. تتنفس الكاميرا طوال الوقت: التقدم نحو الحبة، والانجراف الثلاثي الأبعاد البطيء للبطاقة، والصور الرمزية الدائرة، والانجراف يسارًا في الشبكة. تقع التوهجات على الخطوط والحواف والحلقات والخط السفلي النشط، وتطير الشرارات مع مقاومة. </techniques> <music> موسيقى synthwave إلكترونية آلية بإيقاع 120 نبضة في الدقيقة في مقام دو الصغير، داكنة ولامعة، بنفس طول الفيديو تمامًا. - مقدمة هادئة مفلترة تنفتح وهي تتصاعد خلال أول ثانيتين، مع صوت riser. - يهبط الدروب بالضبط على النقرة عند 2.0 ث، في إيقاع دافع: طبلة الباص على كل نبضة، وهاي-هات على الأنصاف، وباس نابض، وأربيجيو ساطع. - اندفاع ثابت يستمر حتى البطاقة الختامية. - يتوقف كل شيء عند 12.5 ث بضربة كبيرة ووتر دو صغير ساطع، يخبو صدى الريفيرب الطويل له بحلول النهاية. الجهارة نحو −14 LUFS، وذروة حقيقية أقل من −1 dBTP. </music> <sound> تجلس المؤثرات الصوتية على الصورة ولا تضاعف أبدًا طبول الموسيقى: - نقرات ناعمة تحت الكتابة؛ - صوت whoosh قصير ونقرة زجاجية عند انهيار الخط ووميضه؛ - نقرة وبوم وضربة عند الدروب عند 2.0 ث؛ - صوت whoosh نحو البطاقة عند 4.45 ث؛ - صفارات صغيرة عند قفزتي التبويب وعند كل إشعار من الأربعة؛ - صوت whoosh عندما تتأرجح البطاقة بعيدًا؛ - دقة ناعمة عندما يظهر الشعار عند 7.55 ث؛ - صوت whoosh سريع عند الانتقال الخاطف عند 10.5 ث؛ - نقرة عند كل قطع لبطاقة كلمة؛ - riser قصير نحو البطاقة الختامية؛ - بوم ورذاذ ناعم عند 12.5 ث؛ - whoosh خفيف عند انفتاح التركيب؛ - صفارتان للزرين. لا يوجد تعليق صوتي. </sound> <references> ريل إطلاق SaaS فاخر بأسلوب موشن ديزاين مصقول لعرض المنتجات: واجهة داكنة لامعة، وخطوط متوهجة، ونصوص متحركة، وعدادات مسافات، وبطاقات لوحة تحكم ثلاثية الأبعاد، وبطاقات عناوين من كلمة واحدة سريعة على الإيقاع، تُختتم بتركيب علامة تجارية باستيلي هوائي. </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>

النشرة البريدية

نرسل لك أفضل موجّهات المجتمع الجديدة مع فيديوهاتها. بلا رسائل مزعجة، وفي كل رسالة رابط لإلغاء الاشتراك.

نستخدم بريدك لهذه النشرة فقط. سياسة الخصوصية

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

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