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

AR

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

Simple Motion

نقطة واحدة: حلقة أشكال سلسة بلقطة واحدة

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

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

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

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

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

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

الفكرة

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

البنية

من 0 إلى 2 ث، النقطة. مؤشر وردي بسمك 5 px يقف على الصفحة الفارغة. عند 0.5 ث يكتب نقطة بحجم 14 px تمامًا حيث ستكون نقطة الجملة الختامية (يمين المركز، منخفضة قليلًا)، ثم يخطو إلى اليمين ويتلاشى في 0.12 ث. تغوص الكاميرا في النقطة: يُستوفى مقياسها في فضاء لوغاريتمي من 14 px إلى قرص بحجم 130 px بينما تنزلق النقطة إلى المركز الدقيق، والاثنان على منحنى واحد sine.inOut من 0.53 إلى 1.98 ث.
من 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.
من 4.5 إلى 6 ث، الدائرة. دورة واحدة power2.inOut مدتها 1 ث تحمل النقطة عكس عقارب الساعة حول دائرة كاملة ترسم نفسها خلفها. ثم تعود النقطة إلى المركز (5.5–6.0 ث). تظهر تدريجيًا تسميتان وردويتان صغيرتان مائلتان بخطوط إرشاد رفيعة: «bigger» فوق القطر (4.6 ث) و«slower» في أعلى يسار الدائرة (5.6 ث).
من 6 إلى 8.2 ث، الكرة. تميل الصفحة لتصبح أرضية: خلال 2.2 ث، ببداية ناعمة واستقرار طويل، تدور الكاميرا من المنظر العمودي من الأعلى إلى نحو 62° عن العمودي، وتدور نحو 20° في السمت وتقترب. يتحول القرص المسطح إلى كرة لامعة من الحبر العميق بظل ناعم يسقط إلى اليمين. تبقى التسميات منتصبة، مثبتة في أماكنها على الأرضية، وتغادر عند 7.8 ث.
من 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 ث تتلاشى الكلمات وتعود الكرة من الحبر العميق.
من 11.2 إلى 16 ث، الكرة. تتراجع الكاميرا. تنحني الكرة لمدة 0.15 ث ثم ترتد إلى اليمين بمعامل ارتداد 0.75: رحلات طيران مدتها 0.98 ث × 0.75ⁿ، فتستقر تمامًا عند 16 ث. تترك مسارًا وردي منقطًا، وتبقى قمة القوس الأول تحت الترويسة. تتبع الكاميرا الكرة وتقترب كلما صغرت الارتدادات. تقف تسمية «sound effects» فوق القوس الثاني وتختفي قبل أن تصل إلى حافة الإطار.
من 16 إلى 20.6 ث، السرب. تُمحى الكرة من الأعلى إلى الأسفل خلال 0.6 ث بينما تغادر 8,192 نقطة صغيرة من الحبر العميق سطحها بالترتيب نفسه، وترتفع وتتجمع كسرب. تشكل سحابة كثيفة تتمدد وتدور وتنطوي إلى أهلّة، مع ظل ناعم واسع على الأرضية. التسمية «shapes».
من 20.6 إلى 23.4 ث، العالم. تهبط النقاط، متتابعة خلال 0.3 ث، على يابسة كرة أرضية، ثم تظهر الكرة تدريجيًا. يحصل المحور الوردي على التسمية «vertical». تدور الكرة الأرضية من الغرب إلى الشرق، وتواجه إفريقيا الكاميرا عند 22 ث.
من 23.2 إلى 25.1 ث، العودة إلى الصفحة. تنكمش الكرة الأرضية وتغمق لتصبح القرص المسطح بينما يتسطح المدار عائدًا إلى المنظر العمودي من الأعلى. ثم تتراجع الكاميرا بغوص معكوس (sine.inOut، نحو 1.1 ث) حتى يعود القرص إلى نقطة النهاية بحجم 14 px.
من 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 ث

التكوين

لوحة الألوان:

