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

AR

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

Simple Motion

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

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

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

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

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

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

الفكرة

اصنع ريل موشن ديزاين مدته 15 ثانية لـ [your brand]، بقياس 1920x1080 أفقي وبمعدل 60 إطارًا في الثانية، مرسومًا بالكامل: نصوص متحركة وأشكال وجسيمات وسحابة نقاط ثلاثية الأبعاد ولوحة معلومات، دون أي لقطات مصورة. الفكرة: ريل منتج سريع تقع فيه كل نقلة مشهد على إيقاع هاوس بسرعة 128.57 نبضة في الدقيقة. النبضة الواحدة تساوي 28 إطارًا بالضبط (0.4667 ثانية)، وكل قطع يقع على هذه الشبكة، وتقع الضربة الكبيرة الأولى عند 1.867 ثانية (النبضة 4). يتناوب المظهر بين مشاهد شبه سوداء ومشاهد فاتحة بلون أبيض لافندري، مع الوردي الزاهي كلون مميز رئيسي بالإضافة إلى البنفسجي والبرتقالي. تستخدم العناوين خطًا غروتسك ثقيلًا، والتعليقات خطًا أحادي المسافات، والعبارة الرئيسية خطًا سيريف مائلًا. يغطي إطار بأسلوب البث التلفزيوني الريل كله حتى الخلل الأخير. استخدم رمز شعاري في البطاقة الختامية واستبدل كل نص بين علامات الاقتباس بكلماتي، مع إبقاء كل منها بطول مماثل تقريبًا ليثبت التخطيط. تجنب الصور وللقطات الأرشيفية والتلاشيات الناعمة العامة وكل ما ينحرف عن شبكة الإيقاع.

البنية

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 ثانية.
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.46–4.02 ثانية، مسح بالأشرطة. ثمانية أشرطة عمودية بعرض 240 بكسل، متناوبة بين الوردي والصفحة الفاتحة، ترتفع من الأسفل (power2.inOut، 0.18 ثانية، بفارق 0.7 إطار، الأيسر أولًا). تثبت، ثم تواصل الصعود وتخرج، كاشفة المشهد التالي من الأسفل.
3.70–5.60 ثانية، أشكال على شبه أسود. شبكة 120 بكسل من مربعات صغيرة مستديرة باهتة (خُمسها محدد بخطوط) مع علامات زائد صغيرة بينها. تنطلق موجة من المركز عند كل نبضة (3.73 و4.2 و4.67 و5.13 ثانية) بسرعة 2000 بكسل/ث. حيثما تمر جبهتها، تكبر كل خلية من 42 إلى 74 بكسل، وتستدير نحو دائرة، وتدور 38 درجة وتتحول إلى الوردي. تكشف الموجة الأولى الشبكة، وتدور الشبكة ببطء عكس عقارب الساعة، بسرعة متزايدة. بعد الموجة الأخيرة تفرغ الخلايا وتتلاشى عند 5.47 ثانية.
5.55–7.42 ثانية، جسيمات. تظهر نقطة وميض بيضاء مع حلقة صدمة رفيعة عند 5.62 ثانية، ثم تنفجر 7000 مربع صغير من المركز. تتجمع في كلمة ضخمة واحدة بحجم 590 بكسل (مثال "IDEA") ملونة على عرضها من البرتقالي إلى اللافندر إلى البنفسجي، وتتلألأ بمقدار بكسل. من 7.0 ثانية تنساب نحو اليمين مع خطوط أثر، يسار الكلمة أولًا. يوجد خلفها توهج شعاعي وردي ناعم.
7.42–9.45 ثانية، ثلاثي الأبعاد على خلفية شعاعية نيلية داكنة. كرة فيبوناتشي من 1700 نقطة (نصف قطر 362 بكسل) تدور ببطء فوق أرضية منظورية من خطوط بنفسجية رفيعة تزحف صفوفها نحو المشاهد. النقاط وردية أو بنفسجية، أكبر وأسطع في المقدمة. من 8.12 ثانية تنتقل كل نقطة إلى مكانها على عقدة طورس (2,3) (cubic in-out، تأخيرات عشوائية حتى 0.16 ثانية)، وتواصل العقدة الدوران.
9.08–9.65 ثانية، مسح ثانٍ بالأشرطة مثل المشهد 3، بالبنفسجي والوردي والصفحة الفاتحة.
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").

10.96–11.45 ثانية، مسح بالأشرطة الأفقية. ثمانية أشرطة أفقية، متناوبة بين شبه الأسود والوردي، تجتاح من اليسار (power3.inOut، 0.2 ثانية، بفارق إطار واحد، العلوي أولًا) وتواصل الخروج نحو اليمين.
11.07–13.07 ثانية، عبارة رئيسية على شبه أسود. أربع حزم من 28 خطًا بحجم الشعرة تتدفق عبر الإطار كأشرطة، ممزوجة بشكل تجميعي: وردي إلى برتقالي في الأعلى، ثم وردي إلى بنفسجي، وبنفسجي، وبنفسجي إلى وردي في الأسفل. تدخل عبارة من سطرين بخط سيريف مائل بحجم 290 بكسل حرفًا بحرف. يتحرك كل حرف 36 بكسل إلى الأعلى ويزول عنه التمويه خلال 0.16 ثانية، بفارق 0.02 ثانية في السطر الأول و0.035 ثانية في السطر الثاني. السطر الأول فاتح ويبدأ عند x 334 (مثال "Ideas in")؛ والسطر الثاني وردي وينتهي عند x 1438 (مثال "motion.").
12.73–13.07 ثانية، خلل. تقفز شرائح من النص جانبيًا، ينعكس الإطار مرتين، تومض كتل صغيرة بنفسجية وصفراء ووردية، وينقسم النص إلى وردي وتركوازي. يختفي إطار البث وعداداته.
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 ثانية.

التكوين

لوحة الألوان:
- شبه الأسود #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 ثانية.

التقنيات

كل نقلة مشهد تقع على شبكة الإيقاع ذات 28 إطارًا. تتداخل المشاهد والمسحات بضعة إطارات، فلا يكون أي إطار فارغًا.
نوّع الانتقالات: الكرة المنتفخة إلى الخلفية التالية، قطع لوني حاد بين الكلمات الأربع، مسحات أشرطة عمودية، مسح أشرطة أفقي، وميض مع حلقة صدمة، وخلل بفصل RGB إلى البطاقة الختامية.
امنح الكرة والرمز الشعاري حركة فيزيائية: انضغاط عند الارتطام، وتمدد أثناء السقوط، وتمويه حركة خفيف عند السرعة.
استخدم دخولًا حرفًا بحرف في كل مكان، لكل كلمة منحناها الخاص (هبوط expo.out، وارتفاع back.out من قناع، وظهور فجائي على نوتات 1/32)، مع زوال التمويه عند وصول الحروف.
أبقِ كل شيء حادًا وبصيغة متجهية: الجسيمات والنقاط والخطوط صغيرة جدًا وحادة، وتبقى التوهجات ناعمة وخلف النص.

الموسيقى

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

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

الصوت

فوق الخلفية، أضف ضربات مؤلفة للقطع:

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

المراجع

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

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

رمز شعارك، مربع الشكل مثل أيقونة التطبيق. يسقط على البطاقة الختامية ويصبح نقطة نهاية الشعار النصي.

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

معاينة تقنية «ارتداد squash-and-stretch ينتفخ نحو المشهد التالي» — عند 0:01 من الفيديو

أشكال

ارتداد squash-and-stretch ينتفخ نحو المشهد التالي

تسقط كرة بقطر 80 px من أعلى اليسار، وتنساب نحو المركز بمنحنى power2.out (1.25 ث) وترتد ثلاث مرات على خط مسطرة، مع squash عند كل اصطدام وstretch في كل سقوط وتمويه خفيف عند السرعة العالية. تنضغط إلى 0.8x كتمهيد (anticipation)، ثم تنتفخ بمنحنى expo-in (0.46 ث) حتى تغطي الإطار، فيصبح لونها خلفية المشهد التالي.

متى تُستخدم لافتتاح ريل بإيقاع يعرض أحد مبادئ التحريك ويسلّم إلى العنوان الأول دون قطع.

عرض الكود

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ارتداد squash-and-stretch ينتفخ نحو المشهد التالي</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=Roboto+Flex:opsz,[email protected],100..1000&family=JetBrains+Mono:wght@400;700&family=Instrument+Serif:ital@1&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0d0b1e; }
#ruler { position: absolute; left: 240px; top: 719px; width: 1440px; height: 2px; background: rgba(250,249,255,0.22); }
#ball { position: absolute; inset: 0; }
#next { background: #fb2d89; display: flex; align-items: center; justify-content: center; }
#next span { font: 900 200px/1 'Roboto Flex', sans-serif; color: #1c0b5d; letter-spacing: -7px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1920" data-height="1080">
  <div id="ruler"></div>
  <canvas id="ball" width="1920" height="1080"></canvas>
  <div id="next" class="clip" data-start="1.8" data-duration="2.2"><span>"Next title"</span></div>
