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

AR

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

Simple Motion

إطلاق منتج بالنص الحركي على إيقاع 120 BPM

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

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

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

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

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

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

الفكرة

اصنع فيلم إطلاق بالنص الحركي مدته 24 ثانية لمنتجي، أفقي بدقة 1920x1080 وبمعدل 30 إطارًا في الثانية، ومدته 23.8 ثانية بالضبط، بلا صوت بشري وبلا لقطات مصورة: كل شيء مرسوم. الفكرة: كلمة واحدة عريضة بأحرف صغيرة في كل لقطة، وقطع حاد كل ثانية على إيقاع 120 BPM، وعرض توضيحي قصير للمنتج في المنتصف، ثم فاصل مكتوب، ثم دروب وجولة سريعة على المنتج وهو يعمل، وتنتهي بكلمة ختامية هادئة. ضع علامة شعاري أسفل اليسار في كل لقطة كلمة، وأعد رسم شاشات منتجي كواجهة مسطحة بسيطة (شريط جانبي، بطاقات، مخطط، مشغل فيديو). كل كلمة وسطر بين علامات الاقتباس أدناه هو مثال يجب استبداله بما يخص منتجي: من 15 إلى 18 كلمة ميزة مفردة مع عبارة قصيرة لكل منها على شريحة، وثلاث خطوات، وبضعة أسطر يكتبها مستخدم مع الإجابات، واسم منتجي وعنوانه على الويب. تجنب التلاشي المتقاطع، والانجراف البطيء، واللقطات المصورة، والتعليق الصوتي، والجمل الكاملة في لقطات العناوين.

البنية

0.00-0.97: «type.» على الصفحة الفاتحة، تندفع من اليسار. ينزلق مؤشر من أسفل اليمين إلى النقطة الوردية: هالة تمرير، وموجة نقر، وتنفتح تحت النقطة نافذة تلميح وردية فيها «Describe your idea.» والخطوة «01» وزر سهم.
0.97-1.97: «ideas.» على لون حبر داكن عميق، يسار الوسط، من اليمين. عند 1.5 ث تقفز نافذة تلميح وردية للخطوة من حافتها اليسرى (back out، تجاوز بنحو 22%، بحجم 543 x 196 px عند الاستقرار): «Type your idea. Live preview.» والخطوة «02» وسهما السابق والتالي.
1.97-2.97: «edit.» على الوردي من اليمين، وتحتها شريحة «Edit in words». يسحب المؤشر تحديدًا متقطعًا فوق نهاية الكلمة والنقطة، ثم تضبّبان (تمويه الخلفية 18 px)؛ وفقاعة بيضاء صغيرة قرب الشعار تقول «No keyframes».
2.97-3.93: «move.» على الصفحة الفاتحة من الأسفل، شريحة «3D effects». عند 3.5 ث تتلاشى الشريحة وتغوص الكاميرا في النقطة: يكبر الحجم وفق e^(0.0251 n²)، حيث n عدد الإطارات منذ بدء الغوص، مع التمركز على النقطة، حتى يملأ لونها الوردي الإطار.
3.93-4.97: على ذلك اللون الوردي تكبر «sound.» من 0.42 إلى 1 (power2 in-out، 0.23 ث، مع تجاوز طفيف)؛ ثم تقفز حروفها كمقياس مستوى (ارتفاع وحجم عشوائيان جديدان في كل إطار، ثم تهدأ). حبة بيضاء بأيقونة نوتة، وشكل موجي حي (الأعمدة المعزوفة وردية والبقية وردية باهتة) و«Music and sound effects».
4.97-5.97: «vertical.» على الصفحة الفاتحة من اليسار، وتحتها حبة بنفسجية فاتحة «Vertical». عند كل نغمة ثُمنية تتدحرج الكلمة إلى «horizontal.» ثم «square.» ثم «MP4.»: خلال 3 إطارات ترتفع الكلمة القديمة 135 px وتضبّب وتتلاشى بينما تصعد الجديدة من 300 px أسفل خارجةً من ضبابية (power2 out)، ويتغير نص الحبة عند الهبوط. فقاعة داكنة قرب الشعار تقول «Try it free».
5.97-6.97: «fonts.» على الوردي من الأعلى مع زر شبه أسود «Try it free»؛ ثم قطعات حادة كل 0.25 ث إلى الكلمة نفسها بخط سيريف ناعم على البنفسجي (نقطة صفراء)، وخط غروتيسك أسود ضيق على البرتقالي (نقطة بيضاء)، وخط مضغوط على الفيروزي (نقطة بلون الحبر العميق)، ولكل منها لون زر خاص.
6.97-7.97: «free.» على لون الحبر العميق من اليسار. يظهر شريط عنوان أبيض بتجاوز، يعرض عنوان منتجي وزرًا ورديًا «Open app»؛ ينقر المؤشر عليه، فتظهر علامة صح وتنتشر موجة داخل الزر.
7.97-8.97: «live.» على الصفحة الفاتحة من اليمين؛ وتحتها مقتطف تضمين بسطر واحد في صندوق شيفرة أبيض، وسم iframe يشير إلى عنوان منتجي (الوسم وردي، والخاصية برتقالية، والنص بنفسجي). عند 8.4 ث تسقط نافذة متصفح من الأعلى خلف الكلمة (power2 in، إطاران، مموهة) وتستقر.
8.97-9.97: «export.» على الوردي من الأسفل؛ تطير ثلاث بطاقات بيضاء إلى الأعلى واحدة تلو الأخرى بفارق إطارين، وتتجاوز نحو 28 px ثم تستقر: «Pick a template» 01 و«Describe your idea» 02 و«Refine in words, then export» 03.
9.97-11.47: «in a chat.» صغيرة (140 px) في الأعلى، من اليسار. تحتها ترتفع لوحة تحكم منتجي في نافذة متصفح من الأسفل (expo out خلال 0.29 ث من نحو 725 px، مموهة): شريط جانبي بلون الحبر العميق مع علامتي، وبطاقات الخطوات ومخطط وردي صاعد، ونافذة تلميح جولة وردية «Describe the video. The agent animates it.». ينقر المؤشر على سهمها التالي فتومض الصفحة بالأبيض إلى الصفحة التالية مع التلميح «The preview updates as you talk.».
11.47-12.97: «as an MP4.» على الوردي، والمنتج كمشغل فيديو معتّم يرتفع من الأسفل. يضغط المؤشر زر التشغيل الأبيض، فيرتفع الغطاء ويطوي الزر نفسه ويتقدم الفيديو (1.34x، power3 out) نحو البطاقة الأولى بينما يظهر تلميح «Pick a template.» ونقطة ساخنة وردية نابضة.
12.97-13.97: الفاصل على لون الحبر العميق. تظهر «your AI» كلمة بكلمة مع مؤشر نص برتقالي، ويعاد توسيط السطر عند إضافة «motion»، ويومض المؤشر 4 إطارات ظاهرًا و4 مخفيًا؛ ثم 7 إطارات من اللون شبه الأسود.
13.97-14.97: الدروب على الوردي. تنفجر حلقة من خطوط سرعة بيضاء رفيعة إلى الخارج خلال 6 إطارات، وتصطدم «designer.» بحجم 2x، وتهبط متجاوزة إلى 0.88 ثم ترتد عبر 1.03 إلى الاستقرار خلال 0.45 ث.
14.97-20.97: المنتج وهو يعمل. تنزلق نافذة تطبيق من اليمين على الصفحة الفاتحة: دردشة على اليسار ومسرح على اليمين («Your AI motion designer» وزرا بدء «Pick a template» و«Describe your idea»). تتقدم الكاميرا نحو الدردشة (1.77x خلال 4 إطارات): فقاعة طلب «Kinetic type, shapes and sound» وثلاث نقاط تفكير وإجابة مكتوبة «Describe the video. The agent animates it.». ثم تتراجع بينما يفتح المسرح نافذة متصفح فيها منتقي قوالب (ست بطاقات)، وتتقدم نحو الدردشة والشاشة معًا بينما يُكتب «No keyframes to hunt for. Say what should change.» وتصل فقاعة «'Bigger', 'slower', 'another colour'»، وتتراجع بينما يتحول المسرح إلى فيديو قيد التشغيل، وتنتهي بلقطة واسعة. كل حركة سريعة تستغرق 3-6 إطارات مع تمويه خفيف.
20.97-21.97: «words.» على الوردي من اليسار؛ بطاقة دردشة بيضاء يظهر فيها الطلب «'Bigger', 'slower', 'another colour'» بالتلاشي، ثم الإجابة «The preview updates as you talk.».
21.97-22.97: «gets it.» على لون الحبر العميق من اليمين؛ شريط أبيض من أربع خلايا يظهر (من 0.83 إلى 1 مع back out): TYPE «Bigger» وMOTION «Slower» وCOLOUR «Another colour» وEXPORT «MP4».
22.97-23.80: «in motion.» على الصفحة الفاتحة من الأعلى، حبة فيروزية «Live preview · Vertical» يمرّ نصفها الثاني على «Horizontal» و«Square» و«MP4 export» كل 7 إطارات. آخر تسمية هي عنوان موقعي.

