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

AR

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

Simple Motion

ريل علامة تجارية «بيان الكرة المرتدة»

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

رمز الموجّه MOVتاريخ النشر 11 نوفمبر 2026استُخدم مرتين

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

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

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

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

الفكرة

اصنع ريل علامة تجارية عموديًا مدته 19.2 ثانية (1080x1920، 30 إطارًا في الثانية) يتكرر بسلاسة تامة. كله موشن جرافيك، مقطوع على إيقاع 150 نبضة في الدقيقة (0.4 ثانية للنبضة، 12 مازورة). الفكرة: كرة لامعة واحدة هي بطلة الفيلم كله. ترتد عبر بيان افتتاحي بكلمة لكل نبضة، ثم تصبح ثقل بندول، ثم تتحول إلى مصباح يضيء صفحة، وتنتظر مونتاجًا سريعًا خلف اسم علامتك، وتنتهي وحيدة في بطاقة النهاية تمامًا حيث يبدأ الإطار الأول. المظهر: خط تحريري جريء على خلفيات مسطحة بلون الليل العميق والورق، مع لون مميز متدرج من الوردي إلى البرتقالي ولون ثانٍ بنفسجي. الإيقاع: محموم في أول 3.2 ثانية، ثم مشهدان طويلان يتنفسان بنبض من نبضتين، ثم دفعة مدتها 3.2 ثانية من القطعات على الأثمان، وذروة مدتها ثانيتان، ونقطة تكرار هادئة. تجنب اللقطات المصورة والتعليق الصوتي والانتقالات الناعمة وأي قطع يخطئ الإيقاع: كل قطع يقع على نبضة أو نصف نبضة. يجب أن تستخدم الكلمات الملونة باللون المميز نفس سماكة ExtraBold كباقي النص، وليس أرفع منها أبدًا.

البنية

الافتتاح، 0–3.2 ث. إطار داكن. تبدأ الكرة (140 بكسل) من المركز وتسقط نحو خط الأرض عند نحو y 1516، وتصغر إلى 88 بكسل، وتهبط عند 0.37 ث. من 0.4 ث تظهر كلمة واحدة لكل نبضة، ثم لكل نصف نبضة: «نحن» (0.4)، «لا» (0.8)، «نكتفي» (1.2)، «بالأوامر.» (1.6)، «نحن» (2.0)، «نخرج.» (2.2، بالتدرج المميز)، «نكتب» (2.6)، «ضوء» (2.8)، «عمق» (3.0). استبدلها بأسطر البيان الخاصة بك. تتبدل الخلفية بين الداكن والورقي مع كل قطع. عند «ضوء» و«عمق» تطير الكرة إلى الأعلى وتخرج من أعلى اليسار.
البندول، 3.2–8.0 ث. خلفية ورقية. تصبح الكرة ثقل (112 بكسل) قضيب داكن رفيع معلق من محور فوق مركز الأعلى بمقدار 380 بكسل (طول الذراع 1317 بكسل). ظل ضبابي للقضيب والثقل مزاح إلى اليمين. عنوان من سطرين بأحرف كبيرة يتوسط الشاشة ويتغير مع كل تأرجحة: «صُنع / يدويًا؟» ← «صُنع / بالكود.» (السطر الثاني باللون المميز) ← «بلا / خط زمني.» ← «بلا / إطارات مفتاحية.» ← «فقط / كلمات.» (اللون المميز) ← «و / ضوء.». هذه أمثلة لتستبدلها. عند 7.2 ث ينطفئ الضوء خلف خط القضيب، وتجر التأرجحة الأخيرة العتمة عبر الإطار.
المصباح، 8.0–12.8 ث. داكن #14112E. تصبح الكرة مصباحًا متوهجًا يكشف مخروط ضوئه صفحة ورقية. تحمل الصفحة «الضوء / ليس سوى / رياضيات.» بأحرف كبيرة (مثال؛ السطر الأخير بالبنفسجي) وشعارًا صغيرًا قرب y 1430: نقطة متدرجة وشعارك النصي بلون الحبر. من 12.27 ث تُضاء الصفحة كلها.
المونتاج، 12.8–16.0 ث. عند الدروب، يثبت «[علامتك]» بخط Anton (بارتفاع نحو 260 بكسل، في المنتصف) بينما يتغير العالم خلفه مع كل ثُمن نبضة (0.2 ث). العوالم بالترتيب:

كتلة هلامية ثلاثية الأبعاد لامعة ومرخّمة بالوردي والبرتقالي بحافة واضحة، فوق الرمادي
الكتلة نفسها أقرب
كتل مسطحة: مربعات بنفسجية وداكنة وورقية والتدرج المميز
حلقات منومة من الحبر والورق تقترب وتدور
بطاقة ورقية فارغة تتأرجح من خيط فوق البنفسجي
حقل من مفاتيح لوحة مفاتيح داكنة من الأعلى، وبعض المفاتيح الوردية والبرتقالية يُضغط عليها
طارة مرسومة بنقاط هافتون متميزة بوضوح على الداكن
بنفسجي مسطح مع شبكة خافتة
أشكال ثلاثية الأبعاد كأنها ألعاب تتقلب على لون برقوقي داكن (مكعبات وكرات وحلقات ومخاريط وكبسولات بألوان اللوحة مع الأصفر #FFD23F)
الأشكال نفسها ضبابية على وردي باستيل
هاتف زجاجي على الرمادي
الكتلة الهلامية على البنفسجي
أرضية من مكعبات بيضاء مع أعمدة وردية وبرتقالية ترتفع
الطارة الهافتون كنقاط حبر على الأبيض
مرجاني مسطح مع شبكة

الخاتمة بالفوكسل، 16.0–18.2 ث. خلفية بنفسجية. تُبنى كلمة قصيرة (منتجك، أو النصف الثاني من اسم علامتك) من مكعبات صغيرة. تتشكل بالكامل عند 16.6 ث، وتتنفس، ثم تتفجر من 17.72 ث بينما ينفتح ثقب أسود من المركز ويملأ الإطار عند 18.17 ث.
بطاقة النهاية، 18.2–19.2 ث. داكنة. تنمو الكرة من العدم في المركز (142 بكسل عند x 539، y 959). يظهر شعارك النصي بتدرج الوردي إلى البرتقالي تحتها عند 18.1 ث، ويثبت، ثم يتلاشى عند 18.85 ث. فتبقى الكرة وحدها، تمامًا حيث يبدأ الإطار الأول من الفيلم، فيكون التكرار سلسًا.

التكوين

اللوحة اللونية:

ليل عميق #0C0A1E ولون أفتح قليلًا #14112E للمشاهد الداكنة
ورقي #F2EFFA للمشاهد الفاتحة
حبر #1C0B5D للنص على الورق
تدرج مميز من الوردي إلى البرتقالي #FB2D89 → #FE9117
لون ثانٍ بنفسجي #7C4DFF
أصفر #FFD23F لأشكال الألعاب فقط
كلمات الافتتاح بلون الورق على القطعات الداكنة وبلون الحبر على القطعات الورقية.
الخطوط:
الكلمات والعناوين بخط Manrope ExtraBold، بتباعد حروف ضيق (-0.035em في العناوين بالأحرف الكبيرة)
اسم العلامة في المونتاج بخط Anton
معرّف صغير «@yourbrand» (استبدله) بخط JetBrains Mono في أعلى اليسار، على بعد 56 بكسل من اليسار و246 بكسل من الأعلى، طوال الفيلم
عنوان البندول: السطر الأول بارتفاع حروف نحو 145 بكسل، والثاني نحو 128 بكسل، في المنتصف.
الكرة كرة لامعة: انعكاس أبيض ناعم في أعلى اليسار فوق جسم متدرج من البرتقالي → الوردي → الماجنتا العميقة.
اسم العلامة في المونتاج: ثلاث طبقات (ظل حاد مزاح 9 بكسل، وحدّ خارجي 16 بكسل، والتعبئة). يكون أبيض بحدّ داكن على العوالم الداكنة أو المزدحمة، وداكنًا بحدّ أبيض على الفاتحة.
كلمة الفوكسل: صف واحد، بارتفاع نحو 430 بكسل وعرض 890 بكسل. الحرف الأول متدرج من الوردي إلى البرتقالي من الأعلى إلى الأسفل؛ والباقي أبيض ورقي.
بطاقة النهاية: الكرة في المنتصف؛ الشعار النصي المتدرج عند نحو y 1225، بعرض نحو 620 بكسل.

التقنيات

الافتتاح:

تهبط كل كلمة في أربعة إطارات بتباطؤ خروج قوي (power3.out). تتناوب الدخلات: تباعد حروف ينغلق من نصف em، وسقوط مع تكبير من 125% وأسفل بمقدار 320 بكسل، وتمدد رأسي من 260% مثبّت على خط الأساس، وانزلاق من 835 بكسل خارج الشاشة من اليسار.
تغييرات الخلفية قطعات حادة.
عند كل قطع تنتفخ الكرة إلى 125% في مكانها لإطار واحد وتكون في قمة قفزتها في التالي. وعلى مدى خمسة إطارات تنزلق إلى موضع الراحة الآخر (x 287 أو 788) وهي تصغر من جديد.
البندول:
يتأرجح ±23.6° بـ power3.inOut في 0.34 ث، وتتمركز كل تأرجحة على كل نبضة ثانية (3.6، 4.4، 5.2، 6.0، 6.8، 7.6 ث)، ويثبت عند الطرفين.
ثلاث نسخ باهتة بفارق إطار تتبع الثقل.
القضيب واضح بجلاء وظله ملحوظ.
تمسح كل تأرجحة العنوان إلى العنوان التالي. يظهر العنوان الجديد في الجهة التي عبرها الثقل بالفعل والقديم في الجهة الأخرى، باستخدام أقنعة inset مستطيلة بنفس التباطؤ.
عند 7.2 ث يصبح كل ما وراء خط القضيب داكنًا، وتجر التأرجحة الأخيرة العتمة عبر الإطار.
المصباح:
تنزلق الكرة إلى المركز في ثلث ثانية وتبدأ بالتوهج، مع هالة ناعمة برتقالية وردية بنحو 220 بكسل حولها.
ينفتح مخروط ضوء من الكرة كشريحة 7° تشير إلى الأعلى مباشرة. يمسح إلى الأسفل يسارًا ويمينًا ويتسع مع حركة الكرة: إلى نحو x 800، y 1090، ثم x 900، y 975، ثم إلى الأعلى عند x 760، y 560.
يستقر المخروط فوق الكلمات، بعرض 120° ويشير إلى الأسفل.
المخروط قناع على شكل إسفين رأسه عند الكرة، يكشف الصفحة الورقية تحت العتمة. نسخة من الصفحة بشفافية 28%، أعرض بـ 4.5° من كل جانب، تصنع ظلًا جزئيًا رماديًا حادًا.
من 12.27 ث ينفتح المخروط إلى 360° في 0.33 ث بتباطؤ دخول وخروج.
المونتاج: قطعات حادة كل 0.2 ث خلف الاسم الثابت. يتحرك كل عالم داخل فتحته: الحلقات تقترب وتدور، والبطاقة تتأرجح، والمفاتيح تُضغط، والأشكال تتقلب، والأعمدة ترتفع.
الخاتمة بالفوكسل:
نحو 800 مكعب صغير، بعمق ثلاث طبقات، على شبكة 11x18 لكل حرف.
تبدأ المكعبات متناثرة في العمق وتطير إلى مكانها بتباطؤ quartic in-out خلال نصف ثانية، بتأخير متدرج حتى 0.18 ث، بينما تندفع شرارات صغيرة أمام الكاميرا.
تتنفس الكلمة: يدور كل حرف قليلًا حول مركزه، وتجري موجة عبر صفوفه.
من 17.72 ث يتفجر كل مكعب إلى الخارج ونحو العدسة، مخططًا بضبابية الحركة.
ينفتح قرص داكن من ثقب دبوس في المركز (power3.in، 0.37 ث من 17.8 ث) ويملأ الإطار عند 18.17 ث، والمكعبات تطير فوقه.
بطاقة النهاية: تنمو الكرة من العدم في نحو 0.12 ث، ويتلاشى الشعار النصي عند 18.85 ث.

الموسيقى

اصنع مقطوعة إلكترونية آلية أصلية، داكنة وقوية، بإيقاع 150 نبضة في الدقيقة في ري صغير بإحساس half-time (الكيك على الواحد، السنير على الثلاثة). فيها باس مشوّه نابض بالأثمان، وطبول محكمة، وباد متوترة، إضافة إلى مقطع صوتي معالج بلا كلمات يُستخدم كنسيج صوتي، بلا غناء. تُشغَّل من الإطار الأول. تقع الكيكات والسنيرات على قطعات الكلمات وتأرجحات البندول، ويأتي الدروب عند 12.8 ث. تنتهي بضربة ثقيلة مع وتر داكن تمامًا على الثقب الأسود عند 18.0 ث، يرنّ تحت بطاقة النهاية. اقتطعها عند 19.2 ث على نهاية المازورة.

الصوت

ضع هذه فوق الموسيقى:

نقرة خفيفة مع كل ومضة كلمة
صوت whoosh مع كل تأرجحة
riser نحو البندول
مسحة هابطة عند انطفاء الضوء
جرس عندما تضيء الكرة
riser يؤدي إلى boom في المونتاج عند 12.8 ث
تكة هادئة مع كل عالم جديد
صوت whoosh عند اندفاع المكعبات
boom صغير عندما تستقر الكلمة
riser يؤدي إلى boom عميق تحت الثقب الأسود
بلا صوت بشري.

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

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

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

معاينة تقنية «ومضات كلمات مع إيقاع القطع بأربعة مداخل» — عند 0:01 من الفيديو

الطباعة

ومضات كلمات مع إيقاع القطع بأربعة مداخل

كلمة واحدة لكل نبضة (0.4 ث عند 150 BPM، ونصف نبضات في النهاية)، والخلفية تتبدل بين شبه الأسود ولون الورق عند كل قطع. تهبط كل كلمة في أربعة إطارات باستخدام power3.out مع تدوير أحد أربعة مداخل: تباعد حروف (tracking) ينغلق من نصف em، وسقوط مع تكبير من 125% وأدنى بـ 320 px، وتمدد عمودي من 260% مثبت عند خط الأساس، وانزلاق من مسافة 835 px خارج الإطار من اليسار.

متى تُستخدم بيان سريع أو جملة جذب تُقال كلمة كلمة على الإيقاع.

عرض الكود

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ومضات كلمات مع إيقاع القطع بأربعة مداخل</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@800&family=Anton&display=swap");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; }
#bg { position: absolute; inset: 0; background: #0c0a1e; }
.w { position: absolute; left: 0; top: 840px; width: 1080px; text-align: center; white-space: nowrap; font: 800 230px/1.1 "Manrope", sans-serif; letter-spacing: -0.03em; opacity: 0; }
.w span { display: inline-block; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2.8" data-width="1080" data-height="1920">
  <div id="bg" class="clip" data-start="0" data-duration="2.8"></div>
  <div id="words" class="clip" data-start="0" data-duration="2.8"></div>
</div>
<script>
const BEAT = 0.4;                         // seconds per beat (150 BPM)
const E = 4 / 30;                          // every entrance lands in four frames
const DARK = "#0c0a1e", PAPER = "#f2effa", INK = "#1c0b5d";
const WORDS = [                            // [word, entrance, beats on screen]
  ["we", "track", 1], ["don't", "zoom", 1], ["just", "stretch", 1], ["prompt.", "slide", 1],
  ["we", "track", 0.5], ["direct.", "zoom", 1], ["type", "stretch", 0.5], ["light", "slide", 0.5], ["depth", "track", 0.5],
];
const tl = gsap.timeline({ paused: true });
const host = document.getElementById("words"), bg = document.getElementById("bg");
let t = 0;
WORDS.forEach(([text, kind, beats], i) => {
  const dark = i % 2 === 0;
  const el = document.createElement("div");
  el.className = "w";
  el.style.color = text === "direct." ? "#fb2d89" : dark ? PAPER : INK;
  el.innerHTML = [...text].map((c) => "<span>" + c + "</span>").join("");
  host.appendChild(el);
  tl.set(bg, { backgroundColor: dark ? DARK : PAPER }, t);
  tl.set(el, { opacity: 1 }, t);
  tl.set(el, { opacity: 0 }, t + beats * BEAT);
  if (kind === "track") el.querySelectorAll("span").forEach((g, k, all) =>
    tl.fromTo(g, { x: 115 * (k - all.length / 2) }, { x: 0, duration: E, ease: "power3.out", immediateRender: false }, t));
  if (kind === "zoom") tl.fromTo(el, { scale: 1.25, y: 320 }, { scale: 1, y: 0, duration: E, ease: "power3.out", immediateRender: false }, t);
  if (kind === "stretch") tl.fromTo(el, { scaleY: 2.6, transformOrigin: "50% 100%" }, { scaleY: 1, duration: E, ease: "power3.out", immediateRender: false }, t);
  if (kind === "slide") tl.fromTo(el, { x: -835 }, { x: 0, duration: E, ease: "power3.out", immediateRender: false }, t);
  t += beats * BEAT;
});
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

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

شخصية

كرة تنتفخ عند القطع وتقفز إلى الجهة الأخرى

كرة CSS لامعة (اثنان من radial-gradient: بريق أبيض ناعم فوق جسم متدرج من البرتقالي إلى الماجنتا) تستقر في إحدى نقطتين على خط الأرض. في إطار كل قطع تنتفخ إلى 125% في مكانها، وفي الإطار التالي تكون في أعلى قفزتها، وعلى مدى خمسة إطارات تنساب إلى النقطة الأخرى وتعود إلى 100%، فتبدو كارتداد ثلاثي الأبعاد نحو الكاميرا. تُحرَّك بالإطارات المفتاحية إطارًا بإطار.

متى تُستخدم تميمة أو نقطة تعلّم كل نبضة في جملة جذب بكلمة لكل نبضة.

عرض الكود

<!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: #0c0a1e; }
#floor { position: absolute; inset: 0; }
#ball { position: absolute; left: 0; top: 0; width: 88px; height: 88px; background: radial-gradient(circle at 33% 27%, rgba(255,246,236,.95) 0%, rgba(255,246,236,0) 15%), radial-gradient(circle at 38% 32%, #ffb347 0%, #fe9117 24%, #fb2d89 66%, #b0135c 90%, #7d0b40 100%); border-radius: 50%; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2.8" data-width="1080" data-height="1920">
  <div id="floor" class="clip" data-start="0" data-duration="2.8"><div id="ball"></div></div>
</div>
<script>
const F = 1 / 30;
const L = { x: 287, y: 1516 }, R = { x: 788, y: 1516 };   // the two resting spots
const P = [0, 0.42, 0.7, 0.876, 0.963, 0.995, 1];         // share of the way across, frame by frame
const H = [0, 165, 136, 65, 19, 2, 0];                    // height above the floor, px
const S = [1.25, 1.14, 1.07, 1.045, 1.02, 1, 1];          // the pop on the cut, then back to size
const tl = gsap.timeline({ paused: true });
const ball = document.getElementById("ball");
gsap.set(ball, { xPercent: -50, yPercent: -50, x: L.x, y: L.y });
for (let k = 0; k < 6; k++) {
  const from = k % 2 ? R : L, to = k % 2 ? L : R, t0 = 0.4 + k * 0.4;   // a hop on every beat
  P.forEach((p, f) => tl.to(ball, { x: from.x + (to.x - from.x) * p, y: to.y - H[f], scale: S[f], duration: F, ease: "none" }, t0 + (f - 1) * F));
}
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 من الفيديو

انتقال

بندول يمسح العناوين ويجرّ الضوء خلفه

قضيب معلق من محور فوق الإطار يتأرجح ±23.6° بـ power3.inOut في 0.34 ث، ويتمركز عند كل نبضة ثانية ثم يثبت. حين تعبر الكتلة، تكشف قيم inset في clip-path تتحكم بها المنحنى نفسه العنوان التالي ذا السطرين في الجهة التي تجاوزتها وتقطع القديم؛ وتترك ثلاث نسخ باهتة من الكتلة بفارق إطار واحد أثرًا، وتعمل نسخة مموهة من القضيب والكتلة كظل. في التأرجح الأخير يغطي مضلع داكن يحده خط القضيب كل ما يقع خلفه ويُسحب عبر الإطار.

متى تُستخدم تبديل سلسلة عبارات قصيرة بإيقاع فيزيائي كالمترونوم، وتنتهي بإظلام.

عرض الكود

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>بندول يمسح العناوين ويجرّ الضوء خلفه</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@800&family=Anton&display=swap");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #f2effa; }
#stage { position: absolute; inset: 0; }
.title { position: absolute; left: 0; top: 600px; width: 1080px; text-align: center; font: 800 150px/0.95 "Manrope", sans-serif; letter-spacing: -0.04em; color: #1c0b5d; opacity: 0; }
.title .hot { color: #fb2d89; }
.arm { position: absolute; left: 536px; top: -380px; width: 8px; height: 1317px; transform-origin: 4px 0; }
.rod { position: absolute; inset: 0; background: #120a33; border-radius: 4px; }
.bob { position: absolute; left: -52px; top: 1261px; width: 112px; height: 112px; background: radial-gradient(circle at 33% 27%, rgba(255,246,236,.95) 0%, rgba(255,246,236,0) 15%), radial-gradient(circle at 38% 32%, #ffb347 0%, #fe9117 24%, #fb2d89 66%, #b0135c 90%, #7d0b40 100%); border-radius: 50%; }
#shadow { left: 558px; top: -374px; filter: blur(9px); opacity: .22; }
#shadow .rod, #shadow .bob { background: #1c0b5d; }
#curtain { position: absolute; inset: 0; background: #0c0a1e; opacity: 0; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1080" data-height="1920">
  <div id="stage" class="clip" data-start="0" data-duration="4">
    <div class="title" id="t0"><div>MADE</div><div>BY HAND?</div></div>
    <div class="title" id="t1"><div>MADE</div><div class="hot">BY CODE.</div></div>
    <div class="title" id="t2"><div>NO</div><div>KEYFRAMES.</div></div>
    <div class="title" id="t3"><div>AND</div><div>LIGHT.</div></div>
    <div class="arm" id="shadow"><div class="rod"></div><div class="bob"></div></div>
    <div class="arm ghost" id="g2" style="opacity:.15"><div class="bob"></div></div>
    <div class="arm ghost" id="g1" style="opacity:.3"><div class="bob"></div></div>
    <div id="curtain"></div>
    <div class="arm" id="arm"><div class="rod"></div><div class="bob"></div></div>
  </div>
</div>
<script>
const AMP = 23.6, SWING = 0.34, PX = 540, PY = -380, L = 1317;   // swing angle, its length, pivot, arm
const CENTRES = [0.4, 1.2, 2.0, 2.8];                          // a swing on every second beat
const tl = gsap.timeline({ paused: true });
const titles = [...document.querySelectorAll(".title")];
gsap.set(titles[0], { opacity: 1 });
const x = (deg) => PX + L * Math.sin(deg * Math.PI / 180);       // where the bob is, left or right
for (const [sel, lag] of [["#arm", 0], ["#shadow", 0], ["#g1", 1 / 30], ["#g2", 2 / 30]]) {
  gsap.set(sel, { rotation: AMP });
  gsap.set(sel + " .bob", { rotation: -AMP });                     // keep the highlight up and left
  CENTRES.forEach((c, k) => {
    const to = k % 2 ? AMP : -AMP;
    tl.to(sel, { rotation: to, duration: SWING, ease: "power3.inOut" }, c - SWING / 2 + lag);
    tl.to(sel + " .bob", { rotation: -to, duration: SWING, ease: "power3.inOut" }, c - SWING / 2 + lag);
  });
}
CENTRES.slice(0, 3).forEach((c, k) => {                           // the wipe follows the bob
  const inc = titles[k + 1], out = titles[k], t0 = c - SWING / 2, a = x(-AMP), b = x(AMP), ltr = k % 2 === 0;
  tl.set(inc, { opacity: 1 }, t0);
  tl.fromTo(inc, { clipPath: ltr ? "inset(0px " + (1080 - a) + "px 0px 0px)" : "inset(0px 0px 0px " + b + "px)" },
    { clipPath: ltr ? "inset(0px " + (1080 - b) + "px 0px 0px)" : "inset(0px 0px 0px " + a + "px)", duration: SWING, ease: "power3.inOut", immediateRender: false }, t0);
  tl.fromTo(out, { clipPath: ltr ? "inset(0px 0px 0px " + a + "px)" : "inset(0px " + (1080 - b) + "px 0px 0px)" },
    { clipPath: ltr ? "inset(0px 0px 0px " + b + "px)" : "inset(0px " + (1080 - a) + "px 0px 0px)", duration: SWING, ease: "power3.inOut", immediateRender: false }, t0);
  tl.set(out, { opacity: 0 }, t0 + SWING);
});
// the light goes out beyond the rod, and the last swing drags the dark across
const poly = (deg) => { const r = deg * Math.PI / 180, qx = PX + 3 * L * Math.sin(r), qy = PY + 3 * L * Math.cos(r);
  return "polygon(" + PX + "px " + PY + "px, " + qx + "px " + qy + "px, 6000px " + qy + "px, 6000px -3000px, " + PX + "px -3000px)"; };
const cur = document.getElementById("curtain"), ease = gsap.parseEase("power3.inOut"), last = CENTRES[3] - SWING / 2;
gsap.set(cur, { clipPath: poly(AMP) });
tl.set(cur, { opacity: 1 }, 2.2);
for (let f = 1; f <= 11; f++) tl.to(cur, { clipPath: poly(AMP - 2 * AMP * ease(Math.min(1, f / 30 / SWING))), duration: 1 / 30, ease: "none" }, last + (f - 1) / 30);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

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

أشكال

مخروط كشاف يبحث ويكشف صفحة مضاءة

على أرضية داكنة تتحرك كرة متوهجة عبر عدة مواضع بينما يُظهر clip-path على شكل إسفين (رأسه عند الكرة، مع اتجاه ونصف عرض، مرسوم كمضلع يمتد بعيدًا خارج الإطار) طبقة ورق تحمل الكلمات. نسخة ثانية من الصفحة بشفافية 28%، مقصوصة بإسفين أعرض بـ 4.5°، تصنع شبه ظل حاد الحواف. يبدأ الشعاع شريحة رفيعة بزاوية 7° تتجه للأعلى، ثم يمسح يسارًا وإلى الأسفل مع اتساع حتى نحو 120°، ثم ينفتح إلى 360° في ثلث ثانية لإضاءة الصفحة كلها.

متى تُستخدم كشف سطر أو منتج كأن مصباحًا يعثر عليه في الظلام.

عرض الكود

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>مخروط كشاف يبحث ويكشف صفحة مضاءة</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@800&family=Anton&display=swap");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #14112e; }
#scene { position: absolute; inset: 0; }
.page { position: absolute; inset: 0; background: #f2effa; }
#soft { opacity: .28; }
.line { position: absolute; left: 0; top: 660px; width: 1080px; text-align: center; font: 800 190px/0.93 "Manrope", sans-serif; letter-spacing: -0.04em; color: #1c0b5d; }
.line span { color: #7c4dff; }
#lamp { position: absolute; left: 0; top: 0; width: 100px; height: 100px; margin: -50px 0 0 -50px; background: radial-gradient(circle at 33% 27%, rgba(255,246,236,.95) 0%, rgba(255,246,236,0) 15%), radial-gradient(circle at 38% 32%, #ffb347 0%, #fe9117 24%, #fb2d89 66%, #b0135c 90%, #7d0b40 100%); border-radius: 50%; }
#glow { position: absolute; left: 0; top: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; background: radial-gradient(circle, rgba(255,128,72,.6) 0%, rgba(252,80,110,.12) 36%, rgba(252,60,120,0) 50%); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4.5" data-width="1080" data-height="1920">
  <div id="scene" class="clip" data-start="0" data-duration="4.5">
    <div class="page" id="soft"><div class="line">LIGHT<br>IS JUST<br><span>MATH.</span></div></div>
    <div class="page" id="lit"><div class="line">LIGHT<br>IS JUST<br><span>MATH.</span></div></div>
    <div id="glow"></div><div id="lamp"></div>
  </div>
</div>
<script>
const PEN = 4.5;                                          // the soft edge, degrees
const s = { x: 536, y: 696, dir: 271, half: 0 };           // ball and beam (0 deg = right, 90 = down)
const wedge = (h) => { if (h <= 0) return "polygon(" + Array(8).fill(s.x + "px " + s.y + "px").join(",") + ")";
  h = Math.min(h, 180); const pts = [s.x + "px " + s.y + "px"];
  for (let i = 0; i <= 6; i++) { const a = (s.dir - h + i * h / 3) * Math.PI / 180; pts.push((s.x + 5000 * Math.cos(a)) + "px " + (s.y + 5000 * Math.sin(a)) + "px"); }
  return "polygon(" + pts.join(",") + ")"; };
const draw = () => {
  gsap.set("#lamp, #glow", { x: s.x, y: s.y });
  gsap.set("#soft", { clipPath: wedge(s.half) });
  gsap.set("#lit", { clipPath: wedge(s.half >= 180 ? 180 : s.half - PEN) });
};
const tl = gsap.timeline({ paused: true, onUpdate: draw });
tl.to(s, { half: 19, duration: 0.25, ease: "power2.out" }, 0.2)                                   // a sliver opens upward
  .to(s, { x: 797, y: 1094, dir: 154, half: 22, duration: 0.6, ease: "power2.inOut" }, 0.5)       // sweeps down-left
  .to(s, { x: 897, y: 976, dir: 179, half: 27, duration: 0.5, ease: "power2.out" }, 1.2)
  .to(s, { x: 757, y: 558, dir: 124, half: 35, duration: 0.5, ease: "power2.inOut" }, 1.8)
  .to(s, { x: 537, y: 326, dir: 90, half: 66, duration: 0.45, ease: "power2.inOut" }, 2.4)        // settles above the words
  .to(s, { half: 180, duration: 0.35, ease: "power2.inOut" }, 3.8);                               // and lights everything
draw();
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

معاينة تقنية «اسم بحواف مفرغة فوق عوالم تتغير كل نصف نبضة» — عند 0:14 من الفيديو

التخطيط

اسم بحواف مفرغة فوق عوالم تتغير كل نصف نبضة

تبقى كلمة واحدة بخط عرض مضغوط ثابتة في الوسط بينما يتغير العالم خلفها كل 0.2 ث (ثُمن نوتة عند 150 BPM): تدرجات، خطوط، حلقات متحدة المركز، شبكة، لون مسطح. تتكون الكلمة من ثلاث طبقات متراكبة: ظل حاد بإزاحة 9 px، وحد خارجي 16 px، والتعبئة؛ وفي العوالم الفاتحة تتبادل التعبئة والحد أدوارهما، فتبقى مقروءة دائمًا.

متى تُستخدم اسم علامة أو منتج يجب أن يصمد أمام وميض سريع من المظاهر.

عرض الكود

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>اسم بحواف مفرغة فوق عوالم تتغير كل نصف نبضة</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@800&family=Anton&display=swap");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; }
#world { position: absolute; inset: 0; }
#name { position: absolute; inset: 0; }
.wl { position: absolute; left: 0; top: 760px; width: 1080px; text-align: center; font: 330px/1.2 "Anton", sans-serif; }
.sh { transform: translate(9px, 9px); }
.sh, .ol { -webkit-text-stroke: 16px currentColor; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3.2" data-width="1080" data-height="1920">
  <div id="world" class="clip" data-start="0" data-duration="3.2"></div>
  <div id="name" class="clip" data-start="0" data-duration="3.2"><div class="wl sh">motion</div><div class="wl ol">motion</div><div class="wl fi">motion</div></div>
</div>
<script>
const WORLDS = [   // [background, light world?]
  ["radial-gradient(80% 60% at 40% 40%, #fe9117, #fb2d89 60%, #8e89a3)", true], ["linear-gradient(160deg, #fb2d89, #fe9117)", false],
  ["linear-gradient(#7c4dff 0 59%, #0c0a1e 59% 74%, #fb2d89 74%)", false], ["repeating-radial-gradient(circle, #1c0b5d 0 60px, #f2effa 60px 120px)", false],
  ["repeating-radial-gradient(circle, #f2effa 0 70px, #1c0b5d 70px 140px)", true], ["radial-gradient(#8f63ff, #5a2fe0)", true],
  ["repeating-linear-gradient(90deg, #17122b 0 110px, #f2effa 110px 118px)", false], ["#0c0a1e", false],
  ["#7c4dff", false], ["radial-gradient(#4a1440, #22061f)", false], ["#ffd9e6", true], ["linear-gradient(#b9b5c6, #7f7a90)", false],
  ["linear-gradient(#fb2d89, #7c4dff)", false], ["repeating-linear-gradient(45deg, #fe9117 0 60px, #f2effa 60px 120px)", true],
  ["#f7f5fc", true], ["#fb4f6a", true],
];
const tl = gsap.timeline({ paused: true });
const world = document.getElementById("world");
const [sh, ol, fi] = document.querySelectorAll(".wl");
WORLDS.forEach(([bg, light], k) => {                 // a cut every eighth note
  const t = k * 0.2;
  tl.set(world, { background: bg }, t);
  tl.set([sh, ol], { color: light ? "#ffffff" : "#0c0a1e" }, t);
  tl.set(fi, { color: light ? "#0c0a1e" : "#ffffff" }, t);
});
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:16 من الفيديو

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

كلمة من الفوكسل تتجمع طائرة وتتنفس وتنفجر

كلمة مرسومة على خريطة بتات 11x18 لكل حرف تصبح نحو 800 مكعب مُنسَخ (instanced) بعمق ثلاثة. يبدأ كل مكعب من مكان ودوران عشوائيين ويطير إلى خليته بمنحنى quartic in-out خلال نصف ثانية، مع تأخير متدرج حتى 0.18 ث، بينما تمر بضع مئات من الذرات مسرعة بجانب الكاميرا. وبعد الهبوط يدور كل حرف برفق حول مركزه وتجري موجة عبر صفوفه؛ وفي النهاية يتسارع كل مكعب نحو الخارج وباتجاه العدسة (quadratic in)، ومع كل منها ست نسخ أخفت تتأخر بضعة أجزاء من الثانية كضبابية حركة. الحرف الأول متدرج من الوردي إلى البرتقالي من الأعلى إلى الأسفل، وبقية الحروف بلون الورق الأبيض، على خلفية بنفسجية.

متى تُستخدم شعار أو كلمة قصيرة تتجمع من الجسيمات عند الذروة.

المكتبات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>
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #7c4dff; }
#gl { position: absolute; inset: 0; width: 1080px; height: 1920px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2.6" data-width="1080" data-height="1920">
  <canvas id="gl" class="clip" data-start="0" data-duration="2.6" width="1080" height="1920"></canvas>
</div>
<script type="module">
import * as THREE from "https://cdn.jsdelivr.net/npm/[email protected]/+esm";
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById("gl"), antialias: true, alpha: true, preserveDrawingBuffer: true });
renderer.setPixelRatio(1); renderer.setSize(1080, 1920, false);
const scene = new THREE.Scene(), cam = new THREE.PerspectiveCamera(30, 1080 / 1920, 10, 20000);
cam.position.set(0, 420, 3583); cam.lookAt(0, 0, 0);            // about 1 px per unit on the word's plane
scene.add(new THREE.HemisphereLight(0xffffff, 0x4a2fa0, 1.6));
const sun = new THREE.DirectionalLight(0xffffff, 2.7); sun.position.set(-600, 1400, 1800); scene.add(sun);
const G = {                                                       // 11 x 18 cells per letter ("#" = cube)
  F: ["###########", "###########", "##", "##", "##", "##", "##", "##", "#########", "#########", "##", "##", "##", "##", "##", "##", "##", "##"],
  A: [" ######### ", "###########", ...Array(6).fill("##       ##"), "###########", "###########", ...Array(8).fill("##       ##")],
  B: ["#########  ", "########## ", ...Array(5).fill("##      ## "), "########## ", "#########  ", "########## ", ...Array(6).fill("##       ##"), "###########", "########## "],
};
const P = 24, LEFT = [96, 408, 720], TOP = 744;                  // cell pitch, letter positions in the frame
let seed = 23; const rnd = () => ((seed = (Math.imul(seed, 1664525) + 1013904223) >>> 0) / 4294967296);
const cubes = [];
["F", "A", "B"].forEach((ch, li) => G[ch].forEach((row, ry) => [...row].forEach((cell, cx) => {
  if (cell !== "#") return;
  for (let dz = 0; dz < 3; dz++) cubes.push({ li, ry, color: li ? new THREE.Color(0xf2effa) : new THREE.Color(0xfb2d89).lerp(new THREE.Color(0xfe9117), ry / 17),
    tx: LEFT[li] + cx * P + P / 2 - 540, ty: 960 - (TOP + ry * P + P / 2), tz: -dz * P,
    sx: (rnd() - 0.5) * 3600, sy: (rnd() - 0.5) * 5200, sz: -3000 + rnd() * 5400, r: [rnd() * 6, rnd() * 6, rnd() * 6], delay: rnd() * 0.18, dur: 0.5 + rnd() * 0.12 });
})));
const mesh = new THREE.InstancedMesh(new THREE.BoxGeometry(21, 21, 21), new THREE.MeshStandardMaterial({ roughness: 0.55 }), cubes.length);
cubes.forEach((k, i) => mesh.setColorAt(i, k.color)); scene.add(mesh);
const centres = LEFT.map((x) => new THREE.Vector3(x + 132 - 540, 0, -P)), o = new THREE.Object3D(), v = new THREE.Vector3(), e = new THREE.Euler();
const inOut4 = (p) => (p < 0.5 ? 8 * p ** 4 : 1 - 8 * (1 - p) ** 4), c01 = (x) => Math.min(1, Math.max(0, x));
function draw(t) {
  const hold = Math.max(0, t - 0.55);
  cubes.forEach((k, i) => {
    const p = inOut4(c01((t - k.delay) / k.dur)), c = centres[k.li];
    v.set(k.tx - c.x, k.ty, k.tz - c.z + 10 * Math.sin(k.ry * 0.6 + hold * 6));                 // a ripple through the rows
    e.set(0.07 * Math.sin(hold * 3.1 + k.li * 1.7), 0.2 * Math.sin(hold * 4.2 + k.li * 0.9), 0);  // each letter turns a little
    v.applyEuler(e).add(c);
    const q = c01((t - 1.8) / 0.55), b = q * q * q;                                               // the burst
    o.position.set((k.sx + (v.x - k.sx) * p) * (1 + 3.5 * b), (k.sy + (v.y - k.sy) * p) * (1 + 3.5 * b), k.sz + (v.z - k.sz) * p + 3000 * b);
    o.rotation.set(k.r[0] * (1 - p) + 4 * b, k.r[1] * (1 - p) + 3 * b, k.r[2] * (1 - p));
    o.updateMatrix(); mesh.setMatrixAt(i, o.matrix);
  });
  mesh.instanceMatrix.needsUpdate = true;
  renderer.render(scene, cam);
}
const clock = { t: 0 };
const tl = gsap.timeline({ paused: true });
tl.to(clock, { t: 2.6, duration: 2.6, ease: "none" }, 0);
tl.eventCallback("onUpdate", () => draw(clock.t));
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:18 من الفيديو

انتقال

قزحية ثقب أسود نحو بطاقة ختامية جاهزة للتكرار

قرص داكن بضعف قطر الإطار يكبر من 0 في المركز بـ power3.in في 0.37 ث، فيبدأ كثقب دبوس بينما الحروف تنفجر بالفعل، ويبتلع الإطار عند الضربة الأخيرة. بداخله تنمو الكرة الرئيسية من العدم في 0.12 ث، ويظهر الشعار النصي في إطارين، ويثبت، ثم يتلاشى بعد 0.75 ث، ولا تبقى سوى الكرة في المركز حيث يبدأ الإطار الأول من الفيديو، فيتكرر المقطع بسلاسة.

متى تُستخدم إنهاء عمل صاخب بتثبيت هادئ للشعار يعود إلى البداية.

عرض الكود

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>قزحية ثقب أسود نحو بطاقة ختامية جاهزة للتكرار</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@800&family=Anton&display=swap");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #7c4dff; }
#end { position: absolute; inset: 0; }
#hole { position: absolute; left: 540px; top: 960px; width: 2400px; height: 2400px; margin: -1200px 0 0 -1200px; border-radius: 50%; background: #0c0a1e; }
#ball { position: absolute; left: 0; top: 0; width: 142px; height: 142px; background: radial-gradient(circle at 33% 27%, rgba(255,246,236,.95) 0%, rgba(255,246,236,0) 15%), radial-gradient(circle at 38% 32%, #ffb347 0%, #fe9117 24%, #fb2d89 66%, #b0135c 90%, #7d0b40 100%); border-radius: 50%; }
#mark { position: absolute; left: 0; top: 1160px; width: 1080px; text-align: center; font: 800 110px/1 "Manrope", sans-serif; letter-spacing: -0.03em; background: linear-gradient(90deg, #fb2d89, #fe9117); -webkit-background-clip: text; background-clip: text; color: transparent; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="1.5" data-width="1080" data-height="1920">
  <div id="end" class="clip" data-start="0" data-duration="1.5"><div id="hole"></div><div id="ball"></div><div id="mark">your brand</div></div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
gsap.set("#ball", { xPercent: -50, yPercent: -50, x: 539, y: 959, scale: 0 });
tl.fromTo("#hole", { scale: 0 }, { scale: 1, duration: 0.37, ease: "power3.in" }, 0.1)                          // the hole opens
  .fromTo("#ball", { scale: 0 }, { scale: 1, duration: 0.12, ease: "power2.in", immediateRender: false }, 0.35)   // the ball grows in it
  .fromTo("#mark", { opacity: 0 }, { opacity: 1, duration: 0.067, ease: "none" }, 0.4)
  .to("#mark", { opacity: 0, duration: 0.15, ease: "none" }, 1.15);                                             // only the ball remains
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>

موجّهات أخرى

معاينة الموجّه «ريل منتج «العينة الحيّة» مع تحوّل الشعار»

Simple MotionNPX

ريل منتج «العينة الحيّة» مع تحوّل الشعار

placeholder

استُخدم مرة واحدة

معاينة الموجّه «ريل علامة تجارية بجولة ثلاثية الأبعاد على الهاتف وكتابة نيون متحركة»

Simple MotionSYP

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

<direction> اصنع ريل علامة تجارية عمودياً مدته 15.5 ثانية (1080x1920، 30 إطاراً في الثانية). جولة ثلاثية الأبعاد على هاتف فوق الملف الشخصي لعلامتي التجارية تتحول إلى لحظة الشعار، ثم كتابة متحركة مقطّعة مقطعاً مقطعاً على إيقاع تراب قوي بنصف السرعة تنتهي بشعاري. كل شيء مرسوم، من دون لقطات مصوّرة. استخدم شعاري، واستخدم ألوان علامتي وكلماتها بدلاً من الأمثلة أدناه. للمظهر ثلاثة عوالم: تدرجات من الأزرق الداكن العميق إلى ما يقارب الأسود للجزء ثلاثي الأبعاد، واستوديو رمادي فاتح في المنتصف، وأسود خالص مع توهج نيون في النهاية. تجنب لوحة مربعة أو مكعباً خلف الشعار، والحروف المعكوسة عندما تمر كلمة خلف شيء ما، والنص الذي يلامس حواف الإطار، والإطار المقلوب رأساً على عقب بعد حركة الكاميرا الخاطفة، وشعار الهولوغرام المسطح أو المضغوط. يجب أن تتناسب شاشة الهاتف تماماً داخل إطارها. </direction> <structure> 1. من 0 إلى 4.3 ث، جولة الهاتف. هاتف ثلاثي الأبعاد (وجه الشاشة وظهر فضي متوهج مع نتوء الكاميرا) يدخل متقلباً، صغيراً ومائلاً، والظهر أولاً. يدور نحو 200 درجة ويستقر منتصباً على شاشته عند 1.05 ث (power2.out). تقع الشاشة في منتصف الإطار مع حافة متساوية من جميع الجهات. تعرض العلامة التجارية كملف شخصي اجتماعي: اسم المستخدم، وصورة رمزية دائرية بشعاري، والاسم وشعار نصي من سطر واحد، ونبذة من سطرين مع الموقع الإلكتروني، وزراً رئيسياً وردياً، وأربع قصص مميزة دائرية لا تتداخل تسمياتها. أسفلها شبكة 3x3 من مربعات ملونة صغيرة قليلاً بزوايا مستديرة تناسب الشاشة، مع تسميات قصيرة تتسع داخل كل مربع ("IDEAS IN MOTION" و"3D" و"LOGO REVEAL"؛ استبدلها بتسمياتك). من 1.05 ث يميل الهاتف إلى الخلف نحو 48 درجة ويكبر، بينما ترتفع المربعات عن الشاشة نحو الكاميرا بارتفاعات مختلفة. تهبط حركة كاميرا خاطفة عند 1.95 ث قريباً من رأس الملف الشخصي. تتحرك الكاميرا ببطء إلى أسفل النبذة مائلةً، حتى تدير حركة خاطفة ثانية عند 3.0 ث نظرها إلى الأسفل نحو الصورة الرمزية. تهبط منتصبة فيبقى الملف الشخصي مقروءاً. تتراكم ثلاث حلقات وردية متوهجة خارجة من الصورة الرمزية (back.out، بفارق 80 مللي ثانية). تصعد منها نسخة دائرية من شعاري بحدود وردية وتوهج، مائلة نحو المشاهد كأنها هولوغرام. 2. من 4.3 إلى 6.5 ث، الشعار ثلاثي الأبعاد. قطع حاد إلى رمز شعاري نفسه مُسحوباً بثلاثة أبعاد: كومة من طبقات رقيقة بلون عميق (مثل الوردي الداكن) خلف الواجهة المضاءة، من دون مربع خلفه. يتوهج على تدرج دائري أزرق داكن. يدخل دائراً من وضعية مائلة (power3.out، ثانية واحدة)، ويتمايل، ثم يبتعد دائراً وصغيراً (power3.in) إلى القطع. كلمة جريئة مثل "AHHHH" (استبدلها بكلمتك) تستقر على حلقة أسفل الشعار مباشرة، وليس فوقه أبداً. تُكتب بخط غروتيسك عريض جداً مع تدرج من البرتقالي إلى الوردي وتوهج وردي ناعم، والحروف متباعدة وغير معكوسة أبداً. تمر الكلمة عبر الواجهة ثم تطير مع الشعار. من 4.75 ث تظهر تدريجياً كلمة خلفية عملاقة بخطوط خارجية ("OMG") وتنجرف إلى الأعلى. 3. من 6.5 إلى 9.2 ث، كلمات مكتوبة في غرفة فاتحة. قطع حاد إلى غرفة رمادية فاتحة بحواف معتمة. تُكتب الكلمات حرفاً حرفاً على مقاطع الإيقاع، في مجموعة ثلاثية الأبعاد تنجرف الكاميرا عبرها. أولاً "yeah". ثم "she" بالأبيض على صندوق أسود يظهر أولاً كخط رفيع ثم ينفتح بخطفة. ثم "typed" بالوردي، و"one"، و"single prompt" أكبر حجماً. عند 8.1 ث تنغلق الحواف المعتمة على شكل قطع ناقص أفقي خلال 0.22 ث وتنفتح من جديد خلال 0.25 ث، بينما تطير الكلمات القديمة إلى اليسار. تسقط كلمات جديدة من الأعلى خارجة من ضبابية: "Now" / "it moves like". ترتفع كلمة "magic" الوردية ضبابية من الأسفل قبل القطع مباشرة. 4. من 9.2 إلى 15.5 ث، كومة النيون والشعار. قطع إلى الأسود مع كلمة "magic" الوردية المتوهجة في الأعلى. لكل سطر تالٍ لونه وتوهجه ودخوله الخاص، وتتراكم: "And I'm" بالبرتقالي، و"unstoppable" بالبنفسجي، و"might do" بالأبيض، و"MOTION" بالوردي. تدور الكومة ببطء بثلاثة أبعاد ثم تطير إلى الأعلى وخارج الإطار خلال 0.25 ث عند 11.95 ث. يظهر سطر ختامي كلمة كلمة خارجاً من ضبابية بالوردي: "no" / "more" / "timelines". عند 12.7 ث تسقط خمس قضبان معدنية فوقه من الأعلى. عند 13.25 ث يتلاشى كل شيء بضبابية، ويظهر شعاري بالأبيض مع شعار نصي متباعد ("YOUR TAGLINE HERE") خارجاً من الضبابية ويثبت حتى النهاية. جميع الكلمات بين علامات الاقتباس أمثلة عليك استبدالها بكلماتك. </structure> <composition> مثال على لوحة الألوان: أزرق داكن #1C0B5D، وأسود تقريباً #04020C، ووردي ساطع #FB2D89، وبرتقالي #FE9117، وبنفسجي #8F7BFF، ورمادي فاتح #D2D4D9، ورمادي النص #4A4E56، وأبيض. استخدم خط غروتيسك ثقيلاً واحداً، عريضاً جداً مع تباعد ضيق بين الحروف (-0.045em)، مثل Manrope ExtraBold، لكل كلمة. الكلمة الخلفية في المشهد 2 عبارة عن خطوط خارجية عملاقة (text-stroke بشفافية نحو 20%). يقع الجزء ثلاثي الأبعاد على تدرجات من الأزرق الداكن العميق إلى ما يقارب الأسود، ومشهد الشعار على تدرج دائري أزرق داكن. المنتصف غرفة رمادية فاتحة بحواف معتمة، والنهاية سوداء خالصة مع توهجات نيون. أبقِ كل سطر نصي داخل الإطار مع هوامش آمنة، خاصة السطرين الطويلين "And I'm" و"unstoppable". البطاقة الأخيرة هي الشعار في المنتصف بالأبيض مع شعار نصي صغير ومتباعد جداً أسفله. </composition> <techniques> حركات الكاميرا الخاطفة: 0.08 ث من ضبابية 14 بكسل، وقفزة إلى التأطير الجديد، ثم 0.12 ث للعودة إلى الحدة. تتراكم الحلقات بتأثير back.out وبفارق 80 مللي ثانية. يصعد هولوغرام الشعار بحدود وردية وتوهج وميل طفيف نحو الكاميرا. يدور الشعار ثلاثي الأبعاد داخلاً بتأثير power3.out (ثانية واحدة) وخارجاً بتأثير power3.in. ينقلب كل حرف مكتوب إلى الأعلى من الأسفل (rotationX -70، back.out، 0.18 ث، بفارق 30–70 مللي ثانية). ينفتح صندوق "she" من خط رفيع بخطفة. يغلق انتقال القزحية الحواف المعتمة على شكل قطع ناقص أفقي (0.22 ث) ويعيد فتحها (0.25 ث). دخول أسطر النيون: تدخل حروف "And I'm" بقوة من حجم كبير، وتنزلق "unstoppable" من اليمين خارجة من ضبابية، وترتفع حروف "might do"، وتندفع حروف "MOTION" من اليسار مع ميل وأثر حركة. تخرج الكومة إلى الأعلى خلال 0.25 ث. تظهر الكلمات الختامية واحدة تلو الأخرى خارجة من ضبابية. تسقط خمس قضبان معدنية من الأعلى (power3.in، بفارق 30 مللي ثانية). في النهاية يتلاشى كل شيء بضبابية، ثم يظهر الشعار من ضبابية 24 بكسل (0.45 ث) ويكبر ببطء 4% أثناء ثباته. تتغير الكلمات كل 0.1–0.3 ث على مقاطع الإيقاع؛ والشعار وحده يثبت. </techniques> <music> تراب بنصف السرعة بنحو 147 نبضة في الدقيقة في سُلّم صول الصغير، موسيقى بلا غناء. تحت جزء الهاتف تُعزف نغمة أجراس داكنة بتوتر متصاعد. يدخل الإيقاع الكامل (طبلة 808 قوية، وجهير مشوّه، وتصفيق، وهاي-هات متدحرج مع تدحرجات ثلاثية) تماماً عند القطع إلى الشعار ثلاثي الأبعاد عند 4.33 ث. قصّ المقطع بحيث يقع الدروب هناك. تلاشٍ تدريجي في النهاية. </music> <sound> تصميم صوتي فقط فوق الموسيقى: دويّ عند هبوط الهاتف، وأصوات اندفاع عند حركتي الكاميرا الخاطفتين، ولمعان لشعار الهولوغرام. أضف ضربة عند القطع إلى الشعار ثلاثي الأبعاد، وصدمة عند القطع إلى الغرفة الفاتحة، وصوت اندفاع عند القزحية. ثم دويّ عند القطع إلى الأسود، وأصوات اندفاع عند انزلاق الأسطر ودخولها وطيرانها، وضربة معدنية عند هبوط القضبان، ودويّ عميق عند الشعار الأخير، ثم تلاشٍ تدريجي. من دون تعليق صوتي. </sound>

استُخدم 9 مرات

معاينة الموجّه «كلمات تبني هيكلاً: طباعة متحركة في حلقة متواصلة»

Simple MotionUKE

كلمات تبني هيكلاً: طباعة متحركة في حلقة متواصلة

<direction> اصنع فيلم طباعة متحركة مربعاً مدته 20 ثانية، بدقة 1080x1080 وبمعدل 60 إطاراً في الثانية، مع موسيقى وتصميم صوتي. رسالة منتج قصيرة تبني هيكلاً من كلماتها نفسها: كلمة ثقيلة تضغط للأسفل كعارضة، وأخرى تتدلى من كابلات وتحني الخط الذي تتدلى منه، وكلمتان تتأرجحان لتقفا منتصبتين كدعامتين، والكاميرا تغوص عبر تجويف أحد الحروف، والعبارة الختامية تتجمع على منصة. يجب أن يتكرر بسلاسة دون قطع: آخر إطار هو الإطار الأول تماماً. كل شيء مرسوم: خط مسطح وخطوط وفواصل على خلفية حبر عميق مسطحة. تجنب اللقطات الحقيقية والصور والملمس والحبيبات وتدرجات الألوان والتدرجات اللونية. الأحمال الثقيلة لا ترتد أبداً؛ الخط وحده مرن. تتبع الحركة صياغة الرسالة لا إيقاع رقص. كل الكلمات على الشاشة أمثلة يجب استبدالها برسالتك الخاصة، تُختار بحسب دور كل خانة وطولها ليثبت التصميم. </direction> <structure> - المشهد 1، 0–3.3 ث، العارضة: كلمة ضخمة ثقيلة، 320 px، تمتد عبر الإطار قرب الأعلى (مثال «مطاردة»)، وخطها الأساسي عند y 524. تحتها يقع الخط، مائلاً قليلاً جداً (y 712 على اليسار، y 697 على اليمين). تصعد الجملة من الخط في مجموعتين عند 0.33 ث و1.03 ث، بخط Playfair حجم 58 px، وخطها الأساسي فوق الخط بمقدار 17 px (مثال «لا إطارات مفتاحية» / «تطاردها.»). تعيش في الفتحة بين الخط الأساسي للكلمة الكبيرة، ممتداً عبر الإطار، والخط. من 0 إلى 2.9 ث تهبط الكلمة الكبيرة 104 px وتميل من -0.15 إلى -1.9 درجة حول خطها الأساسي الأيسر (power2.inOut)، فتضيق الفتحة. عند 2.93 ث تسقط على الخط باستقرار مخمد حرجياً (أوميغا نحو 14 في الثانية) وتستوي على زاوية الخط. تُقطع الجملة من أعلى بخطها الأساسي وتختفي. - المشهد 1 إلى 2، 3.28–4.03 ث: ينخفض الخط 5 px تحت الهبوط. ثم تطير الكلمة الكبيرة مستقيمة للأعلى خارج الإطار (power2.inOut، 0.7 ث، نحو 700 px) بينما ينزلق الخط وكل ما عليه للأعلى 230 px (power2.inOut، 0.75 ث). - المشهد 2، 3.5–6.5 ث، الحمل المتدلي: تصعد جملة ثانية من الخط عند 3.58 ث و4.18 ث (مثال «محادثة بدل» / «من»). عند 4.49 ث يسقط خطان رفيعان (1 px، لون الصفحة الفاتح بنسبة 45 %) من الخط عند x 468 وx 627 (power2.inOut، 0.34 ث). عند 4.79 ث تسقط كلمة ثقيلة 138 px (مثال «TIMELINE») من خلف الخط، مقصوصة على المنطقة تحته. تسقط بحركة مخمدة حرجياً من ارتفاع 191 px فوق موضع راحتها (أوميغا 8.6 في الثانية) وتتدلى نحو 90 px تحت الخط. عند 5.43 ث يستسلم الخط: ترهل بنصف موجة جيبية بين طرفيه، يدفعه نابض ناقص التخميد (30 px، أوميغا 11.9 في الثانية، نسبة تخميد 0.30). يتجاوز مرة واحدة إلى 41 px، ويرتد قليلاً ويستقر عند 30 px. يتحول الخطان إلى كابلين ورديين بسمك 2.5 px في 0.12 ث وتغوص الكلمة مع الترهل. كل كلمة في الجملة تركب المنحنى، مدارة بحسب الميل المحلي. - المشهد 3، 6.43–9.47 ث، الدعامة الأولى: تتراجع الكاميرا إلى 76 % حول نقطة بعيدة إلى يمين الإطار (power2.inOut، 0.65 ث)، فيتحرك الخط والكلمة المتدلية إلى اليمين وتغوص الجملة في الخط. عند 6.96 ث تصعد عبارة في أعلى اليسار، 49 px على الشاشة (مثال «صِف»). عند 7.09 ث تصعد كلمة ثقيلة من أسفل الإطار لتستلقي بجانب الطرف الأيسر الحر للخط (مخمدة حرجياً، 0.6 ث). طولها نحو ارتفاع الطرف الحر للخط (مثال «فيديو»). عند 7.95 ث تتأرجح 90 درجة عكس عقارب الساعة حول طرفها البعيد (نحو 0.8 ث) وتقف منتصبة تحت الخط، تُقرأ من الأسفل إلى الأعلى. وبينما ترتفع ترفع الطرف الأيسر للخط 61 px (power4.out، 0.53 ث) وتميل الكلمة المتدلية إلى +2.7 درجة. عند 8.83 ث تصعد عبارة صغيرة تحت الكلمة المتدلية (مثال «أفكار في»). عند 9.02 ث تصعد كلمة Playfair كبيرة (152 px على الشاشة، 0.56 ث) حرفها الثاني O (مثال «MOTION»). داخل تجويف الـ O يكون المشهد التالي مرسوماً بالفعل بنحو 5 % من حجمه: الخط والدعامة والكلمة المتدلية بتخطيطها التالي. - المشهد 3 إلى 4، 9.47–10.02 ث، عبر الـ O: تقرّب الكاميرا إلى تجويف الـ O. يزداد اللوغاريتم الطبيعي للمقياس مع مربع الزمن (نحو x18 عند 10.0 ث) بينما ينزلق مركز التجويف إلى مركز الإطار (power2.inOut). يركب المشهد الصغير التقريب، ثم يتجاوزه ويهبط تماماً على الإطار الكامل عند 9.93 ث بينما تجتاح حلقة الـ O ما وراء الحواف. - المشهد 4، 10–12.5 ث، الاستواء: تصعد عبارة في أعلى اليسار عند 10.22 ث و10.52 ث، 64 px (مثال «حرّر بـ» / «الكلمات.»). عند 10.49 ث تصعد دعامة منتصبة ثانية (الكلمة نفسها) من الأسفل عند الحافة اليمنى إلى موضعها تحت الطرف الأيمن المنخفض للخط (مخمدة حرجياً، 0.89 ث). من 11.08 إلى 11.43 ث يستوي الخط أفقياً تماماً ويفقد ترهله (power1.out)، وتستوي معه الكلمة المتدلية. هذه أول لحظة أفقية تماماً في الفيلم. من 11.4 إلى 11.6 ث يُرسم خط أرضية بسمك 1 px (#E9E4F2 بنسبة 18 %) من المركز عند y 965 (power2.in). ثم سكون. - المشهد 5، 12.5–16 ث، المنصة: تغوص عبارة المشهد 4. عند 12.53 ث تصعد الكلمة المتدلية لتستقر تحت الخط مباشرة (مخمدة حرجياً، 0.7 ث) وتقصر الكابلات معها. عند 12.93 ث تصعد عبارة بخط ذي زوائد (54 px، مثال «فكرتك جاهزة لـ») لتنتظر نحو 58 px فوق السطر، ثم عند 13.83 ث تستقر عليه (مخمدة حرجياً، 0.5 ث). عند 13.33 ث تصعد أول كلمة ثقيلة للمنصة من الخط (117 px، 0.56 ث، مثال «تتحرك.»). عند 14.17 ث تصعد كلمة قصيرة بخط ذي زوائد لتنتظر فوق الخط، ثم عند 14.59 ث تستقر على الخط (أول كلمة من [your brand]). عند 14.87 ث تصعد آخر كلمة ثقيلة من الخط وتهبط أخيراً (119 px، 0.58 ث؛ آخر كلمة من [your brand]، مع نقطة ختامية). - المشهد 6، 16–18 ث: أبقِ العبارة كاملة؛ لا شيء يتحرك. - المشهد 7، 18–20 ث، الحلقة: عند 18.0 ث تغوص الكاميرا تحت المنصة عند قدم ساق أحد حروف الكلمة المتدلية (E أو I). يتسارع لوغاريتم المقياس (نحو x40 عند 19 ث) بينما تُحمل قدم الساق للأسفل خارج الإطار، حتى يملأ لون الساق الفاتح الإطار. عند 19.05 ث، تحت ذلك الحجب الكامل، بدّل إلى الإطار الافتتاحي للمشهد 1، كما يُرى من داخل ساق من الكلمة الكبيرة: الكلمة الكبيرة في موضع بدايتها، والخط، بلا جملة. تُظهر علامات الوقت المشهد الأول مجدداً. ابتعد بمقياس لوغاريتمي متباطئ (من نحو x22 إلى x1 عند 20.0 ث) ليكون الإطار الأخير هو الأول تماماً. - الإيقاع: نحو عنصر جديد كل 0.5–0.7 ث داخل المشهد، وضغط بطيء طويل في المشهد 1، وسكون وجيز بعد استواء الخط، وثبات لثانيتين قبل الحلقة. </structure> <composition> - الخلفية: حبر عميق #1C0B5D، مسطحة. كل الطباعة بلون الصفحة الفاتح #FAF9FF. لمسة إنشائية واحدة، الوردي #FB2D89، تُستخدم فقط للخط الرئيسي والكابلات وعلامة المشهد. - الكلمات الثقيلة: Pliant 900 بعرض 105 (غروتسك عريض وثقيل جداً)، تباعد ضيق. العبارات: Playfair Display 400. علامات الوقت: JetBrains Mono بحجم 13 px باللون الخزامي #F0EDFF بعتامة 47 %. - هوامش 60 px. الخط الرئيسي ضربة وردية بسمك 4 px من x 60 إلى x 1020. - علامات الوقت على كل إطار، في الأعلى: - أعلى اليسار: عنوان موقعك بحروف كبيرة (مثال «YOURSITE.COM»)؛ - أعلى اليمين: مدى المشهد الحالي، مكتوباً هكذا «06.50 — 10.00»؛ - تحتهما: خط بسمك 1 px (#E9E4F2 بنسبة 18 %) من x 60 إلى x 1020، بعلامة 3 px كل ثانية وعلامة 6 px كل خمس ثوان؛ - على ذلك الخط: شريط وردي بسمك 3 px يغطي مدى المشهد الحالي تماماً. - ينتقل الشريط والأوقات إلى المشهد التالي عند أول إطار منه. هناك سبعة مشاهد: 0–3، 3–6.5، 6.5–10، 10–12.5، 12.5–16، 16–18 و18–20 ث. </composition> <techniques> - تُكشف كل عبارة بالصعود من خط. تُقص على المنطقة فوق الخط (أو فوق خط غير مرئي نحو 17 px تحت خطها الأساسي) وتبدأ أخفض بمقدار 1.28 من حجم الخط، مخفية تماماً. تهبط على منحنى مخمد حرجياً، 1 - (1 + 6p)e^(-6p)، مُعيَّر ليبلغ 1 في 0.5 ث: بداية سريعة وهبوط ناعم طويل دون تجاوز. - تأتي عبارات الجملة الواحدة في مجموعات منطوقة بفارق 0.6–0.7 ث. - تستقر الأحمال الثقيلة بحركة مخمدة حرجياً حقاً ودون ارتداد. الخط وحده مرن: نابض ناقص التخميد عندما يستسلم. - تدور الكلمات الراكبة على الخط المنحني بحسب ميله المحلي. - عندما ينتهي مشهد تغوص جملته عائدة إلى خطها (power2.in، نحو 0.26 ث). - الكاميرا هي مقياس وموضع على المشهد كله: - تراجع إلى 76 % حول نقطة بعيدة إلى يمين الإطار؛ - تقريب عبر تجويف حرف، حيث ينمو اللوغاريتم الطبيعي للمقياس مع مربع الزمن ويكون التخطيط التالي مرسوماً مسبقاً داخل التجويف؛ - غوص في ساق حرف ينتهي بحجب كامل ويُخفي القطع عائداً إلى الإطار الافتتاحي. </techniques> <music> خلفية إلكترونية سينمائية بسيطة بإيقاع 120 BPM، 10 موازير بالضبط، بحيث تقع كل حدود المشاهد على نبضة (3 و6.5 و10 و12.5 و16 و18 ث). فيها باص سينثيسايزر عميق نابض، وبادات ناعمة، ولحن منقور متناثر، وإيقاع خفيف يطقطق. المسار: - 0–3 ث: منخفض وثقيل، مع نبرة عند 3 ث؛ - من 3 ث: ارتفاع؛ - حتى 10 ث: تصاعد فلتر إلى نبضة أولى قوية عند 10 ث تماماً، لحظة هبوط التقريب؛ - من 11.5 ث: مفتوح وشبه ساكن؛ - حتى 15.5 ث: تصاعد واثق نحو عبارة كاملة؛ - 16–18 ث: وتر ممدود؛ - 18–20 ث: موجة تبلغ ذروتها عند 19 ث ثم تعود إلى النسيج الافتتاحي عند 20 ث، فلا تُسمع الحلقة. بلا غناء. </music> <sound> مؤثرات صوتية فوق الخلفية فقط، دون طبول أو باص خاص بها: - نقرة خشبية ناعمة عند أول إطار مرئي لكل عبارة؛ - دوي منخفض مع طرقة خشبية ثقيلة عندما تهبط العارضة (3.1 ث)، وصوت هواء سريع عندما تطير بعيداً؛ - نقرتان صغيرتان عندما يسقط الخطان الرفيعان؛ - صوت هواء هابط، ثم صرير لوح خشبي مع هبوط سفلي قصير عندما يستسلم الخط؛ - صوت هواء ناعم تحت تراجع الكاميرا؛ - أصوات هواء سريعة عندما ترتفع الدعامة وتتأرجح، مع طرقة عندما ترفع الخط؛ - صوت تصاعدي يتحول إلى ضربة جرسية عندما يهبط التقريب عبر الـ O عند 10 ث؛ - طقة معدنية خفيفة عندما يثبت الخط مستوياً، وحفيف ناعم عندما يُرسم خط الأرضية؛ - طرقات خشبية عندما تهبط كلمات المنصة، ونقرات ناعمة عندما تستقر العبارات؛ - دوي أعمق مع ضربة خشبية وجرس خافت تحت الكلمة الأخيرة؛ - صوت تصاعدي نحو بياض الغوص، وصوت هواء معكوس عند القطع المخفي، وصوت هواء سريع عند الابتعاد. بلا تعليق صوتي. اضبط الخلط عند نحو -14 LUFS مع ذروة حقيقية أقل من -1 dBTP. </sound> <references> طباعة متحركة تحريرية بالأسلوب السويسري حيث للكلمات وزن وتعمل كعمارة (عوارض وكابلات وأعمدة ومنصة). طباعة بمحاكاة فيزيائية، باستقرار مخمد حرجياً وخط مرن واحد. حلقات طباعية بتقريب لا نهائي تسافر عبر تجاويف الحروف وسيقانها. </references>

استُخدم مرة واحدة

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

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

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

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

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