</div>
<script>
const ctx = document.getElementById("ball").getContext("2d");
const FLOOR = 679;                       // centre height when the ball rests on the ruler
const BOUNCES = [[0.0, 0.467, -260], [0.467, 0.933, 381], [0.933, 1.167, 591], [1.167, 1.283, 659]]; // [from, to, apex y]
const ease3 = (p) => 1 - Math.pow(1 - p, 3);
function y(t) {
  if (t < 0.467) { const p = Math.max(0, t / 0.467); return -260 + (FLOOR + 260) * p * p * p * p; } // the fall: power3.in
  for (const [a, b, apex] of BOUNCES.slice(1)) if (t < b) { const m = (a + b) / 2, h = FLOOR - apex;
    return t < m ? FLOOR - h * ease3((t - a) / (m - a)) : apex + h * Math.pow((t - m) / (b - m), 2); }
  return FLOOR;
}
function draw(t) {
  ctx.clearRect(0, 0, 1920, 1080);
  const x = 714 + 246 * ease3(Math.min(1, t / 1.25));       // drift to the centre, power2.out
  const v = (y(t + 1 / 120) - y(t - 1 / 120)) * 60;          // vertical speed, px per frame
  let sx = 1, sy = 1, size = 80;
  const nearFloor = FLOOR - y(t) < 30 && t < 1.3;
  if (nearFloor) { sx = 1.25; sy = 0.62; } else if (Math.abs(v) > 4) { sx = 0.82; sy = 1.2; }   // squash on impact, stretch when fast
  if (t > 1.28) size = t < 1.37 ? 80 - 16 * (t - 1.28) / 0.09 : Math.max(64, 64.9 + 1071 * Math.pow(2, 10 * ((t - 1.303) / 0.464 - 1))); // anticipation, then expo-in swell
  ctx.filter = Math.abs(v) > 6 ? "blur(3px)" : "none";
  ctx.fillStyle = "#fb2d89";
  ctx.beginPath(); ctx.ellipse(t > 1.28 ? 960 : x, t > 1.28 ? 689 : y(t), size * sx / 2, size * sy / 2, 0, 0, Math.PI * 2); ctx.fill();
}
const tl = gsap.timeline({ paused: true });
tl.fromTo("#ruler", { scaleX: 0 }, { scaleX: 1, duration: 0.655, ease: "expo.out" }, 0.344);
tl.to({}, { duration: 4 }, 0);
tl.eventCallback("onUpdate", () => draw(tl.time()));
draw(0);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

معاينة تقنية «كلمة واحدة لكل إيقاع، ولكل منها دخولها الخاص» — عند 0:02 من الفيديو

الطباعة

كلمة واحدة لكل إيقاع، ولكل منها دخولها الخاص

تتبدل أربع كلمات ثقيلة بحجم 300 px على إيقاعات متتالية (28 إطارًا عند 128.57 BPM)، لكل منها لون خلفية خاص. تهبط الأولى من 1.39x بمنحنى expo.out (0.33 ث) بينما تظهر حروفها بفارق 0.03 ث؛ وتُغلق الثانية التباعد (tracking) من 150 px إلى -0.035 em بمنحنى expo.out (0.45 ث)؛ وتصعد الثالثة حرفًا حرفًا بمقدار 340 px من خلف خط تحت خط الأساس بمنحنى back.out(2.2) بفارق 0.035 ث؛ وتنبثق الرابعة حرفًا حرفًا على نوتات 1/32 بقفزة 1.13x. تتحرك نسخ مفرغة (outline) من الكلمات بحجم 205 px في صفين بسرعة 760 px/s في اتجاهين متعاكسين، ويسمّي سطر تعليق أحادي المسافة (mono) الحركة.

متى تُستخدم فصل طباعي سريع يعرض التوقيت والتباعد والتسهيل (easing) على الإيقاع.

عرض الكود

<!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=Roboto+Flex:opsz,[email protected],100..1000&family=JetBrains+Mono:wght@400;700&family=Instrument+Serif:ital@1&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0d0b1e; }
.panel { position: absolute; inset: 0; opacity: 0; }
.word { position: absolute; left: 0; width: 1920px; top: 392px; text-align: center; font: 900 307px/307px 'Roboto Flex', sans-serif; letter-spacing: -0.035em; white-space: nowrap; transform-origin: 960px 148px; }
.word span { display: inline-block; transform-origin: 50% 85%; }
.mask { position: absolute; inset: 0; clip-path: inset(0 0 390px 0); }
.note { position: absolute; left: 0; width: 1920px; top: 748px; text-align: center; font: 400 26px/30px 'JetBrains Mono', monospace; opacity: 0.8; }
#rows { position: absolute; inset: 0; }
.row { position: absolute; white-space: nowrap; font: 900 205px/205px 'Roboto Flex', sans-serif; letter-spacing: -0.035em; word-spacing: 30px; color: transparent; -webkit-text-stroke: 2px rgba(250,249,255,0.1); }
#top { top: 40px; left: -200px; } #bot { top: 840px; left: -2400px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2" data-width="1920" data-height="1080">
  <div class="panel" id="p0" style="background:#fb2d89;color:#1c0b5d"><div class="word" id="w0">DESCRIBE</div><div class="note">// "first beat"</div></div>
  <div class="panel" id="p1" style="background:#0d0b1e;color:#faf9ff"><div class="word" id="w1">PREVIEW</div><div class="note">// "second beat"</div></div>
  <div class="panel" id="p2" style="background:#faf9ff;color:#7c6cf2"><div class="mask"><div class="word" id="w2">REFINE</div></div><div class="note">// "third beat"</div></div>
  <div class="panel" id="p3" style="background:#7c6cf2;color:#faf9ff"><div class="word" id="w3">EXPORT</div><div class="note">// "fourth beat"</div></div>
  <div id="rows"><div class="row" id="top">DESCRIBE PREVIEW REFINE EXPORT DESCRIBE PREVIEW REFINE EXPORT</div><div class="row" id="bot">DESCRIBE PREVIEW REFINE EXPORT DESCRIBE PREVIEW REFINE EXPORT</div></div>
</div>
<script>
const BEAT = 28 / 60;                                  // one beat at 128.57 BPM
const split = (id) => { const el = document.getElementById(id); el.innerHTML = [...el.textContent].map((c) => "<span>" + c + "</span>").join(""); return [...el.children]; };
const L = [0, 1, 2, 3].map((i) => split("w" + i));
const tl = gsap.timeline({ paused: true });
[0, 1, 2, 3].forEach((i) => { tl.set("#p" + i, { opacity: 1 }, i * BEAT); if (i < 3) tl.set("#p" + i, { opacity: 0 }, (i + 1) * BEAT); });
tl.fromTo("#top", { x: 0 }, { x: -1520, duration: 2, ease: "none" }, 0);   // 760 px/s
tl.fromTo("#bot", { x: 0 }, { x: 1520, duration: 2, ease: "none" }, 0);
// 1: the word lands from 1.39x while its letters appear one by one
tl.fromTo("#w0", { scale: 1.39 }, { scale: 1, duration: 0.326, ease: "expo.out" }, 0);
tl.fromTo(L[0], { opacity: 0, filter: "blur(6px)" }, { opacity: 1, filter: "blur(0px)", duration: 0.04, stagger: 0.03 }, 0);
// 2: tracking closes from 150 px
tl.fromTo("#w1", { letterSpacing: "150px" }, { letterSpacing: "-10.7px", duration: 0.45, ease: "expo.out" }, BEAT);
tl.fromTo("#w1", { opacity: 0 }, { opacity: 1, duration: 0.05 }, BEAT);
// 3: letters rise from behind the line under the word
tl.fromTo(L[2], { y: 340 }, { y: 0, duration: 0.3, ease: "back.out(2.2)", stagger: 0.035 }, 2 * BEAT);
// 4: letters pop on 1/32 notes with a hop
L[3].forEach((s, j) => { const t = 3 * BEAT + j * BEAT / 8;
  tl.fromTo(s, { opacity: 0, scale: 0.6, y: 0 }, { opacity: 1, scale: 1.13, y: -50, duration: 0.067, ease: "power2.out", immediateRender: false }, t);
  tl.to(s, { scale: 1, y: 0, duration: 0.15, ease: "power2.inOut" }, t + 0.067); });
tl.set(L[3], { opacity: 0 }, 0);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

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

انتقال

مسح بشرائط متدرجة تصعد ثم ترتفع بعيدًا

ثمانية شرائط عمودية بعرض 240 px بألوان العلامة المتناوبة تصعد من أسفل الإطار بمنحنى power2.inOut (0.18 ث لكل منها، وبفارق 0.7 إطار، من اليسار أولًا)، وتثبت نحو 0.1 ث بينما يُستبدل المشهد تحتها، ثم تواصل الصعود وتخرج من الأعلى بالمنحنى والتدرج نفسيهما، كاشفة المشهد التالي من الأسفل إلى الأعلى.

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

عرض الكود

