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

AR

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

Simple Motion

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

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

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

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

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

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

الفكرة

اصنع فيلم إطلاق مدته 15 ثانية لتطبيقي (15.07 ث)، كله موشن جرافيك، بالعرض 1920x1080 بمعدل 60 إطارًا في الثانية، مقطوعًا بإحكام على إيقاع 120 نبضة في الدقيقة: نبضة كل 0.5 ث من الصفر، وميزان كل 2 ث. الفكرة سلسلة متصلة واحدة يتحول فيها كل عنصر إلى التالي. يتقلص برومبت طويل مكتوب إلى نقطة، وتتحول النقطة إلى رابط قصير، ونقرة عليه تُسقط الإيقاع. ثم تأتي كرة أرضية، وبطاقة منتج، وشبكة، وثماني بطاقات كلمات، وبطاقة ختامية. يجب أن يبدو كعرض منتج فاخر: داكن ولامع في معظمه، وينتهي ببطاقة ختامية مشرقة. لا شيء يُصوَّر. اسم منتجي وعنواني وشعاري وعباراتي الخاصة تحل محل كل الأمثلة المقتبسة أدناه (استبدلها بما يخصك). تجنب اللقطات المصورة أو الجاهزة، وأسماء أو ادعاءات أي علامات تجارية أخرى، والتوقيت غير الدقيق: كل تغيير يقع على شبكة الإيقاع.

البنية

من 0 إلى 1.5 ث، البرومبت الطويل. على صفحة داكنة يومض مؤشر وردي، وتظهر ترويسة "DESCRIBE YOUR IDEA · 02" (صف فكرتك · 02) تدريجيًا عند 0.2 ث.
تُكتب جملة أطول بكثير من الشاشة من تلقاء نفسها بخط Geist Mono حجم 46 px: "أخبر الدردشة بما تريد عرضه. يبني الوكيل الرسوم المتحركة. لا إطارات مفتاحية للبحث عنها. قل ما الذي يجب أن يتغير...". تبدأ الكتابة بطيئة، وتنفجر في المنتصف (مئات الأحرف في الثانية)، وتهبط برفق عند 1.0 ث. الكلمات المفتاحية بيضاء والباقي خافت.
يركض المؤشر إلى نحو 82% من العرض، ثم يتوقف بينما يتحرك السطر يسارًا تحته، والحافة اليسرى تتلاشى عبر قناع.
من 1.05 ث يتلطخ السطر جانبيًا (ضبابية أفقية فقط) ويخفت. عند 1.38 ث ينضغط إلى خط متوهج وردي-أبيض بسمك 4 px تنغلق نهايتاه خلال خمسة إطارات إلى نقطة في المركز.
من 1.5 إلى 2.3 ث، الرابط القصير. إطار وميض مسطح رمادي-بنفسجي يتلاشى في 0.2 ث. من النقطة تولد حبة داكنة بحد رفيع فاتح: شعاري و"[علامتك]" بالأبيض مع ".app" بالوردي، بخط Manrope عريض.
تُكتب الحروف، كل حرف يرتفع من ضبابية، بينما تتقدم الكاميرا إلى نحو 1.2x ثم تعود بنعومة.
يطير مؤشر أبيض من أسفل اليمين وينقر بالضبط عند 2.0 ث (الإسقاط). عند النقر:

تنضغط الحبة إلى 0.96 وتزداد سطوعًا لإطارين؛
تومض الصفحة بالوردي الداكن وتتلاشى في 0.12 ث؛
تنمو حلقة فاتحة وحلقتان ورديتان من النقرة بمنحنى power4.out؛
تنفجر نحو سبعين شرارة وردية وبيضاء مع مقاومة.

من 2.0 إلى 4.4 ث، الكرة الأرضية. ترتفع كرة أرضية داكنة (نصف قطر 780 px) من الأسفل وتدور ببطء. لها توهج وردي عند الحافة من الداخل، ونقاط بيضاء لليابسة وخطوط طول خافتة.
تصغر الحبة إلى نحو النصف وترتفع إلى الأعلى. تحتها "● LIVE PREVIEW" (معاينة مباشرة) بخط مونو وردي، ثم عداد مونو ضخم بحجم 154 px "IDEAS IN MOTION" (أفكار في حركة) يدور كعداد المسافات:

عمود مقصوص لكل حرف، وكل عمود يدور عبر حروف عشوائية؛
تهبط الأعمدة من اليسار إلى اليمين على منحنى power4.out خلال 2.5 ث؛
الأعمدة التي لم تهبط بعد تبقى بلون شبحي خافت.
تنحني مذنبات وردية من الحبة إلى الكرة وتترك حلقة نبض حيث تهبط.

من 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 ث.

من 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 ث.
من 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 ]" ([ بلا إطارات مفتاحية ])؛
أسفل اليمين: خط تقدم يمتلئ بمقدار ثُمن لكل بطاقة.

من 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 ث. استمر حتى النهاية.

التكوين

الألوان:

خلفية شبه سوداء #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% على البطاقة الختامية الفاتحة.
يظهر شعاري، أيقونة تطبيق مربعة مستديرة الزوايا، في حبة الرابط القصير، وعلى بطاقة المنتج، وفي مركز الشبكة، وفي زاوية بطاقات الكلمات، وعلى البطاقة الختامية.

التقنيات

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

power4.out للحلقات وهبوط العداد؛
تجاوز (overshoot) لظهور قرص الشبكة؛
منحنى back لأزرار البطاقة الختامية؛
كبح شديد لانطلاقة بطاقة الكلمة الأولى.
ضبابية الحركة والأقنعة: ضبابية أفقية فقط للتلطخ والانطلاقة، وارتفاع من الضبابية عند كل حرف مكتوب، وانحلال ضبابي إلى البطاقة، وضبابية عند خروجها ثلاثي الأبعاد، وتلاشي بالقناع على الحواف المتحركة.
تتنفس الكاميرا طوال الوقت: التقدم نحو الحبة، والانجراف الثلاثي الأبعاد البطيء للبطاقة، والصور الرمزية الدائرة، والانجراف يسارًا في الشبكة. تقع التوهجات على الخطوط والحواف والحلقات والخط السفلي النشط، وتطير الشرارات مع مقاومة.

الموسيقى

موسيقى synthwave إلكترونية آلية بإيقاع 120 نبضة في الدقيقة في مقام دو الصغير، داكنة ولامعة، بنفس طول الفيديو تمامًا.

مقدمة هادئة مفلترة تنفتح وهي تتصاعد خلال أول ثانيتين، مع صوت riser.
يهبط الدروب بالضبط على النقرة عند 2.0 ث، في إيقاع دافع: طبلة الباص على كل نبضة، وهاي-هات على الأنصاف، وباس نابض، وأربيجيو ساطع.
اندفاع ثابت يستمر حتى البطاقة الختامية.
يتوقف كل شيء عند 12.5 ث بضربة كبيرة ووتر دو صغير ساطع، يخبو صدى الريفيرب الطويل له بحلول النهاية.
الجهارة نحو −14 LUFS، وذروة حقيقية أقل من −1 dBTP.

الصوت

تجلس المؤثرات الصوتية على الصورة ولا تضاعف أبدًا طبول الموسيقى:

نقرات ناعمة تحت الكتابة؛
صوت whoosh قصير ونقرة زجاجية عند انهيار الخط ووميضه؛
نقرة وبوم وضربة عند الدروب عند 2.0 ث؛
صوت whoosh نحو البطاقة عند 4.45 ث؛
صفارات صغيرة عند قفزتي التبويب وعند كل إشعار من الأربعة؛
صوت whoosh عندما تتأرجح البطاقة بعيدًا؛
دقة ناعمة عندما يظهر الشعار عند 7.55 ث؛
صوت whoosh سريع عند الانتقال الخاطف عند 10.5 ث؛
نقرة عند كل قطع لبطاقة كلمة؛
riser قصير نحو البطاقة الختامية؛
بوم ورذاذ ناعم عند 12.5 ث؛
whoosh خفيف عند انفتاح التركيب؛
صفارتان للزرين.
لا يوجد تعليق صوتي.

