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

AR

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

Simple Motion

مقطع تعريفي للتطبيق بشاشة منقسمة بمعدلي إطارات

مقطع تعريفي لتطبيق مدته 12 ثانية بشاشة منقسمة: نقرة مؤشر وأيقونات تدور وأمر يُكتب ونص يتمرر وبطاقة نهاية قوية، بمعدلي إطارات.

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

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

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

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

الفكرة

اصنع مقطعًا تعريفيًا أفقيًا بشاشة منقسمة مدته 12 ثانية لتطبيقي، بدقة 1920x1080 وبمعدل 59.94 إطارًا في الثانية. تعرض لوحتان مربعتان جنبًا إلى جنب الرسوم المتحركة الساطعة للواجهة نفسها. تتحرك اللوحة اليسرى بإحساس 29.97 إطارًا في الثانية وتعمل اللوحة اليمنى بمعدل الإطارات الكامل، ليظهر الفرق في السلاسة. تقع سبع لقطات سريعة على الإيقاع: مؤشر ينقر على شعاري في نافذة التطبيق، تنفجر الأيقونة إلى مربعات تدور حولها، نقرة في شريط القوائم تُخرج مربع أوامر زجاجيًا يُكتب فيه نص، تمر صفحة نص مع بطاقة، تطفو بطاقتان متراصتان إلى الأعلى، يبقى شعاري وحده، ويظهر شعار نصي متوهج بقوة على خلفية شبه سوداء. المظهر نظيف وساطع، مع ظلال ناعمة وتمويه حركة على كل حركة. تجنب البدايات الثابتة والتلاشي المتقاطع والحبيبات والتعليق الصوتي.

البنية

من 0.00 إلى 2.39 ث، الترويسة والنقرة. يتبدد ضباب مائل إلى البنفسجي خلال 0.9 ث ليظهر الصفحة البيضاء ويترك وهجًا لافندريًا في الأسفل. ترتفع ترويسة من سطر واحد من نحو y 930 إلى 537 بتخفيف أسي للخروج (نحو 1.2 ث)، وتكون شديدة التمويه في البداية. تحتوي على شعاري في قرص لافندري بقطر 132 px، والاسم «[علامتك التجارية]» بخط Inter Medium بلون الحبر العميق، وكبسولة بلون الحبر العميق «افتح التطبيق». يظهر الاسم فجأة في الإطار الثاني وهو مموه أصلًا. تتبعه الكبسولة بعد إطارين، منزلقة 15 px إلى اليسار بينما تصبح حادة. من 0.45 ث تظهر نافذة تطبيق بيضاء بنصف قطر زاوية 93 px تدريجيًا حول الترويسة (53%، ثم 70%، ثم 100% عند 0.78 ث). في داخلها كبسولة بحث لافندرية «صف الفيديو» وعمود من الأيقونات الخافتة وبطاقة فوق غلاف من الحبر العميق إلى البنفسجي. تقول البطاقة «فكرتك جاهزة للحركة» / «معاينة مباشرة · تصدير MP4» في اللوحة اليسرى و«دردشة بدل الخط الزمني» في اليمنى. يقول الغلاف «من الفكرة إلى الفيديو في دردشة واحدة» أو «صف فكرتك». عند 0.88 ث يظهر مؤشر سهم أسود بحدود بيضاء في أعلى اليمين وينزلق إلى اليسار متباطئًا. يدور -85 درجة ليواجه الأسفل أثناء انقضاضه، ويهبط منتصبًا على الشعار ويكبر 1.55 مرة بينما تضيء حلقة وردية ناعمة حول القرص. تتقدم الكاميرا إلى 1.2 حول المركز (ease-in-out، 0.47 ث) وتثبت إطارًا واحدًا. ثم تتراجع إلى 1.04 بمنحنى متسارع بينما يضغط المؤشر (ينكمش 15%)، مباشرة إلى القطع.
من 2.39 إلى 3.35 ث، الأيقونة والمدار. قطع حاد على لحظة الذروة الموسيقية: شعاري كأيقونة للتطبيق يهبط بحجم 276 px ثم ينكمش إلى 178 px (expo out، 0.47 ث). أربعة مربعات مستديرة، مموهة بالحركة ومتقدمة بزاوية 32 درجة، تستقر على شكل صليب حوله بنصف قطر 222 px (expo out، 0.9 ث). هي بنفسجي وفيروزي ووردي وأصفر على اليسار، ووردي وبرتقالي وفيروزي وأبيض على اليمين. ينمو قرص لافندري ثنائي اللون خلف الأيقونة في 0.2 ث. من 3.12 ث تنطوي المربعات نحو صف على اليمين وتنكمش، وتنكمش الأيقونة إلى نحو 70 px تحت تدرج تمويه.
من 3.35 إلى 5.29 ث، شريط القوائم والأوامر. قطع إلى الزاوية العلوية اليمنى من شاشة حاسوب تحت صفحة بيضاء. يظهر إطار شبه أسود بسمك 46 px وشريط قوائم داكن شبه شفاف فيه أيقونات الواي فاي والبطارية والتحكم، وشعاري، وثلاث نقاط لونية، و«[علامتك التجارية]» و«افتح التطبيق». تنتقل الخلفية من الحبر العميق إلى البنفسجي، مع خطوط ضوء قطرية على اليسار، وتوهج وردي، وشبكة رفيعة، ولمعة على اليمين. يرتفع المؤشر إلى الشعار وينقر (يتحجم إلى 0.82 لمدة 0.1 ث). يقفز مربع أوامر زجاجي مصنفر من الأيقونة: 740 x 226 px، نصف قطر 56 px، لافندري شبه شفاف بحد أبيض رفيع. يتحجم من 0.18 إلى 1 مع تجاوز في 0.19 ث، ويهبط تمويهه من 9 px إلى 0، بينما تنزاح الكاميرا 115 px إلى اليمين. يُكتب فيه بمعدل 27 حرفًا في الثانية خلف مؤشر كتابة أبيض: «عدّل بالكلمات، بلا إطارات مفتاحية» على اليسار، «أكبر، أبطأ، لون آخر» على اليمين. يوجد زر إرسال وردي دائري وثلاثة رموز صغيرة في صفه السفلي. تطفو اللقطة إلى الأعلى وتغادر بتدرج تمويه عمودي بينما يرتفع غشاء لافندري إلى 75%.
من 5.29 إلى 7.16 ث، صفحة الإجابة والبطاقة. خارجة من الوميض اللافندري، تتمرر صفحة نص رمادي بنفسجي بخط Inter بحجم 42–45 px إلى الأعلى من 291 px أسفل. تتحرك بمنحنى أسي (ثابت زمني 0.2 ث)، مع تمويه عمودي مرتبط بسرعتها. توجد عبارة واحدة بلون الحبر العميق SemiBold تحت مؤشر صغير منتصب: «مصمم حركة بالذكاء الاصطناعي» على اليسار، ««أبطأ»، «لون آخر»» على اليمين. أسطر المثال: «من الفكرة إلى الفيديو في دردشة واحدة»، «01 اختر قالبًا»، «02 صف فكرتك»، «03 حسّن بالكلمات ثم صدّر»، «أخبر الدردشة بما تريد عرضه. يبني الوكيل الرسوم المتحركة.»، «طباعة حركية وأشكال وتأثيرات ثلاثية الأبعاد وصوت». عند 6.22 ث تظهر بطاقة قرب الأسفل فجأة وهي مموهة. ترتفع بتخفيف خروج سريع مع انجراف ثابت إلى الأعلى بسرعة 158 px/ث بينما تعتم الصفحة إلى 45% وتتموه 3 px. على اليسار تعرض البطاقة مثلثًا مجردًا بالحبر العميق والبنفسجي والبرتقالي والأصفر، بتعليق «أفكار في حركة» / «[موقعك الإلكتروني]». على اليمين تعرض غلافًا من الحبر العميق إلى البنفسجي مع بطاقة بيضاء «صف فكرتك»، بتعليق «دردشة بدل الخط الزمني» / «معاينة مباشرة · تصدير MP4». من 6.9 ث تتسارع إلى الأعلى وتنكمش إلى 0.9 وتتلاشى بالتمويه.
من 7.16 إلى 8.16 ث، البطاقات المتراصة. ذوبان بتمويه على ثلاثة إطارات يُدخل بطاقتين متراصتين (534 x 343 px، نصف قطر 51 px). تصلان أسفل بـ 165 px وأكبر بنسبة 15% ومموهتين، وتستقران في 0.3 ث وتواصلان الانجراف إلى الأعلى، ثم تغادران بحركة متسارعة وتدرج تمويه. تحمل كل منهما عنوانًا أبيض ضخمًا بشفافية 60%، مقطوعًا بحافتها السفلية. على اليسار العنوانان «الخطوط» و«الموسيقى» فوق رسوم مثلثات مع كبسولة «افتح التطبيق». على اليمين «الأشكال» و«الصوت» فوق أغلفة من الحبر العميق إلى البنفسجي مع كبسولتي «02» و«03» وبطاقتين داخليتين بيضاوين «طباعة حركية وأشكال» و«موسيقى ومؤثرات صوتية»؛ وللبطاقة الثانية توهج وردي برتقالي.
من 8.16 إلى 10.03 ث، الشعار وحده. قطع بتمويه إلى شعاري في قرص لافندري بقطر 167 px على خلفية بيضاء. يرتفع 115 px إلى مكانه بمنحنى أسي (0.17 ث)، ويثبت، ثم ينكمش نحو القطع.
من 10.03 إلى 12.00 ث، بطاقة النهاية. قطع حاد إلى شبه الأسود مع توهج شعاعي بلون الحبر العميق. شعار نصي أبيض بتوهج ناعم بطبقتين يندفع من 3.85x: «[علامتك التجارية]» على اليسار، «[موقعك الإلكتروني]» على اليمين. يزول تمويهه الأفقي في 0.1 ث. يستقر عند 1x في نحو ثانية بمنحنى يزداد بطئًا، ثم يتراجع ببطء ويتسارع إلى 0.72x في الإطار الأخير.