الصفحة #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 نفسه. الكتلة متمركزة أفقيًا، ومركزها العمودي أعلى قليلًا من منتصف الإطار. قِس السطرين أولًا وضع النقطة حيث تنتهي الكتلة المتمركزة، حتى تكتب البداية نقطتها في ذلك المكان بالضبط. أبقِ كل تعليق وتسمية وكلمة أرضية وأثر داخل الإطار وبعيدًا عن الترويسة.

التقنيات

تُكتب التعليقات من اليسار بمعدل 20 حرفًا في الثانية، مع مؤشر وردي رفيع يبقى 0.35 ث بعد الحرف الأخير. ويُمحى كل تعليق حرفًا واحدًا في كل إطار قبل دخول التعليق التالي مباشرة.
سمك الخطوط نحو 12 px بحافة حبر خشنة قليلًا. وكل خط يتحرك على إيقاع.
لكرة الحبر العميق انعكاسات استوديو: صندوق ضوء ناعم كبير أعلى اليسار، وشريط رفيع على اليمين، والأرضية في نصفها السفلي.
تنكسر الأشعة في الكرة الزجاجية داخلة وخارجة من الكرة وتعكس الأرضية، فتظهر الكلمات مقلوبة بداخلها. ويحمل ظلها كاوستيك ساطعًا.
تنضغط الكرة المرتدة وتتمدد قليلًا عند كل ملامسة. ويترك أثرها نقطة وردية كل 1/30 ث.
للكرة الأرضية قارات من نقاط نصف تونية بحبر عميق على كرة شاحبة مضاءة من أعلى اليسار. وفيها شبكة إحداثيات وردية خافتة كل 30°، وإطار حاد، ومحور وردي مائل 23.4° يبرز من القطبين.
تبقى التسميات منتصبة ومثبتة في أماكنها على الأرضية بينما تدور الكاميرا.
المنحنيات: sine.inOut للغوص ودحرجة الزجاج، وpower2.inOut لخطوات الخط ودورة الدائرة، وبداية ناعمة مع استقرار طويل للإمالة.
يُستوفى مقياس الغوص في فضاء لوغاريتمي ليبدو التكبير منتظمًا.

الموسيقى

استخدم 120 BPM، بنبضة كل نصف ثانية، مع التعليقات على الموازين والخطوط على النبضات. اصنع خلفية synthwave/chiptune مشرقة ومفعمة بالحيوية مدتها 29 ث بالضبط:

جرس ناعم واحد عند كتابة نقطة النهاية
أربيجيو سريع من 2 ث
بادات دافئة وتكتكة ناعمة من 6 ث
هبوط قصير عند 12 ث
رايزر نحو الجزء الأكثر حماسًا عند 16 ث، مع طبول وباس دافعين تحت السرب والكرة الأرضية
يتوقف الإيقاع نحو 23 ث
خاتمة خفيفة مع باد ناعم تحت الكتابة، تتلاشى في آخر نصف ثانية
استهدف نحو -14 LUFS، مع ذروة حقيقية أقل من -1 dBTP.

الصوت

مؤثرات صوتية فقط لما يحدث في الصورة، تحت الموسيقى:

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

المراجع

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

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

معاينة تقنية «تعليق توضيحي مكتوب بمؤشر يثبت قليلاً» — عند 0:02 من الفيديو

الطباعة

تعليق توضيحي مكتوب بمؤشر يثبت قليلاً

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

متى تُستخدم تعليقات خطوة بخطوة أو تسميات الأشكال التي تتغير بينما تستمر حركة واحدة متصلة.

عرض الكود

<!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=Spectral:ital,wght@0,600;1,400&display=swap");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #faf9ff; font-family: "Spectral", serif; }
#page { position: absolute; inset: 0; background: radial-gradient(ellipse 72% 105% at 50% 50%, rgba(28,11,93,0) 62%, rgba(28,11,93,0.05) 100%); }
#cap { position: absolute; left: 0; top: 500px; height: 70px; white-space: nowrap; }
#lab { position: absolute; top: 22px; font-size: 27px; line-height: 1; font-weight: 600; letter-spacing: 0.12em; color: #fb2d89; }
#txt { position: absolute; top: 5px; font-size: 48px; line-height: 1; font-style: italic; color: #1c0b5d; }
#car { position: absolute; top: 10px; width: 2.5px; height: 46px; background: #fb2d89; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="5" data-width="1920" data-height="1080">
  <div id="page" class="clip" data-start="0" data-duration="5"></div>
  <div id="cap" class="clip" data-start="0" data-duration="5"><span id="lab"></span><span id="txt"></span><span id="car"></span></div>