المراجع

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

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

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

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

معاينة تقنية «سطر طويل يُكتب على منحنى S تحت مؤشر متوقف» — عند 0:00 من الفيديو

الطباعة

سطر طويل يُكتب على منحنى S تحت مؤشر متوقف

جملة أطول بكثير من الإطار تكتب نفسها بخط أحادي المسافة: يتبع عدد الأحرف منحنى بطيء-سريع-بطيء (بضعة أحرف، ثم اندفاعة نحو 600 حرف في الثانية، ثم هبوط ناعم خلال 0.75 ث). يتحرك المؤشر حتى يتوقف عند 82% من العرض ويبقى هناك بينما يتحرك السطر يسارًا تحته؛ وقناع يُخفّت الحافة اليسرى للسطر فتذوب الكلمات القديمة مع وصول الجديدة. الكلمات المفتاحية ساطعة والباقي خافت، كتلوين الصياغة البرمجية.

متى تُستخدم لإظهار «كثير من الإدخال» أو أمر أو رابط أو موجّه طويل ينهار في الإيقاع التالي إلى شيء قصير.

عرض الكود

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>سطر طويل يُكتب على منحنى S تحت مؤشر متوقف</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=Geist+Mono:wght@400;500;700&display=block");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; }
#head { position: absolute; left: 0; right: 0; top: 381px; text-align: center; font: 400 24px/26px "Geist Mono", monospace; letter-spacing: 5.4px; color: #6B6385; }
#head b { font-weight: 400; color: #FB2D89; }
#wrap { position: absolute; left: 0; top: 486px; width: 1920px; height: 68px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 90px, #000 600px); mask-image: linear-gradient(90deg, transparent 90px, #000 600px); }
#line { position: absolute; left: 254px; top: 0; height: 68px; line-height: 68px; font: 400 45.9px/68px "Geist Mono", monospace; white-space: pre; }
#line .k { color: #FFFFFF; } #line .v { color: #8F89A8; }
#cursor { position: absolute; left: 254px; top: 493px; width: 4px; height: 54px; background: #FB2D89; box-shadow: 0 0 10px rgba(251,45,137,.8); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080">
  <div id="head" class="clip" data-start="0" data-duration="3">DESCRIBE YOUR IDEA <b>· 02</b></div>
  <div id="wrap" class="clip" data-start="0" data-duration="3"><div id="line"></div></div>
  <div id="cursor" class="clip" data-start="0" data-duration="3"></div>
</div>
<script>
// the text: [bright?, words] pairs; replace with your own long line
const PARTS = [[1, "Tell the chat"], [0, " what to show. "], [1, "The agent"], [0, " builds the animation. "], [1, "No keyframes"], [0, " to hunt for. "], [1, "Say what should change."], [0, " The preview updates as you talk."]];
const X0 = 254;          // where the line starts
const STOP = 1566;       // where the cursor parks and the line starts to scroll
const ADV = 27.54;       // one character of Geist Mono at 45.9 px (0.6 em)
const T_START = 0.21, T_END = 0.97; // the typing window, seconds
// share of the line typed against the share of the window: slow start, burst, soft landing
const CURVE = [[0, 0], [0.1, 0.02], [0.2, 0.05], [0.3, 0.12], [0.38, 0.22], [0.43, 0.31], [0.48, 0.43], [0.53, 0.57], [0.57, 0.69], [0.62, 0.78], [0.66, 0.84], [0.71, 0.88], [0.79, 0.94], [0.88, 0.98], [1, 1]];
const line = document.getElementById("line"), cursor = document.getElementById("cursor");
const chars = [];
PARTS.forEach(([k, s]) => { for (const ch of s) chars.push([k, ch]); });
line.innerHTML = chars.map(([k, ch]) => `<span class="${k ? "k" : "v"}" style="visibility:hidden">${ch === " " ? "&nbsp;" : ch}</span>`).join("");
const spans = [...line.children];
const curve = (u) => { for (let i = 1; i < CURVE.length; i++) if (u <= CURVE[i][0]) { const a = CURVE[i - 1], b = CURVE[i]; return a[1] + (b[1] - a[1]) * (u - a[0]) / (b[0] - a[0]); } return 1; };
function draw(t) {
  const u = Math.max(0, Math.min(1, (t - T_START) / (T_END - T_START)));
  const n = Math.floor(curve(u) * chars.length);
  spans.forEach((s, i) => { s.style.visibility = i < n ? "visible" : "hidden"; });
  const end = X0 + n * ADV;
  line.style.transform = `translateX(${Math.min(0, STOP - 2 - end)}px)`;
  cursor.style.transform = `translateX(${Math.min(STOP, end + 2) - X0}px)`;
  cursor.style.opacity = t < 0.21 && Math.floor(t / 0.08) % 2 ? 0 : 1; // blink while it waits
}
const tl = gsap.timeline({ paused: true });
tl.fromTo("#head", { opacity: 0 }, { opacity: 1, duration: 0.06, ease: "none" }, 0.19);
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>

معاينة تقنية «تمويه، ضغط إلى خط ضوئي، انكماش إلى نقطة، وميض» — عند 0:01 من الفيديو

انتقال

تمويه، ضغط إلى خط ضوئي، انكماش إلى نقطة، وميض

يحصل سطر النص على تمويه أفقي فقط (عنصر SVG feGaussianBlur بقيمة stdDeviation «x 0» تتحرك من 0 إلى 7 خلال 0.33 ث، power2.in) ويخفت؛ ثم يُستبدل بخط متوهج بسماكة 4 px (قلب أبيض، أطراف بلون التمييز، وهج بلون التمييز) تنغلق حافتاه كل إطارين (بعرض 1468 ثم 1300 ثم 1060 ثم 530 ثم 140 ثم 24 px) حتى يصبح نقطة في المركز. بعد إطار واحد تومض الصفحة كلها بالرمادي المتوسط وتتلاشى بـ power1.out خلال 0.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=Geist+Mono:wght@400;500;700&display=block");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; }
#flash { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse 70% 70% at 50% 48%, #5a5470, #3d3952); }
#text { position: absolute; left: 100px; width: 1468px; top: 486px; height: 68px; font: 400 45.9px/68px "Geist Mono", monospace; color: #FFFFFF; white-space: nowrap; filter: url(#smear); }
#beam { position: absolute; left: 100px; top: 518px; width: 1468px; height: 4px; border-radius: 2px; opacity: 0; transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(251,45,137,0), #ff5aa5 18%, #ffe0ef 50%, #ff5aa5 82%, rgba(251,45,137,0)); box-shadow: 0 0 14px 4px rgba(251,45,137,.55); }
#pill { position: absolute; left: 760px; top: 480px; width: 400px; height: 80px; border-radius: 40px; background: #120f26; border: 2px solid rgba(233,228,242,.16);
  color: #FFFFFF; font: 700 44px/76px "Geist Mono", monospace; text-align: center; opacity: 0; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2" data-width="1920" data-height="1080">
  <svg width="0" height="0" style="position:absolute"><filter id="smear" x="-5%" y="-50%" width="110%" height="200%"><feGaussianBlur id="smearblur" stdDeviation="0 0" /></filter></svg>
  <div id="flash" class="clip" data-start="0" data-duration="2"></div>
  <div id="text" class="clip" data-start="0" data-duration="2">"No keyframes to hunt for. Say what should change."</div>
  <div id="beam" class="clip" data-start="0" data-duration="2"></div>
  <div id="pill" class="clip" data-start="0" data-duration="2">"your.app"</div>