التكوين

الخلفية شبه سوداء #0D0B1E. توجد لوحتان مربعتان بحجم 930 x 930 px لكل منهما جنبًا إلى جنب عند y 100 (اليسرى عند x 20 واليمنى عند x 970). فوق كل منهما ملصق صغير بخط Inter SemiBold حجم 28 px بلون لافندري فاتح #E9E4F2: «معاينة مباشرة» فوق اللوحة اليسرى و«[علامتك التجارية] · تصدير MP4» فوق اليمنى. تعرض اللوحتان اللقطات السبع نفسها في الوقت نفسه، بالتوقيت والحركة نفسيهما. تعرض اللوحة اليسرى صورة جديدة كل إطارين وتعرض اليمنى صورة جديدة كل إطار. تختلف بعض الكلمات فقط بين اللوحتين، كما هو مذكور في اللقطات. داخل اللوحة، رتب كل شيء على مسرح 1080 x 1080 يُقاس ليناسبها. لوحة الألوان: صفحة فاتحة #FAF9FF؛ لافندري #F0EDFF للوحات الناعمة والتوهجات؛ الخطوط #E9E4F2؛ رمادي بنفسجي خافت #6B6385 للنص الثانوي؛ الحبر العميق #1C0B5D للنص الداكن والأسطح الداكنة؛ شبه أسود #0D0B1E. الألوان المميزة هي الوردي #FB2D89 (الرئيسي) والبرتقالي #FE9117، مع البنفسجي #7C6CF2 والفيروزي #2DD4B0 والأصفر #FFD23F حيث تلزم أربعة ألوان. استخدم Inter بأوزان 400/500/600/700 في كل مكان. شعاري هو أيقونة التطبيق أينما ظهر شعار. تناسب أيقونة مربعة مستديرة التخطيط أكثر، مثل مربع بلون الحبر العميق بدوامة وردية وبرتقالية وبيضاء ومثلث تشغيل وردي.

التقنيات

لا شيء يبدأ من إطار ثابت. يدخل كل عنصر وهو متحرك بالفعل بتخفيف خروج أسي، ويغادر بحركة متسارعة أو بتدرج تمويه. يتبع تمويه الحركة سرعة واتجاه كل حركة. لا توجد تلاشيات متقاطعة: تتغير اللقطات بقطع حاد وقطع بتمويه وذوبان قصير بتمويه، كلها على الإيقاع. تتقدم الكاميرا إلى 1.2 (ease-in-out، 0.47 ث)، وتثبت إطارًا واحدًا وتتراجع إلى 1.04 بمنحنى متسارع في اللقطة 1، وتنزاح 115 px إلى اليمين في اللقطة 3. المؤشر سهم أسود بحدود بيضاء؛ وتجعله نقراته ينكمش (15%، أو إلى 0.82 لمدة 0.1 ث). تجري الكتابة بمعدل 27 حرفًا في الثانية خلف مؤشر كتابة أبيض. تتجاوز العناصر الظاهرة فجأة حجمها قليلًا. تستخدم الخروجات إلى الأعلى تدرجات تمويه عمودية، ويستخدم اندفاع بطاقة النهاية تمويهًا أفقيًا.

الموسيقى

اصنع خلفية موسيقية مرحة من الفانك هاوس بإيقاع 124 BPM، ومدتها 12 ثانية بالضبط. تبدأ بمقدمة مفلترة تحت اللقطة الأولى. يبدأ الإيقاع الكامل (طبلة بأربع ضربات منتظمة، تصفيق، باس سلاب، وتريات منقورة) عند القطع إلى الأيقونة عند 2.39 ث. تُعزف فقرة هادئة مفلترة تحت الشعار وحده، ويتبع ضربة بطاقة النهاية صدى ريفرب متلاشٍ. يقع كل قطع على الإيقاع. اضبط المزج على نحو -14 LUFS مع ذروة حقيقية دون -1 dBTP.

الصوت

فوق الموسيقى، أضف المؤثرات الصوتية التالية:

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

المراجع

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

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

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

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

معاينة تقنية «الترويسة تصعد من ضباب مع تمويه مرتبط بالسرعة» — عند 0:00 من الفيديو

الطباعة

الترويسة تصعد من ضباب مع تمويه مرتبط بالسرعة