</div>
<script>
// A caption typed like a figure label: 20 characters a second, the caret stays 0.35 s after the last one,
// then the text is backspaced one character a frame so the next caption can type in its place.
const CAPS = [ // start (s), label, text; each caption ends where the next one starts
  { t: 0.3, l: "IDEAS", s: "in motion" },
  { t: 2.5, l: "CHAT", s: "instead of a timeline" },
  { t: 5.0 },
];
const RATE = 0.05;   // seconds per typed character
const HOLD = 0.35;   // the caret stays this long after the last character
const FPS = 60;      // the backspace removes one character per frame
const GAP = 32;      // px between the label and the text
const lab = document.getElementById("lab"), txt = document.getElementById("txt"), car = document.getElementById("car"), cap = document.getElementById("cap");
const probe = document.createElement("span"); probe.style.cssText = "position:absolute;visibility:hidden;white-space:nowrap"; document.getElementById("root").appendChild(probe);
function width(text, ref) { const cs = getComputedStyle(ref); probe.style.font = cs.font; probe.style.letterSpacing = cs.letterSpacing; probe.textContent = text; return probe.getBoundingClientRect().width; }
function draw(t) {
  let k = -1; for (let i = 0; i < CAPS.length - 1; i++) if (t >= CAPS[i].t) k = i;
  if (k < 0) { cap.style.opacity = 0; return; }
  const c = CAPS[k], next = CAPS[k + 1].t, n = c.s.length;
  let shown = Math.min(n, Math.floor((t - c.t) / RATE));
  let caret = t < c.t + n * RATE + HOLD;
  if (t >= next - (n + 1) / FPS) { shown = Math.max(0, Math.min(n, Math.round((next - t) * FPS) - 1)); caret = false; }
  const lw = width(c.l, lab), full = lw + GAP + width(c.s, txt);
  cap.style.opacity = 1;
  cap.style.transform = `translateX(${Math.round(960 - full / 2)}px)`; // centred on the whole caption, typed from the left
  lab.textContent = c.l; txt.textContent = c.s.slice(0, shown); txt.style.left = `${lw + GAP}px`;
  car.style.left = `${lw + GAP + width(c.s.slice(0, shown), txt) + 4}px`; car.style.opacity = caret ? 1 : 0;
}
const tl = gsap.timeline({ paused: true });
const clock = { t: 0 };
tl.to(clock, { t: 5, duration: 5, ease: "none", onUpdate: () => draw(clock.t) }, 0);
document.fonts.ready.then(() => 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:01 من الفيديو

الكاميرا

الغوص في نقطة نهاية الجملة

تقترب الكاميرا من نقطة جملة مكتوبة: يُستكمل المقياس في الفضاء اللوغاريتمي من نقطة 14 px إلى قرص 130 px بينما يتحرك موضع النقطة على الشاشة خطياً نحو المركز، وكلاهما على منحنى واحد sine.inOut مدته نحو 1.45 ثانية، فيبدو النمو غوصاً منتظماً. وعند التشغيل بالعكس تبتعد الكاميرا إلى النقطة نفسها في النهاية، فتُغلق الحلقة.

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

عرض الكود

<!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=Spectral:wght@400&display=swap");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #faf9ff; font-family: "Spectral", serif; }
#cam { position: absolute; inset: 0; transform-origin: 0 0; }
#line { position: absolute; right: 559px; top: 528px; font-size: 129px; line-height: 1; color: #1c0b5d; white-space: nowrap; }
#stop { position: absolute; left: 1363.5px; top: 614.4px; width: 14px; height: 14px; border-radius: 50%; 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="cam" class="clip" data-start="0" data-duration="4"><div id="line">“The agent animates it</div><div id="stop"></div></div>
</div>
<script>
// The camera dives into the full stop of a sentence: its scale is interpolated in log space and the dot's place on screen
// linearly, both on one sine.inOut, so the dot grows at a steady rate and arrives in the centre as a 130 px disc.
const STOP = { x: 1370.5, y: 621.4, d: 14 };  // the dot at rest, on screen
const END = { x: 960, y: 540, d: 130 };       // where the dive ends
const T0 = 1.0, T1 = 2.45;                    // the dive, seconds
const cam = document.getElementById("cam"), line = document.getElementById("line");
const sio = (u) => -(Math.cos(Math.PI * u) - 1) / 2;
function draw(t) {
  const u = sio(Math.min(1, Math.max(0, (t - T0) / (T1 - T0))));
  const s = Math.pow(END.d / STOP.d, u);                 // log-space zoom
  const x = STOP.x + (END.x - STOP.x) * u, y = STOP.y + (END.y - STOP.y) * u; // where the dot is now
  cam.style.transform = `translate(${x}px, ${y}px) scale(${s}) translate(${-STOP.x}px, ${-STOP.y}px)`;
  line.style.opacity = 1 - Math.min(1, Math.max(0, (t - T0) / 0.5)); // the words leave as the dot takes over
}
const tl = gsap.timeline({ paused: true });
const clock = { t: 0 };
tl.to(clock, { t: 4, duration: 4, ease: "none", onUpdate: () => draw(clock.t) }, 0);
draw(0);
window.__timelines = window.__timelines || {}; window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

معاينة تقنية «نقطة ترسم خطها ودائرتها بنفسها» — عند 0:04 من الفيديو

أشكال

نقطة ترسم خطها ودائرتها بنفسها

تتحرك النقطة بخطوات مدة كل منها نصف ثانية بمنحنى power2.inOut (يميناً، ثم أقصى اليسار، ثم عودة، ثم يميناً)، والخط هو ببساطة النطاق الذي مرّت به؛ ثم يرسم دوران مدته 1 ثانية بمنحنى power2.inOut الدائرة خلفها وتعود النقطة إلى المركز بخطوة أخرى مدتها 0.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>
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #faf9ff; }
#ink { position: absolute; inset: 0; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="5" data-width="1920" data-height="1080">
  <svg id="ink" class="clip" data-start="0" data-duration="5" width="1920" height="1080" viewBox="0 0 1920 1080">
    <defs><filter id="rough" x="-5%" y="-5%" width="110%" height="110%"><feTurbulence type="fractalNoise" baseFrequency="0.09" numOctaves="2" seed="7" /><feDisplacementMap in="SourceGraphic" scale="3.5" /></filter></defs>
    <g filter="url(#rough)" stroke="#1c0b5d" stroke-width="8.5" stroke-linecap="round" fill="none">
      <line id="seg" x1="960" y1="540" x2="960" y2="540" />
      <circle id="arc" cx="960" cy="540" r="256" transform="rotate(0 960 540) scale(1 -1) translate(0 -1080)" />
    </g>
    <circle id="dot" cx="960" cy="540" r="42.5" fill="#1c0b5d" />
  </svg>
</div>
<script>
// A dot draws with its own path: power2.inOut moves on half-second steps (right, far left, centre, right), the line is
// the range the dot has visited, then one power2.inOut turn of 1 s draws the circle behind it and the dot returns to the centre.
const R = 256, C = { x: 960, y: 540 };                       // circle radius and centre, px
const seg = document.getElementById("seg"), arc = document.getElementById("arc"), dot = document.getElementById("dot");
const CIRC = 2 * Math.PI * R;
arc.setAttribute("stroke-dasharray", `0 ${CIRC}`);
const tl = gsap.timeline({ paused: true });
const p = { x: 0, a: 0, lo: 0, hi: 0 };                       // dot x offset, swept angle, visited range
const draw = () => {
  p.lo = Math.min(p.lo, p.x); p.hi = Math.max(p.hi, p.x);
  const onCircle = p.a > 0 && p.a < Math.PI * 2;
  const dx = onCircle ? R * Math.cos(p.a) : p.x, dy = onCircle ? -R * Math.sin(p.a) : 0;
  dot.setAttribute("cx", C.x + dx); dot.setAttribute("cy", C.y + dy);
  seg.setAttribute("x1", C.x + p.lo); seg.setAttribute("x2", C.x + p.hi);
  arc.setAttribute("stroke-dasharray", `${(p.a / (Math.PI * 2)) * CIRC} ${CIRC}`);
};
const step = (x, at, d) => tl.to(p, { x, duration: d, ease: "power2.inOut", onUpdate: draw }, at);
step(R, 0.0, 0.5); step(-R, 0.5, 1.0); step(0, 1.5, 0.5); step(R, 2.0, 0.5);
tl.to(p, { a: Math.PI * 2, duration: 1.0, ease: "power2.inOut", onUpdate: draw }, 2.5);
tl.to(p, { x: 0, duration: 0.5, ease: "power2.inOut", onUpdate: draw }, 3.5);
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:09 من الفيديو

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

كرة زجاجية تكسر النص على الأرضية

يتتبع شيدر الكرة شعاع الرؤية تحليلياً: انكسار إلى الداخل بمعامل n = 1.5، ثم عبور الوتر 2R·dot(t1, −N)، ثم انكسار إلى الخارج، ثم الاصطدام بمستوى الأرضية وقراءة نسيج النص هناك، فتظهر الكلمات مقلوبة داخل الكرة؛ ويمزج Fresnel الانعكاس. وتحتها يحمل ظل ناعم تحليلي لمعاناً مركزاً (caustic) ساطعاً حيث تُركّز الكرة الضوء.

متى تُستخدم لقطات قريبة للزجاج أو العدسة فوق النص أو الواجهة، للحظة «النظر من خلال» دون متتبع مسارات.

المكتباتthree

عرض الكود

<!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=JetBrains+Mono:wght@400&display=swap");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #faf9ff; }
#gl { position: absolute; inset: 0; width: 1920px; height: 1080px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="5" data-width="1920" data-height="1080">
  <canvas id="gl" class="clip" data-start="0" data-duration="5" width="1920" height="1080"></canvas>
</div>
<script type="module">
// A glass ball rolls over words printed on the floor. Its shader traces the view ray analytically: refract into the sphere,
// cross it along the chord, refract out, then hit the floor plane and read the text there, so the words show upside down
// inside the ball. A soft shadow with a bright caustic (the ball focusing the light) sits on the floor.
import * as THREE from "https://cdn.jsdelivr.net/npm/[email protected]/+esm";
THREE.ColorManagement.enabled = false;
const R = 64, IOR = 1.5;                                  // ball radius (world units) and index of refraction
const LIGHT = new THREE.Vector3(-0.95, 1.0, -0.42).normalize();
const PAPER = new THREE.Color(0xf3f1fc), INK = new THREE.Color(0x1c0b5d);
const LINES = ["“Tell the chat what to show.”", "  “The agent builds the animation.”", "  “No keyframes to hunt for.”", "  “Say what should change.”", "“Bigger”, “slower”, “another colour”"];
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById("gl"), antialias: true, alpha: true, preserveDrawingBuffer: true });
renderer.setPixelRatio(1); renderer.setSize(1920, 1080, false); renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
const scene = new THREE.Scene(), camera = new THREE.PerspectiveCamera(27, 1920 / 1080, 1, 20000);
camera.position.set(-330, 540, 900); camera.lookAt(-30, 40, 0);
const textCanvas = document.createElement("canvas"); textCanvas.width = 2048; textCanvas.height = 512;
const textTex = new THREE.CanvasTexture(textCanvas);
const RECT = new THREE.Vector4(-620, -300, 1156, 288);    // where the text lies on the floor: x, z, width, depth
const floorGLSL = `uniform sampler2D uText; uniform vec4 uRect; uniform vec3 uC; uniform vec3 uL; uniform vec3 uPaper; uniform vec3 uInk;
  float textAt(vec2 p){ vec2 uv=(p-uRect.xy)/uRect.zw; if(uv.x<0.||uv.y<0.||uv.x>1.||uv.y>1.) return 0.; return texture2D(uText, vec2(uv.x,1.-uv.y)).a*.86; }
  float shadowAt(vec2 p){ vec3 cp=uC-vec3(p.x,0.,p.y); float s=dot(cp,uL); if(s<=0.) return 0.; float d=length(cp-uL*s); float w=max(2.,s*.09); return (1.-smoothstep(${R}.-w,${R}.+w,d))*.55; }
  float causticAt(vec2 p){ vec3 cp=uC-vec3(p.x,0.,p.y); float s=dot(cp,uL); if(s<=0.) return 0.; return exp(-pow(length(cp-uL*s)/(${R}.*.36),2.)); }
  vec3 floorAt(vec2 p){ vec3 c=uPaper*(1.-shadowAt(p)); c=mix(c,vec3(.165,.09,.4),textAt(p)); return c; }`;