التكوين

الألوان: الصفحة الفاتحة #FAF9FF، لون الحبر العميق #1C0B5D (الخلفيات الداكنة والنص الداكن)، شبه أسود #0D0B1E (الأزرار والتعتيم)، اللون الرئيسي الوردي #FB2D89 (وكذلك الخلفيات الملونة)، البرتقالي #FE9117 (لون مميز على الداكن)، البنفسجي #7C6CF2، والفيروزي #2DD4B0 والأصفر #FFD23F فقط لقطعات الثيمات، ألواح بنفسجية فاتحة #F0EDFF، نص خافت #6B6385، خطوط رفيعة #E9E4F2، أبيض.
تتناوب اللقطات بين ثلاث خلفيات: صفحة فاتحة بكلمات بلون الحبر العميق ونقطة وردية؛ لون الحبر العميق بكلمات بيضاء ونقطة برتقالية؛ وردي بكلمات بيضاء ونقطة بلون الحبر العميق.
كلمات العناوين: Mona Sans Black بعرض 112.5%، من 250 إلى 315 px، تباعد الحروف -0.06 em، بأحرف صغيرة، في الوسط، ويتبعها دائمًا نقطة نهاية ملونة مستديرة بعرض 0.2 em على خط الأساس. نص الواجهة بخط Inter 400-700. لدوّار الثيمات: لحظة واحدة بخط سيريف Fraunces 600 بنهايات ناعمة، وخط غروتيسك ضيق واحد (Inter Black عند -0.1 em) وخط مضغوط واحد (Mona Sans بعرض 75%). الشيفرة بخط Geist Mono.
عناصر ثابتة في كل لقطة كلمة: تسمية بأحرف كبيرة أعلى اليسار (Mona Sans 600 expanded، 19 px، تباعد +0.25 em؛ بلون الحبر العميق بشفافية 55% على الفاتح، وأبيض 52% على الداكن، وأبيض 62% على الملون)، وأيقونة خطية رفيعة أعلى اليمين (30 px، بنفس اللون، تظهر تدريجيًا خلال 3 إطارات بعد كل قطع)، وعلامة شعاري أسفل اليسار كمربع مستدير الزوايا بحجم 78 px.

التقنيات

القطعات حادة وتقع على الإيقاع، كل نبضتين (1.0 ث)؛ وتقع قطعات الثيمات الأربع على النغمات الثُمنية.
تندفع كل كلمة جديدة من جانب، بالتناوب يسار، يمين، أعلى، أسفل: تبدأ على بعد نحو 500 px وتستقر خلال 0.14 ث بحركة expo out، بتناقص يقارب 5 أضعاف في كل إطار، مع تمويه في اتجاه الحركة يتناسب مع المسافة المتبقية (نحو 0.11 px من التمويه لكل px)، وتهبط حادة.
تُفك شيفرة التسمية بالأحرف الكبيرة عند كل قطع: تتضح 3 أحرف في كل إطار، وتسبقها الأحرف والأرقام المبعثرة بـ 7 وتتغير كل إطارين؛ وتبقى المسافات والنقطة الوسطى.
تظهر عناصر الواجهة بسرعة: نصف ظاهرة في الإطار الذي تظهر فيه، وكاملة بعد إطار، بتكبير من 0.7-0.85 مع back out (تجاوز نحو 10%) خلال 0.26 ث.
يقفز الشعار 6 px في كل إطار قبل كل نبضة ويُطلق هالة وردية (بيضاء على الخلفية الوردية) تكبر إلى 1.68x وتتلاشى من 34% إلى 6% على امتداد النبضة.
المؤشرات سهم أسود بحدود بيضاء تنزلق بحركة power3/power4 out، وتنقر بانضغاط صغير وحلقة موجة.

الموسيقى

اصنع أرضية موسيقية أصلية من الإلكترو بوب المرح اللامع بإيقاع 120 BPM في 4/4، بنفس طول الفيديو بالضبط: باص سينث متقطع نابض، وتصفيق دقيق، وهايهات نقية، وبلَكات لامعة وبضع ضربات صوتية مقطّعة «woo»، بلا كلمات. طاقة كاملة من النبضة الأولى، مع نبضات قوية كل ثانيتين بدءًا من -0.03 ث بحيث يقع كل قطع على نبضة. عند 12.97 ث يختفي الإيقاع ويبقى فقط بريكداون مفلتر وريزر تحت الفاصل المكتوب؛ وعند 13.97 ث يعود الإيقاع الكامل بقوة مع الانفجار ومعه بوم عميق. تلاشٍ قصير في النهاية.

الصوت

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

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

علامة شعاري، ويُفضل أن تكون مربعة؛ تنبض مع الإيقاع أسفل اليسار في كل لقطة كلمة وتظهر في الشريط الجانبي للمنتج.
بضع لقطات شاشة لمنتجي (لوحة التحكم، الدردشة، مشغل الفيديو) لإعادة رسمها كواجهة مسطحة بسيطة.
اسم منتجي وعنوانه على الويب و15-18 كلمة ميزة، لكل منها عبارة قصيرة على شريحة.

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

معاينة تقنية «دخول الكلمة بأثر اتجاهي» — عند 0:00 من الفيديو

الطباعة

دخول الكلمة بأثر اتجاهي