<!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=Roboto+Flex:opsz,[email protected],100..1000&family=JetBrains+Mono:wght@400;700&family=Instrument+Serif:ital@1&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0d0b1e; }
#a, #b { display: flex; align-items: center; justify-content: center; font: 900 220px/1 'Roboto Flex', sans-serif; letter-spacing: -8px; }
#a { background: #7c6cf2; color: #faf9ff; } #b { background: #0d0b1e; color: #fb2d89; }
.stripe { position: absolute; top: 0; width: 241px; height: 1080px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080">
  <div id="a" class="clip" data-start="0" data-duration="1.35"><span>"Scene A"</span></div>
  <div id="b" class="clip" data-start="1.35" data-duration="1.65"><span>"Scene B"</span></div>
  <div id="stripes"></div>
</div>
<script>
const COLORS = ["#fb2d89", "#faf9ff", "#fb2d89", "#faf9ff", "#fb2d89", "#faf9ff", "#fb2d89", "#faf9ff"];
const bars = COLORS.map((c, i) => { const s = document.createElement("div"); s.className = "stripe"; s.style.left = 240 * i + "px"; s.style.background = c; document.getElementById("stripes").appendChild(s); return s; });
const tl = gsap.timeline({ paused: true });
const AT = 1.0;                              // when the wipe starts
tl.fromTo(bars, { y: 1080 }, { y: 0, duration: 0.18, ease: "power2.inOut", stagger: 0.0117 }, AT);
tl.to(bars, { y: -1080, duration: 0.18, ease: "power2.inOut", stagger: 0.0117 }, AT + 0.297);
tl.to({}, { duration: 3 }, 0);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

معاينة تقنية «شبكة أشكال بموجة شعاعية يقودها الإيقاع» — عند 0:04 من الفيديو

أشكال

شبكة أشكال بموجة شعاعية يقودها الإيقاع

شبكة بخطوة 120 px من مربعات صغيرة مستديرة الزوايا بألوان هادئة (خُمسها مفرغ) تتخللها صلبان صغيرة. عند كل إيقاع تنطلق موجة من المركز بسرعة 2000 px/s؛ وحيث تمر جبهتها الغاوسية (بعرض 105 px) تكبر كل خلية من 42 إلى 74 px، وتستدير زواياها نحو الدائرة، وتدور 38 درجة، وتنتقل من اللون الهادئ إلى لون التمييز. تكشف الموجة الأولى الشبكة، ثم تدور الشبكة كلها ببطء عكس عقارب الساعة بسرعة متزايدة، وبعد الموجة الأخيرة تفرغ وتتلاشى.

متى تُستخدم إيقاع عن الأنظمة أو «design tokens» ينبض مع الموسيقى دون أي نص.

عرض الكود

<!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>
* { margin: 0; padding: 0; box-sizing: border-box; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0d0b1e; }
#grid { position: absolute; inset: 0; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2" data-width="1920" data-height="1080">
  <canvas id="grid" width="1920" height="1080"></canvas>
</div>
<script>
const ctx = document.getElementById("grid").getContext("2d");
const PITCH = 120, SPEED = 2000, WIDTH = 105, WAVES = [0.03, 0.5, 0.97, 1.43];   // a wave per beat (0.467 s)
const PINK = [251, 45, 137], MUTED = [74, 68, 96];
const hash = (i, j) => { const s = Math.sin(i * 127.1 + j * 311.7) * 43758.5453; return s - Math.floor(s); };
const cells = []; for (let j = -6; j <= 6; j++) for (let i = -10; i <= 9; i++) cells.push({ x: PITCH * (i + 0.5), y: PITCH * j, outline: hash(i, j) < 0.2, spin: (hash(j, i) - 0.5) * 16 });
const mix = (a, b, u) => a.map((v, k) => Math.round(v + (b[k] - v) * u));
const smooth = (a, b, x) => { const u = Math.min(1, Math.max(0, (x - a) / (b - a))); return u * u * (3 - 2 * u); };
function rrect(s, r) { const h = s / 2; r = Math.min(r, h); ctx.beginPath(); ctx.moveTo(-h + r, -h); ctx.arcTo(h, -h, h, h, r); ctx.arcTo(h, h, -h, h, r); ctx.arcTo(-h, h, -h, -h, r); ctx.arcTo(-h, -h, h, -h, r); ctx.closePath(); }
function draw(t) {
  ctx.clearRect(0, 0, 1920, 1080);
  const p = Math.max(0, (t - 0.3) / 1.3), rot = -24 * p * p * Math.PI / 180, cr = Math.cos(rot), sr = Math.sin(rot);
  const reveal = SPEED * (t - WAVES[0]), fade = 1 - smooth(1.66, 1.77, t);
  for (const c of cells) {
    const x = 960 + c.x * cr - c.y * sr, y = 540 + c.x * sr + c.y * cr, d = Math.hypot(x - 960, y - 540);
    if (d > reveal) continue;
    let I = 0; for (const w of WAVES) if (t >= w) I = Math.max(I, Math.exp(-(((d - SPEED * (t - w)) / WIDTH) ** 2)));
    const scale = (1 - smooth(reveal - 140, reveal - 20, d) * 0.9) * fade; if (scale < 0.02) continue;
    const size = (42 + 32 * I) * scale;
    ctx.save(); ctx.translate(x, y); ctx.rotate(rot + (c.spin + 38 * I) * Math.PI / 180); rrect(size, size * (0.1 + 0.4 * I));
    if (c.outline) { ctx.lineWidth = 2; ctx.strokeStyle = "rgba(" + mix([233, 228, 242], PINK, I).join(",") + ",0.75)"; ctx.stroke(); }
    else { ctx.fillStyle = "rgba(" + mix(MUTED, PINK, I).join(",") + "," + (0.82 + 0.18 * I) + ")"; ctx.fill(); }
    ctx.restore();
  }
}
const tl = gsap.timeline({ paused: true });
tl.to({}, { duration: 2 }, 0);
tl.eventCallback("onUpdate", () => draw(tl.time()));
draw(0);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

معاينة تقنية «انفجار جسيمات يتجمع في كلمة ثم ينساب بعيدًا» — عند 0:06 من الفيديو

جسيمات

انفجار جسيمات يتجمع في كلمة ثم ينساب بعيدًا

وميض أبيض مع حلقة صدمة تتسع حتى 1250 px؛ تنفجر 7000 مربع صغير من المركز بمنحنى power2.out (0.17 ث)، ثم تطير إلى نقاط عشوائية داخل كلمة ثقيلة بحجم 590 px بمنحنى cubic in-out (0.23 ث مع تأخير عشوائي حتى 0.08 ث). ترتعش بمقدار 1 px بينما تثبت الكلمة، وتُلوَّن بحسب x على امتداد الكلمة (برتقالي، لافندر، بنفسجي)، ثم تغادر نحو اليمين بمنحنى cubic ease-in مع خطوط أثر، بادئة بيسار الكلمة. وخلفها وهج شعاعي وردي ناعم.

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

عرض الكود

<!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=Roboto+Flex:opsz,[email protected],100..1000&family=JetBrains+Mono:wght@400;700&family=Instrument+Serif:ital@1&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0d0b1e; }
#glow { position: absolute; inset: 0; background: radial-gradient(760px 620px at 50% 50%, rgba(251,45,137,0.11), rgba(251,45,137,0) 100%); }
#dots { position: absolute; inset: 0; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2" data-width="1920" data-height="1080">
  <div id="glow"></div>
  <canvas id="dots" width="1920" height="1080"></canvas>
</div>
<script>
const WORD = "IDEA", N = 7000, BANG = 0.07, OUT_END = 0.24, IN_END = 0.47, LEAVE = 1.45;
let seed = 7; const rnd = () => { seed = (seed * 16807) % 2147483647; return seed / 2147483647; };
const ctx = document.getElementById("dots").getContext("2d");
const P = [];
document.fonts.load('900 590px "Roboto Flex"').then(() => {
  const off = document.createElement("canvas"); off.width = 1920; off.height = 1080; const oc = off.getContext("2d");
  oc.font = '900 590px "Roboto Flex"'; oc.textAlign = "center"; oc.fillStyle = "#fff"; oc.fillText(WORD, 960, 728);
  const img = oc.getImageData(0, 0, 1920, 1080).data, spots = [];
  for (let y = 250; y < 760; y += 3) for (let x = 0; x < 1920; x += 3) if (img[(y * 1920 + x) * 4] > 128) spots.push([x, y]);
  const minX = Math.min(...spots.map((s) => s[0])), maxX = Math.max(...spots.map((s) => s[0]));
  const lerp = (a, b, u) => a + (b - a) * u;
  for (let i = 0; i < N; i++) {
    const [tx, ty] = spots[Math.floor(rnd() * spots.length)], a = rnd() * 6.283, r = Math.sqrt(rnd()), u = (tx - minX) / (maxX - minX);
    const c = u < 0.5 ? [lerp(254, 240, u * 2), lerp(145, 237, u * 2), lerp(23, 255, u * 2)] : [lerp(240, 124, u * 2 - 1), lerp(237, 108, u * 2 - 1), lerp(255, 242, u * 2 - 1)];
    const k = 0.55 + rnd() * 0.45;
    P.push({ tx, ty, bx: 960 + Math.cos(a) * r * 430, by: 540 + Math.sin(a) * r * 330, d: rnd() * 0.08, ph: rnd() * 6.28, lead: u * 0.17 + rnd() * 0.05, far: 1500 + rnd() * 900, col: "rgb(" + c.map((v) => Math.round(v * k)).join(",") + ")" });
  }
  draw(tl.time());
});
const clamp = (v) => Math.min(1, Math.max(0, v)), outE = (p) => 1 - Math.pow(1 - p, 3), inOut = (p) => (p < 0.5 ? 4 * p * p * p : 1 - Math.pow(-2 * p + 2, 3) / 2);
function draw(t) {
  ctx.clearRect(0, 0, 1920, 1080); if (t < BANG) return;
  const f = clamp((t - BANG) / 0.24);
  if (t < BANG + 0.36) {
    ctx.strokeStyle = "rgba(250,249,255," + 0.22 * (1 - f) + ")"; ctx.lineWidth = 2;
    ctx.beginPath(); ctx.arc(960, 540, Math.max(1, 1250 * outE(clamp((t - BANG) / 0.34))), 0, 6.283); ctx.stroke();
    const g = ctx.createRadialGradient(960, 540, 0, 960, 540, 70); g.addColorStop(0, "rgba(255,255,255," + (1 - f * 0.9) + ")"); g.addColorStop(1, "rgba(251,45,137,0)");
    ctx.fillStyle = g; ctx.beginPath(); ctx.arc(960, 540, 70, 0, 6.283); ctx.fill();
  }
  for (const p of P) {
    let x, y, streak = 0;
    if (t < OUT_END) { const u = outE(clamp((t - BANG) / (OUT_END - BANG))); x = 960 + (p.bx - 960) * u; y = 540 + (p.by - 540) * u; }
    else if (t < IN_END + p.d) { const u = inOut(clamp((t - OUT_END - p.d / 2) / (IN_END - OUT_END))); x = p.bx + (p.tx - p.bx) * u; y = p.by + (p.ty - p.by) * u; }
    else { x = p.tx + Math.sin(t * 9 + p.ph) * 1.2; y = p.ty + Math.cos(t * 7 + p.ph) * 1.2;
      const q = clamp((t - LEAVE - p.lead) / 0.3); if (q > 0) { x += p.far * q * q * q; streak = Math.min(160, p.far * q * q * 0.05); } }
    if (x > 1930) continue;
    ctx.fillStyle = p.col; ctx.fillRect(x - streak, y, 2.2 + streak, 2.2);
  }
}
const tl = gsap.timeline({ paused: true });
tl.to({}, { duration: 2 }, 0);
tl.eventCallback("onUpdate", () => draw(tl.time()));
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

معاينة تقنية «كرة نقاط تتحول إلى عقدة طورية فوق أرضية منظورية» — عند 0:08 من الفيديو

ثلاثي الأبعاد

كرة نقاط تتحول إلى عقدة طورية فوق أرضية منظورية

1700 نقطة على كرة فيبوناتشي (نصف القطر 362 px) تدور ببطء حول المحور العمودي مع ميل خفيف، وتُسقَط بكاميرا 1500 px وتُرتَّب من الخلف إلى الأمام، فالنقاط الأمامية أكبر وأسطع، والدافئة وردية والباقي بنفسجي. لكل نقطة توأم على عقدة طورية (2,3)؛ وعند التحول (morph) تنتقل إليه بمنحنى cubic in-out مع تأخير عشوائي حتى 0.16 ث. تحتها أرضية من خطوط بنفسجية رفيعة تمتد إلى نقطة تلاشٍ عند الأفق، وتزحف صفوفها نحو المشاهد، على خلفية شعاعية نيلية داكنة.