const U = { uText: { value: textTex }, uRect: { value: RECT }, uC: { value: new THREE.Vector3(0, R, 0) }, uL: { value: LIGHT }, uPaper: { value: PAPER }, uInk: { value: INK }, uCam: { value: camera.position } };
const floor = new THREE.Mesh(new THREE.PlaneGeometry(6000, 6000).rotateX(-Math.PI / 2), new THREE.ShaderMaterial({ uniforms: U, transparent: true,
  vertexShader: `varying vec2 vP; void main(){ vec4 w=modelMatrix*vec4(position,1.); vP=w.xz; gl_Position=projectionMatrix*viewMatrix*w; }`,
  fragmentShader: `${floorGLSL} varying vec2 vP; void main(){ float t=textAt(vP), sh=shadowAt(vP), ca=causticAt(vP)*.85;
    float a=max(t,sh); vec3 col=mix(uInk*.6,vec3(.165,.09,.4),t/max(a,1e-4));
    gl_FragColor=vec4(mix(col,vec3(1.),ca), max(a,ca*.9)); }` }));
scene.add(floor);
const ball = new THREE.Mesh(new THREE.SphereGeometry(R, 128, 96), new THREE.ShaderMaterial({ uniforms: U,
  vertexShader: `varying vec3 vW; void main(){ vec4 w=modelMatrix*vec4(position,1.); vW=w.xyz; gl_Position=projectionMatrix*viewMatrix*w; }`,
  fragmentShader: `${floorGLSL} uniform vec3 uCam; varying vec3 vW;
    vec3 trace(vec3 p, vec3 d){ if(d.y<-.0005){ vec3 h=p+d*(-p.y/d.y); return floorAt(h.xz);} return vec3(.95,.945,.99); }
    void main(){ vec3 N=normalize(vW-uC), V=normalize(vW-uCam); float cosi=clamp(dot(-V,N),0.,1.);
      vec3 t1=refract(V,N,1./${IOR.toFixed(2)}); float chord=2.*${R}.*dot(t1,-N); vec3 P2=vW+t1*chord; vec3 N2=(P2-uC)/${R}.;
      vec3 t2=refract(t1,-N2,${IOR.toFixed(2)}); if(dot(t2,t2)<.001) t2=reflect(t1,-N2);
      float fr=.04+.96*pow(1.-cosi,5.); gl_FragColor=vec4(mix(trace(P2,t2), trace(vW+N*.5, reflect(V,N)), fr),1.); }` }));
scene.add(ball);
function draw(t) {
  const x = -60 - 480 * (-(Math.cos(Math.PI * Math.min(1, t / 5)) - 1) / 2); // rolls left across the words, sine.inOut
  ball.position.set(x, R, 0); U.uC.value.copy(ball.position);
  renderer.render(scene, camera);
}
const tl = gsap.timeline({ paused: true });
const clock = { t: 0 };
tl.to(clock, { t: 5, duration: 5, ease: "none", onUpdate: () => draw(clock.t) }, 0);
document.fonts.load('400 52px "JetBrains Mono"').then(() => {
  const g = textCanvas.getContext("2d"); g.font = '400 52px "JetBrains Mono"'; g.fillStyle = "#000";
  LINES.forEach((l, i) => g.fillText(l, 12, 70 + i * 92)); textTex.needsUpdate = true; draw(tl.time());
});
draw(0);
window.__timelines = window.__timelines || {}; window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

موجّهات أخرى

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

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

<direction> اصنع عرضًا متحركًا (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>

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

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

<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. يمكنك تغيير اختيارك من تذييل الصفحة.

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