</div>
<script>
const T0 = 0.1;                      // when the smear starts
const EDGES = [[220, 1300], [380, 1060], [690, 530], [890, 140], [948, 24]]; // [left, width] of the line, every two frames at 60 fps
const tl = gsap.timeline({ paused: true });
tl.to("#smearblur", { attr: { stdDeviation: "7 0" }, duration: 0.33, ease: "power2.in" }, T0);
tl.to("#text", { opacity: 0.55, duration: 0.3, ease: "power1.in" }, T0 + 0.03);
tl.to("#text", { opacity: 0, duration: 0.05, ease: "none" }, T0 + 0.33);
tl.fromTo("#beam", { opacity: 0 }, { opacity: 1, duration: 0.04, ease: "none" }, T0 + 0.31);
tl.fromTo("#beam", { x: 0, scaleX: 1 }, { keyframes: EDGES.map(([l, w], i) => ({ x: l - 100, scaleX: w / 1468, duration: i === 4 ? 0.017 : 0.03 })), ease: "none" }, T0 + 0.33);
tl.to("#beam", { opacity: 0, duration: 0.02, ease: "none" }, T0 + 0.465);
// the flash: one frame full, then a quick decay while the new object grows out of the point
tl.set("#flash", { opacity: 1 }, T0 + 0.458);
tl.to("#flash", { opacity: 0, duration: 0.2, ease: "power1.out" }, T0 + 0.467);
tl.fromTo("#pill", { opacity: 0, scale: 0.12 }, { opacity: 1, scale: 1, duration: 0.24, ease: "power2.out" }, T0 + 0.458);
tl.to({}, { duration: 2 }, 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:02 من الفيديو

جسيمات

نقرة بضغط وتموجات: وميض، حلقات متتابعة، شرارات

يدخل مؤشر بسلاسة وينقر على كبسولة: تُضغط الكبسولة إلى 0.96 وتزداد سطوعًا لإطارين، وتومض الصفحة بلون تمييز داكن يتلاشى خلال نحو 0.12 ث، وتنمو ثلاث حلقات رفيعة من نقطة النقر بـ power4.out (فاتحة عند 0 ث حتى r 890، وحلقتا تمييز عند +0.08 ث و+0.17 ث حتى r 740 و560)، وتتلاشى بعد 0.3 ث. وتنطلق سبعون شرارة ببذرة ثابتة من النقطة نفسها مع مقاومة أسّية، 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=Geist+Mono:wght@400;500;700&display=block");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; }
#flash { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse 60% 60% at 50% 50%, #4a0f2f, #2b081c); }
#fx, #rings { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; }
#pill { position: absolute; left: 610px; top: 460px; width: 700px; height: 160px; border-radius: 80px; background: linear-gradient(#1d1934, #120f26); border: 2px solid rgba(233,228,242,.16);
  color: #FFFFFF; font: 700 80px/156px "Geist Mono", monospace; text-align: center; box-shadow: 0 0 60px 6px rgba(251,45,137,.42); }
#arrow { position: absolute; left: 0; top: 0; width: 30px; height: 44px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2.5" data-width="1920" data-height="1080">
  <div id="flash" class="clip" data-start="0" data-duration="2.5"></div>
  <canvas id="fx" class="clip" data-start="0" data-duration="2.5" width="1920" height="1080"></canvas>
  <svg id="rings" class="clip" data-start="0" data-duration="2.5" viewBox="0 0 1920 1080">
    <circle id="r0" cx="1150" cy="540" r="0" fill="none" stroke="#E9E4F2" stroke-width="3" />
    <circle id="r1" cx="1150" cy="540" r="0" fill="none" stroke="#FB2D89" stroke-width="3" />
    <circle id="r2" cx="1150" cy="540" r="0" fill="none" stroke="#FB2D89" stroke-width="3" />
  </svg>
  <div id="pill" class="clip" data-start="0" data-duration="2.5">"your.app"</div>
  <svg id="arrow" class="clip" data-start="0" data-duration="2.5" viewBox="0 0 30 44"><path d="M2 2 L2 34 L10 26 L16 40 L21 38 L15 24 L26 24 Z" fill="#fff" stroke="#000" stroke-width="2" stroke-linejoin="round" /></svg>
</div>
<script>
const CLICK = 0.5, P = [1150, 540];   // when and where the click lands
const rng = (seed) => () => { seed |= 0; seed = (seed + 0x6d2b79f5) | 0; let t = Math.imul(seed ^ (seed >>> 15), 1 | seed); t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t; return ((t ^ (t >>> 14)) >>> 0) / 4294967296; };
const r = rng(11), sparks = [];
for (let i = 0; i < 70; i++) sparks.push({ a: r() * Math.PI * 2, sp: 120 + r() * 650, life: 0.7 + r() * 1.8, size: 1.5 + r() * 2.8, white: r() < 0.3, delay: r() * 0.08 });
const ctx = document.getElementById("fx").getContext("2d");
function draw(t) {
  ctx.clearRect(0, 0, 1920, 1080);
  for (const s of sparks) {
    const dt = t - CLICK - s.delay; if (dt < 0 || dt > s.life) continue;
    const dist = s.sp * (1 - Math.exp(-2.2 * dt)) / 2.2, a = 1 - dt / s.life;
    ctx.fillStyle = s.white ? `rgba(255,255,255,${a})` : `rgba(251,45,137,${a})`;
    ctx.beginPath(); ctx.arc(P[0] + Math.cos(s.a) * dist, P[1] + Math.sin(s.a) * dist, s.size / 2, 0, Math.PI * 2); ctx.fill();
  }
}
const tl = gsap.timeline({ paused: true });
tl.fromTo("#arrow", { x: 1600, y: 1060, opacity: 0 }, { x: P[0] + 10, y: P[1] + 10, opacity: 1, duration: 0.45, ease: "power3.out" }, 0.03);
tl.to("#arrow", { scale: 0.88, duration: 0.03, yoyo: true, repeat: 1 }, CLICK - 0.02);
tl.to("#pill", { keyframes: [{ scale: 0.96, filter: "brightness(1.45)", duration: 0.03 }, { scale: 0.955, filter: "brightness(1)", duration: 0.06 }, { scale: 1, duration: 0.1 }], ease: "power1.out" }, CLICK - 0.01);
tl.fromTo("#flash", { opacity: 0 }, { keyframes: [{ opacity: 1, duration: 0.01 }, { opacity: 0.58, duration: 0.017 }, { opacity: 0.39, duration: 0.033 }, { opacity: 0.13, duration: 0.033 }, { opacity: 0, duration: 0.034 }], ease: "none" }, CLICK - 0.01);
[["#r0", 0, 890, 0.5, 0.9], ["#r1", 0.08, 740, 0.57, 0.9], ["#r2", 0.17, 560, 0.58, 0.85]].forEach(([id, d, R, dur, op]) => {
  tl.fromTo(id, { attr: { r: 0 }, opacity: op }, { attr: { r: R }, duration: dur, ease: "power4.out" }, CLICK + d);
  tl.to(id, { opacity: 0, duration: 0.65, ease: "power1.in" }, CLICK + 0.3 + d);
});
tl.to({}, { duration: 2.5 }, 0);
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:03 من الفيديو

الطباعة

عدّاد أحرف يهبط من اليسار إلى اليمين

تُبنى العبارة من عمود مقصوص لكل حرف، يحوي كل منها شريطًا من عشرة أحرف عشوائية والحرف الحقيقي في آخره. يقود تقدّم واحد بـ power4.out (2.5 ث) كل الأعمدة: يدور العمود i عبر شريطه بينما يعبر التقدّم i/n، فتهبط العبارة من اليسار إلى اليمين، سريعة في البداية وأبطأ في النهاية. تبقى الأعمدة التي لم تهبط بعد بلون شبحي خافت، مثل الأصفار البادئة في العدّاد.

متى تُستخدم لعنوان أو عنوان مكاني يجب أن يبدو حيًّا أو معدودًا أو مفكوك التشفير بدل أن يبدو مكتوبًا.

عرض الكود

<!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=Geist+Mono:wght@400;500;700&display=block");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; }
#label { position: absolute; left: 0; right: 0; top: 291px; text-align: center; font: 400 24px/26px "Geist Mono", monospace; letter-spacing: 5.4px; color: #FB2D89; }
#label i { display: inline-block; width: 12px; height: 12px; border-radius: 6px; background: #FB2D89; margin-right: 14px; vertical-align: 2px; }
#readout { position: absolute; left: 0; right: 0; top: 324px; height: 176px; display: flex; justify-content: center; }
.col { position: relative; width: 90.5px; height: 176px; overflow: hidden; }
.strip { position: absolute; left: 0; top: 0; width: 100%; }
.strip div { height: 176px; line-height: 176px; font: 500 154px/176px "Geist Mono", monospace; text-align: center; color: #FFFFFF; }
.ghost .strip div { color: #2a2442; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3.5" data-width="1920" data-height="1080">
  <div id="label" class="clip" data-start="0" data-duration="3.5"><i></i>LIVE PREVIEW</div>
  <div id="readout" class="clip" data-start="0" data-duration="3.5"></div>
</div>
<script>
const TEXT = "IDEAS IN MOTION";   // the phrase that lands
const START = 0.2, DUR = 2.5;        // the counter's curve: power4.out over DUR
const ROLL = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
const rng = (seed) => () => { seed |= 0; seed = (seed + 0x6d2b79f5) | 0; let t = Math.imul(seed ^ (seed >>> 15), 1 | seed); t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t; return ((t ^ (t >>> 14)) >>> 0) / 4294967296; };
const r = rng(31), box = document.getElementById("readout");
const cols = [...TEXT].map((ch) => {
  const col = document.createElement("div"); col.className = "col";
  const cells = []; for (let k = 0; k < 10; k++) cells.push(ch === " " ? "&nbsp;" : ROLL[Math.floor(r() * ROLL.length)]);
  cells.push(ch === " " ? "&nbsp;" : ch);
  col.innerHTML = `<div class="strip">${cells.map((c) => `<div>${c}</div>`).join("")}</div>`;
  box.appendChild(col); return col;
});
function draw(t) {
  const p = Math.max(0, Math.min(1, (t - START) / DUR)), prog = 1 - Math.pow(1 - p, 5);
  cols.forEach((col, i) => {
    const u = Math.max(0, Math.min(1, prog * (cols.length + 0.6) - i));
    col.firstChild.style.transform = `translateY(${-u * 10 * 176}px)`;
    col.classList.toggle("ghost", u < 1);
  });
}
const tl = gsap.timeline({ paused: true });
tl.fromTo("#readout", { opacity: 0, y: 50, filter: "blur(10px)" }, { opacity: 1, y: 0, filter: "blur(0px)", duration: 0.15, ease: "power2.out" }, START - 0.05);
tl.fromTo("#label", { opacity: 0 }, { opacity: 1, duration: 0.12 }, START + 0.08);
tl.to({}, { duration: 3.5 }, 0);
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:06 من الفيديو

بيانات

تبويبات إحصاءات بلوحة قافزة ومخطط خطي يتحوّل

بطاقة داكنة بثلاثة أرقام في صف: النشط منها يقف على لوحة أفتح قليلًا بخط تحتي متوهج بسماكة 4 px. يعدّ رقم كل تبويب تصاعديًا بـ power3.out؛ وعندما يتسلّم التبويب التالي، تقفز اللوحة والخط التحتي إليه خلال 0.08 ث (power3.inOut)، ويتخذ الخط التحتي لون تمييز التبويب، ويخفت الرقم السابق، ويحوّل المخطط المساحي أدناه نقاطه الستين من سلسلة إلى التالية بينما يتغير لون الخط والتعبئة المتدرجة. تُرسم السلسلة الأولى من اليسار إلى اليمين بنقطة رأس متوهجة.

متى تُستخدم للمرور في لقطة واحدة على ثلاثة أرقام أو خطوات أو أوضاع لمنتج.

عرض الكود

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>تبويبات إحصاءات بلوحة قافزة ومخطط خطي يتحوّل</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&display=block");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; }
#card { position: absolute; left: 240px; top: 137px; width: 1440px; height: 806px; border-radius: 30px; background: linear-gradient(#17142c, #100d22); border: 1.5px solid rgba(233,228,242,.07); font-family: "Manrope", sans-serif; color: #FFFFFF; }
#panel { position: absolute; left: 44px; top: 130px; width: 420px; height: 172px; border-radius: 14px 14px 0 0; background: rgba(240,237,255,.03); }
#under { position: absolute; left: 44px; top: 298px; width: 420px; height: 4px; border-radius: 2px; background: #7C6CF2; }
#rule { position: absolute; left: 44px; top: 300px; width: 1351px; height: 1.5px; background: rgba(233,228,242,.07); }
.stat { position: absolute; top: 140px; white-space: nowrap; }
.lab { display: flex; align-items: center; font-size: 25px; font-weight: 500; color: #E9E4F2; height: 34px; }
.lab i { width: 13px; height: 13px; border-radius: 3px; margin-right: 14px; }
.val { font-size: 78px; font-weight: 600; line-height: 1; margin-top: 26px; color: #8F89A8; }
#chart { position: absolute; left: 0; top: 330px; width: 1440px; height: 476px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080">
  <div id="card" class="clip" data-start="0" data-duration="3">
    <div id="panel"></div><div id="rule"></div><div id="under"></div>
    <div class="stat" style="left:74px"><div class="lab"><i style="background:#7C6CF2"></i>"Pick a template"</div><div class="val" id="v0">00</div></div>
    <div class="stat" style="left:520px"><div class="lab"><i style="background:#FB2D89"></i>"Describe your idea"</div><div class="val" id="v1">00</div></div>
    <div class="stat" style="left:956px"><div class="lab"><i style="background:#2DD4B0"></i>"Refine in words"</div><div class="val" id="v2">00</div></div>
    <canvas id="chart" width="1440" height="476"></canvas>
  </div>
</div>
<script>
const TABS = [{ end: 1, start: 0.0, dur: 0.87, color: [124, 108, 242] }, { end: 2, start: 1.07, dur: 0.59, color: [251, 45, 137] }, { end: 3, start: 1.57, dur: 0.59, color: [45, 212, 176] }];
const PANEL_X = [44, 490, 930];       // where the panel sits for each tab
const rng = (seed) => () => { seed |= 0; seed = (seed + 0x6d2b79f5) | 0; let t = Math.imul(seed ^ (seed >>> 15), 1 | seed); t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t; return ((t ^ (t >>> 14)) >>> 0) / 4294967296; };
const series = [3, 9, 21].map((seed) => { const r = rng(seed), p = []; let v = 0.25; for (let i = 0; i < 60; i++) { v = Math.max(0.05, Math.min(0.95, (v + (r() - 0.43) * 0.11) * 0.97 + (0.18 + 0.62 * i / 59) * 0.03)); p.push(v); } const lo = Math.min(...p), hi = Math.max(...p); return p.map((x) => (x - lo) / (hi - lo)); });
const ctx = document.getElementById("chart").getContext("2d");
const clamp = (x) => Math.max(0, Math.min(1, x)), out4 = (p) => 1 - Math.pow(1 - clamp(p), 4);
const inOut3 = (p) => { p = clamp(p); return p < 0.5 ? 4 * p * p * p : 1 - Math.pow(-2 * p + 2, 3) / 2; };
const at = (d, u) => { const f = u * (d.length - 1), i = Math.min(d.length - 2, Math.floor(f)); return d[i] + (d[i + 1] - d[i]) * (f - i); };
function draw(t) {
  TABS.forEach((tab, i) => { document.getElementById("v" + i).textContent = "0" + (t < tab.start ? 0 : Math.round(tab.end * out4((t - tab.start) / tab.dur))); });
  const s1 = inOut3((t - TABS[1].start) / 0.08), s2 = inOut3((t - TABS[2].start) / 0.08), act = t < TABS[1].start ? 0 : t < TABS[2].start ? 1 : 2;
  [0, 1, 2].forEach((i) => { document.getElementById("v" + i).style.color = i === act ? "#FFFFFF" : "#8F89A8"; });
  const x = PANEL_X[0] + (PANEL_X[1] - PANEL_X[0]) * s1 + (PANEL_X[2] - PANEL_X[1]) * s2;
  document.getElementById("panel").style.transform = document.getElementById("under").style.transform = `translateX(${x - 44}px)`;
  const c = [0, 1, 2].map((k) => TABS[0].color[k] + (TABS[1].color[k] - TABS[0].color[k]) * s1 + (TABS[2].color[k] - TABS[1].color[k]) * s2).map(Math.round);
  document.getElementById("under").style.background = `rgb(${c})`;
  const data = series[0].map((v, i) => v + (series[1][i] - v) * s1 + (series[2][i] - series[1][i]) * s2);
  const upto = clamp((t - 0.12) / 0.55);
  ctx.clearRect(0, 0, 1440, 476); if (upto <= 0) return;
  const pts = []; for (let k = 0; k <= 200 * upto; k++) { const u = k / 200; pts.push([33 + 1377 * u, 420 - 260 * at(data, u)]); }
  const g = ctx.createLinearGradient(0, 160, 0, 476); g.addColorStop(0, `rgba(${c},0.34)`); g.addColorStop(1, `rgba(${c},0)`);
  ctx.beginPath(); ctx.moveTo(pts[0][0], 476); pts.forEach(([x, y]) => ctx.lineTo(x, y)); ctx.lineTo(pts[pts.length - 1][0], 476); ctx.fillStyle = g; ctx.fill();
  ctx.shadowColor = `rgba(${c},0.9)`; ctx.shadowBlur = 16; ctx.strokeStyle = `rgb(${c})`; ctx.lineWidth = 5; ctx.lineJoin = "round";
  ctx.beginPath(); pts.forEach(([x, y], i) => (i ? ctx.lineTo(x, y) : ctx.moveTo(x, y))); ctx.stroke(); ctx.shadowBlur = 0;
  const [hx, hy] = pts[pts.length - 1]; ctx.fillStyle = "#FFFFFF"; ctx.beginPath(); ctx.arc(hx, hy, 7, 0, Math.PI * 2); ctx.fill();
}
const tl = gsap.timeline({ paused: true });
tl.fromTo("#card", { opacity: 0, filter: "blur(16px)", rotationX: 16, y: 90, transformPerspective: 2200 }, { opacity: 1, filter: "blur(0px)", rotationX: 4, y: 0, duration: 0.45, ease: "power3.out" }, 0);
tl.to({}, { duration: 3 }, 0);
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:11 من الفيديو

انتقال

بطاقات كلمات بربع ثانية تُقطع بوميض إطار واحد

ثماني بطاقات بملء الإطار، واحدة كل 0.25 ث على شبكة النوتات الثُّمنية عند 120 bpm، في كل منها كلمة أو كلمتان بحجم 240 px على خلفية خاصة (فاتحة؛ داكنة مع أشكال تُضاء؛ لون تمييز مع حروف ترتفع واحدًا واحدًا؛ نص بحدود خارجية؛ تدرج مخروطي دوّار؛ نص بلون التمييز على فاتح؛ نص متوهج فوق رموز ساقطة؛ العلامة مع الاسم). يمر كل قطع عبر إطار رمادي متوسط مسطح واحد يتلاشى خلال الإطارات الثلاثة التالية. وتوجد تسميات أحادية صغيرة في الزوايا: الموقع، وعدّاد 0N / 08، ووسم [ SECTION ]، وخط تقدّم يمتلئ بمقدار الثُّمن مع كل بطاقة.

متى تُستخدم لقائمة ميزات سريعة على الإيقاع في نهاية فيلم إطلاق.

عرض الكود

<!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=Manrope:wght@500;600;700;800&display=block");
@import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;700&display=block");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; }
.card { position: absolute; inset: 0; opacity: 0; overflow: hidden; }
.title { position: absolute; left: 0; right: 0; top: 404px; height: 280px; line-height: 280px; text-align: center; font: 800 240px/280px "Manrope", sans-serif; letter-spacing: -8px; white-space: nowrap; }
.title span { display: inline-block; }
.meta { position: absolute; font: 500 18px/24px "Geist Mono", monospace; letter-spacing: 3px; }
.bar { position: absolute; left: 1552px; top: 1019px; width: 315px; height: 3px; transform-origin: 0 50%; }
#flash { position: absolute; inset: 0; background: #6B6385; opacity: 0; }
.conic { position: absolute; inset: -400px; background: conic-gradient(from -30deg at 50% 52%, #FB2D89, #FE9117, #FFD23F, #2DD4B0, #7C6CF2, #FB2D89); filter: blur(30px); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2.2" data-width="1920" data-height="1080">
  <div id="cards" class="clip" data-start="0" data-duration="2.2"></div>
  <div id="flash" class="clip" data-start="0" data-duration="2.2"></div>
</div>
<script>
// your words, backgrounds and ink per card; "typed" letters rise in one by one, "conic" turns a gradient
const CARDS = [["Kinetic type.", "#FAF9FF", "#1C0B5D"], ["Shapes.", "#0D0B1E", "#FFFFFF"], ["3D effects.", "#FB2D89", "#1C0B5D", "typed"], ["Sound effects.", "#0D0B1E", "outline"],
  ["Another colour.", "#7C6CF2", "#1C0B5D", "conic"], ["Your footage.", "#FAF9FF", "#7C6CF2"], ["Music.", "#0D0B1E", "#2DD4B0"], ["Your name.", "#0D0B1E", "#FFFFFF"]];
const STEP = 0.25, FIRST = 0.1;
const root = document.getElementById("cards");
const cards = CARDS.map(([word, bg, ink, fx], i) => {
  const el = document.createElement("div"); el.className = "card";
  const meta = bg === "#FAF9FF" || bg === "#FB2D89" ? "#6B6385" : "#8F89A8";
  const title = fx === "typed" ? [...word].map((c) => `<span>${c === " " ? "&nbsp;" : c}</span>`).join("") : `<span>${word}</span>`;
  const style = ink === "outline" ? "color:transparent;-webkit-text-stroke:2.5px #FFFFFF;letter-spacing:0" : `color:${ink}`;
  el.innerHTML = `<div style="position:absolute;inset:0;background:${bg}">${fx === "conic" ? '<div class="conic"></div>' : ""}</div>` +
    `<div class="title" style="${style}${word.length >= 14 ? ";font-size:196px" : ""}${fx === "typed" ? ";clip-path:inset(0 -60px 0 -60px)" : ""}">${title}</div>` +
    `<div class="meta" style="left:48px;top:52px;color:${meta}">YOUR.SITE</div><div class="meta" style="right:52px;top:50px;color:${meta}">0${i + 1} / 08</div>` +
    `<div class="meta" style="left:51px;top:1005px;color:${meta}">[ SECTION ]</div><div class="bar" style="background:${meta}"></div>`;
  root.appendChild(el); return el;
});
function draw(t) {
  const k = Math.max(0, Math.min(7, Math.floor((t - FIRST) / STEP + 1e-6))), since = t - FIRST - k * STEP, p = Math.max(0, Math.min(1, since / STEP));
  cards.forEach((el, i) => { el.style.opacity = t >= FIRST && i === k ? 1 : 0; el.querySelector(".bar").style.transform = `scaleX(${(k + p) / 8})`; });
  document.getElementById("flash").style.opacity = t < FIRST || k === 0 ? 0 : since < 0.02 ? 1 : Math.max(0, 0.55 * (1 - (since - 0.02) / 0.05));
  if (CARDS[k][3] === "typed") [...cards[k].querySelectorAll(".title span")].forEach((s, i) => { const u = Math.max(0, Math.min(1, (since - i * 0.0135) / 0.045)); s.style.transform = `translateY(${(1 - u) * 120}px)`; s.style.opacity = u > 0 ? 1 : 0; });
  if (CARDS[k][3] === "conic") cards[k].querySelector(".conic").style.transform = `rotate(${40 * p}deg)`;
}
const tl = gsap.timeline({ paused: true });
tl.to({}, { duration: 2.2 }, 0);
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:12 من الفيديو

انتقال

فتح بحدقة العدسة مع علامة تبتعد، ثم ينفتح تركيب الشعار

إطار شاحب واحد، ثم تنفتح صفحة فاتحة كدائرة من r 495 حتى الإطار الكامل خلال نحو 0.15 ث فوق صفحة أغمق، بينما تبتعد العلامة في داخلها من 3.2x إلى 1x (بإطارات مفتاحية خلال نصف ثانية)، وتدور من −75° إلى الوضع المستقيم وتنتقل من رمادي باهت إلى اللون الكامل. وتتضخم تحتها سحابة ألوان باستيلية. ثم تنزلق العلامة من المركز إلى يسار تركيب شعار متمركز بينما يخرج اسم العلامة من خلفها (يُزاح الصف بمقدار 50% من عرضه ناقص نصف العلامة، فلا يُقاس شيء)، ويصعد الشعار اللفظي كلمةً كلمة في صناديقها (بفارق 0.05 ث)، ويُرسم خط تحت كلمة التمييز، ويظهر زران بـ back.out(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=Manrope:wght@500;600;700;800&display=block");
@import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;700&display=block");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; }
html, body, #root { background: #B9B3CC; }
#page { position: absolute; inset: 0; background: #FAF9FF; clip-path: circle(495px at 50% 50%); font-family: "Manrope", sans-serif; color: #1C0B5D; }
#cloud { position: absolute; left: 260px; top: 560px; width: 1400px; height: 760px; filter: blur(70px); opacity: 0; transform-origin: 50% 70%; }
#cloud i { position: absolute; border-radius: 50%; }
#lock { position: absolute; left: 0; right: 0; top: 335px; height: 209px; display: flex; justify-content: center; }
#row { display: flex; align-items: center; height: 209px; }
#mark { width: 209px; height: 209px; flex: none; border-radius: 50px; background: linear-gradient(135deg, #1C0B5D, #3a1d8a); position: relative; z-index: 2; }
#word { margin-left: 68px; clip-path: inset(-20px -40px -20px -68px); font-size: 150px; font-weight: 600; letter-spacing: -3px; white-space: nowrap; }
#word span { display: inline-block; }
#tag { position: absolute; left: 0; right: 0; top: 640px; height: 120px; text-align: center; font-size: 100px; line-height: 120px; font-weight: 700; letter-spacing: -2.5px; white-space: nowrap; }
#tag .w { display: inline-block; clip-path: inset(0 -20px 0 -20px); }
#tag .w > span { display: inline-block; position: relative; }
#tag .o span { color: #FB2D89; }
#under { position: absolute; left: 4px; right: 20px; top: 98px; height: 7px; border-radius: 4px; background: #FB2D89; transform-origin: 0 50%; }
#btns { position: absolute; left: 0; right: 0; top: 820px; height: 92px; display: flex; justify-content: center; gap: 27px; }
.btn { height: 92px; padding: 0 46px; border-radius: 16px; display: flex; align-items: center; font-size: 34px; font-weight: 600; opacity: 0; }
#b1 { background: #1C0B5D; color: #FFFFFF; } #b2 { background: #FFFFFF; border: 1.5px solid #E9E4F2; font-family: "Geist Mono", monospace; font-weight: 500; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080">
  <div id="page" class="clip" data-start="0" data-duration="3">
    <div id="cloud"><i style="left:380px;top:120px;width:640px;height:520px;background:#FDB4D6"></i><i style="left:120px;top:260px;width:520px;height:460px;background:#CFC8FA"></i><i style="left:820px;top:200px;width:560px;height:480px;background:#FFD3A3"></i><i style="left:880px;top:420px;width:420px;height:340px;background:#B8F1E5"></i></div>
    <div id="lock"><div id="row"><div id="mark"></div><div id="word"><span>"Your Name"</span></div></div></div>
    <div id="tag"><span class="w"><span>"Your</span></span> <span class="w"><span>idea</span></span> <span class="w"><span>is</span></span> <span class="w"><span>ready</span></span> <span class="w"><span>to</span></span> <span class="w o"><span>move."<i id="under"></i></span></span></div>
    <div id="btns"><div class="btn" id="b1">"Try it free" →</div><div class="btn" id="b2">"your.site"</div></div>
  </div>
</div>
<script>
// [t, scale, rotation, wash 0..1] of the mark, and the iris radius, read off a real cut
const MARK = [[0, 3.3, -80, 1], [0.017, 3.16, -75, 0.93], [0.05, 2.45, -55, 0.74], [0.067, 2.0, -35, 0.4], [0.1, 1.72, -25, 0.34], [0.15, 1.47, -12, 0.16], [0.2, 1.31, -5, 0.05], [0.25, 1.17, -1, 0], [0.3, 1.1, 0, 0], [0.5, 1, 0, 0]];
const IRIS = [[0, 470], [0.017, 495], [0.05, 660], [0.067, 840], [0.1, 1000], [0.15, 1150]];
// the lockup opening: [t, 1 = mark centred .. 0 = lockup centred, share of the wordmark still behind the mark]
const SLIDE = [[0.65, 1, 1], [0.7, 0.943, 0.909], [0.75, 0.873, 0.597], [0.8, 0.496, 0.348], [0.85, 0.146, 0.1], [0.9, 0.054, 0.036], [0.95, 0.016, 0.012], [1.0, 0, 0]];
const keys = (k, t) => { if (t <= k[0][0]) return k[0].slice(1); for (let i = 1; i < k.length; i++) if (t <= k[i][0]) { const a = k[i - 1], b = k[i], f = (t - a[0]) / (b[0] - a[0]); return a.slice(1).map((v, j) => v + (b[j + 1] - v) * f); } return k[k.length - 1].slice(1); };
const mark = document.getElementById("mark"), row = document.getElementById("row"), word = document.querySelector("#word span"), page = document.getElementById("page");
function draw(t) {
  const [s, rot, wash] = keys(MARK, t), [k0, hid] = keys(SLIDE, t);
  page.style.clipPath = `circle(${keys(IRIS, t)[0]}px at 50% 50%)`;
  mark.style.transform = `rotate(${rot}deg) scale(${s})`;
  mark.style.filter = wash > 0.002 ? `grayscale(${wash}) brightness(${1 + 2.2 * wash})` : "none";
  row.style.transform = `translateX(calc(${50 * k0}% - ${104.5 * k0}px))`;
  word.style.transform = `translateX(calc(${-hid} * (100% + 68px)))`;
}
const tl = gsap.timeline({ paused: true });
tl.fromTo("#cloud", { opacity: 0, scale: 0.35 }, { opacity: 1, scale: 1, duration: 0.8, ease: "power2.out" }, 0.35);
document.querySelectorAll("#tag .w > span").forEach((el, i) => tl.fromTo(el, { y: 130 }, { y: 0, duration: 0.3, ease: "power3.out" }, 0.96 + i * 0.05));
tl.fromTo("#under", { scaleX: 0 }, { scaleX: 1, duration: 0.2, ease: "power2.out" }, 1.56);
tl.fromTo("#b1", { opacity: 0, scale: 0.88, y: 28 }, { opacity: 1, scale: 1, y: 0, duration: 0.3, ease: "back.out(2)" }, 1.66);
tl.fromTo("#b2", { opacity: 0, scale: 0.88, y: 28 }, { opacity: 1, scale: 1, y: 0, duration: 0.3, ease: "back.out(2)" }, 1.75);
tl.to({}, { duration: 3 }, 0);
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>

موجّهات أخرى

معاينة الموجّه «تجميع شعار بأسلوب لو-بولي مع كتابة الاسم في تصميم أفقي»

تجميع شعار بأسلوب لو-بولي مع كتابة الاسم في تصميم أفقي

<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>

معاينة الموجّه «عرض تعريفي سلس للتطبيق مدته 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> اصنع موشن جرافيك مربعًا مدته 30 ثانية (1080x1080، 30 إطارًا في الثانية) بموسيقى لاونج خفيفة في الخلفية، ومؤثرات صوتية مرحة مع كل حركة، وبدون صوت تعليق. إنه فيديو توضيحي مرسوم يدويًا على شكل «وصفة» لمنتجي: تُعرض خطواته كمشروب يُحضَّر خطوة بخطوة داخل كأس. هو مشهد مرسوم متواصل واحد بلا قطعات، وكل شيء يتغير في مكانه. الشكل رسم ثنائي الأبعاد مسطح على صفحة بلون لافندر أبيض باهت، بخطوط خارجية بلون حبر داكن «تغلي» مثل الرسوم المتحركة المرسومة يدويًا، وحروف كبيرة كرتونية عريضة بأسلوب الملصقات. استبدل كل كلمة بين علامتي اقتباس أدناه بكلمات منتجي، مع إبقاء كل كلمة بطول مماثل تقريبًا ليبقى التصميم متماسكًا. تجنب القطعات وحركات الكاميرا والتظليل أو التدرجات خارج التعبئة المسطحة، وتجنب التعليق الصوتي. </direction> <structure> الإيقاع هادئ ومتساوٍ. المقدمة سريعة ومرتدة، وكل سكب يستغرق 5 ثوانٍ ثابتة، والتحريك والقشرة الملتوية أسرع قليلًا، والخاتمة تستمر 3 ثوانٍ. كل تغيير للبطاقة يقع على نبضة من الموسيقى بإيقاع 120 نبضة في الدقيقة: 6.0 و11.0 و16.0 و21.0 و24.5 و27.0 ثانية. - 0–2.5 ث، العنوان: «YOUR BRAND» (استبدله باسم علامتك) يُوضع كبيرًا في المنتصف بعرض نحو 920 بكسل. ابتداءً من 0.15 ث تُختم حروفه واحدًا تلو الآخر في أماكنها خلال 0.83 ث. يبدأ كل حرف بحجم 10%، وأخفض بمقدار 22 بكسل ومائلًا بزاوية ±8–14°، ويهبط في 0.36 ث مع تجاوز ناعم (back.out 1.7). عند 1.4 ث يظهر سطر صغير، «what your product is»، تدريجيًا تحته، ويختفي عند 2.45 ث. - 2.5–3.6 ث، التسليم: يرتفع العنوان 365 بكسل ويصغر إلى 58% في 0.8 ث (power3.inOut) ليصبح الترويسة. في الأثناء، ابتداءً من 2.87 ث، يرسم الكأس نفسه كرسم تخطيطي بالقلم: الجدار الأيسر، ثم الأيمن، ثم قطع حافة الكأس، ثم منحنى القاع، في نحو 0.4 ث إجمالًا. بعد ذلك يظهر تعبئته تدريجيًا (0.28 ث)، ويظهر العنوان الفرعي للترويسة تدريجيًا تحت العنوان. - 3.6–6.0 ث، الخطوة 1: تدخل البطاقة بميل 4° وظهور تدريجي سريع (0.15 ث)، وتُختم قيمتها الكبيرة من تلقاء نفسها. تقرأ البطاقة «STEP 01» و«PICK» و«TEMPLATE» و«vertical, horizontal or square». يظهر المتتبع تدريجيًا مع أول دائرة نشطة. تسقط ثلاث مكعبات ثلج من أعلى الإطار بفاصل 0.35 ث. يسقط كل منها بالجاذبية (power2.in، نحو 0.3 ث)، ويرتد نحو 140 بكسل، ويقفز 20 بكسل ثم يستقر: اثنان في القاع وواحد في الأعلى. تومض ثلاث خطوط شرارة صغيرة فوق كل مكعب أثناء مروره بحافة الكأس. كل هبوط يملأ ثلث شريط تقدم البطاقة ويضيف كلمة واحدة من الحالة «three short words». - 6.0–21.0 ث، الخطوات 2–4: ثلاث عمليات سكب مدة كل منها 5 ثوانٍ، وكلها على النمط نفسه. تقرأ البطاقات «STEP 02 / SAY / KINETIC TYPE / tell the chat what to show»، ثم «STEP 02 / SAY / SHAPES / the agent builds the animation»، ثم «STEP 02 / SAY / SOUND / music and sound effects to the rhythm». تنزلق زجاجة من اليسار (0.23 ث) وتقف. ثم تميل إلى 115° على قوس صغير، قليلًا إلى الأعلى ثم إلى الأسفل نحو نقطة السكب (0.37 ث)، وتسكب تيارًا منحنيًا في الكأس. الزجاجات لافندر، ثم وردية، ثم بلون الحبر الداكن. على كل منها ملصق أبيض عليه شعاري كأيقونة صغيرة مربعة بحواف مدورة، وكلمة («TYPE» و«SHAPES» و«SOUND») وسطر صغير («kinetic» و«3D effects» و«music»). تظهر علامة هدف رمادية («01» ثم «02» ثم «03») بجانب الكأس مع خط متقطع يعبرها. يرتفع المشروب إلى تلك العلامة خلال 2 ث (sine.inOut)، ويطفو الثلج معه، وتقفز قطرات الرذاذ حيث يسقط التيار. يبدأ المشروب أبيض صافيًا، ثم يتحول إلى الوردي مع السكب الثاني، ثم إلى أرجواني داكن (وردي ممزوج بحبر داكن) مع الثالث، ويمتزج كل لون خلال نحو 1.3 ث. يمتلئ شريط التقدم وتُكتب عبارة «live preview» من تلقاء نفسها في عشر خطوات. ثم تتحول العلامة إلى الوردي، ويترك أعلى التيار ويسقط، وتميل الزجاجة عائدة وتنزلق خارجة. - 21.0–24.5 ث، الخطوة 5: تقرأ البطاقة «STEP 03 / REFINE / IN WORDS / “bigger”, “slower”, “another colour”». ملعقة بار خفيفة برأس كروي تسقط بتباطؤ سريع. تتأرجح 8° ذهابًا وإيابًا بدورة مدتها 0.8 ث بينما تتزاحم المكعبات وتخفت، ثم ترتفع خارجة. يمتلئ الشريط بخطوات من 4 إطارات بينما تُكتب «live preview». - 24.5–27.0 ث، الخطوة 6: تقرأ البطاقة «STEP 03 / MP4 / EXPORT / download the MP4». تظهر فجأة قشرة برتقال ملتوية فوق الكأس، وتلتف وتنضغط نحو 0.8 ث بينما تسقط قطرات برتقالية. ثم تنزلق إلى الحافة (0.5 ث، power2.inOut) بينما تنتهي كتابة «try it free». - 27.0–30 ث، الخاتمة: تُعاد البطاقة كـ «YOUR TAGLINE / OPEN APP / YOURSITE.COM / pick · describe · refine». تنطلق سبع شرطات قصيرة وردية وبرتقالية حول الكأس (0.16 ث) وتستمر في «التنفس» بلطف. يكبر الكأس 4% خلال 0.6 ث ويثبت حتى النهاية. </structure> <composition> الألوان: - الصفحة: لافندر أبيض باهت (#FAF9FF). - الخطوط الخارجية: حبر داكن (#1C0B5D)، نحو 3 بكسل بأطراف مستديرة. - الكأس: لافندر (#F0EDFF) مع قاعدة بصبغة بنفسجية. - مكعبات الثلج: مربعات مدورة، بيضاء بنسبة 40% فوق ما خلفها، مع خط في الزاوية الداخلية. - البطاقات: بيضاء بظل لافندر ناعم مزاح. - البرتقالي (#FE9117): الزينة ونصف شرطات الخاتمة. الخطوط: - خط العرض: حروف كبيرة كرتونية عريضة (شيء مثل Lalezar) بأسلوب الملصقات. الوجه وردي (#FB2D89)، مع خط خارجي بلون الحبر الداكن خلفه وبروز بنفسجي (#7C6CF2) مزاح نحو الأسفل واليسار. - النص الصغير: خط يدوي طباعي ودود (شيء مثل Playpen Sans)، رمادي أرجواني خافت (#6B6385) للنص الأساسي ووردي للتسميات. التخطيط بعد المقدمة: - الترويسة: أعلى المنتصف، بعرض نحو 540 بكسل، مع سطر صغير تحتها: «first benefit · second benefit · third benefit». - الكأس: كأس قصير مخروطي يسار المنتصف، بعرض نحو 290 بكسل، الحافة عند y 457 والقاعدة عند y 797. - بطاقة المعلومات: على اليمين، 390x248 بكسل بزوايا 14 بكسل وإطار بلون الحبر الداكن. من الأعلى إلى الأسفل تضم عنوانًا تمهيديًا ورديًا صغيرًا، والقيمة الكبيرة بحروف الملصقات، وعنوانًا بحروف كبيرة داكنة، وسطرًا مكتوبًا بخط اليد، وشريط تقدم على شكل حبة مع كلمة حالة قصيرة على يمينه. - المتتبع: ست خطوات على طول الأسفل. الدوائر بعرض 43 بكسل وتبعد 156 بكسل عن بعضها على سكة رفيعة، مع تسميات صغيرة بحروف كبيرة مصغرة تحتها: «TEMPLATE» و«TYPE» و«SHAPES» و«SOUND» و«REFINE» و«EXPORT». </composition> <techniques> - الخطوط الغالية: يحصل كل خط مرسوم على اهتزاز خفيف بمقدار 1–2 بكسل يتغير إلى اهتزاز جديد كل 4 إطارات، في القطعة كلها، مثل إزاحة اضطراب فوق الخطوط. - إعادة تركيب البطاقة: في أول إطار من كل خطوة، تظهر القيمة الكبيرة الجديدة وحدها لإطار واحد، ثم تعود البطاقة. تُختم القيمة الكبيرة من تلقاء نفسها من حجم 72% مع تجاوز back.out. - الكتابة: تُكتب كلمات الحالة من تلقاء نفسها على خطوات. - المتتبع، الخطوة الحالية: دائرتها بحلقة بلون الحبر الداكن ونقطة وردية وتسمية وردية، و«تتنفس» بين 100% و112% كل ثانية. - المتتبع، الخطوة المنتهية: قبل البطاقة التالية بنحو 0.1 ث، تمتلئ دائرتها بالوردي وتُرسم علامة صح بيضاء في 0.17 ث. تتحول تسميتها إلى لون الحبر الداكن، وتمتلئ السكة إلى الدائرة التالية بالوردي في 0.37 ث. - المتتبع، الخطوات القادمة: تبقى خافتة مع نقطة رمادية صغيرة. </techniques> <music> مقطوعة موسيقية لاونج-بوب دافئة ومريحة بإيقاع 120 نبضة في الدقيقة في مقام كبير: طبول بالفرش، وكونترباص مستدير، وفيبرافون، وأوتار بيتزيكاتو، وطقطقة أصابع، وقليل من الشيكر. اجعلها قليلة الكثافة بلا لحن رئيسي، لتبقى تحت المؤثرات. تبدأ ببضع نوتات منقورة من الفيبرافون والبيتزيكاتو بلا طبول، ويدخل باص ناعم عند 2 ث. الإيقاع الكامل بالفرش مع الباص المتنقل يبدأ تمامًا عند بطاقة السكب الأولى عند 6.0 ث. يبقى ثابتًا خلال عمليات السكب والتحريك والقشرة الملتوية، ويصل إلى ضربة وتر ختامية عند 28.0 ث بينما يستقر الكأس المنتهي، ويتلاشى حتى النهاية. اجعلها 30 ثانية بالضبط، بمزج نحو -14 LUFS وذروة حقيقية تحت -1 dBTP. </music> <sound> بدون صوت تعليق. كل مؤثر يقع على إطاره، واضحًا فوق الموسيقى؛ ولا تحتاج الموسيقى أبدًا إلى أن ترتفع لتفسح له المجال. - العنوان: فرقعة ناعمة لكل حرف، ترتفع قليلًا في النغمة وتتحرك من اليسار إلى اليمين بينما تُبنى الكلمة. - التسليم: صوت اندفاع لطيف تحت ارتفاع العنوان، وخدش قلم خافت لكل خط بينما يرسم الكأس نفسه. - البطاقات: خفقة ورق وضربة خافتة في كل مرة تُوزَّع فيها بطاقة وتُختم كلمتها الكبيرة. - هبوط الثلج: طرقة جافة قصيرة من الثلج على الكأس لكل مكعب، مع اتصالين أو ثلاثة بفارق بضعة ميلي ثوانٍ وضربة منخفضة تحت السقوط. أنعم للارتداد وأصغر للقفزة الأخيرة، وكل ضربة بارزة بوضوح عن الموسيقى. - الزجاجات: صوت اندفاع ناعم عند انزلاق كل زجاجة وعند ميلانها. - عمليات السكب: كل واحدة مسموعة بوضوح ومختلفة. أولًا تيار صافٍ فوّار ومتناثر يطرق الثلج، ثم سكب أكثر امتلاءً بقرقرات سريعة، ثم سكب داكن شرابي بقرقرات بطيئة وعميقة. امنح كل سكب جسمًا في نطاق 1–4 كيلوهرتز حيث يقع التيار وجيب الهواء الرنان في الكأس، ليبدو أعلى بنحو 8 ديسيبل من الثواني المحيطة هناك. اجعلها نقية: في الغالب زجاج رنان وفقاعات، وقليل من الهسهسة. - حول كل سكب: ترتفع نغمة جيب الهواء من سكب إلى آخر مع امتلاء الكأس، وتسقط بضع قطرات أخيرة بعد كل منها. تنخفض الموسيقى نحو 5 ديسيبل تحت كل سكب وتعود بلطف، ويتبع صوت اندفاع الزجاجة وهي تخرج. - المتتبع: رنين تأكيد ناعم من نغمتين كلما أُنجزت خطوة، أعلى قليلًا للأخيرة. - الملعقة: رنة معدنية عند سقوطها، وثلج يطرق الكأس عند كل طرف من تأرجحها، وصوت اندفاع عند خروجها. - القشرة: نقرة عند ظهورها، وثلاث رشات رذاذ ناعمة أثناء التفافها، وطرقة خفيفة عند استقرارها على الحافة. - الخاتمة: رنين ساطع مع انفجار الشرطات، فوق لمعان زجاجي خافت حتى النهاية. - المزج النهائي: نحو -14 LUFS، وذروة حقيقية تحت -1 dBTP. </sound> <references> رسوم متحركة مرسومة يدويًا بخطوط تغلي، وفيديوهات توضيحية مسطحة للتطبيقات بأسلوب الملصقات، ورسوم وصفات الكوكتيل حيث يمثل كل مكوّن ميزة. </references>

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

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