متى تُستخدم إيقاع ثلاثي الأبعاد في عمل ثنائي الأبعاد دون محرك 3D: نقاط وإسقاط وتحول.

عرض الكود

<!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>
* { margin: 0; padding: 0; box-sizing: border-box; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0d0b1e; }
#root { background: radial-gradient(1100px 760px at 50% 58%, #1c0b5d 0%, #150a48 40%, #0f0a2c 85%, #0d0b1e 100%); }
#space { position: absolute; inset: 0; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2" data-width="1920" data-height="1080">
  <canvas id="space" width="1920" height="1080"></canvas>
</div>
<script>
const N = 1700, R = 362, CAM = 1500, MORPH = 0.7, MORPH_END = 1.16;
let seed = 11; const rnd = () => { seed = (seed * 16807) % 2147483647; return seed / 2147483647; };
const pts = [], ga = Math.PI * (3 - Math.sqrt(5));
for (let i = 0; i < N; i++) {
  const y = 1 - (2 * (i + 0.5)) / N, r = Math.sqrt(1 - y * y), a = i * ga, phi = (i / N) * Math.PI * 2;
  const kr = 210 + 120 * Math.cos(3 * phi), tube = 16 * Math.sqrt(rnd()), ta = rnd() * 6.283;
  pts.push({ s: [Math.cos(a) * r * R, y * R, Math.sin(a) * r * R],
    k: [Math.cos(2 * phi) * kr + Math.cos(ta) * tube, Math.sin(2 * phi) * kr + Math.sin(ta) * tube, 120 * Math.sin(3 * phi) + Math.cos(ta + 1) * tube], d: rnd() * 0.16, warm: rnd() });
}
const ctx = document.getElementById("space").getContext("2d");
const clamp = (v) => Math.min(1, Math.max(0, v)), inOut = (p) => (p < 0.5 ? 4 * p * p * p : 1 - Math.pow(-2 * p + 2, 3) / 2);
function draw(t) {
  ctx.clearRect(0, 0, 1920, 1080);
  ctx.lineWidth = 1;
  for (let k = -14; k <= 14; k++) { ctx.strokeStyle = "rgba(124,108,242,0.25)"; ctx.beginPath(); ctx.moveTo(960 + k * 9, 612); ctx.lineTo(960 + k * 230, 1080); ctx.stroke(); }
  for (let z = 1; z < 30; z++) { const zz = z - ((t * 0.35) % 1); if (zz <= 0.2) continue; const y = 612 + 470 / zz; if (y > 1080) continue;
    ctx.strokeStyle = "rgba(124,108,242," + Math.min(0.32, 0.05 + (y - 612) / 1400) + ")"; ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(1920, y); ctx.stroke(); }
  const yaw = t * 0.55, tilt = 0.32, cy = Math.cos(yaw), sy = Math.sin(yaw), ct = Math.cos(tilt), st = Math.sin(tilt), out = [];
  for (const p of pts) {
    const u = inOut(clamp((t - MORPH - p.d) / (MORPH_END - MORPH - 0.16)));
    const x = p.s[0] + (p.k[0] - p.s[0]) * u, y = p.s[1] + (p.k[1] - p.s[1]) * u, z = p.s[2] + (p.k[2] - p.s[2]) * u;
    const x1 = x * cy + z * sy, z1 = -x * sy + z * cy, y2 = y * ct - z1 * st, z2 = y * st + z1 * ct, s = CAM / (CAM + z2);
    out.push([960 + x1 * s, 517 + y2 * s, z2, p.warm]);
  }
  out.sort((a, b) => b[2] - a[2]);
  for (const [x, y, z, w] of out) { const f = clamp(0.5 - z / (2 * R)), size = 1.6 + 1.6 * f;
    ctx.fillStyle = w < 0.62 ? "rgba(251," + Math.round(45 + 70 * f) + ",137," + (0.35 + 0.6 * f) + ")" : "rgba(150,138,250," + (0.35 + 0.6 * f) + ")";
    ctx.fillRect(x - size / 2, y - size / 2, size, size); }
}
const tl = gsap.timeline({ paused: true });
tl.to({}, { duration: 2 }, 0);
tl.eventCallback("onUpdate", () => draw(tl.time()));
draw(0);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

معاينة تقنية «لوحة عدّ بأعمدة تنمو وخط يرسم نفسه» — عند 0:10 من الفيديو

بيانات

لوحة عدّ بأعمدة تنمو وخط يرسم نفسه

على صفحة فاتحة، ترتفع ثلاثة صفوف من أرقام ثقيلة بحجم 180 px مع تسميات أحادية المسافة إلى صناديقها المقتطعة بفارق 0.08 ث، بينما تعدّ قيمها بمنحنى expo.out (0.9 ث). ترتفع بطاقة بيضاء بظل نيلي ناعم 90 px إلى مكانها (power3.out 0.45 ث)؛ وتمتلئ حلقتها بمنحنى power3.out، وتنمو أربعة عشر عمودًا من القاعدة بفارق 0.031 ث (power3.out 0.3 ث، والأخير بلون التمييز الصلب)، ثم يرسم خط متعدد بنفسجي نفسه فوقها بمنحنى sine.inOut (0.72 ث) حاملًا نقطة وهالة ووسمًا داكنًا يركب على رأسه.

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

عرض الكود