تبدأ الكلمة على بُعد نحو 500 px من مكانها وتستقر خلال 0.14 s بمنحنى expo out، فتتضاءل المسافة بنحو 5 أضعاف في كل إطار عند 30 fps. ويتبع ذلك تمويه غاوسي SVG بمحور واحد (feGaussianBlur stdDeviation 'X 0' أو '0 Y') المنحنى نفسه بمعدل 0.11 px من التمويه لكل 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=Mona+Sans:wdth,[email protected],200..900&display=block");
body { margin: 0; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; }
.scene { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.word { font-family: "Mona Sans", sans-serif; font-weight: 900; font-stretch: 112.5%; font-size: 300px; letter-spacing: -0.065em; line-height: 1; white-space: nowrap; }
.dot { display: inline-block; width: 0.2em; height: 0.2em; border-radius: 50%; margin-left: 0.05em; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1920" data-height="1080">
  <div class="scene clip" data-start="0" data-duration="2" style="background:#1c0b5d">
    <div class="word" id="w1" style="color:#ffffff">ideas<span class="dot" style="background:#fe9117"></span></div>
  </div>
  <div class="scene clip" data-start="2" data-duration="2" style="background:#fb2d89">
    <div class="word" id="w2" style="color:#ffffff">edit<span class="dot" style="background:#1c0b5d"></span></div>
  </div>
</div>
<script>
// Whip in from a side with a smear along the move: expo out over 0.14 s from 500 px, and a one-axis
// SVG Gaussian blur that follows the speed (for expo out the speed is proportional to the distance left).
const tl = gsap.timeline({ paused: true });
const DIST = 500;   // px the word starts away from its place
const DUR = 0.14;   // s to settle (the move decays ~5x a frame at 30 fps)
const K = 0.11;     // px of blur per px still to travel
let uid = 0;
function whip(el, t, dir) {
  const axis = dir === "left" || dir === "right" ? "x" : "y";
  const sign = dir === "left" || dir === "top" ? -1 : 1;
  const id = "smear" + ++uid;
  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  svg.setAttribute("width", "0"); svg.setAttribute("height", "0"); svg.style.position = "absolute";
  svg.innerHTML = `<filter id="${id}" x="-60%" y="-60%" width="220%" height="220%"><feGaussianBlur stdDeviation="0 0"/></filter>`;
  el.parentNode.appendChild(svg);
  const fe = svg.querySelector("feGaussianBlur");
  const s0 = DIST * K, sd = axis === "x" ? `${s0} 0` : `0 ${s0}`;
  tl.fromTo(el, { [axis]: sign * DIST }, { [axis]: 0, duration: DUR, ease: "expo.out" }, t);
  tl.set(el, { filter: `url(#${id})` }, t);
  tl.fromTo(fe, { attr: { stdDeviation: sd } }, { attr: { stdDeviation: "0 0" }, duration: DUR, ease: "expo.out" }, t);
  tl.set(el, { filter: "none" }, t + DUR);  // land sharp
}
whip(document.getElementById("w1"), 0.001, "right");
whip(document.getElementById("w2"), 2, "left");
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 من الفيديو

الطباعة

وسم بأحرف كبيرة يفكّ تشفيره

وسم صغير بأحرف كبيرة متباعدة يعيد بناء نفسه عند كل قطع: تتضح 3 أحرف في كل إطار بينما تسبقها بـ 7 أحرف رموز مشوَّشة بحسب seed (أحرف وأرقام و# + /) وتتغير كل إطارين؛ وتبقى المسافات والنقطة الوسطى ثابتة. تُضبط سلسلة كل إطار في إطارها الخاص بـ tl.set(textContent)، فيظهر النص الصحيح عند التنقل للأمام أو للخلف.

متى تُستخدم وسوم الأقسام أو الفصول التي ينبغي أن تبدو حيّة وتقنية دون أن تنافس العنوان الرئيسي.

عرض الكود

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وسم بأحرف كبيرة يفكّ تشفيره</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Mona+Sans:wdth,[email protected],200..900&display=block");
body { margin: 0; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #1c0b5d; }
.label { position: absolute; left: 64px; top: 50px; font-family: "Mona Sans", sans-serif; font-weight: 600; font-stretch: 125%;
  font-size: 22px; letter-spacing: 0.16em; color: rgba(255, 255, 255, 0.52); white-space: pre; }
.word { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: "Mona Sans", sans-serif;
  font-weight: 900; font-stretch: 112.5%; font-size: 300px; letter-spacing: -0.06em; color: #fff; }
.dot { display: inline-block; width: 0.2em; height: 0.2em; border-radius: 50%; margin-left: 0.05em; background: #fe9117; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1920" data-height="1080">
  <div class="label" id="lab"></div>
  <div class="word">ideas<span class="dot"></span></div>
</div>
<script>
// A caps label that decodes: 3 letters resolve per frame, scrambled glyphs run 7 ahead and change every
// second frame, spaces and the middle dot stay. Each frame's string is set on its own frame (seek-safe).
const tl = gsap.timeline({ paused: true });
const FPS = 30;
const PER_FRAME = 3;   // letters resolved per frame
const AHEAD = 7;       // scrambled letters ahead of the resolved ones
const CHARS = "ABCDEFGHJKLMNPQRSTUVWXYZ0123456789#+/";
function noise(i, pair) {   // seeded, never Math.random
  let a = (1013 * (i + 1) + 7919 * (pair + 1)) >>> 0;
  a = Math.imul(a ^ (a >>> 15), a | 1); a ^= a + Math.imul(a ^ (a >>> 7), a | 61);
  return CHARS[((a ^ (a >>> 14)) >>> 0) % CHARS.length];
}
function frameText(text, f) {
  const R = PER_FRAME * f, N = R + AHEAD; let last = -1;
  const out = [...text].map((c, i) => {
    if (i < R || c === " " || c === "·") { if (c !== " ") last = i; return c; }
    if (i < N) { last = i; return noise(i, Math.floor(f / 2)); }
    return " ";
  });
  return out.slice(0, last + 1).join("");
}
function decode(el, text, t) {
  const frames = Math.ceil(text.length / PER_FRAME) + 1;
  for (let f = 0; f <= frames; f++) tl.set(el, { textContent: frameText(text, f) }, t + f / FPS);
}
const lab = document.getElementById("lab");
lab.textContent = frameText("DESCRIBE · YOUR IDEA", 0);
decode(lab, "DESCRIBE · YOUR IDEA", 0.001);
decode(lab, "LIVE · PREVIEW", 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:03 من الفيديو

انتقال

الغوص عبر النقطة الأخيرة

تكبّر الكاميرا طبقة الكلمة حول نقطتها الملوّنة بالمعادلة scale = e^(0.0251 n^2)، حيث n رقم الإطار في غوص من 12 إطارًا (1.3x بعد 3 إطارات، 5x بعد 8، 37x بعد 12)، حتى يملأ لون النقطة الإطار. ويبدأ المشهد التالي بهذا اللون نفسه وتنمو كلمته من 0.42 إلى 1 بمنحنى power2 in-out خلال 7 إطارات مع تجاوز 2.5%.

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

عرض الكود

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>الغوص عبر النقطة الأخيرة</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Mona+Sans:wdth,[email protected],200..900&display=block");
body { margin: 0; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; }
.scene { position: absolute; inset: 0; }
.cam { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.scene > .word { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.word { font-family: "Mona Sans", sans-serif; font-weight: 900; font-stretch: 112.5%; font-size: 295px; letter-spacing: -0.06em; color: #1c0b5d; line-height: 1; }
.dot { display: inline-block; width: 0.2em; height: 0.2em; border-radius: 50%; margin-left: 0.05em; background: #fb2d89; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1920" data-height="1080">
  <div class="scene clip" data-start="0" data-duration="2.4" style="background:#faf9ff">
    <div class="cam" id="cam"><div class="word" id="w">move<span class="dot" id="dot"></span></div></div>
  </div>
  <div class="scene clip" data-start="2.4" data-duration="1.6" style="background:#fb2d89">
    <div class="word" id="next" style="color:#fff">sound<span class="dot" style="background:#1c0b5d"></span></div>
  </div>
</div>
<script>
// Dive through the full stop: the camera scales about the dot as scale = e^(k n^2), n frames into the
// dive, until the dot's colour fills the frame; the next scene starts on that colour and grows its word.
const tl = gsap.timeline({ paused: true });
const FRAMES = 12;              // length of the dive in frames (0.4 s at 30 fps)
const K = 0.0251;               // curvature measured on the reference: 1.3x after 3 frames, 37x after 12
const END = Math.exp(K * FRAMES * FRAMES);
const cam = document.getElementById("cam"), dot = document.getElementById("dot");
const r = dot.getBoundingClientRect();          // measured once at build, not at tween time
cam.style.transformOrigin = `${r.left + r.width / 2 - 4}px ${r.top + r.height / 2}px`;
tl.fromTo(cam, { scale: 1 }, { scale: END, duration: FRAMES / 30, ease: (u) => (Math.exp(K * FRAMES * FRAMES * u * u) - 1) / (END - 1) }, 2.0);
// The next word grows out of the colour.
tl.fromTo("#next", { scale: 0.42, opacity: 0 }, { scale: 1.025, opacity: 1, duration: 7 / 30, ease: "power2.inOut" }, 2.4);
tl.to("#next", { scale: 1, duration: 5 / 30, ease: "sine.inOut" }, 2.4 + 7 / 30);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

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

أشكال

شعار بنبض القلب مع هالة

يقفز الشعار 6 px إلى الأعلى ويكبر 4% قبل كل نبضة بإطار واحد، ثم ينزل بعد إطارين، ويُطلق هالة بشكله نفسه تكبر من 1.05x إلى 1.68x بينما تخفت من 34% إلى 6% على امتداد النبضة، ثم تُعاد ضبطها. عند 120 BPM و30 fps تبلغ النبضة 15 إطارًا، وتُبنى بقيم set منفصلة وحركة tween واحدة لكل نبضة.

متى تُستخدم إبقاء شعار صغير في الزاوية حيًّا ومتناغمًا مع الموسيقى خلال مونتاج سريع.

عرض الكود

<!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>
body { margin: 0; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #faf9ff; }
.mark { position: absolute; left: 881px; top: 461px; width: 158px; height: 158px; }
.halo { position: absolute; inset: 0; border-radius: 24%; background: #fb2d89; opacity: 0; }
.tile { position: absolute; inset: 0; border-radius: 24%; background: #1c0b5d; box-shadow: 0 8px 24px rgba(28, 11, 93, 0.25); }
.swirl { position: absolute; left: 32%; top: 32%; width: 44%; height: 44%; border-radius: 50%; background: conic-gradient(#fb2d89, #fe9117, #ffffff, #fb2d89); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1920" data-height="1080">
  <div class="mark" id="mark"><div class="halo" id="halo"></div><div class="tile"><div class="swirl"></div></div></div>
</div>
<script>
// A logo that beats with the music: it hops a frame before every beat, then sends out a halo that grows
// and fades over the beat. At 120 BPM a beat is 15 frames.
const tl = gsap.timeline({ paused: true });
const FPS = 30, BEAT = 15;          // frames per beat (120 BPM at 30 fps)
const HOP = 6;                      // px the mark rises
const GROW = 1.68, FADE = [0.34, 0.06];   // halo scale at the end of a beat, opacity start/end
for (let b = 13; b < 120; b += BEAT) {
  tl.set("#mark", { y: -HOP, scale: 1.04 }, (b + 1) / FPS);
  tl.set("#mark", { y: -HOP / 2, scale: 1.02 }, (b + 2) / FPS);
  tl.set("#mark", { y: 0, scale: 1 }, (b + 3) / FPS);
  tl.fromTo("#halo", { scale: 1.05, opacity: FADE[0] }, { scale: GROW, opacity: FADE[1], duration: 12 / FPS, ease: "sine.out" }, (b + 3) / FPS);
  tl.set("#halo", { opacity: 0, scale: 1 }, (b + BEAT) / FPS - 0.0001);
}
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 من الفيديو

الطباعة

تبديل الكلمات بالتدحرج على الأثمان

عند كل نغمة ثُمنية تتغير الكلمة خلال 3 إطارات: ترتفع القديمة 135 px خطيًا وتخفت وتتمّوه حتى 10 px، بينما تصعد الجديدة من 300 px أسفل بمنحنى power2 out من تمويه 14 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=Mona+Sans:wdth,[email protected],200..900&family=Inter:wght@500&display=block");
body { margin: 0; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #faf9ff; }
.slot { position: absolute; left: 0; top: 330px; width: 1920px; text-align: center; font-family: "Mona Sans", sans-serif; font-weight: 900;
  font-stretch: 112.5%; font-size: 250px; letter-spacing: -0.065em; line-height: 1; color: #1c0b5d; white-space: nowrap; }
.dot { display: inline-block; width: 0.2em; height: 0.2em; border-radius: 50%; margin-left: 0.05em; background: #fb2d89; }
.row { position: absolute; left: 0; top: 761px; width: 1920px; display: flex; justify-content: center; }
.pill { height: 65px; padding: 0 27px; border-radius: 33px; background: #f0edff; border: 2px solid #e9e4f2; display: flex; align-items: center;
  font: 500 31px/1 "Inter", sans-serif; color: #fb2d89; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1920" data-height="1080">
  <div class="slot" id="w0">vertical<span class="dot"></span></div>
  <div class="slot" id="w1">horizontal<span class="dot"></span></div>
  <div class="slot" id="w2">square<span class="dot"></span></div>
  <div class="row"><div class="pill" id="pill">Vertical</div></div>
</div>
<script>
// Rolling word swap on the 8th notes: over 3 frames the old word rises 135 px linearly, blurs and fades,
// while the new one comes up from 300 px below (power2 out) out of a blur; the pill changes as it lands.
const tl = gsap.timeline({ paused: true });
const F = (n) => n / 30;
const UP = -135, FROM = 300;   // px the old word leaves by, px the new one starts below
const FRAMES = 3;              // length of a swap
const words = ["#w0", "#w1", "#w2"], labels = ["Vertical", "Horizontal", "Square"];
gsap.set(["#w1", "#w2"], { opacity: 0 });
[0.5, 1.5].forEach((t, k) => {
  const out = words[k], inn = words[k + 1];
  tl.fromTo(out, { filter: "blur(0px)" }, { y: UP, opacity: 0, filter: "blur(10px)", duration: F(FRAMES), ease: "none" }, t);
  tl.fromTo(inn, { y: FROM, filter: "blur(14px)" }, { y: 0, filter: "blur(0px)", duration: F(FRAMES), ease: "power2.out" }, t);
  tl.fromTo(inn, { opacity: 0 }, { opacity: 1, duration: F(FRAMES), ease: "none" }, t);
  tl.set(inn, { filter: "none" }, t + F(FRAMES));
  tl.set("#pill", { textContent: labels[k + 1] }, t + F(FRAMES));
});
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:14 من الفيديو

جسيمات

انفجار خطوط السرعة وضربة نابضية

عند الـ drop تنطلق 46 خطًا أبيض رفيعًا مرتبة في حلقة (نصف القطر 230-470 px، الطول 38-90 px، بحسب seed) إلى الخارج خلال 6 إطارات (1.5x و1.95x و2.35x و2.7x و3x من نصف قطرها) وتخفت. تظهر الكلمة بعد إطار واحد عند 2x وبعتامة 60%، ثم تتبع مقاييس لكل إطار: 1.16 و1.06 و0.93 و0.88 و0.88 و0.92 و0.97 و1.005 و1.024 و1.027 و1.02 و1.008 و1: ضربة مع تجاوز سفلي ونبضة نابضية صغيرة.

متى تُستخدم لحظة الـ drop في الموسيقى، وكشفٌ يجب أن يضرب بقوة مباشرة بعد الصمت.

عرض الكود

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>انفجار خطوط السرعة وضربة نابضية</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Mona+Sans:wdth,[email protected],200..900&display=block");
body { margin: 0; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #fb2d89; }
#lines { position: absolute; inset: 0; }
.spoke { position: absolute; left: 960px; top: 540px; width: 0; height: 0; }
.line { position: absolute; left: 0; top: -1.5px; height: 3px; border-radius: 2px; background: #fff; }
.word { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: "Mona Sans", sans-serif;
  font-weight: 900; font-stretch: 112.5%; font-size: 250px; letter-spacing: -0.067em; color: #fff; line-height: 1; }
.dot { display: inline-block; width: 0.2em; height: 0.2em; border-radius: 50%; margin-left: 0.04em; background: #1c0b5d; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1920" data-height="1080">
  <div id="lines"></div>
  <div class="word" id="w">designer<span class="dot"></span></div>
</div>
<script>
// The drop: a ring of speed lines bursts outward over 6 frames, then the word slams in at 2x, overshoots
// down to 0.88 and springs back through 1.027 to rest. Scales are given per frame.
const tl = gsap.timeline({ paused: true });
const F = (n) => n / 30, T0 = 0.5;   // the drop
let seed = 3; const rnd = () => ((seed = (seed * 16807) % 2147483647) / 2147483647);
const lines = document.getElementById("lines");
for (let i = 0; i < 46; i++) {
  const a = (i / 46) * 360 + (rnd() - 0.5) * 6, r0 = 230 + rnd() * 240, len = 38 + rnd() * 52;   // angle, start radius, length
  const sp = document.createElement("div"); sp.className = "spoke"; sp.style.transform = `rotate(${a}deg)`;
  const ln = document.createElement("div"); ln.className = "line"; ln.style.width = len + "px";
  sp.appendChild(ln); lines.appendChild(sp);
  gsap.set(ln, { x: r0, opacity: 0 });
  tl.set(ln, { opacity: 1 }, T0);
  tl.to(ln, { keyframes: [1.5, 1.95, 2.35, 2.7, 3].map((k, j) => ({ x: r0 * k, opacity: j < 3 ? 1 : j === 3 ? 0.4 : 0, duration: F(j < 4 ? 1 : 2) })), ease: "none" }, T0);
}
const S = [2.0, 1.16, 1.06, 0.93, 0.88, 0.88, 0.92, 0.97, 1.005, 1.024, 1.027, 1.02, 1.008, 1.0];   // scale per frame
gsap.set("#w", { opacity: 0, scale: S[0] });
tl.set("#w", { opacity: 0.6, scale: S[0] }, T0 + F(1));
tl.set("#w", { opacity: 1 }, T0 + F(2));
tl.to("#w", { keyframes: S.slice(1).map((s) => ({ scale: s, duration: F(1) })), ease: "none" }, T0 + F(1));
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

معاينة تقنية «جولة كاميرا فوق واجهة حيّة» — عند 0:15 من الفيديو

الكاميرا

جولة كاميرا فوق واجهة حيّة

تقع الواجهة كلها في طبقة عالم واحدة بحجم السكون، وتحرّكها حركة كاميرا (screen = T + s * world, origin 0 0): 1.77x على الدردشة، ثم العودة إلى 1، ثم 1.23x على الشاشة، ثم 1.77x على الدردشة والشاشة معًا، ثم العودة إلى اللقطة الواسعة. تستغرق الحركات 3-6 إطارات بمنحنى power3 in-out وتمويه 5 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;600&display=block");
body { margin: 0; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #faf9ff; }
#world { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; }
.win { position: absolute; left: 125px; top: 90px; width: 1670px; height: 940px; border-radius: 26px; background: #fff; box-shadow: 0 40px 90px rgba(28, 11, 93, 0.14); }
.chat { position: absolute; left: 15px; top: 15px; width: 438px; height: 910px; border-radius: 18px; background: #f0edff; }
.msg { position: absolute; left: 16px; height: 14px; border-radius: 7px; background: #6b6385; opacity: 0.45; }
.m1 { top: 80px; width: 380px; } .m2 { top: 108px; width: 260px; } .m3 { top: 240px; width: 340px; }
.bub { position: absolute; right: 16px; top: 150px; height: 56px; padding: 0 19px; border-radius: 14px; background: #fff; border: 1.5px solid #e9e4f2;
  font: 400 16px/53px "Inter", sans-serif; color: #1c0b5d; }
.main { position: absolute; left: 470px; top: 15px; width: 1185px; height: 910px; border-radius: 18px; background: #faf9ff; border: 1.5px solid #e9e4f2; }
.screen { position: absolute; left: 57px; top: 136px; width: 1069px; height: 635px; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 30px 70px rgba(28, 11, 93, 0.18); }
.side { position: absolute; left: 0; top: 0; width: 204px; height: 635px; background: #1c0b5d; }
.card { position: absolute; top: 94px; width: 253px; height: 113px; border-radius: 11px; border: 1.5px solid #e9e4f2; }
.c1 { left: 234px; } .c2 { left: 511px; } .c3 { left: 788px; }
.chart { position: absolute; left: 234px; top: 230px; width: 811px; height: 344px; border-radius: 11px; border: 1.5px solid #e9e4f2;
  background: linear-gradient(transparent 55%, rgba(251, 45, 137, 0.18)); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="6" data-width="1920" data-height="1080">
  <div id="world">
    <div class="win">
      <div class="chat"><div class="msg m1"></div><div class="msg m2"></div><div class="bub b1">"Bigger", "slower"</div><div class="msg m3"></div></div>
      <div class="main"><div class="screen"><div class="side"></div><div class="card c1"></div><div class="card c2"></div><div class="card c3"></div><div class="chart"></div></div></div>
    </div>
  </div>
</div>
<script>
// Camera tour over a live UI: one "world" layer, screen = T + s * world. Push in on the chat, pull back
// as the screen opens, push in on chat and screen together, end wide. Fast moves (3-6 frames) blur a little.
const tl = gsap.timeline({ paused: true });
const F = (n) => n / 30;
const world = document.getElementById("world");
gsap.set(world, { scale: 1, x: 0, y: 0, filter: "blur(0px)" });
function cam(f0, f1, s, x, y) {   // frames from-to, scale, translate x/y in px
  tl.to(world, { scale: s, x, y, duration: F(f1 - f0), ease: "power3.inOut" }, F(f0));
  if (f1 - f0 <= 6) {
    tl.to(world, { filter: "blur(5px)", duration: F((f1 - f0) / 2), ease: "power1.in" }, F(f0));
    tl.to(world, { filter: "blur(0px)", duration: F((f1 - f0) / 2), ease: "power1.out" }, F((f0 + f1) / 2));
  }
}
cam(14, 18, 1.774, -226.4, -149.3);   // into the chat
cam(51, 57, 1.0, 0, 0);               // back out
cam(57, 60, 1.225, -315, -147);       // onto the screen
cam(87, 90, 1.773, -226, -315);       // chat and screen together
cam(127, 133, 1.0, 0, 0);             // wide again
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> اصنع فيلم موشن بلقطة واحدة مدته 29 ثانية، بتنسيق أفقي 1920x1080 وبمعدل 60 إطارًا في الثانية. نقطة نهاية واحدة مكتوبة تتحول إلى سلسلة من الأشكال: خط، دائرة، كرة لامعة، عدسة زجاجية، كرة ترتد، سرب من الجسيمات وكرة أرضية. وينتهي الفيلم كنقطة نهاية للجملة الختامية، فيتصل الإطار الأخير مباشرة بالأول ويتكرر الفيلم في حلقة. لا توجد أي قطعات: كل شكل ينمو من الشكل السابق ولا تتوقف الكاميرا عن الحركة أبدًا. كل شيء مرسوم: الكتابة والخطوط والأشكال ثلاثية الأبعاد على صفحة فاتحة، بلا لقطات مصورة أو صور أو مواد جاهزة. الإحساس هادئ وتحريري، كالأشكال في كتاب مدرسي: صفحة شاحبة، ورسم وكتابة بحبر داكن عميق، ولون وردي واحد للتمييز. تجنب القطعات والألوان الإضافية والفوضى الزخرفية. يجب ألا يخرج أي نص أو شكل أو أثر عن حواف الإطار أو يعبر الترويسة. </direction> <structure> 1. من 0 إلى 2 ث، النقطة. مؤشر وردي بسمك 5 px يقف على الصفحة الفارغة. عند 0.5 ث يكتب نقطة بحجم 14 px تمامًا حيث ستكون نقطة الجملة الختامية (يمين المركز، منخفضة قليلًا)، ثم يخطو إلى اليمين ويتلاشى في 0.12 ث. تغوص الكاميرا في النقطة: يُستوفى مقياسها في فضاء لوغاريتمي من 14 px إلى قرص بحجم 130 px بينما تنزلق النقطة إلى المركز الدقيق، والاثنان على منحنى واحد sine.inOut من 0.53 إلى 1.98 ث. 2. من 2 إلى 4.5 ث، الخط. تتحرك النقطة بخطوات power2.inOut: إلى اليمين بنحو 390 px (2.0–2.5 ث)، بعيدًا إلى اليسار (2.5–3.5 ث)، عودة إلى المركز (3.5–4.0 ث)، ثم يمينًا مرة أخرى (4.0–4.5 ث). الخط الذي تتركه هو ببساطة المدى الذي زارته. وفي الأثناء تتراجع الكاميرا بسلاسة من المقياس 1 إلى 0.655. 3. من 4.5 إلى 6 ث، الدائرة. دورة واحدة power2.inOut مدتها 1 ث تحمل النقطة عكس عقارب الساعة حول دائرة كاملة ترسم نفسها خلفها. ثم تعود النقطة إلى المركز (5.5–6.0 ث). تظهر تدريجيًا تسميتان وردويتان صغيرتان مائلتان بخطوط إرشاد رفيعة: «bigger» فوق القطر (4.6 ث) و«slower» في أعلى يسار الدائرة (5.6 ث). 4. من 6 إلى 8.2 ث، الكرة. تميل الصفحة لتصبح أرضية: خلال 2.2 ث، ببداية ناعمة واستقرار طويل، تدور الكاميرا من المنظر العمودي من الأعلى إلى نحو 62° عن العمودي، وتدور نحو 20° في السمت وتقترب. يتحول القرص المسطح إلى كرة لامعة من الحبر العميق بظل ناعم يسقط إلى اليمين. تبقى التسميات منتصبة، مثبتة في أماكنها على الأرضية، وتغادر عند 7.8 ث. 5. من 8.2 إلى 11.2 ث، العدسة. يُمحى القطر من المركز إلى الخارج في 0.15 ث وتذوب الدائرة في بقع ضوضاء. تنكشف كتلة من ثمانية أسطر أحادية المسافة شعاعيًا على الأرضية خلف الكرة. أسطر للمثال (استبدلها بأسطرك): «Describe your idea»، «Tell the chat what to show.»، «The agent builds the animation.»، «No keyframes to hunt for.»، «Say what should change.»، «“Bigger”, “slower”, “another colour”:»، «the preview updates as you talk.»، «Refine in words, then export». تتحول الكرة إلى زجاج شفاف في 0.2 ث وتتدحرج يسارًا فوق الكلمات خلال 2.4 ث بمنحنى sine.inOut بينما تتبعها الكاميرا. تتلاشى كلمات الأرضية بنعومة قبل أن تصل إلى الحافتين اليسرى واليمنى للإطار. تسمية وردية «another colour» بجانب الكرة. عند 11.0 ث تتلاشى الكلمات وتعود الكرة من الحبر العميق. 6. من 11.2 إلى 16 ث، الكرة. تتراجع الكاميرا. تنحني الكرة لمدة 0.15 ث ثم ترتد إلى اليمين بمعامل ارتداد 0.75: رحلات طيران مدتها 0.98 ث × 0.75ⁿ، فتستقر تمامًا عند 16 ث. تترك مسارًا وردي منقطًا، وتبقى قمة القوس الأول تحت الترويسة. تتبع الكاميرا الكرة وتقترب كلما صغرت الارتدادات. تقف تسمية «sound effects» فوق القوس الثاني وتختفي قبل أن تصل إلى حافة الإطار. 7. من 16 إلى 20.6 ث، السرب. تُمحى الكرة من الأعلى إلى الأسفل خلال 0.6 ث بينما تغادر 8,192 نقطة صغيرة من الحبر العميق سطحها بالترتيب نفسه، وترتفع وتتجمع كسرب. تشكل سحابة كثيفة تتمدد وتدور وتنطوي إلى أهلّة، مع ظل ناعم واسع على الأرضية. التسمية «shapes». 8. من 20.6 إلى 23.4 ث، العالم. تهبط النقاط، متتابعة خلال 0.3 ث، على يابسة كرة أرضية، ثم تظهر الكرة تدريجيًا. يحصل المحور الوردي على التسمية «vertical». تدور الكرة الأرضية من الغرب إلى الشرق، وتواجه إفريقيا الكاميرا عند 22 ث. 9. من 23.2 إلى 25.1 ث، العودة إلى الصفحة. تنكمش الكرة الأرضية وتغمق لتصبح القرص المسطح بينما يتسطح المدار عائدًا إلى المنظر العمودي من الأعلى. ثم تتراجع الكاميرا بغوص معكوس (sine.inOut، نحو 1.1 ث) حتى يعود القرص إلى نقطة النهاية بحجم 14 px. 10. من 25 إلى 29 ث، نقطة النهاية. تُكتب الجملة الختامية حرفًا واحدًا في كل إطار بالمؤشر الوردي، في سطرين ينتهيان بالنقطة كنقطة نهايتهما. مثال: «Describe the video.» ثم «The agent animates it» (استبدلها بجملتك الخاصة من سطرين). عند 26.08 ث يقفز المؤشر فوق النقطة ويومض بتردد 1 هرتز حتى النهاية، بينما تستقر الجملة كلها بنسبة 3% نحو النقطة. يُكتب التعليق «MP4 export» عند 26 ث. عند 26.6 ث يظهر تدريجيًا تذييل يحمل دعوتك إلى اتخاذ إجراء وعنوان موقعك، في الوسط أسفل الإطار، مثل «TRY IT FREE · [YOUR ADDRESS]». يطابق الإطار الأخير الإطار الأول لكي يتكرر الفيلم. تبدأ التعليقات على موازين الموسيقى (استبدلها بأزواجك القصيرة من تسمية وعبارة): - «IDEAS in motion» عند 0.6 ث - «CHAT instead of a timeline» عند 2 ث - «EDIT in words» عند 4 ث - «3D effects» عند 6 ث - «LIVE preview» عند 8 ث - «MUSIC to the rhythm» عند 12 ث - «NO keyframes» عند 16 ث - «FONTS for every script» عند 21 ث، تختفي عند 24 ث - «MP4 export» عند 26 ث </structure> <composition> لوحة الألوان: - الصفحة #FAF9FF، مع تعتيم لافندري ناعم جدًا نحو الجانبين (حبر عميق بنحو 5% عند الحواف). - الحبر العميق #1C0B5D لكل الرسم والنصوص الداكنة. - الوردي #FB2D89 كلون التمييز الوحيد، للتسميات والمؤشرات والأثر المنقط ومحور الكرة الأرضية. - الرمادي الخافت #6B6385 للترويسة والتذييل الصغيرين. الخطوط: - Spectral عادي للجملة الختامية الكبيرة. - Spectral مائل لعبارات التعليقات وتسميات الأشكال. - Spectral شبه عريض بحروف كبيرة صغيرة لتسميات التعليقات والترويسات والتذييل. - JetBrains Mono للكلمات المطبوعة على الأرضية. عناصر الإطار الثابتة طوال الفيلم: أعلى اليسار «[YOUR BRAND]» وأعلى اليمين وصف قصير مثل «YOUR AI MOTION DESIGNER» (استبدله بوصفك). كلاهما بحروف كبيرة شبه عريضة بحجم 21 px وتباعد 0.14em، باللون الخافت، على بعد 80 px من الجانبين. تحت كل شكل يوجد تعليق في الوسط بحجم ثابت: تسمية وردية بحروف كبيرة صغيرة، ثم عبارة مائلة. تسميات الأشكال بخط وردي مائل صغير مع خطوط إرشاد رفيعة. الجملة الختامية سطران من Spectral بحجم 129 px يبدآن من الموضع x نفسه. الكتلة متمركزة أفقيًا، ومركزها العمودي أعلى قليلًا من منتصف الإطار. قِس السطرين أولًا وضع النقطة حيث تنتهي الكتلة المتمركزة، حتى تكتب البداية نقطتها في ذلك المكان بالضبط. أبقِ كل تعليق وتسمية وكلمة أرضية وأثر داخل الإطار وبعيدًا عن الترويسة. </composition> <techniques> - تُكتب التعليقات من اليسار بمعدل 20 حرفًا في الثانية، مع مؤشر وردي رفيع يبقى 0.35 ث بعد الحرف الأخير. ويُمحى كل تعليق حرفًا واحدًا في كل إطار قبل دخول التعليق التالي مباشرة. - سمك الخطوط نحو 12 px بحافة حبر خشنة قليلًا. وكل خط يتحرك على إيقاع. - لكرة الحبر العميق انعكاسات استوديو: صندوق ضوء ناعم كبير أعلى اليسار، وشريط رفيع على اليمين، والأرضية في نصفها السفلي. - تنكسر الأشعة في الكرة الزجاجية داخلة وخارجة من الكرة وتعكس الأرضية، فتظهر الكلمات مقلوبة بداخلها. ويحمل ظلها كاوستيك ساطعًا. - تنضغط الكرة المرتدة وتتمدد قليلًا عند كل ملامسة. ويترك أثرها نقطة وردية كل 1/30 ث. - للكرة الأرضية قارات من نقاط نصف تونية بحبر عميق على كرة شاحبة مضاءة من أعلى اليسار. وفيها شبكة إحداثيات وردية خافتة كل 30°، وإطار حاد، ومحور وردي مائل 23.4° يبرز من القطبين. - تبقى التسميات منتصبة ومثبتة في أماكنها على الأرضية بينما تدور الكاميرا. - المنحنيات: sine.inOut للغوص ودحرجة الزجاج، وpower2.inOut لخطوات الخط ودورة الدائرة، وبداية ناعمة مع استقرار طويل للإمالة. - يُستوفى مقياس الغوص في فضاء لوغاريتمي ليبدو التكبير منتظمًا. </techniques> <music> استخدم 120 BPM، بنبضة كل نصف ثانية، مع التعليقات على الموازين والخطوط على النبضات. اصنع خلفية synthwave/chiptune مشرقة ومفعمة بالحيوية مدتها 29 ث بالضبط: - جرس ناعم واحد عند كتابة نقطة النهاية - أربيجيو سريع من 2 ث - بادات دافئة وتكتكة ناعمة من 6 ث - هبوط قصير عند 12 ث - رايزر نحو الجزء الأكثر حماسًا عند 16 ث، مع طبول وباس دافعين تحت السرب والكرة الأرضية - يتوقف الإيقاع نحو 23 ث - خاتمة خفيفة مع باد ناعم تحت الكتابة، تتلاشى في آخر نصف ثانية استهدف نحو -14 LUFS، مع ذروة حقيقية أقل من -1 dBTP. </music> <sound> مؤثرات صوتية فقط لما يحدث في الصورة، تحت الموسيقى: - نقرة مفتاح وجرس عند كتابة نقطة النهاية - وووش هوائي عند الغوص - تكات خفيفة عند كل خط - وووش منخفض عند الإمالة - رنين زجاجي عندما تتحول الكرة إلى زجاج - دقات ناعمة عند كل هبوط، تزداد هدوءًا - رايزر وارتطام ناعم عند 16 ث - وووشات عند هبوط النقاط وعند عودة الكرة الأرضية إلى الصفحة - نقرات مفاتيح سريعة للجملة الختامية - نقرة واحدة عند نقطة النهاية الأخيرة بلا تعليق صوتي. </sound> <references> حلقة تحول سلسة بلقطة واحدة، على طريقة شكل متحرك في كتاب مدرسي أو شرح تحريري أنيق: خط ذو زوائد هادئ، ولون تمييز واحد، وأشكال تتحول إلى بعضها بدل القطع. </references>

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

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

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

معاينة الموجّه «ريل موشن ديزاين متزامن مع الإيقاع»

ريل موشن ديزاين متزامن مع الإيقاع

<direction> اصنع ريل موشن ديزاين مدته 15 ثانية لـ [your brand]، بقياس 1920x1080 أفقي وبمعدل 60 إطارًا في الثانية، مرسومًا بالكامل: نصوص متحركة وأشكال وجسيمات وسحابة نقاط ثلاثية الأبعاد ولوحة معلومات، دون أي لقطات مصورة. الفكرة: ريل منتج سريع تقع فيه كل نقلة مشهد على إيقاع هاوس بسرعة 128.57 نبضة في الدقيقة. النبضة الواحدة تساوي 28 إطارًا بالضبط (0.4667 ثانية)، وكل قطع يقع على هذه الشبكة، وتقع الضربة الكبيرة الأولى عند 1.867 ثانية (النبضة 4). يتناوب المظهر بين مشاهد شبه سوداء ومشاهد فاتحة بلون أبيض لافندري، مع الوردي الزاهي كلون مميز رئيسي بالإضافة إلى البنفسجي والبرتقالي. تستخدم العناوين خطًا غروتسك ثقيلًا، والتعليقات خطًا أحادي المسافات، والعبارة الرئيسية خطًا سيريف مائلًا. يغطي إطار بأسلوب البث التلفزيوني الريل كله حتى الخلل الأخير. استخدم رمز شعاري في البطاقة الختامية واستبدل كل نص بين علامات الاقتباس بكلماتي، مع إبقاء كل منها بطول مماثل تقريبًا ليثبت التخطيط. تجنب الصور وللقطات الأرشيفية والتلاشيات الناعمة العامة وكل ما ينحرف عن شبكة الإيقاع. </direction> <structure> 1. 0–1.85 ثانية، مقدمة على شبه أسود. ينمو خط مسطرة رفيع (بعرض 1440 بكسل، فاتح بشفافية 22 %) من مركزه عند 0.34 ثانية (expo.out، 0.65 ثانية)، ثم تظهر 13 علامة من اليسار إلى اليمين، بفارق إطار واحد. تسقط كرة وردية قطرها 80 بكسل من أعلى اليسار وتنجرف نحو المركز (power2.out، 1.25 ثانية). ترتد ثلاث مرات على المسطرة، وتنضغط عند كل ارتطام وتتمدد في كل سقوط، مع قليل من تمويه الحركة عند السرعة. يُكتب سطر أحادي المسافات تحت المسطرة، حرفًا واحدًا كل 1.56 إطار، يتبعه مؤشر كتلة وامض (مثال "no keyframes."، استبدله بنصك). عند 1.28 ثانية تنضغط الكرة إلى 0.8x، ثم تنتفخ على منحنى expo-in حتى تملأ الإطار بالوردي عند 1.82 ثانية. 2. 1.82–3.70 ثانية، أربع كلمات، كلمة لكل نبضة. تستقر كل كلمة ثقيلة بحجم 300 بكسل على خلفيتها الخاصة مع سطر تعليق أحادي المسافات تحتها (أمثلة "// describe your idea"، "// live preview"، "// refine in words"، "// mp4 export"). خلفها، يتحرك صفان من نسخ الكلمات الأربع المحددة بحجم 205 بكسل في الأعلى والأسفل بسرعة 760 بكسل/ث في اتجاهين متعاكسين. تُرسم الحدود بلون نص المشهد بشفافية 7–14 %. - الكلمة 1 (مثال "DESCRIBE")، نيلي داكن على وردي: تهبط الكلمة من مقياس 1.39x بمنحنى expo.out (0.33 ثانية) بينما تظهر حروفها بفارق 0.03 ثانية مع إزالة سريعة للتمويه. - الكلمة 2 (مثال "PREVIEW")، فاتحة على شبه أسود عند 2.333 ثانية: تنغلق المسافة بين الحروف من 150 بكسل إلى ضيقة بمنحنى expo.out (0.45 ثانية)، مع ظهور تدريجي خلال 3 إطارات. - الكلمة 3 (مثال "REFINE")، بنفسجية على الصفحة الفاتحة عند 2.8 ثانية: ترتفع الحروف 340 بكسل من خلف خط قناع يقع 40 بكسل تحت خط الأساس بمنحنى back.out(2.2)، 0.3 ثانية لكل حرف، بفارق 0.035 ثانية. - الكلمة 4 (مثال "EXPORT")، فاتحة على بنفسجي عند 3.267 ثانية: تظهر الحروف فجأة على نوتات 1/32 (بفارق 3.5 إطار)، كل حرف من 0.6x إلى قفزة 1.13x بارتفاع 50 بكسل، ثم يستقر. 3. 3.46–4.02 ثانية، مسح بالأشرطة. ثمانية أشرطة عمودية بعرض 240 بكسل، متناوبة بين الوردي والصفحة الفاتحة، ترتفع من الأسفل (power2.inOut، 0.18 ثانية، بفارق 0.7 إطار، الأيسر أولًا). تثبت، ثم تواصل الصعود وتخرج، كاشفة المشهد التالي من الأسفل. 4. 3.70–5.60 ثانية، أشكال على شبه أسود. شبكة 120 بكسل من مربعات صغيرة مستديرة باهتة (خُمسها محدد بخطوط) مع علامات زائد صغيرة بينها. تنطلق موجة من المركز عند كل نبضة (3.73 و4.2 و4.67 و5.13 ثانية) بسرعة 2000 بكسل/ث. حيثما تمر جبهتها، تكبر كل خلية من 42 إلى 74 بكسل، وتستدير نحو دائرة، وتدور 38 درجة وتتحول إلى الوردي. تكشف الموجة الأولى الشبكة، وتدور الشبكة ببطء عكس عقارب الساعة، بسرعة متزايدة. بعد الموجة الأخيرة تفرغ الخلايا وتتلاشى عند 5.47 ثانية. 5. 5.55–7.42 ثانية، جسيمات. تظهر نقطة وميض بيضاء مع حلقة صدمة رفيعة عند 5.62 ثانية، ثم تنفجر 7000 مربع صغير من المركز. تتجمع في كلمة ضخمة واحدة بحجم 590 بكسل (مثال "IDEA") ملونة على عرضها من البرتقالي إلى اللافندر إلى البنفسجي، وتتلألأ بمقدار بكسل. من 7.0 ثانية تنساب نحو اليمين مع خطوط أثر، يسار الكلمة أولًا. يوجد خلفها توهج شعاعي وردي ناعم. 6. 7.42–9.45 ثانية، ثلاثي الأبعاد على خلفية شعاعية نيلية داكنة. كرة فيبوناتشي من 1700 نقطة (نصف قطر 362 بكسل) تدور ببطء فوق أرضية منظورية من خطوط بنفسجية رفيعة تزحف صفوفها نحو المشاهد. النقاط وردية أو بنفسجية، أكبر وأسطع في المقدمة. من 8.12 ثانية تنتقل كل نقطة إلى مكانها على عقدة طورس (2,3) (cubic in-out، تأخيرات عشوائية حتى 0.16 ثانية)، وتواصل العقدة الدوران. 7. 9.08–9.65 ثانية، مسح ثانٍ بالأشرطة مثل المشهد 3، بالبنفسجي والوردي والصفحة الفاتحة. 8. 9.27–11.1 ثانية، لوحة معلومات على الصفحة الفاتحة مع خطوط إرشاد عمودية باهتة. - الخطوات: ثلاثة صفوف من أرقام الخطوات الثقيلة بحجم 180 بكسل تعد تصاعديًا بمنحنى expo.out ("01" و"02" و"03"، والثالث وردي) مع تعليقات أحادية المسافات (مثال "PICK A TEMPLATE"). يرتفع كل صف داخل صندوقه المقصوص، بفارق 0.08 ثانية. - البطاقة: بطاقة بيضاء (880x740، زوايا 26 بكسل، ظل نيلي ناعم) ترتفع 90 بكسل (power3.out، 0.45 ثانية). تحمل عنوانًا غامقًا بحروف صغيرة، وحبة صغيرة "LIVE"، وحلقة تمتلئ بمنحنى power3.out مع تسمية قصيرة بداخلها. - المخطط: أربعة عشر عمودًا برتقاليًا تنمو من القاعدة بفارق 0.031 ثانية، والأخير وردي صلب. يرسم خط بنفسجي نفسه فوقها بمنحنى sine.inOut (0.72 ثانية)، مع نقطة وهالة وعلامة داكنة تركب على رأسه (مثال "No keyframes"). 9. 10.96–11.45 ثانية، مسح بالأشرطة الأفقية. ثمانية أشرطة أفقية، متناوبة بين شبه الأسود والوردي، تجتاح من اليسار (power3.inOut، 0.2 ثانية، بفارق إطار واحد، العلوي أولًا) وتواصل الخروج نحو اليمين. 10. 11.07–13.07 ثانية، عبارة رئيسية على شبه أسود. أربع حزم من 28 خطًا بحجم الشعرة تتدفق عبر الإطار كأشرطة، ممزوجة بشكل تجميعي: وردي إلى برتقالي في الأعلى، ثم وردي إلى بنفسجي، وبنفسجي، وبنفسجي إلى وردي في الأسفل. تدخل عبارة من سطرين بخط سيريف مائل بحجم 290 بكسل حرفًا بحرف. يتحرك كل حرف 36 بكسل إلى الأعلى ويزول عنه التمويه خلال 0.16 ثانية، بفارق 0.02 ثانية في السطر الأول و0.035 ثانية في السطر الثاني. السطر الأول فاتح ويبدأ عند x 334 (مثال "Ideas in")؛ والسطر الثاني وردي وينتهي عند x 1438 (مثال "motion."). 11. 12.73–13.07 ثانية، خلل. تقفز شرائح من النص جانبيًا، ينعكس الإطار مرتين، تومض كتل صغيرة بنفسجية وصفراء ووردية، وينقسم النص إلى وردي وتركوازي. يختفي إطار البث وعداداته. 12. 13.07–15.0 ثانية، بطاقة ختامية على شبه أسود. - وميض باهت يتلاشى (0.26 ثانية). - شعار نصي ثقيل بحجم 260 بكسل ("[your brand]") يرتفع حرفًا بحرف من خلف خط أساسه (back.out(1.6)، 0.32 ثانية، بفارق 0.05 ثانية). - يسقط رمزي الشعاري من الأعلى مثل كرة المقدمة، وينضغط عند الهبوط عند 13.51 ثانية ويستقر كنقطة نهاية للشعار النصي. - يُرسم خط رفيع تحت المجموعة (power3.out، 0.3 ثانية). - يُفكّ ترميز سطر أحادي المسافات واسع التباعد تحته، من أحرف وردية مبعثرة إلى أحرف فاتحة (13.76–14.6 ثانية). - تظهر دعوة إلى اتخاذ إجراء بخط سيريف مائل وردي بتلاشٍ عند 14.33 ثانية (مثال "try it free."). - يظهر صف خافت من أربع ميزات قصيرة بتلاشٍ في الأسفل. أبقِ البطاقة الختامية حتى 15 ثانية. </structure> <composition> - لوحة الألوان: - شبه الأسود #0D0B1E للخلفيات الداكنة. - النيلي العميق #1C0B5D للنص الداكن والمشهد ثلاثي الأبعاد. - الصفحة الفاتحة #FAF9FF للخلفيات الفاتحة والنص الفاتح. - اللافندر #F0EDFF للوحات الناعمة. - الباهت #6B6385 للتعليقات و#E9E4F2 للخطوط. - الألوان المميزة: الوردي الرئيسي #FB2D89، والبنفسجي الثاني #7C6CF2، والبرتقالي الدافئ #FE9117، بالإضافة إلى الأبيض. - الأصفر #FFD23F والتركوازي #2DD4B0 فقط كبقع للخلل. - إذا أعطيتك ألوان علامتي التجارية، فاستبدلها بحسب الدور. - الخطوط: Roboto Flex بوزن 900 مع تباعد ضيق (-0.035 em) لكل العناوين. JetBrains Mono للإطار والتعليقات وأسطر الملاحظات. Instrument Serif Italic للعبارة ذات السطرين والدعوة إلى اتخاذ إجراء. - تظليل جانبي ناعم، أغمق فقط عند الحافتين اليسرى واليمنى: نحو -8 % عند منتصف الحافة و-12 % في الزوايا. - إطار بأسلوب البث التلفزيوني فوق كل شيء حتى الخلل: - أقواس زوايا بحجم 26 بكسل. - عنوان في أعلى اليسار (مثال "[YOUR BRAND] / YOUR TAGLINE"). - رمز زمني جارٍ في أعلى اليمين (00:00:SS:FF بمعدل 60 إطارًا في الثانية). - اسم الفصل الحالي في أسفل اليسار. - عداد إطارات "NNN / 900" مع شريط تقدم بعرض 300 بكسل في أسفل اليمين. - كل جزء فاتح بشفافية 0.9 في وضع المزج exclusion، فيصبح داكنًا على المشاهد الفاتحة وملونًا على الوردي أو البنفسجي. يظهر الإطار بتلاشٍ عند 0.3 ثانية. </composition> <techniques> - كل نقلة مشهد تقع على شبكة الإيقاع ذات 28 إطارًا. تتداخل المشاهد والمسحات بضعة إطارات، فلا يكون أي إطار فارغًا. - نوّع الانتقالات: الكرة المنتفخة إلى الخلفية التالية، قطع لوني حاد بين الكلمات الأربع، مسحات أشرطة عمودية، مسح أشرطة أفقي، وميض مع حلقة صدمة، وخلل بفصل RGB إلى البطاقة الختامية. - امنح الكرة والرمز الشعاري حركة فيزيائية: انضغاط عند الارتطام، وتمدد أثناء السقوط، وتمويه حركة خفيف عند السرعة. - استخدم دخولًا حرفًا بحرف في كل مكان، لكل كلمة منحناها الخاص (هبوط expo.out، وارتفاع back.out من قناع، وظهور فجائي على نوتات 1/32)، مع زوال التمويه عند وصول الحروف. - أبقِ كل شيء حادًا وبصيغة متجهية: الجسيمات والنقاط والخطوط صغيرة جدًا وحادة، وتبقى التوهجات ناعمة وخلف النص. </techniques> <music> اصنع خلفية هاوس أصلية بسرعة 128.57 نبضة في الدقيقة، مدتها 15 ثانية بالضبط، موضوعة على شبكة الإيقاع. - المقدمة: باد هوائي مع نقرات فقاعية. - من الضربة عند 1.867 ثانية: الإيقاع الكامل، مع طبلة أربع على الأرض وتصفيق وهايهات وباس بسايدتشين. - النهاية: رايزر وخلل نحو ضربة نهائية كبيرة واحدة عند 13.07 ثانية، ثم يرن وتر الختام حتى 15 ثانية. </music> <sound> فوق الخلفية، أضف ضربات مؤلفة للقطع: - رايزر نحو بوم عند الفيل في 1.867 ثانية - ووشات قصيرة تبلغ ذروتها عند كل قطع كلمة وكل مسح - نقرات ناعمة على موجات الأشكال - بوم صغير وتكة زجاجية عند وميض الجسيمات - ووش أثر عند مغادرة الجسيمات - سقوط ساب نحو المشهد ثلاثي الأبعاد - رايزر وتكات خلل رقمية نحو البوم النهائي عند 13.07 ثانية - جرس عند هبوط الرمز الشعاري عند 13.51 ثانية بدون تعليق صوتي. اضبط المزج على نحو -14 LUFS، وذروة حقيقية أقل من -1 dBTP. </sound> <references> ريل إطلاق منتج تقني على غرار ريلات العلامات التجارية المتحركة الأنيقة: طبقة HUD بأسلوب البث التلفزيوني، وطباعة حركية، وجسيمات توليدية، وسحابة نقاط ثلاثية الأبعاد دوارة، ولوحة معلومات واجهة نظيفة. </references>

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

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

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

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

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