ترويسة من سطر واحد (قرص الشعار، الاسم، كبسولة داكنة) تصعد نحو 400 px بتباطؤ أسّي (expo.out، 1.25 s) بينما ينجلي ضباب أزرق (#b5cce6) إلى صفحة بيضاء خلال 0.9 s. يتبع التمويه السرعة: 16 px في البداية ويختفي عند 0.5 s. يظهر الاسم في الإطار الثاني وهو مموّه أصلًا، وتظهر الكبسولة بعد إطارين وهي تنزلق 15 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=Inter:wght@400;500;600;700&display=swap");
html, body { margin: 0; width: 1080px; height: 1920px; overflow: hidden; }
#root { position: relative; width: 1080px; height: 1920px; overflow: hidden; font-family: Inter, sans-serif; background: #fbfcfa; }
.clip { position: absolute; inset: 0; }
#haze { background: linear-gradient(180deg, #b5cce6 0%, #b5cce6 55%, #dbedfc 100%); }
#lockup { display: flex; align-items: center; justify-content: center; gap: 40px; top: 894px; bottom: auto; height: 132px; }
.disc { width: 132px; height: 132px; border-radius: 50%; background: #fbfcfe; box-shadow: 0 0 0 1.5px #e8e8ea; display: flex; align-items: center; justify-content: center; font: 700 52px Inter; color: #1e2f52; }
.name { font: 500 64px/1 Inter; color: #151517; letter-spacing: -0.01em; }
.pill { height: 60px; padding: 0 26px; border-radius: 30px; background: #2f2e2f; color: #fff; font: 500 26px/60px Inter; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1080" data-height="1920">
  <div id="haze" class="clip" data-start="0" data-duration="3"></div>
  <div id="lockup" class="clip" data-start="0" data-duration="3">
    <div class="disc">A</div>
    <div class="name">Your Product</div>
    <div class="pill">Get started</div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
// the haze clears to the page while the header rises
tl.fromTo("#haze", { opacity: 1 }, { opacity: 0, duration: 0.92, ease: "power2.inOut" }, 0);
// exponential ease-out rise; blur tracks speed, strongest at the start
tl.fromTo("#lockup", { y: 395 }, { y: 0, duration: 1.25, ease: "expo.out" }, 0);
tl.fromTo("#lockup", { filter: "blur(16px)" }, { filter: "blur(0px)", duration: 0.5, ease: "power3.out" }, 0);
// name on frame 2, already blurred; capsule two frames later, sliding 15 px left as it sharpens
tl.fromTo(".name", { opacity: 0, filter: "blur(6px)" }, { opacity: 1, filter: "blur(0px)", duration: 0.25, ease: "power2.out" }, 0.05);
tl.fromTo(".pill", { opacity: 0, x: 15, filter: "blur(12px)" }, { opacity: 1, x: 0, filter: "blur(0px)", duration: 0.24, ease: "power2.out" }, 0.12);
// a slow drift keeps the frame alive after it lands
tl.to("#lockup", { y: -12, duration: 1.75, ease: "none" }, 1.25);
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 من الفيديو

الكاميرا

المؤشر يتحول إلى غطسة ويكبر عند التحويم مع اقتراب الكاميرا

سهم macOS ينزلق بتباطؤ (power2.out)، ثم يدور -85 درجة في 0.11 s ليواجه الأسفل أثناء الغطسة، ثم يعود منتصبًا ويكبر x1.55 عند هبوطه على الشعار حيث تضيء حلقة ناعمة. تقترب الكاميرا إلى 1.2 نحو الشعار (power2.inOut، 0.47 s)، وتثبت إطارًا واحدًا، ثم تبتعد إلى 1.04 بتسارع (power2.in) بينما يضغط المؤشر (يصغر 15%)، مباشرة إلى قطع حاد.

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

عرض الكود

<!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=Inter:wght@400;500;600;700&display=swap");
html, body { margin: 0; width: 1080px; height: 1920px; overflow: hidden; }
#root { position: relative; width: 1080px; height: 1920px; overflow: hidden; font-family: Inter, sans-serif; background: #fbfcfa; }
.clip { position: absolute; inset: 0; }
#cam { transform-origin: 540px 840px; }
#logo { position: absolute; left: 474px; top: 774px; width: 132px; height: 132px; border-radius: 50%; background: #fbfcfe; box-shadow: 0 0 0 1.5px #e8e8ea; display: flex; align-items: center; justify-content: center; font: 700 52px Inter; color: #1e2f52; }
#ring { position: absolute; left: 453px; top: 753px; width: 174px; height: 174px; border-radius: 50%; background: radial-gradient(circle closest-side, #d5f3ff 70%, #f7feff 100%); }
#label { position: absolute; left: 650px; top: 818px; font: 500 39px/1 Inter; color: #151517; }
#cursor { inset: auto; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
#cursor svg { position: absolute; left: -2px; top: -2px; filter: drop-shadow(0 1.5px 2px rgba(0,0,0,0.35)); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2.6" data-width="1080" data-height="1920">
  <div id="cam" class="clip" data-start="0" data-duration="2.6">
    <div id="ring"></div>
    <div id="logo">A</div>
    <div id="label">Your Product</div>
  </div>
  <div id="cursor" class="clip" data-start="0" data-duration="2.6"><svg viewBox="0 0 28 37" width="32" height="42"><path d="M2 2V31.2L9.3 24.5L14.1 35.6L19.3 33.4L14.6 22.6H24.4Z" fill="#000" stroke="#fff" stroke-width="2.2" stroke-linejoin="round"/></svg></div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
gsap.set("#cursor", { x: 891, y: 693, opacity: 0 });
gsap.set("#ring", { opacity: 0, scale: 0.88 });
tl.to("#cursor", { opacity: 1, duration: 0.03 }, 0.2);
// glide left, decelerating
tl.to("#cursor", { x: 768, y: 678, duration: 0.55, ease: "power2.out" }, 0.2);
// turn to face the dive, then dive down and in
tl.to("#cursor", { rotation: -85, duration: 0.11, ease: "power1.inOut" }, 0.8);
tl.to("#cursor", { keyframes: [{ x: 794, y: 729, duration: 0.17 }, { x: 791, y: 814, duration: 0.13 }, { x: 664, y: 890, duration: 0.1 }], ease: "none" }, 0.8);
// land: upright again, grow on hover, the ring lights
tl.to("#cursor", { rotation: 0, scale: 1.55, duration: 0.07, ease: "power2.out" }, 1.15);
tl.to("#ring", { opacity: 1, scale: 1, duration: 0.15, ease: "power2.out" }, 1.1);
tl.to("#cursor", { x: 589, y: 852, duration: 0.12, ease: "power2.out" }, 1.2);
tl.to("#cursor", { x: 555, y: 831, duration: 0.38, ease: "power1.out" }, 1.32);
// camera: push in, hold a frame, pull back accelerating while the cursor presses
tl.to("#cam", { scale: 1.2, duration: 0.467, ease: "power2.inOut" }, 0.87);
tl.to("#cam", { scale: 1.04, duration: 0.333, ease: "power2.in" }, 1.37);
tl.to("#cursor", { scale: 1.32, duration: 0.066, ease: "power2.in" }, 1.64);
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 من الفيديو

أشكال

مربعات تدور لتشكل صليبًا حول أيقونة تتقلص ثم تنطوي في صف

عند قطع حاد تتقلص أيقونة التطبيق من 276 إلى 178 px (expo.out، 0.47 s) بينما تستقر أربعة مربعات مستديرة الزوايا، تبدأ متقدمة 32 درجة على نصف قطر 222 px مع تمويه حركي، في شكل صليب (expo.out، 0.9 s)؛ ويكبر قرص رمادي ثنائي اللون خلف الأيقونة في 0.2 s. بعد توقف قصير تنطوي المربعات نحو صف على اليمين وتتقلص بينما تنكمش الأيقونة إلى 70 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=Inter:wght@400;500;600;700&display=swap");
html, body { margin: 0; width: 1080px; height: 1920px; overflow: hidden; }
#root { position: relative; width: 1080px; height: 1920px; overflow: hidden; font-family: Inter, sans-serif; background: #fbfcfa; }
.clip { position: absolute; inset: 0; }
#disc-out, #disc-in { position: absolute; left: 440px; top: 860px; width: 200px; height: 200px; border-radius: 50%; }
#disc-out { background: #e7e9eb; } #disc-in { background: #dddfe0; }
#orbit { position: absolute; left: 540px; top: 960px; width: 0; height: 0; }
.sq { position: absolute; left: -46px; top: -46px; width: 92px; height: 92px; border-radius: 22px; }
#sq-top { background: linear-gradient(140deg, #5a8cff, #2f6bff 70%); transform: translateY(-222px); }
#sq-right { background: linear-gradient(140deg, #7adcf6, #3cc8f0 70%); transform: translateX(222px); }
#sq-bottom { background: linear-gradient(140deg, #80e4bd, #4ed6a0 70%); transform: translateY(222px); }
#sq-left { background: #ffffff; box-shadow: 0 4px 14px rgba(0,0,0,0.07); transform: translateX(-222px); }
#icon { position: absolute; left: 401px; top: 821px; width: 276px; height: 276px; border-radius: 28%; background: linear-gradient(160deg, #294376, #1e2f52); color: #fff; font: 700 110px Inter; display: flex; align-items: center; justify-content: center; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2.2" data-width="1080" data-height="1920">
  <div id="stage" class="clip" data-start="0" data-duration="2.2">
    <div id="disc-out"></div><div id="disc-in"></div>
    <div id="orbit"><div class="sq" id="sq-top"></div><div class="sq" id="sq-right"></div><div class="sq" id="sq-bottom"></div><div class="sq" id="sq-left"></div></div>
    <div id="icon">A</div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
// the icon lands big and shrinks fast
tl.fromTo("#icon", { scale: 1, filter: "blur(4px)" }, { scale: 0.645, filter: "blur(0px)", duration: 0.47, ease: "expo.out" }, 0);
// squares arrive 32 degrees ahead and settle into a cross; each counter-rotates to stay upright
tl.fromTo("#orbit", { rotation: 32 }, { rotation: 0, duration: 0.9, ease: "expo.out" }, 0);
tl.fromTo(".sq", { rotation: -32, scale: 1.4, filter: "blur(7px)" }, { rotation: 0, scale: 1, filter: "blur(0px)", duration: 0.9, ease: "expo.out" }, 0);
// the grey disc grows behind the icon
tl.fromTo("#disc-out", { scale: 0 }, { scale: 1.58, duration: 0.21, ease: "power2.out" }, 0.065);
tl.fromTo("#disc-in", { scale: 0 }, { scale: 1.27, duration: 0.21, ease: "power2.out" }, 0.065);
// fold into a row on the right while the icon shrinks under a blur ramp
tl.to("#sq-top", { x: 91, y: -84, scale: 0.58, duration: 0.25, ease: "power2.in" }, 0.75);
tl.to("#sq-bottom", { x: 156, y: 113, scale: 0.58, duration: 0.25, ease: "power2.in" }, 0.75);
tl.to("#sq-left", { x: 82, y: -7, scale: 0.58, duration: 0.25, ease: "power2.in" }, 0.75);
tl.to("#sq-right", { x: 239, scale: 0.58, duration: 0.25, ease: "power2.in" }, 0.75);
tl.to("#icon", { scale: 0.26, x: -8, filter: "blur(4px)", duration: 0.25, ease: "power2.in" }, 0.75);
tl.to(["#orbit", "#disc-out", "#disc-in"], { filter: "blur(5px)", duration: 0.25, ease: "power2.in" }, 0.75);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

معاينة تقنية «مربع أوامر زجاجي ينبثق من أيقونة شريط القوائم ويكتب» — عند 0:04 من الفيديو

التخطيط

مربع أوامر زجاجي ينبثق من أيقونة شريط القوائم ويكتب

مؤشر ينقر أيقونة في شريط القوائم (تتقلص إلى 0.82 لمدة 0.1 s)؛ يتكبر مربع أوامر زجاجي مصنفر من 0.18 إلى 1 خارجًا من الأيقونة مع تجاوز (back.out(1.5)، 0.19 s)، ويهبط تمويهه من 9 px إلى 0، بينما تتحرك الكاميرا أفقيًا 115 px لتؤطره. يُكتب النص بسرعة 27 حرفًا في الثانية خلف مؤشر كتابة أبيض؛ وتوجد رموز الموجة الصوتية والإرفاق والصورة وزر إرسال دائري في الصف السفلي.

متى تُستخدم إظهار ما يطلبه المستخدم من مساعد، في لقطة واحدة متصلة بدءًا من النقرة.

عرض الكود

<!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=Inter:wght@400;500;600;700&display=swap");
html, body { margin: 0; width: 1080px; height: 1920px; overflow: hidden; }
#root { position: relative; width: 1080px; height: 1920px; overflow: hidden; font-family: Inter, sans-serif; background: #fbfcfa; }
.clip { position: absolute; inset: 0; }
#desk { background: #fbfcfa; }
#screen { position: absolute; left: -300px; top: 760px; width: 1366px; height: 1300px; background: #050506; border-radius: 0 118px 0 0; padding: 48px 46px 0; box-sizing: border-box; }
#menu { height: 68px; display: flex; align-items: center; gap: 13px; padding-left: 710px; background: linear-gradient(180deg, #1c2b40, #2e4f84); }
#screen::after { content: ""; position: absolute; left: 46px; right: 46px; top: 116px; bottom: 0; background: linear-gradient(180deg, #2e4f84, #3d659b); }
#icon { width: 46px; height: 46px; border-radius: 10px; background: rgba(255,255,255,0.18); }
.dot { width: 38px; height: 38px; border-radius: 50%; }
#clock { color: #fff; font: 500 30px Inter; margin-left: 40px; }
#box { position: absolute; left: 65px; top: 913px; width: 740px; height: 226px; border-radius: 56px; background: rgba(200,220,255,0.2); border: 1.5px solid rgba(255,255,255,0.42); box-shadow: 0 14px 44px rgba(8,16,60,0.28); transform-origin: 370px -71px; z-index: 2; }
#text { position: absolute; left: 64px; top: 48px; font: 400 30px/36px Inter; color: #fff; white-space: nowrap; }
#text::after { content: ""; display: inline-block; width: 2px; height: 32px; background: #fff; vertical-align: -6px; margin-left: 2px; }
#send { position: absolute; left: 651px; top: 136px; width: 48px; height: 48px; border-radius: 50%; background: #2f6bff; color: #fff; font: 600 26px/48px Inter; text-align: center; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1080" data-height="1920">
  <div id="desk" class="clip" data-start="0" data-duration="3">
    <div id="screen"><div id="menu"><div id="icon"></div><span class="dot" style="background:#2f6bff"></span><span class="dot" style="background:#3cc8f0"></span><span class="dot" style="background:#4ed6a0"></span><span id="clock">9:41</span></div></div>
    <div id="box"><div id="text"></div><div id="send">&uarr;</div></div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const prompt = "Make a short video for my app";
const typed = { n: 0 };
gsap.set("#box", { scale: 0.18, opacity: 0, filter: "blur(9px)" });
// click on the icon
tl.fromTo("#icon", { scale: 1 }, { scale: 0.82, duration: 0.06, yoyo: true, repeat: 1, ease: "power1.inOut" }, 0.2);
// the box springs out of the icon, blur ramping down, while the camera pans to frame it
tl.to("#box", { opacity: 1, duration: 0.055, ease: "none" }, 0.32);
tl.to("#box", { scale: 1, duration: 0.19, ease: "back.out(1.5)" }, 0.32);
tl.to("#box", { filter: "blur(0px)", duration: 0.18, ease: "power2.out" }, 0.32);
tl.fromTo("#desk", { x: 0 }, { x: 115, duration: 0.3, ease: "sine.inOut" }, 0.3);
// typing at 27 characters a second
tl.to(typed, { n: prompt.length, duration: prompt.length / 27, ease: "none", onUpdate: () => { document.getElementById("text").textContent = prompt.slice(0, Math.floor(typed.n)); } }, 0.35);
// a slow drift up while it types
tl.to("#desk", { y: -24, duration: 2.2, ease: "none" }, 0.6);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

معاينة تقنية «إمالة سريعة عبر وميض ملوّن إلى صفحة تتمرر إلى مكانها» — عند 0:05 من الفيديو

انتقال

إمالة سريعة عبر وميض ملوّن إلى صفحة تتمرر إلى مكانها

اللقطة الخارجة تنجرف للأعلى وتغادر على منحدر تمويه عمودي (تمويه SVG اتجاهي من 0 إلى 16 px خلال 0.19 s، power2.in) بينما يرتفع غشاء أزرق فاتح (#e1eef9) إلى 75%. عند القطع تبدأ الصفحة الداخلة أسفل بمقدار 291 px، مغمورة بالأزرق بنسبة 85%، وتتمرر للأعلى بتباطؤ أسّي (ثابت زمني 0.2 s، expo.out خلال 1.4 s) مع تمويه عمودي مرتبط بسرعتها؛ ينجلي الغشاء في 0.15 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=Inter:wght@400;500;600;700&display=swap");
html, body { margin: 0; width: 1080px; height: 1920px; overflow: hidden; }
#root { position: relative; width: 1080px; height: 1920px; overflow: hidden; font-family: Inter, sans-serif; background: #fbfcfa; }
.clip { position: absolute; inset: 0; }
#shotA { background: #fbfcfa; filter: url(#vb); }
.slab { position: absolute; left: 0; right: 0; top: 900px; height: 1020px; background: linear-gradient(180deg, #050506 0 48px, #1c2b40 48px 116px, #3d659b 116px); }
#shotB { background: #fbfcfa; }
#page { position: absolute; left: 121px; right: 60px; top: 640px; filter: url(#vb); }
#page p, #page h2 { margin: 0 0 16px; font: 400 42px/58px Inter; color: #a9a9a9; }
#page h2 { font-weight: 500; color: #8f8f8f; }
#page b { color: #111; font-weight: 600; }
#wash { background: #e1eef9; opacity: 0; pointer-events: none; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2.2" data-width="1080" data-height="1920">
  <svg width="0" height="0" style="position:absolute"><filter id="vb" x="-5%" y="-20%" width="110%" height="140%"><feGaussianBlur stdDeviation="0 0"/></filter></svg>
  <div id="shotA" class="clip" data-start="0" data-duration="0.6"><div class="slab"></div></div>
  <div id="shotB" class="clip" data-start="0.6" data-duration="1.6"><div id="page"><p>Chapter 2</p><h2>Pick one reference</h2><p>Download it and count its frames.</p><p>Then rebuild it <b>frame for frame</b> with</p><p>your colours and your words.</p></div></div>
  <div id="wash" class="clip" data-start="0" data-duration="2.2"></div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const blurY = document.querySelector("#vb feGaussianBlur");
// outgoing: drift up, vertical blur ramp, wash rises
tl.to(".slab", { y: -40, duration: 0.6, ease: "power1.in" }, 0);
tl.fromTo(blurY, { attr: { stdDeviation: "0 0" } }, { attr: { stdDeviation: "4 16" }, duration: 0.19, ease: "power2.in" }, 0.41);
tl.fromTo("#wash", { opacity: 0 }, { opacity: 0.75, duration: 0.24, ease: "power1.in" }, 0.36);
// incoming: the page scrolls up from 291 px with an exponential ease; blur falls with its speed
tl.set("#wash", { opacity: 0.85 }, 0.6);
tl.to("#wash", { opacity: 0, duration: 0.15, ease: "power2.out" }, 0.6);
tl.fromTo("#page", { y: 291 }, { y: 0, duration: 1.4, ease: "expo.out" }, 0.6);
tl.fromTo(blurY, { attr: { stdDeviation: "0 10" } }, { attr: { stdDeviation: "0 0" }, duration: 0.35, ease: "power2.out", immediateRender: false }, 0.6);
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 من الفيديو

انتقال

بطاقة تصعد على كاميرا منجرفة ثم تذوب بالتمويه في بطاقات مكدسة بعناوين ضخ…

تظهر بطاقة شديدة التمويه قرب الأسفل وتصعد بتباطؤ أسّي (128 px بثابت زمني 0.08 s) على انجراف ثابت للأعلى بسرعة 158 px/s؛ تخفت الصفحة خلفها إلى 45% وتُموَّه 3 px. تتسارع للأعلى وتتقلص إلى 0.9 أثناء تلاشيها بالتمويه، وبعد إطارين من اللقطة التالية تظل مرئية بنسبة 45% تحت بطاقتين مكدستين تصلان مموهتين (11 px) وأسفل بمقدار 165 px وأكبر بنسبة 15%، وتستقران في 0.3 s وتواصلان الانجراف للأعلى. تحمل كل بطاقة عنوانًا أبيض ضخمًا (126-174 px عريض، شفافية 60%) تقطعه حافتها السفلية.

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

عرض الكود

<!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=Inter:wght@400;500;600;700&display=swap");
html, body { margin: 0; width: 1080px; height: 1920px; overflow: hidden; }
#root { position: relative; width: 1080px; height: 1920px; overflow: hidden; font-family: Inter, sans-serif; background: #fbfcfa; }
.clip { position: absolute; inset: 0; }
#page { padding: 600px 121px 0; }
#page p { margin: 0 0 16px; font: 400 42px/58px Inter; color: #a9a9a9; }
#card { position: absolute; left: 225px; top: 794px; width: 627px; height: 532px; border-radius: 51px; overflow: hidden; background: linear-gradient(170deg, #284a8a, #5f8cc6); }
.inner { position: absolute; left: 40px; top: 182px; width: 507px; height: 156px; border-radius: 6px; background: #fff; padding: 24px 26px; font: 600 38px Inter; color: #111; }
#caption { position: absolute; left: 209px; width: 662px; top: 1396px; text-align: center; font: 600 37px Inter; color: #111; }
.tile { position: absolute; left: 272px; width: 534px; height: 343px; border-radius: 51px; overflow: hidden; background: linear-gradient(170deg, #284a8a, #5f8cc6); }
.giant { position: absolute; left: 18px; top: 231px; font: 700 134px/1 Inter; color: rgba(255,255,255,0.6); letter-spacing: -0.035em; }
#stack { transform-origin: 540px 941px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1080" data-height="1920">
  <div id="page" class="clip" data-start="0" data-duration="3"><p>Some text on a page behind the card.</p><p>More lines that dim when the card arrives.</p><p>A third line of body copy.</p></div>
  <div id="rise" class="clip" data-start="0" data-duration="1.25"><div id="card"><div class="inner">A short title</div></div><div id="caption">Card caption</div></div>
  <div id="stack" class="clip" data-start="1.2" data-duration="1.8"><div class="tile" style="top:600px"><div class="giant">Launch</div></div><div class="tile" style="top:979px"><div class="giant">Sound</div></div></div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
// the card pops in low and blurred, rises on an exponential ease plus a steady drift
tl.fromTo("#rise", { y: 199, filter: "blur(10px)" }, { y: 63, filter: "blur(0px)", duration: 0.2, ease: "expo.out" }, 0);
tl.to("#rise", { y: -20, duration: 0.65, ease: "none" }, 0.2);
tl.fromTo("#page", { opacity: 1, filter: "blur(0px)" }, { opacity: 0.45, filter: "blur(3px)", duration: 0.14, ease: "power2.out" }, 0);
// it accelerates up, shrinks and blurs out
tl.to("#rise", { y: -94, scale: 0.9, filter: "blur(8px)", duration: 0.35, ease: "power2.in" }, 0.85);
tl.set("#rise", { opacity: 0.45 }, 1.2);
// the stack arrives blurred, low and large, settles, then keeps drifting up
tl.fromTo("#stack", { y: 165, scale: 1.15, opacity: 0.55, filter: "blur(11px)" }, { y: 54, scale: 1.03, opacity: 1, filter: "blur(1px)", duration: 0.2, ease: "power2.out" }, 1.2);
tl.to("#stack", { y: 0, scale: 1, filter: "blur(0px)", duration: 0.45, ease: "power2.out" }, 1.4);
tl.to("#stack", { y: -60, duration: 1.0, ease: "power1.in" }, 1.85);
tl.to("#page", { opacity: 0, duration: 0.07, ease: "none" }, 1.2);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

معاينة تقنية «شعار نصي متوهج يقتحم الشاشة السوداء ثم يتراجع ببطء» — عند 0:10 من الفيديو

الطباعة

شعار نصي متوهج يقتحم الشاشة السوداء ثم يتراجع ببطء

عند قطع حاد إلى شبه سواد مع توهج شعاعي ناعم، يبدأ شعار نصي أبيض بتوهج من طبقتين (text-shadow بقيمة 10 px و26 px) بحجم 3.85x مع تمويه اتجاهي أفقي (14 px يتلاشى في 0.07 s) ويستقر عند 1x في نحو 1 s على منحنى يبطئ باستمرار (2.86x بعد 33 ms، 1.73x بعد 150 ms، 1.14x بعد 0.48 s). ثم يتراجع ببطء، 0.96x عند 1.5 s، ويتسارع إلى 0.72x في الإطار الأخير.

متى تُستخدم بطاقة ختامية لاسم أو عنوان موقع.

عرض الكود

<!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=Inter:wght@400;500;600;700&display=swap");
html, body { margin: 0; width: 1080px; height: 1920px; overflow: hidden; }
#root { position: relative; width: 1080px; height: 1920px; overflow: hidden; font-family: Inter, sans-serif; background: #fbfcfa; }
.clip { position: absolute; inset: 0; }
#end { background: radial-gradient(560px 360px at 540px 960px, #3a3a3b 0%, #2b2b2c 28%, #161618 62%, #060608 100%), #030305; }
#word { position: absolute; left: 0; right: 0; top: 922px; text-align: center; font: 600 74px/1 Inter; color: #fff; letter-spacing: -0.02em; white-space: nowrap; text-shadow: 0 0 10px rgba(255,255,255,0.85), 0 0 26px rgba(255,255,255,0.45); filter: url(#hb); transform-origin: 540px 50%; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2" data-width="1080" data-height="1920">
  <svg width="0" height="0" style="position:absolute"><filter id="hb" x="-30%" y="-10%" width="160%" height="120%"><feGaussianBlur stdDeviation="0 0"/></filter></svg>
  <div id="end" class="clip" data-start="0" data-duration="2"><div id="word">yourbrand.app</div></div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const blurX = document.querySelector("#hb feGaussianBlur");
// punch-in: huge to 1x along a curve that keeps slowing
tl.fromTo("#word", { scale: 3.85 }, { keyframes: [{ scale: 2.86, duration: 0.033 }, { scale: 2.0, duration: 0.067 }, { scale: 1.73, duration: 0.05 }, { scale: 1.3, duration: 0.167 }, { scale: 1.14, duration: 0.167 }, { scale: 1.056, duration: 0.166 }, { scale: 1.0, duration: 0.334 }], ease: "none" }, 0);
// horizontal blur dies out fast
tl.fromTo(blurX, { attr: { stdDeviation: "14 0" } }, { attr: { stdDeviation: "0 0" }, duration: 0.3, ease: "expo.out" }, 0);
// slow pull-back, accelerating into the last frame
tl.to("#word", { scale: 0.96, duration: 0.5, ease: "none" }, 0.98);
tl.to("#word", { scale: 0.72, duration: 0.5, ease: "power2.in" }, 1.48);
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> اصنع فيديو إطلاق منتج حركيًا أفقيًا بدقة 1920x1080 ومدته 42 ثانية لـ [your app]. يُظهر كيف يصنع مؤسس فيديو إطلاق لشركته الناشئة بمجرد الدردشة في التطبيق. أعد بناء واجهة تطبيقي من لقطات الشاشة الخاصة بي كنموذج متحرك نظيف مصنوع من أشكال ونصوص، قريب من الواقع. في هذا الفيديو هو تطبيق داكن بلون كحلي-بنفسجي مع Live preview على اليسار، وتبويبات Chat / Files / Panels على اليمين، وأزرار تمييز وردية. لا تعرض لقطات الشاشة أبدًا كصور ثابتة: يجب أن يتحرك كل عنصر. حافظ على واجهة واحدة متصلة بلا قطعات حادة. تتقدم الكاميرا وتتحرك أفقيًا وتتراجع بين اللوحات بينما يتحرك المؤشر وينقر. التزم بشبكة إيقاع 120 BPM (النبضة الواحدة = 0.5 ثانية) واجعل شيئًا يحدث مع كل نبضة. كلمات حركية ضخمة تصطدم فوق الواجهة بين الخطوات. الشركة الناشئة للمؤسس هي تطبيق مُختلق، مثلًا "Pulse — standups your team actually reads" (استبدله بتطبيقك). تجنب القطعات الحادة ولقطات الشاشة الثابتة وأي شيء مقصوص عند حواف الإطار والنصوص أو أشرطة التظليل التي تمتد إلى الأعمدة المجاورة. </direction> <structure> 1) الافتتاحية، 0–3 ث: "YOUR LAUNCH VIDEO." ثم "IN ONE CHAT." بخط ضخم، تُقطع كلمة بكلمة على الإيقاع. تتحول "CHAT." إلى تبويب Chat وتتراجع الكاميرا لتُظهر نافذة التطبيق كاملة. 2) المراجع، 3–8 ث: يُلصق رابط "pulse-demo.app" في الدردشة. يطير عرض تقديمي PDF وشعار كبطاقات مرفقات ويستقران في مكانهما. الكلمة الكبيرة "DROP". 3) الطلب، 8–13 ث: يكتب المؤسس "Make a 30-second launch video for Pulse, kinetic style, our colours" حرفًا حرفًا، ثم ينقر المؤشر على إرسال. الكلمة الكبيرة "ASK". 4) الخطة، 13–18 ث: يرد الوكيل بخطة من خمس خطوات على شكل قائمة تحقق. تظهر الخطوات وتُعلَّم واحدة تلو الأخرى، وتتراجع الكاميرا قليلًا مع كل سطر جديد حتى لا يبدو الإطار فارغًا. الكلمة الكبيرة "PLAN". 5) المخطط وGo، حوالي 18–21 ث: مخطط رمادي هيكلي للإعلان يملأ Live preview بسرعة، مع ظهور تسمية "Live preview" وشريط التشغيل. ينقر المؤسس على Go، وتنمو خلفية وردية من الزر المضغوط وتغمر الشاشة خلف "GO!" ضخمة. 6) البث الحي، حوالي 21–31 ث: تظهر أسطر الحالة في الدردشة ("Picking fonts" و"Animating the title" و"Writing a soundtrack") بينما يتحول المخطط إلى الإعلان النهائي. تتقدم الكاميرا حتى يملأ الإعلان الإطار. عند حوالي 27 ث ينزلق عنوان الإعلان "Standups your team actually reads." ويُرسم شريط تظليل ليموني تحت "actually reads.". بجانبه عمود إحصائيات فيه "92%" و"updates read". الكلمة الكبيرة "LIVE". 7) التصدير، حوالي 31–37 ث: تتراجع الكاميرا إلى التطبيق. زر Export والتبويبات ظاهرة بالكامل بينما يعمل التصدير ويكتمل. الكلمة الكبيرة "DONE". 8) البطاقة الختامية، حوالي 37–42 ث: شعار [your app] و"Live on [launch site] today" (استبدله بما يخصك)، يستقران على النبضة الأخيرة ويبقيان حتى النهاية. </structure> <composition> لوحة الألوان: واجهة داكنة كحلية-بنفسجية، وأزرار تمييز بلون أرجواني وردي والفيضان الوردي، وتدرج وردي إلى برتقالي على الشعار، والليموني كلون تظليل داخل الإعلان التجريبي. الكلمات الحركية ضخمة وعريضة وبأحرف كبيرة بخط بلا زوائد بخطوط العلامة التجارية وتمتد على معظم عرض الإطار. صغّر الكلمة الطويلة قليلًا بدل أن تُقص. حافظ على هوامش آمنة في كل مكان. في اللقطات الواسعة تكون نافذة التطبيق كاملة داخل الإطار. في الدردشة يكون حقل الإدخال ظاهرًا بالكامل. في مشهد التصدير يكون زر Export والتبويبات داخل الإطار. في الإعلان يبقى العنوان وشريط الليمون في عمودهما مع مساحة كافية. يطابق الشريط عرض كلماته تمامًا ولا يتداخل أبدًا مع عمود "92%". </composition> <techniques> كاميرا افتراضية متصلة مع تقدم وتحريك أفقي وتراجع سلس (ease-in-out) بين اللوحات ودون قطعات. ينزلق المؤشر نحو أهدافه وينقر مع تصغير طفيف عند الضغط. تدخل كلمات الافتتاحية واحدة مع كل نبضة. تطير بطاقات المرفقات وتستقر في مكانها بتجاوز طفيف. يُكتب نص الدردشة حرفًا حرفًا. تظهر عناصر قائمة التحقق وتُعلَّم على نبضات متتالية. يمتلئ المخطط الرمادي بسرعة ثم يتحول عنصرًا بعنصر إلى الإعلان النهائي. ينمو الفيضان الوردي تحت "GO!" شعاعيًا من الزر المنقور. تصطدم الكلمات الكبيرة بتأثير تصغير سريع فوق الواجهة وتغادر بسرعة مع النبضة التالية. لكل نبضة حدث مرئي: كلمة أو نقرة أو بطاقة أو علامة أو سطر حالة أو حركة كاميرا. </techniques> <music> مقطوعة إلكترونية حيوية بإيقاع 120 BPM، يرتبط فيها كل قطع واصطدام كلمة وحدث في الواجهة بالإيقاع. تتصاعد خلال خطوات الإعداد، وترتفع نحو "GO!"، وتدفع البناء الحي، وتنتهي بضربة أخيرة على البطاقة الختامية. </music> <sound> نقرات لوحة المفاتيح تقع تمامًا على كل حرف يُكتب. نقرات الفأرة عند كل نقرة للمؤشر. أصوات whoosh عند حركات الكاميرا وعند طيران بطاقات المرفقات، وأصوات طقطقة عند هبوطها. نقرات خفيفة لخطوات القائمة وأسطر الحالة. تأثير قوي تحت كل كلمة كبيرة، وصوت riser نحو "GO!" وضربة أخيرة على البطاقة الختامية. أبقِ الموسيقى تحت المؤثرات حتى تُسمع النقرات والتأثيرات بوضوح. </sound> <references> إعلانات تشويقية حركية لإطلاق التطبيقات تعيد بناء واجهة SaaS كنموذج متحرك واضح بحركة كاميرا واحدة متصلة، على طراز إعلانات يوم إطلاق المنتج. </references>

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

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

فيديو ترويجي بتذكرة وحقيبة وصيغ متعددة مع كشف الشعار

<direction> اصنع فيديو ترويجيًا بتصميم حركي مدته 15 ثانية بشكل أفقي (1920x1080، 60 إطارًا في الثانية) لـ [your brand]، وهو منتج يحوّل الوصف إلى فيديو جاهز (كيّف الكلمات لتناسب منتجك). الفكرة: يتحول الطلب إلى تذكرة، وتنفتح التذكرة على وعد، وتسلّم حقيبة سفر الخطوات واحدة تلو الأخرى، وتمر ثلاث صيغ بسرعة، ثم يستقر كل شيء على شعاري. لا يوجد تعليق صوتي: الكلمات على الشاشة والموسيقى تحمل الإيقاع. كل شيء مرسوم: رسومات ثنائية الأبعاد مسطحة مع بطاقة واحدة مائلة بتأثير ثلاثي الأبعاد، دون لقطات مصوّرة. المظهر فاتح ونظيف ونابض بالطاقة: لون وردي واحد مميز على صفحة فاتحة، مع حقل داكن بلون حبر عميق. تجنب اللقطات المصوّرة والصوت والضبابية داخل أقنعة النص وأي انجراف أو تشويه للشعار. يتشكل الشعار كاملًا تمامًا كما هو مرسوم، ويبقى ثابتًا تمامًا من نحو 13.3 ثانية حتى النهاية. </direction> <structure> 1. 0–1.9 ثانية، الطلب. على اليسار، عنوان صغير وردي بتباعد بين الأحرف «YOUR AI MOTION DESIGNER» يعلو عنوانًا رئيسيًا من ثلاثة أسطر بحجم نحو 180 بكسل: «Describe» / «the» / «video.» (استبدله بعنوانك؛ السطر الأخير وردي). ترتفع الأسطر من خطوطها القاعدية واحدًا تلو الآخر. يتحرك الأول فعلًا عند الإطار 0 وتتبعه البقية بفارق 0.13 ثانية، بشكل خطي، 0.17 ثانية لكل سطر. على اليمين بطاقة تذكرة بيضاء مائلة في المنظور، وجانبها الأيسر أقرب. لها رأس وردي «FROM IDEA TO VIDEO» وشعاري صغير مع «[your brand]» بجانبه. حقلان، «FROM IDEA · Your idea» و«TO MP4 · Video»، يربط بينهما خط متقطع مع مثلث تشغيل وردي. تحمل أيضًا تسميات صغيرة «EDIT WORDS» و«STEP 03» و«EFFECTS 3D» و«PREVIEW LIVE»، وباركود، و«03» على القسيمة. تطير البطاقة من اليمين عند 0.23 ثانية (power3.out، 0.35 ثانية)، وتتجاوز نحو 125 بكسل إلى اليسار ثم تستقر عائدة (sine.inOut، 0.37 ثانية). في الأثناء يقلّب رمز «MP4» أحرفًا عشوائية 15 مرة في الثانية ويثبت حرفًا بحرف عند 0.67 و0.8 و0.93 ثانية. عند 1.17 ثانية يهوي ختم وردي بإطار «MP4 EXPORT»، مائل بزاوية -14°، من حجم 2.4x في 8 إطارات مع ارتداد صغير جدًا. عند 1.67 ثانية يتقلص مثلث التشغيل إلى نقطة وردية تنمو إلى مسح دائري متمركز عليها، مع حلقتين وردييتين باهتتين تركبان خارج حافته مباشرة. يمر نصف القطر بالقيم 15 و36 و66 و120 و210 و330 و540 و900 و1500 بكسل، بخطوة كل إطارين. تغادر أسطر العنوان إلى الأعلى بالترتيب بينما تكبر الدائرة. 2. 1.9–4.0 ثانية، الوعد، على حقل وردي كامل (شعاعي، أفتح في الوسط). يولد مثلث تشغيل أبيض، أطول قليلًا من عرضه ليشير إلى وجهته، داخل الدائرة. يطير في حلقة واحدة حول الكلمات، مدارًا على امتداد مساره: إلى الأعلى، ثم يسارًا عبر الأعلى، ثم إلى الأسفل على اليسار، ثم على طول الأسفل، ثم إلى الأعلى على الجانب الأيمن وخارجًا من أعلى اليمين. يرسم خلفه مدارًا منقطًا أبيض تتلاشى نقاطه الأقدم إلى خط رفيع باهت. توجد دائرتان كبيرتان باهتتان في الخلفية. تتأرجح «No keyframes.» (نحو 220 بكسل، أبيض) حرفًا بحرف بفارق 0.03 ثانية على قوس من أسفل اليمين، تبدأ بزاوية 38° وتستقيم. عند 2.8 ثانية تطير إلى الأعلى وخارجًا حرفًا بحرف. في الوقت نفسه ترتفع «The agent animates it.» (نحو 157 بكسل) من خطها القاعدي حرفًا بحرف بفارق 16 مللي ثانية. عند 3.03 ثانية تنزلق حبة بيضاء مستديرة من اليسار خلف «animates it.» في 0.18 ثانية، وتتحول تلك الكلمات إلى الوردي داخلها. عند 3.77 ثانية تتضبب الكلمات وتتلاشى. تسقط حقيبة سفر بلون حبر عميق بحزام وردي وبطاقة «MP4» من الأعلى وتهبط عند 4.02 ثانية مع انضغاط صغير. 3. 4.0–8.95 ثانية، الخطوات. تنفتح دائرة فاتحة من حقيبة السفر مع حلقتين وردييتين باهتتين، وتنتشر قطعتان ناقصتان وردييتان موجيتان من قاعدتها. في الأعلى ترتفع «Edit in words.» (خافتة، نحو 56 بكسل). ثم ترتفع «Your idea is ready to move.» (نحو 93 بكسل) كلمة بكلمة، مع «move.» بالوردي وخط تسطير وردي مرسوم باليد يُرسم تحتها. فوق حقيبة السفر تصل ست بطاقات خطوات بيضاء، واحدة كل 0.58 ثانية. كل بطاقة بحجم 900x165 بكسل ومستديرة، مع مربع أيقونة على اليسار وشارة حالة على اليمين. ترتفع كل واحدة من خلف حقيبة السفر (من 100 بكسل أدنى وبحجم 72٪، 0.3 ثانية، power2.inOut) مع شارة لافندر «Animating» ودوّار تحميل. ثم تضيء على مرحلتين: أولًا حد وردي وهالة خارجية ناعمة، وبعد 0.07 ثانية يتحول مربع الأيقونة إلى الوردي وتصبح الشارة «✓ Ready» وردية. عند وصول البطاقة التالية ترتفع القديمة 40 بكسل وتتلاشى في 0.15 ثانية. تقرأ البطاقات: «Kinetic type» و«Shapes» و«3D effects» و«Sound» و«Your own footage» و«Fonts for every script» (استبدلها بما يخصك). تحت حقيبة السفر تتقدم ست نقاط وعداد مع كل بطاقة، من «1 / 6 in motion» إلى «6 / 6 in motion». عند 7.9 ثانية تتبدل البطاقة الأخيرة في مكانها إلى «Ready to move.» مع مربع علامة صح وشارة وردية «6 / 6». يُستبدل العداد بـ «✓ Live preview. MP4 export.» عند 8.4 ثانية يرتفع كل شيء ما عدا حقيبة السفر ويتلاشى بضبابية. عند 8.7 ثانية تغوص الكاميرا في حقيبة السفر حتى يملأ جسمها بلون الحبر العميق الإطار. 4. 8.95–11.4 ثانية، الصيغ. تمسح مجموعة من ثلاثة أشرطة مائلة من اليمين إلى اليسار في 0.2 ثانية وتفتح لوحة بملء الإطار خلف حافتها الخلفية. تميل الأشرطة نحو 18°: شريط رفيع وردي داكن، وشريط عريض وردي، وشريط رفيع وردي فاتح. يتكرر المسح نفسه عند 9.76 و10.5 ثانية. اللوحات الثلاث كتل متدرجة ناعمة بأفق: - من اللافندر إلى البنفسجي، مع ضوء دافئ في النصف السفلي؛ - سماء بنفسجية فوق «بحر» بلون حبر عميق؛ - سماء برتقالية فوق حبر عميق، مع شريط ضباب فيروزي. تتقدم كل لوحة ببطء من 1.07 إلى 1 ولها تدرج بلون حبر عميق في الأسفل. يرتفع اسمها حرفًا بحرف في أسفل اليسار، بنحو 226 بكسل، أبيض: «Vertical» و«Horizontal» و«Square». في أعلى اليسار شاشة عرض صغيرة (HUD) بتباعد بين الأحرف: «01 / 03» بالوردي الفاتح، ثم «9:16»، ثم «MP4 EXPORT» يُكتب تدريجيًا، مع خط تسطير وردي ينمو تحته. تتغير إلى «02 / 03 · 16:9 · LIVE PREVIEW» ثم «03 / 03 · 1:1 · NO KEYFRAMES». 5. 11.4–12.5 ثانية، الشبكة. تتقلص اللوحة الأخيرة إلى البطاقة اليمنى بينما تنزلق اللوحتان الأخريان من اليسار. معًا تشكلان ثلاث بطاقات عمودية (580x780 بكسل، بينها 30 بكسل) على حقل بلون حبر عميق. تتقدم الشبكة بلطف إلى 1.05 وتعود لتستقر في نصف ثانية. ترتفع «Vertical, horizontal or square.» فوقها بالأبيض. بعد أن تستقر الشبكة تظهر أسماء صغيرة تدريجيًا على البطاقات («Vertical» و«Horizontal» و«Square»)، داخل الإطار بوضوح. 6. 12.2–15 ثانية، الشعار. تنمو نقطة وردية من البطاقة الوسطى، مع حلقات هالة باهتة، بينما تتقلص الشبكة إلى 0.9 على صفحة بيضاء. يُضبط نصف قطرها بإطارات مفتاحية كل إطارين من 12 إلى 1150 بكسل. ثم تتقلص النقطة بسرعة وتبطئ (260 و125 و90 و75 بكسل) وهي تنتقل إلى يسار المنتصف. هناك تنفتح مباشرة إلى شكل خلفية شعاري، دون أن تتداخل مع الشعار أبدًا، وتنمو الأجزاء الداخلية للشعار كقطعة واحدة، تمامًا كما الشعار مرسوم. عند 13.03 ثانية ينزلق «[your brand]» من خلف الشعار إلى اليمين (power3.out، 0.32 ثانية)، بينما تنتشر حلقة وردية رفيعة حول الشعار وتتلاشى. الاسم بحجم نحو 150 بكسل، بلون حبر عميق، وحروفه متمركزة على الخط الأوسط للشعار والتركيب كله متمركز في الإطار. ثم ترتفع «Describe the video. The agent animates it.» كلمة بكلمة تحته، مع الجملة الثانية بالوردي. تظهر ثلاث شارات لافندر: «• Vertical» و«• Horizontal» و«• Square». يرتفع «[your website]» بلون رمادي خافت. يبقى الشعار ثابتًا تمامًا من نحو 13.3 ثانية، ويثبت كل شيء حتى النهاية. </structure> <composition> الأساس صفحة فاتحة #FAF9FF مع شبكة نقاط خافتة 40 بكسل #E9E4F2 وتوهجات شعاعية وردية ناعمة. لون الحبر العميق #1C0B5D للنص الداكن والعناصر الداكنة والحقل الداكن. هناك لون مميز واحد، الوردي #FB2D89، للتمييز والحقل المميز والتقدم. اللون الخافت #6B6385 للأسطر الثانوية واللافندر #F0EDFF للشارات الناعمة. البرتقالي #FE9117 والبنفسجي #7C6CF2 والفيروزي #2DD4B0 تظهر فقط في لوحات الصيغ الثلاث (وفي شعاري إن كان يستخدمها). العناوين بخط سانس هندسي ثقيل، Manrope ExtraBold، مع تباعد ضيق بين الأحرف نحو -0.05em. التسميات الصغيرة ونص شاشة HUD والموقع بخط سانس نظيف، Inter SemiBold. التخطيط حسب اللقطة: - اللقطة 1: العنوان على اليسار، والتذكرة المائلة على اليمين. - اللقطة 2: الكلمات في المنتصف على الحقل الوردي. - اللقطة 3: بطاقات الخطوات مكدسة فوق حقيبة السفر، والنقاط والعداد تحتها، والعنوان في الأعلى. - اللقطة 4: أسماء الصيغ في أسفل اليسار، وشاشة HUD في أعلى اليسار. - اللقطة 6: تركيب الشعار الختامي في المنتصف، مع الشعار النصي والشارات والموقع مكدسة تحته. </composition> <techniques> الظهور نظيف. يرتفع النص من خطه القاعدي داخل قص يتحرك معه، وليس أبدًا ضبابية داخل قناع. تتسارع حركات الخروج وتختفي في نحو 0.1 ثانية. - تنمو المسحات الدائرية بأنصاف أقطار متدرجة بإطارات مفتاحية كل إطارين، مع حلقات وردية باهتة خارج الحافة مباشرة. - يقلّب رمز التذكرة الأحرف ويثبت حرفًا بحرف. - يهوي الختم من 2.4x مع ارتداد صغير جدًا. - تدخل الأحرف على قوس دوّار، وتمسح حبة التمييز خلف الكلمات التي تغيّر لونها داخلها. - تضيء بطاقات الخطوات على مرحلتين: الحد والهالة أولًا، ثم المربع والشارة. - تغوص الكاميرا في حقيبة السفر بمقياس 1.5 و3.1 و6.2 و7 خلال ربع ثانية. - تحمل مسحات الأشرطة الثلاثة المائلة الانتقالات بين لوحات الصيغ، وتتقدم كل لوحة ببطء. - تنهار اللوحة الواحدة إلى شبكة من ثلاث بطاقات. - تنتقل نقطة وتنفتح إلى الشعار، الذي يُبنى كقطعة واحدة ولا يتحرك ولا يتشوه أبدًا بعد تشكله. </techniques> <music> استخدم مقطوعة هاوس إلكترونية أصلية مبهجة ومتفائلة بإيقاع 120 نبضة في الدقيقة، بطول 15 ثانية بالضبط. يعمل الإيقاع الكامل من الإطار الأول، مع ضربة كيك على كل نبضة عند نحو x.05 وx.55 ثانية. يبقى ثابتًا تحت البطاقات والصيغ. تختفي الطبول عند 12.55 ثانية عندما تبتلع النقطة الشبكة، تاركة بادًا دافئًا وأربيجيو صاعدًا يتلاشيان بحلول 15 ثانية. تقع القطعات والضربات الرئيسية على شبكة النبضات. </music> <sound> يوضع تصميم الصوت فوق المقطوعة، دون طبول إضافية: - صوت وووش عند طيران التذكرة؛ - نقرات خفيفة عند تثبيت الرمز؛ - ضربة ناعمة عند الختم؛ - أصوات وووش عند كل مسح دائري وعند حبة التمييز؛ - ضربة مكتومة عند هبوط حقيبة السفر؛ - صوت بيب يرتفع في النغمة عند تحول كل بطاقة إلى الوردي؛ - رنين عند هبوط البطاقة الأخيرة؛ - صوت صاعد قبل الغوص وضربة عند فتح اللوحة الأولى؛ - أصوات وووش عند كل مسح للأشرطة وعند اجتماع البطاقات؛ - صوت صاعد قبل الدروب؛ - جرس عند تشكل الشعار؛ - نقرات خفيفة على الشارات. اضبط المزج على نحو -14 LUFS مع ذروة حقيقية أقل من -1 dBTP. </sound> <references> إعلان إطلاق تطبيق عصري بأسلوب متجهي مسطح، مبني على الطباعة الحركية واستعارة السفر: بطاقة صعود الطائرة وحقيبة سفر ولوحات أفق. ينتهي بتركيب شعار نظيف في المنتصف. </references>

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

معاينة الموجّه «إعلان تطبيق بأسلوب سوفت-تك: جدار أيقونات وهاتف واستوديو ثلاثي الأبعاد»

إعلان تطبيق بأسلوب سوفت-تك: جدار أيقونات وهاتف واستوديو ثلاثي الأبعاد

placeholder

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

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