<!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=Roboto+Flex:opsz,[email protected],100..1000&family=JetBrains+Mono:wght@400;700&family=Instrument+Serif:ital@1&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0d0b1e; }
#root { background: #faf9ff; color: #1c0b5d; }
.row { position: absolute; left: 0; width: 900px; height: 200px; clip-path: inset(0); }
.num { position: absolute; left: 126px; top: -12px; font: 900 180px/180px 'Roboto Flex', sans-serif; }
.cap { position: absolute; left: 137px; top: 163px; font: 500 22px/26px 'JetBrains Mono', monospace; color: #6b6385; }
#card { position: absolute; left: 920px; top: 170px; width: 880px; height: 740px; border-radius: 26px; background: linear-gradient(115deg, #fff 52%, #f0edff); box-shadow: 0 34px 70px rgba(28,11,93,0.13); }
#title { position: absolute; left: 56px; top: 64px; font: 700 30px/36px 'Roboto Flex', sans-serif; }
#ring { position: absolute; left: 731px; top: 61px; width: 98px; height: 98px; }
.bar { position: absolute; width: 38px; border-radius: 7px 7px 0 0; background: #febc74; transform-origin: 50% 100%; }
#plot { position: absolute; inset: 0; width: 880px; height: 740px; }
#tag { position: absolute; width: 120px; height: 44px; border-radius: 9px; background: #1c0b5d; color: #fff; font: 700 22px/44px 'Roboto Flex', sans-serif; text-align: center; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2" data-width="1920" data-height="1080">
  <div class="row" style="top:190px"><div class="num" id="n0">00</div><div class="cap">"FIRST STEP"</div></div>
  <div class="row" style="top:440px"><div class="num" id="n1">00</div><div class="cap">"SECOND STEP"</div></div>
  <div class="row" style="top:690px"><div class="num" id="n2" style="color:#fb2d89">00</div><div class="cap">"THIRD STEP"</div></div>
  <div id="card"><div id="title">"card title"</div>
    <svg id="ring" viewBox="0 0 98 98"><circle cx="49" cy="49" r="44.5" fill="none" stroke="#e9e4f2" stroke-width="9"/><circle id="arc" cx="49" cy="49" r="44.5" fill="none" stroke="#7c6cf2" stroke-width="9" stroke-linecap="round" transform="rotate(-90 49 49)" stroke-dasharray="279.6" stroke-dashoffset="279.6"/></svg>
    <div id="bars"></div><svg id="plot" viewBox="0 0 880 740"><polyline id="line" fill="none" stroke="#7c6cf2" stroke-width="4.5" stroke-linejoin="round" stroke-linecap="round"/><circle id="head" r="10" fill="#7c6cf2"/></svg><div id="tag">"tag"</div></div>
</div>
<script>
const TOPS = [706, 723, 651, 635, 704, 691, 645, 560, 605, 602, 572, 514, 518, 537], LINE = [660, 693, 600, 572, 666, 659, 585, 502, 573, 563, 508, 465, 490, 488];
const bars = TOPS.map((top, i) => { const b = document.createElement("div"); b.className = "bar"; Object.assign(b.style, { left: 60 + 55.5 * i + "px", top: top - 170 + "px", height: 830 - top + "px" }); if (i === 13) b.style.background = "#fb2d89"; document.getElementById("bars").appendChild(b); return b; });
const pts = LINE.map((y, i) => [79 + 55.5 * i, y - 170]), seg = pts.slice(1).map((p, i) => Math.hypot(p[0] - pts[i][0], p[1] - pts[i][1])), total = seg.reduce((a, b) => a + b, 0);
const v = { a: 0, b: 0, c: 0, ring: 0, line: 0 };
function show() {
  ["n0", "n1", "n2"].forEach((id, i) => { document.getElementById(id).textContent = String(Math.round([v.a, v.b, v.c][i])).padStart(2, "0"); });
  document.getElementById("arc").setAttribute("stroke-dashoffset", 279.6 * (1 - v.ring));
  let left = total * v.line, out = [pts[0]], h = pts[0];
  for (let i = 0; i < seg.length; i++) { if (left >= seg[i]) { out.push(pts[i + 1]); left -= seg[i]; h = pts[i + 1]; continue; } const f = left / seg[i]; h = [pts[i][0] + (pts[i + 1][0] - pts[i][0]) * f, pts[i][1] + (pts[i + 1][1] - pts[i][1]) * f]; out.push(h); break; }
  document.getElementById("line").setAttribute("points", out.map((p) => p.join(",")).join(" "));
  const head = document.getElementById("head"); head.setAttribute("cx", h[0]); head.setAttribute("cy", h[1]);
  Object.assign(document.getElementById("tag").style, { left: h[0] - 60 + "px", top: h[1] - 77 + "px" });
}
const tl = gsap.timeline({ paused: true });
gsap.utils.toArray(".row").forEach((r, i) => tl.fromTo(r.children, { y: 70, opacity: 0 }, { y: 0, opacity: 1, duration: 0.4, ease: "power3.out" }, 0.02 + 0.08 * i));
tl.fromTo("#card", { y: 90, opacity: 0 }, { y: 0, opacity: 1, duration: 0.45, ease: "power3.out" }, 0.07);
tl.to(v, { a: 1, duration: 0.9, ease: "expo.out", onUpdate: show }, 0.02);
tl.to(v, { b: 2, duration: 0.9, ease: "expo.out", onUpdate: show }, 0.1);
tl.to(v, { c: 3, duration: 0.9, ease: "expo.out", onUpdate: show }, 0.24);
tl.to(v, { ring: 1, duration: 0.9, ease: "power3.out", onUpdate: show }, 0.27);
tl.fromTo(bars, { scaleY: 0 }, { scaleY: 1, duration: 0.3, ease: "power3.out", stagger: 0.031 }, 0.3);
tl.fromTo(["#head", "#tag"], { opacity: 0 }, { opacity: 1, duration: 0.08 }, 0.65);
tl.to(v, { line: 1, duration: 0.72, ease: "sine.inOut", onUpdate: show }, 0.65);
show();
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>

معاينة تقنية «إطار HUD بمزج exclusion مع تايم كود حي» — عند 0:02 من الفيديو

التخطيط

إطار HUD بمزج exclusion مع تايم كود حي

أقواس زوايا (26 px، 2 px)، وعنوان أعلى اليسار، وتايم كود بنمط SMPTE أعلى اليمين (ثوانٍ وإطارات عند 60 fps)، واسم فصل أسفل اليسار وعدّاد إطارات مع شريط تقدم 300 px أسفل اليمين، كلها بلون فاتح وبشفافية 0.9، ولكل جزء mix-blend-mode exclusion، فيبقى الإطار مقروءًا على أي خلفية: فاتح على الداكن، وداكن على الفاتح، ولون مكمل مصبوغ على الوردي أو البنفسجي. يظهر بتلاشٍ عند 0.3 ث وتتحدث العدادات من الجدول الزمني في كل إطار.

متى تُستخدم لمنح ريل أو فيلم منتج إطار بث «رندر حي» لا يتعارض أبدًا مع المشاهد.

عرض الكود

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>إطار HUD بمزج exclusion مع تايم كود حي</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=Roboto+Flex:opsz,[email protected],100..1000&family=JetBrains+Mono:wght@400;700&family=Instrument+Serif:ital@1&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0d0b1e; }
#bg { position: absolute; inset: 0; }
.hud { position: absolute; mix-blend-mode: exclusion; color: #faf9ff; opacity: 0; }
.corner { width: 26px; height: 26px; border: 0 solid #faf9ff; }
.txt { font: 700 17px/17px 'JetBrains Mono', monospace; white-space: pre; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080">
  <div id="bg"></div>
  <div class="hud corner" style="left:36px;top:36px;border-left-width:2px;border-top-width:2px"></div>
  <div class="hud corner" style="left:1858px;top:36px;border-right-width:2px;border-top-width:2px"></div>
  <div class="hud corner" style="left:36px;top:1018px;border-left-width:2px;border-bottom-width:2px"></div>
  <div class="hud corner" style="left:1858px;top:1018px;border-right-width:2px;border-bottom-width:2px"></div>
  <div class="hud txt" style="left:64px;top:63px">"BRAND / TITLE"</div>
  <div class="hud txt" id="tc" style="right:64px;top:61px">00:00:00:00</div>
  <div class="hud txt" id="ch" style="left:64px;top:1008px">"CHAPTER"</div>
  <div class="hud txt" id="fc" style="right:64px;top:993px">000 / 180</div>
  <div class="hud" style="left:1556px;top:1020px;width:300px;height:1px;background:#faf9ff"></div>
  <div class="hud" id="fill" style="left:1556px;top:1017px;width:0;height:5px;background:#faf9ff"></div>
</div>
<script>
const FPS = 60, FRAMES = 180, pad = (n, k) => String(n).padStart(k, "0");
function hud(t) { const f = Math.min(FRAMES, Math.round(t * FPS));
  document.getElementById("tc").textContent = "00:00:" + pad(Math.floor(f / FPS), 2) + ":" + pad(f % FPS, 2);
  document.getElementById("fc").textContent = pad(f, 3) + " / " + FRAMES;
  document.getElementById("fill").style.width = 300 * f / FRAMES + "px"; }
const tl = gsap.timeline({ paused: true });
// The backgrounds change under the frame: pink, near-black, light page, violet.
["#fb2d89", "#0d0b1e", "#faf9ff", "#7c6cf2"].forEach((c, i) => tl.set("#bg", { backgroundColor: c }, i * 0.75));
tl.fromTo(".hud", { opacity: 0 }, { opacity: 0.9, duration: 0.12 }, 0.3);
tl.to({}, { duration: 3 }, 0);
tl.eventCallback("onUpdate", () => hud(tl.time()));
hud(0);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

موجّهات أخرى

معاينة الموجّه «عرض رياضي حيّ بقطع غليتش على الإيقاع»

عرض رياضي حيّ بقطع غليتش على الإيقاع

<direction> اصنع عرضًا متحركًا (showreel) مدته 20 ثانية مبنيًا بالكامل من الرياضيات: كل إطار يُولَّد من الزمن الجاري t، بلا صور أو لقطات مصوّرة أو رسومات جاهزة. أفقي 1920x1080 بمعدل 60 إطارًا في الثانية. يجب أن يبدو كأداة مخبرية دقيقة تصبح فجأة جميلة: داكنة، متوهجة، دقيقة، مع قطعة غليتش واحدة كل ثانيتين على الإيقاع. تُعرض ثمانية مشاهد رياضية داخل إطار ثابت بأسلوب الأجهزة (أقواس الزوايا، علامة نصية، عدّاد المشهد وعنوانه، نقطة الإيقاع، ساعة جارية، خط التقدم، معادلة حيّة)، ثم بطاقة ختامية بالعلامة التجارية. تجنّب الحبيبات والصور الجاهزة وأي زخرفة لا تنبع من الرياضيات. </direction> <structure> القطعات عند 2 و4 و8 و10 و12 و14 و16 و18 ثانية، كلها على الإيقاع. 1) من 0 إلى 2 ث، نقطة الأصل: حلقة فيروزية خافتة تنمو من المركز حتى r 238 px (من 0 إلى 0.45 ث، ease out)؛ محاور بعلامات كل 60 px تنمو من نقطة مركزية متوهجة؛ وتغادر حلقة موجية النقطة مع كل نبضة. سطر واسع التباعد مثل "YOUR AI MOTION DESIGNER" يتشكّل من أحرف عشوائية (من 0.3 إلى 0.78 ث)؛ وسطر قصير بخط سيريف مثل "Ideas in motion" يُكتب حرفًا بحرف بجانب نقطة الأصل (من 0.5 إلى 1.12 ث). من 1.35 إلى 1.95 ث يلتف قوس فيروزي بنصف قطر 220 مرة واحدة حول نقطة الأصل وعند طرفه نقطة بيضاء، وتتلاشى الكلمات. 2) من 2 إلى 4 ث، دائرة الوحدة: دائرة فيروزية (r 220) على اليسار، والزاوية تنمو بمعدل 4.52 rad/s. نصف قطر أبيض، ضلع جيب التمام فيروزي، ضلع الجيب وردي، قوس زاوية برتقالي بعنوان θ، خط وردي متقطع إلى نقطة وردية عند x 820 حيث يُكتب الجيب؛ ويمتد سجل الزاوية إلى اليمين كمنحنى جيب وردي متوهج (104 px لكل راديان) مع منحنى جيب تمام فيروزي خافت بجانبه وخطوط إرشاد منقطة +1/-1. قراءات حيّة "θ = 4.524 rad" و"sin θ = -0.982". المعادلة: y = sin θ. 3) من 4 إلى 8 ث، دوائر فورييه التدويرية: سلسلة من 180 دائرة دوّارة (مرتبة حسب الحجم، حلقات خزامى خافتة، أنصاف أقطار بيضاء) ترسم حدود حرف π كبير بالبرتقالي المتوهج من 4.3 إلى 7.2 ث (تقدّم sine in-out)، ثم يمتلئ الشكل بتدرج ناعم من الوردي إلى البنفسجي بينما تتلاشى السلسلة. على اليسار طيف |cₙ| لـ n = -24...24 (ارتفاع الأعمدة بالجذر التربيعي للسعة) يضيء من المركز إلى الخارج مع تقدّم الرسم؛ قراءات "K = 180 terms" و"t/2π = 0.527". المعادلة: f(t) = Σ cₙ e^{int}. 4) من 8 إلى 10 ث، عقدة ليساجو ثلاثية الأبعاد (sin 3t, sin 2t, sin 5t) تُرسم في 0.6 ث، ثم تدور بمنظور: شريط يتدرج لونه من الفيروزي إلى البنفسجي إلى الوردي على طول المنحنى ويتبع عرضه وسطوعه العمق. على اليمين شبكة 3x3 من أشكال ليساجو مستوية صغيرة بعناوين 1:1 و2:3 و4:5 و1:2 و3:4 و5:6 و1:3 و3:5 و3:2 تُرسم واحدًا تلو الآخر مع طور منجرف؛ ويصبح الأخير فيروزيًا داخل صندوق رفيع. 5) من 10 إلى 12 ث، سطح موجات سلكي z = cos(kr - ωt)/(1 + r) على شبكة 48x48 يُرى من 67° من الأعلى، يظهر من المركز إلى الخارج في 0.55 ث ويدور ببطء، وتُلوَّن الخطوط حسب الارتفاع من الفيروزي إلى البنفسجي إلى الوردي. نقطة مسبار برتقالية تركب السطح عند r = 3.2 مع خط إرشاد وقراءات حيّة "r = 3.200" و"z = 0.276". 6) من 12 إلى 14 ث، مجموعة جوليا z² + c تملأ الإطار، تُفتح ببوابة دائرية تتوسع من المركز بحافة بيضاء. يتحرك c = 0.7885·e^{iα} على دائرته (sine in-out)، فيتحول الفراكتال من حلزونات منفصلة إلى شكل متصل بداخل أسود؛ تقريب بطيء ودوران. الألوان حسب زمن الهروب: نيلي، بنفسجي، وردي، برتقالي، كريمي فاتح حتى الأبيض. يُظهر إطار صغير حركة c على دائرته مع قراءات "Re c" و"Im c". 7) من 14 إلى 16 ث، ترتيب الأوراق (phyllotaxis): 1500 بذرة عند θₙ = n·137.508°، rₙ = c√n تظهر من المركز إلى الخارج وتدور، بيضاء أولًا ثم وردية وبنفسجية وفيروزية. على اليسار تُكتب φ = 1.6180339887... رقمًا رقمًا، ويكبر صف فيبوناتشي (21 و34 بالفيروزي)، مع "seeds n = 1500" و"spirals 21 ⟲ 34 ⟳". 8) من 16 إلى 18 ث، متطابقة أويلر: تدور البذور في حلقة تصبح دائرة وحدة فيروزية على اليسار؛ تنتقل نقطة من 1 إلى -1 مخلّفة قوسًا برتقاليًا فوقها؛ يظهر e^{iπ} كبيرًا، ثم "+" و"1" و"=" واحدًا تلو الآخر على الإيقاع، وتنبض حلقة عند -1، وتحطّ "0" عند 18 ث داخل حلقة وردية. 9) من 18 إلى 20 ث، البطاقة الختامية: تتقلص المتطابقة نحو الأعلى؛ وتصعد علامة نصية كبيرة واسعة التباعد مثل "YOUR BRAND" (استبدلها بعلامتك) حرفًا بحرف من الأسفل داخل قناع (فارق 0.06 ث)، ويُرسم تحتها خط فيروزي-بنفسجي-وردي، ويتشكّل سطر متباعد مثل "IDEAS IN MOTION × [your web address]" من أحرف عشوائية، ويظهر سطر سيريف مائل "From idea to video in one chat" بتلاشٍ تدريجي. يتلاشى كل شيء إلى الأسود من 19.35 إلى 19.95 ث. </structure> <composition> الخلفية: وهج شعاعي عميق نيلي-أسود، المركز #10063A يتلاشى إلى #03030A عند الحواف، بلا حبيبات. الألوان المميزة: وردي #FB2D89 (الرئيسي)، برتقالي #FE9117، بنفسجي #7C6CF2، فيروزي #2DD4B0 وأبيض. الخطوط والعناوين بدرجات رمادي خزامي: #9A98A4 للعناوين، #57516F للتسميات الخافتة، #433E53 للمحاور. تتوهج الخطوط بنعومة بضبابية 12-16 px من لونها نفسه. الخطوط: المعادلات بخط سيريف على طراز Computer Modern (Old Standard TT، المتغيرات مائلة والدوال مستقيمة)؛ وكل قراءة وعدّاد وتسمية بخط أحادي المسافة (Liberation Mono أو مشابه)، صغير وواسع التباعد؛ واسم العلامة بخط غروتسك عريض بتباعد واسع جدًا. يبقى إطار ثابت طوال الوقت ويظهر تدريجيًا في 0.15-0.9 ث: أقواس زوايا رفيعة بطول 27 px على بعد 47 px من كل زاوية. أعلى اليسار: علامة نصية مثل "YOUR BRAND" (عريضة، 22 px، تباعد نحو 0.35 em) وتحتها سطر صغير متباعد مثل "IDEAS IN MOTION · [your web address]". أعلى اليمين: عدّاد المشاهد "01 / 08" وتحته عنوان قصير لكل مشهد، مثل "DESCRIBE YOUR IDEA" و"EDIT IN WORDS" و"NO KEYFRAMES" و"3D EFFECTS" و"LIVE PREVIEW" و"SHAPES AND SOUND" و"MUSIC TO THE RHYTHM" و"MP4 EXPORT" (استبدلها بشعاراتك)، مع نقطة وردية صغيرة على يساره. أسفل اليمين: ساعة جارية "t = 03.35 s" (منزلتان عشريتان) وسطر صغير برقم الإطار. في الأسفل: خط تقدم بسمك 1 px من x 80 إلى 1840 يمتلئ بتدرج فيروزي-بنفسجي-وردي مع مرور الوقت، مع علامات صغيرة عند كل حد بين المشاهد. أسفل اليسار: معادلة المشهد الحالي. </composition> <techniques> كل قطعة هي غليتش مدته 0.2 ث: تُقطَّع الصورة الخارجة إلى أشرطة أفقية مزاحة جانبيًا، وتومض 3-6 خطوط رفيعة بعرض الإطار كاملًا بالفيروزي والوردي والبرتقالي والأبيض، ويومض الإطار كله بالأبيض بنحو 14% ويتلاشى في 0.25 ث، وتتبدل عناوين الإطار بأحرف عشوائية لبضعة إطارات. تومض نقطة الإيقاع الوردية بقوة مع كل نبضة وتتلاشى في نصف نبضة. تظهر معادلة المشهد تدريجيًا بعد 0.1-0.35 ث من كل قطعة. تتحدث القراءات والساعة والعدّادات حيًّا مع الحركة. تتشكّل الأسطر المتباعدة من أحرف عشوائية؛ وتُكتب أسطر السيريف حرفًا بحرف؛ وتصعد العلامة النصية الختامية من الأسفل داخل قناع بفارق 0.06 ث. تستخدم الرسوم والتحولات ease-out أو sine in-out كما هو مذكور لكل مشهد. </techniques> <music> مقطوعة إلكترونية مبهجة بإيقاع 120 BPM (أوتار بيانو، باد دافئ، باص سينث، إيقاع four-on-the-floor)، مدتها 20 ثانية بالضبط، وكل قطعة تقع على نبضة. ناعمة ومفلترة في أول ثانيتين مع riser نحو boom عند 2 ث، وحماس كامل حتى 16 ث، ثم breakdown مفلتر مع riser نحو boom ختامي عند 18 ث، ثم تتلاشى حتى 20 ث. المزج عند نحو -14 LUFS مع ذروة حقيقية أقل من -1 dBTP. </music> <sound> صوت whoosh ناعم وثلاث نقرات غليتش عند كل قطعة، وصوت whoosh أعمق وboom عند فتح بوابة الفراكتال عند 12 ث، كلها فوق الموسيقى وعلى شبكة الإيقاع. بلا تعليق صوتي. </sound> <references> رسوم رياضية توضيحية متحركة ممزوجة بفن توليدي من البرمجة الإبداعية وواجهة HUD لجهاز أوسيلوسكوب أو أداة مخبرية من الخيال العلمي: خطوط رفيعة متوهجة على خلفية شبه سوداء، قراءات بخط أحادي المسافة، ومعادلات بخط سيريف كتب مدرسية. </references>

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

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

<direction> اصنع كشف شعار أفقي مدته 21 ثانية بدقة 1920x1080 وبمعدل 60 إطارًا في الثانية. يجمّع شعاري ببطء من أوجه low-poly وينتهي بتصميم أفقي (lockup) يُكتب فيه اسم علامتي التجارية وتحته شعار نصي. الفكرة: بناء طويل وهادئ بلا أي قطع لمدة أربع عشرة ثانية، ثم انطلاق عند ذروة الموسيقى (drop) خلال ثانيتين، ثم نهاية هادئة بالكتابة. المظهر: خلفية شبه سوداء مع تعتيم دائري ناعم عند الحواف، وألوان العلامة مسطحة، وخط غروتيسك نظيف. تجنّب التدرجات على الشعار، والخطوط المرئية بين المثلثات، والقطع أثناء البناء، وأي شيء مزدحم خلف الشعار. </direction> <structure> 1. من 0 إلى 2.6 ث، الهيكل السلكي: يرسم هيكل سلكي low-poly لمحيط شعاري نفسه بدءًا من أسفل الشعار نحو الخارج. فيه نحو 35–45 رأسًا و90 خطًا رفيعًا. 2. من 1.9 إلى 13.3 ث، التجميع: يُقطَّع الشعار إلى نحو 55 مثلثًا على امتداد ذلك الهيكل، وتطير إلى الداخل قطعة بعد قطعة من خارج الإطار. تبدأ الهبوطات بطيئة عند أسفل الشعار وتزداد كثافة نحو الأعلى. تهبط القطعة الأخيرة عند 13.3 ث، ويصبح الشعار كاملًا ودقيقًا. أبقِ الشعار المكتمل نحو ثانية واحدة. 3. عند 14.38 ث، الوميض، تمامًا على ذروة الموسيقى. ينطلق انفجار ضوئي وحلقة برتقالية متوسعة ووميض ساطع على الشعار معًا. بعد 0.1 ث من الضربة، تنمو لوحة بلون حبر داكن خلف الشعار وتتحول إلى مربع بزوايا مدورة كأيقونة تطبيق. أبقِ الأيقونة في المنتصف لمدة ثانية. 4. من 15.74 إلى 16.15 ث، الانزلاق: تتقلص الأيقونة إلى نحو 42% وتنتقل إلى الثلث الأيسر لتفسح مجالًا للاسم. 5. من 16.1 إلى 21 ث، الاسم: يظهر مؤشر وردي إلى يمين الأيقونة ويُكتب الاسم، مثلًا "Brand Name" (استبدله بعلامتك). عند 18.15 ث يمرّ الشعار النصي تحته، مثلًا "Your tagline here" (استبدله بشعارك). يومض المؤشر ثلاث مرات مع الإيقاع ويختفي عند 19.9 ث. أبقِ التصميم الأفقي حتى النهاية. </structure> <composition> الخلفية: تعتيم شعاعي شبه أسود، #0D0B1E في المركز ويغمق حتى #040308 عند الزوايا. لوحة الألوان: - حبر عميق #1C0B5D للوحة الأيقونة. - وردي #FB2D89 كلون تمييز رئيسي. - برتقالي #FE9117. - أبيض #FFFFFF. - لافندر فاتح #E9E4F2 و#F0EDFF للخطوط والنص الناعم. - بنفسجي #7C6CF2 في توهج الخلفية فقط. يبقى الشعار بألوان مسطحة بلا تدرجات. الهيكل السلكي: خطوط بلون لافندر #E9E4F2 بشفافية 60%، بسماكة 1.3 بكسل؛ ونقاط الرؤوس بلون #F0EDFF بنصف قطر 2.6 بكسل. لوحة الأيقونة: دائرة بقطر 676 بكسل تتحول إلى مربع بزوايا مدورة بنصف قطر 24% وظل ناعم. الخط: الاسم بخط غروتيسك عريض (Golos Text 700، نحو 155 بكسل، أبيض). والشعار النصي تحته بخط غروتيسك خفيف (Onest 400، نحو 49 بكسل، لافندر بشفافية 74%). المؤشر: شريط وردي #FB2D89 بحجم 10 × 128 بكسل مع توهج وردي ناعم. التصميم الأفقي النهائي (الأيقونة على اليسار والاسم والشعار النصي على اليمين) متمركز في الإطار ككل. </composition> <techniques> التقريب: تبدأ اللقطة بتقريب بطيء جدًا نحو مركز الإطار، من مقياس 0.886 عند 0 ث إلى 0.998 عند 11 ث، ثم تثبت. رسم الهيكل السلكي: ينمو كل خط خطيًا من رأسه الأسبق إلى الأحدث خلال 0.08–0.45 ث. وتظهر نقطة صغيرة تدريجيًا عند كل رأس حين يصل إليه الخط. الطيران إلى الداخل: كل قطعة من مثلث إلى ثلاثة مثلثات. تأتي بسرعة على مسار منحنٍ وتتباطأ حتى تستقر في مكانها خلال نحو 0.5 ث، وهي تتقلب في 3D. يخفت الدوران والانقلاب والميلان تدريجيًا إلى الصفر عند وصولها. أثناء الطيران تكون معتمة إلى نحو 60% وناعمة قليلًا؛ وعند الهبوط تكون حادة ومضاءة بالكامل. يعرض كل مثلث الجزء الخاص به تمامًا من الشعار المسطح، فيكون التجميع النهائي بلا أي خطوط. التوهج: توهج وردي خافت #FB2D89 بشفافية أقل من 10% ويتحول إلى البنفسجي #7C6CF2 ينمو خلف الشعار مع اكتماله. الوميض عند 14.38 ث: - ينفجر ضوء وردي-أرجواني بوضع screen حول الشعار ويتلاشى خلال 0.8 ث. - حلقة رفيعة برتقالية دافئة بسماكة 7 بكسل تبدأ بنصف قطر 300 بكسل وتنطلق خارج الإطار بسرعة ثابتة خلال 0.38 ث. - يومض الشعار بشدة ثم يستقر خلال 0.3 ث. اللوحة: بعد 0.1 ث من الضربة، تنمو لوحة #1C0B5D من نقطة إلى دائرة 676 بكسل خلال 0.21 ث (sine ease-out). تكون مضاءة في البداية، ثم تتحول زواياها إلى مربعة بنصف قطر 24%. الانزلاق: تتحجم الأيقونة إلى نحو 42% وتنتقل إلى الثلث الأيسر خلال 0.415 ث (power3 ease-in-out). تتشوش حتى 7 بكسل عند أسرع لحظة وتستقر حادة. بعد ذلك تواصل النمو ببطء شديد، نحو 3% خلال خمس ثوانٍ. الكتابة: حرف واحد لكل نوتة سادسة عشرة في الموسيقى (0.156 ث عند 96 BPM). يظهر كل حرف تدريجيًا خلال 0.05 ث بينما يقفز المؤشر خلفه. الشعار النصي: يمرّ من اليسار إلى اليمين خلال نحو 0.2 ث، حرفًا بحرف. </techniques> <music> مقطوعة موسيقية آلية بإيقاع 96 BPM، متفائلة وعصرية، مدتها 21 ثانية بالضبط. - البداية: غلوكنشبيل ناعم بأسلوب صندوق الموسيقى فوق أصوات pads دافئة. - عند نحو 4.4 ث: يدخل توزيع كامل مفعم بالحيوية (طبول وباس وآلات وترية وخط غلوكنشبيل ساطع). يُفتح فلتر على مدى مازورتين ويتصاعد نحو الوميض. - عند 14.38 ث: ضربة صنج وآكورد كبير يقعان تمامًا على الوميض. - بعد الذروة: يعود صندوق الموسيقى فوق pads ممتدة تحت التصميم الأفقي ويتلاشى إلى الصمت عند 21 ث. أبقِ كل شيء على شبكة الإيقاع بحيث تقع الكتابة ووميض المؤشر على النوتات السادسة عشرة والنبضات. </music> <sound> مؤثرات صوتية فوق الموسيقى: - صوت riser ناعم نحو هبوط المثلث الأول. - riser نحو الوميض، ثم دويّ عميق وصدمة زجاجية خفيفة عليه. - صوت whoosh قصير حين تنطلق الحلقة، وآخر حين تنزلق الأيقونة. - نقرة مفتاح ناعمة لكل حرف يُكتب، ونقرة خافتة عند ظهور الشعار النصي. بلا تعليق صوتي. مستوى الصوت العام نحو -14 LUFS، وذروة حقيقية أقل من -1 dBTP. </sound> <references> مقدمة شعار راقية لتقنية أو لإطلاق تطبيق: تجميع من هيكل سلكي low-poly إلى شكل صلب بأسلوب بناء أوجه ثلاثي الأبعاد، يتحرر عند الذروة إلى كشف أيقونة تطبيق، مع تصميم أفقي لاسم يُكتب بأسلوب الطرفية. </references>

معاينة الموجّه «عرض تعريفي سلس للتطبيق مدته 15 ثانية بموشن غرافيك خالص»

عرض تعريفي سلس للتطبيق مدته 15 ثانية بموشن غرافيك خالص

<direction> اصنع عرضًا تعريفيًا أفقيًا بالموشن غرافيك مدته 15 ثانية لتطبيقي، بدقة 1920x1080 و60 إطارًا في الثانية. كل شيء رسومات مرسومة بلا لقطات مصوّرة. الشيء الوحيد الذي أقدّمه هو شعار تطبيقي (أيقونة تطبيق مربعة بزوايا مستديرة). الفكرة حركة واحدة متواصلة يسلّم فيها كل قسم آخر عنصر فيه إلى القسم التالي. نقطة تصبح الشعار، والشعار يصبح الاسم، والحروف تصبح نقاطًا، والنقاط تصبح كرات سباق، وكرة تغمر الإطار، وشكل ينكسر إلى بلاطات، والبلاطات تصبح سحابة نقاط ثلاثية الأبعاد، ثم تأتي كلمات حركية وبطاقة ختامية. كل قسم يعرض مهارة حركة واحدة. استخدم ألوانًا مسطحة وأشكال متجهة حادة وواجهة HUD لمنظار كاميرا فوق كل شيء، مع قطعات مثبّتة على مقطوعة بإيقاع 128 BPM. تجنّب اللقطات المصوّرة والتدرجات والخامات والتعليق الصوتي وأي قسم يبدأ من العدم بدل أن ينمو من القسم السابق. </direction> <structure> 1. 0–1.9 ث، قريب من الأسود: نقطة وردية تجلس داخل حلقة رمادية رفيعة، وتنفتح الحلقة بـ expo.out. تنفرد حلقة ثانية حتى تصبح دائرة كبيرة باهتة (0.45 ث، expo.out). عند 0.5 ث ينمو شعاري من النقطة، وتظهر طبقاته واحدة تلو الأخرى بـ back.out. يستقر أكبر عند 0.92 ث وهو يدور برفق. تظهر حولها حلقة وردية رفيعة من نص mono دائري ("APP NAME · IDEAS IN MOTION · APPNAME.APP ·"، استبدله بنصك) وتدور ببطء. عند 1.7 ث تتقلص العلامة مع قليل من التمويه عائدة إلى نقطة صغيرة فاتحة. 2. 1.9–3.5 ث: عند الدروب في 1.93 ث ينفجر قرصان من النقطة، الفاتح أولًا والوردي بعده بـ 30 م ث (expo.out، 0.3 ث)، فتركب حلقة فاتحة رفيعة على الحافة الوردية. يصعد اسم تطبيقي بالخط العريض (grotesque) حرفًا بحرف من خط الأساس: كل حرف مقصوص داخل صندوقه الخاص، بفارق 30 م ث و0.26 ث expo.out. يملأ الاسم دائمًا العرض نفسه 1640 بكسل. يُرسم خط داكن رفيع من المركز فوقه، مع كتابة "01" على اليسار وعنوان موقعي على اليمين. من 2.55 ث تمر موجة عرض عبر الحروف: يضيق كل حرف من 150% إلى نحو 55% من العرض ثم يعود خلال 0.6 ث، بعد 0.1 ث من الذي قبله. تُعاد مواءمة الكلمة إلى 1640 بكسل في كل إطار، فتزداد الحروف الضيقة ارتفاعًا. عند 2.84 ث يصعد شعار فاتح بخط serif مائل ("ideas in motion") كلمة بكلمة تحته. عند 3.3 ث تنهار الحروف إلى نقاط داكنة ويسقط الشعار. 3. 3.5–5.6 ث: يأتي مسح قطري فاتح من أسفل اليمين (0.16 ث). تنطلق ست نقاط داكنة في منحنى إلى بداية ستة صفوف (power2.inOut، متعاقبة) وتأخذ ألوان الصفوف. يُكتب عنوان بخط serif مائل من اليسار ("Chat instead of a timeline.")، مع ملاحظة mono على اليمين ("NO KEYFRAMES · LIVE PREVIEW") وتسميتا المسار "IDEA" و"MP4" عند الطرفين. - لكل صف رقم وردي، واسم mono ("animated type"، "shapes"، "transitions"، "3D effects"، "sound"، "live preview")، وأيقونة منحنى صغيرة ترسم نفسها، وخط مسار يُرسم من اليسار إلى اليمين. - عند 4.215 ث تتسابق ست كرات (داكنة، بنفسجية، وردية، بالتكرار) مسافة 1040 بكسل في 0.94 ث بالضبط، لكل منها منحناها الخاص: linear وpower2.inOut وexpo.out وback.out(1.7) وelastic.out(1, 0.3) وbounce.out. - علامات فوق كل مسار تحدد موضع الكرة عند كل 1/16 من السباق. ثلاث حلقات شبحية تتلاشى تتبع كل كرة، وتتمدد الكرات على امتداد سرعتها، وتركب نقطة على كل أيقونة منحنى بتزامن، وتحصل كل كرة على هالة محيطية عند وصولها. - عند 5.3 ث تتلاشى الصفوف، وتطير الكرات إلى المركز وتندمج، وتنتفخ البنفسجية حتى تملأ الإطار. 4. 5.6–7.5 ث، بنفسجي: تقفز دائرة فاتحة من نقطة (elastic.out، 0.45 ث). تنطلق اثنتا عشرة نقطة تابعة إلى مدار (expo.out، بفارق 12 م ث). - خلفها خطوط إرشاد رفيعة متقاطعة، ودائرة مدار منقطة مع علامات تدريج والتسميتان "270°" و"90°". - قراءات mono على الجانبين: "SHAPES NO KEYFRAMES" على اليسار، وطلبات تعديل بين علامات اقتباس على اليمين ("“BIGGER” “SLOWER”"، "“ANOTHER COLOUR”"). - حلقات تموج وردية تنبض حول الدائرة. - ثم يتحول الشكل: دائرة ← مثلث ← نجمة ← مربع. يستغرق كل تحول 0.26–0.3 ث بـ back.out(2.2) مع دوران 120°، وتتبع الشكلَ خطوطٌ محيطية وردية صدوية فقط أثناء دورانه. - تتحول التوابع بعده بلحظة، واحدًا تلو الآخر، وتختفي عند 7.22 ث. يستقر كمربع قائم بحجم 360 بكسل. 5. 7.5–9.75 ث، قريب من الأسود: ينقسم المربع إلى تسع بلاطات بحجم 120 بكسل. تنمو متاهة truchet حلقة بحلقة حتى تملأ الإطار (back.out، نحو 30 م ث لكل حلقة)؛ تحمل كل بلاطة قوسين ربع دائريين في ركنين متقابلين، مرسومين كخطوط فاتحة بسماكة 20 بكسل. تعبرها موجات وردية: أولًا شريطان يمسحان من اليسار إلى اليمين، ثم حلقة تنغلق نحو المركز. تدور البلاطات داخل الموجة 90 أو 180 درجة، وتنكمش إلى 80% وتتحول إلى الوردي، فتنكسر الخطوط إلى شرطات، ثم تعود بعد مرور الشريط. تُكتب تسمية mono صغيرة في الأسفل ("SHAPES · TRANSITIONS · NO KEYFRAMES"). من 9.45 ث تنهار البلاطات من المركز إلى الخارج. 6. 9.5–11.25 ث: تظهر شبكة نقاط 24 × 24 حيث كانت البلاطات، منظورة من الأعلى. تميل إلى مستوى منظوري وتنطوي إلى كرة، ثم مزهرية، ثم كتلة مضغوطة، ثم torus وهي تدور حول محورها الرأسي. بين الأشكال تتحرك بـ power2.inOut، مع خطوط باهتة بين الجيران، ونقطة وردية تقريبًا من كل تسع، وتزداد النقاط خفوتًا مع العمق. تسمية mono أسفلها ("3D EFFECTS · LIVE PREVIEW · MP4 EXPORT"). تقترب عبر الكاميرا وتتلاشى عند 11 ث. 7. 11.25–13.0 ث، كلمات حركية: كلمة كل 0.23 ث، لكل منها خلفية مسطحة خاصة وتملأ العرض بعرض مختلف من الخط نفسه. استبدل الكلمات الست بعبارتك. - "IDEA": داكنة على وردي، تنزلق من اليسار، تدرج من 1.3 إلى 1، ويزول التمويه خلال 0.14 ث. - "IN.": فاتحة على قريب من الأسود مع نقطة ختام وردية، تدخل من اليمين مع تمويه، وملاحظة mono صغيرة في أعلى اليسار ("EDIT IN WORDS ↗"). - "VIDEO": مضغوطة جدًا بنفسجية على الصفحة الفاتحة، وتصعد الحروف من الأسفل بفارق 25 م ث. - "OUT.": فاتحة على بنفسجي، تدخل من اليسار مع تمويه، مع ملاحظة في أعلى اليمين ("↘ MP4 EXPORT"). - "NO": داكنة على أصفر. تسقط الحروف بزوايا مع back.out، ثم تملأ نسخ محددة الحواف من الكلمة صفوفًا أعلى وأسفل وتتحرك في اتجاهات متبادلة بينما ينجرف الصف الرئيسي إلى اليسار. - "KEYFRAMES.": فاتحة على قريب من الأسود، تنزلق إلى اليسار بسرعة ثابتة مع خط قطري رفيع، ثم تغادر بسرعة مع تمويه. 8. 13.0–15 ث، البطاقة الختامية: يغمر الوردي من اليمين وتنفرد حلقة فاتحة من المركز (0.42 ث). يدور شعاري إلى المركز (back.out) مع انفجار صغير من القصاصات من نقاط وحلقات ومثلثات بالداكن والفاتح والبنفسجي، ثم ينتقل إلى يسار التشكيل. يسقط اسم تطبيقي حرفًا بحرف بجانبه، من الضبابي إلى الحاد، 0.22 ث لكل حرف. يصعد تحته شعار بخط serif مائل ("your AI motion designer"). يُرسم خط، ويُكتب تحته سطر mono: "PICK A TEMPLATE · DESCRIBE YOUR IDEA · MP4 EXPORT"، ثم نقطة تسجيل صغيرة، ثم عنوان موقعي على اليمين. ثبّت اللقطة في الثانية الأخيرة. </structure> <composition> لوحة الألوان، كلها مسطحة: - أسود داكن عميق #0d0b1e - وردي ساطع #fb2d89 (اللون المميز الرئيسي) - صفحة فاتحة #faf9ff - بنفسجي ناعم #7c6cf2 - أصفر دافئ #ffd23f، لقطعة حركية واحدة فقط الخطوط: - خط grotesque عريض متغير بمحور عرض (Anybody، وزن 900، عرض 50–150%) للاسم والكلمات الحركية. - خط serif مائل تحريري مضغوط (Instrument Serif Italic) للعناوين والشعارات. - خط mono (JetBrains Mono) لتسميات الواجهة، 14 بكسل، تباعد الأحرف 0.16em. تغطي واجهة HUD لمنظار كاميرا الفيديو كله: - أقواس زوايا رفيعة بسماكة 2 بكسل، على بعد 44 بكسل من كل زاوية. - أعلى اليسار: اسم تطبيقي بأحرف mono كبيرة عريضة يليه شعار أخفت ("APP NAME IDEAS IN MOTION"). - أعلى اليمين: تسمية القسم الحالي ("01 — APP NAME"، "02 — NO KEYFRAMES"، "03 — SHAPES"، "04 — EDIT IN WORDS"، "05 — 3D EFFECTS"، "06 — KINETIC TYPE"، "07 — TRY IT FREE"). - أسفل اليسار: رمز زمني جارٍ مع الإطارات ("00:00:03:09") وشعار قصير ("LIVE PREVIEW"). - أسفل اليمين: شعار آخر ("NO KEYFRAMES")، وأربعة مربعات صغيرة يضيء واحد منها مع كل نبضة، و"MP4". - على امتداد الحافة السفلية: خط تقدم بسماكة 2 بكسل ينمو مع الزمن. يتبدل الـ HUD بين حبر داكن وفاتح عند كل قطع ليبقى مقروءًا على أي خلفية. كل الكلمات على الشاشة أمثلة استبدلها بكلماتك. </composition> <techniques> - ينتهي كل قسم بعنصر ينمو منه القسم التالي: نقطة إلى شعار، شعار عائد إلى نقطة، أقراص إلى اسم، حروف إلى نقاط، نقاط إلى كرات، كرة إلى فيضان بنفسجي، مربع إلى بلاطات، بلاطات إلى شبكة نقاط، سحابة نقاط تقترب عبر الكاميرا إلى الكلمات الحركية. - تُكتب كل تسمية قسم جديدة في الـ HUD خلال 0.3 ث، مع رموز عشوائية تسبق المؤشر. وتُكتب سطور mono الأخرى أيضًا. - خط بعرض متغير: حرّك محور عرض كل حرف وأعد مواءمة الكلمة كلها إلى عرض ثابت في كل إطار. - تُقص كشوف الحروف داخل صندوق كل حرف. - استخدم تمويه حركة خفيفًا في الحركات السريعة فقط، وحافة لونية بنفسجية باهتة على مسح القزحية الكبير. - الخطوط الصدوية والحلقات الشبحية والهالات خطوط رفيعة وردية أو بلون مطابق وتتلاشى بسرعة. </techniques> <music> سينث بوب إلكتروني حيوي بإيقاع 128 BPM، النبضة الأولى عند 0.06 ث، بطول 15 ث بالضبط: - أوتار باد ناعمة تشبه الأجراس في الميزان الأول. - بعد الدروب عند 1.93 ث، طبلة كيك four-on-the-floor مع تصفيق على 2 و4، وهاي-هات على النبضات الضعيفة، وباص سينث قوي، وضربات أوتار قصيرة تحت الأقسام. - بريك من نحو 10 ث يتصاعد نحو القسم الحركي. - وتر باد ختامي رنّان على البطاقة الختامية. تتغير الأقسام عند خطوط الموازين، ويحط الاسم على الدروب عند 1.93 ث، وتقع قطعات الكلمات الحركية على الأنصاف المضاعفة (ثُمنيات النوتة). </music> <sound> بلا صوت بشري. ضربات فوق الموسيقى: - رايزر خلال الميزان الأول - بوم على الدروب عند 1.93 ث - رايزر من نحو 10 ث إلى ضربة punch عند 11.25 ث - كيك وووش قصير عند كل قطع كلمة حركية - ضربة صنج crash عند 12.71 ث - بوم مع وتر الباد الرنّان عند هبوط البطاقة الختامية - blip صغير عند 14.1 ث تحمل الموسيقى المقطوعة وتهبط الضربات بوضوح فوقها. </sound> <references> عرض تعريفي لمصمم موشن مدمج مع فيديو إطلاق منتج تقني. يجمع بين طبقة منظار كاميرا، وطباعة حركية جريئة بالطراز السويسري، وعروض لمنحنيات التسهيل، وأنماط بلاطات truchet توليدية، وسحابة نقاط ثلاثية الأبعاد تدور. </references>

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

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