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

AR

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

Simple Motion

عرض موشن ديزاين بثماني تقنيات

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

رمز الموجّه ONOتاريخ النشر 11 نوفمبر 2026

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

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

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

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

الفكرة

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

البنية

من 0 إلى 2 ث، العنوان على الصفحة الفاتحة. خط شبه أسود بحجم 1500 x 6 بكسل ينمو من مركز الإطار (scaleX، expo.out لمدة 0.45 ث). عند 0.5 ث ترتفع الكلمة الأولى، مثل "SHOW"، من الخط من الأسفل. عند 1.0 ث تسقط الكلمة الثانية، مثل "REEL"، منه من الأعلى (استبدل الكلمتين بكلمتيك). توجد كل كلمة في صندوق مقصوص عند الخط: مسافة الحركة 290 بكسل، expo.out لمدة 0.45 ث، خط Geist Bold بحجم 248 بكسل، في المنتصف. عند 1.5 ث تظهر ثلاث تسميات ركنية تدريجيًا خلال 0.1 ث: اسم في أعلى اليسار، ورمز زمني جارٍ بدقة الإطار (HH:MM:SS:FF) في أعلى اليمين، وقائمة ميزات مثل "TYPE / SHAPES / 3D / SOUND" في أسفل اليسار بلون باهت خافت. ابتداءً من 1.6 ث تُكبَّر الطبقة كلها من 1x إلى 41x خلال 0.4 ث بحركة expo.in، نحو نقطة داخل خط سميك من الكلمة العليا (تصلح عارضة حرف T). ينتهي الإطار ممتلئًا بالأسود تقريبًا ويقطع دون أن يُلاحَظ إلى المشهد التالي.
من 2 إلى 4 ث، أشكال على خلفية شبه سوداء، تسمية فصل مثل "01 / FIRST STEP". دائرة وردية تقفز نابضيًا من العدم إلى قطر 512 بكسل مع تجاوز ناعم واحد، r = 256(1 - e^(-9t) cos 11t). كل نصف ثانية تتحول إلى الشكل التالي: مربع (طول ضلعه 338 بكسل)، ثم مثلث (نصف قطر الدائرة المحيطة 266)، ثم نجمة بحر ناعمة بخمس أذرع. يُرسم كل محيط من 240 نقطة يبدأ مزجها مع الشكل التالي بفارق أجزاء من مئة من الثانية، فتهتز الحافة لمدة 0.1 ث. يستمر الإطار في الدوران باتجاه عقارب الساعة: دوران سريع بحركة power2.inOut من 30 إلى 45 درجة عند استقرار كل شكل، وانجراف بطيء بينهما. كل ربع ثانية تغادر حلقة رفيعة شاحبة الشكل عند نصف قطر 300 بكسل وتتمدد إلى 980 بكسل (expo.out، 0.95 ث) وهي تتلاشى.
من 4 إلى 6 ث، شبكة LED، تسمية فصل مثل "02 / SECOND STEP". يتحول الإطار إلى شبكة من 32 x 18 بلاطة فاتحة بحجم 56 بكسل وبخطوة 60 بكسل، مع خطوط شبه سوداء بينها. تنقلب كل بلاطة كالبطاقة (الارتفاع x |cos|، 180 درجة، power2.inOut لمدة 0.23 ث) وتغيّر لونها في المنتصف. تجري الانقلابات كموجة من الخلية الوسطى إلى الخارج، 0.028 ث لكل خلية، مع احتساب المسافة العمودية 1.2 ضعف. تكشف الموجة خلايا فارغة بلون حبر داكن عميق ورقمًا كبيرًا من البكسلات في خلايا وردية بارتفاع 13 خلية، مثل "02". عند 5.45 ث يمر مسح عمودي من اليمين إلى اليسار خلال 0.37 ث ويضغط الخلايا الفارغة فقط لفترة وجيزة إلى ربع ارتفاعها.
من 6 إلى 8 ث، جسيمات على خلفية شبه سوداء، تسمية فصل مثل "03 / THIRD STEP". نحو 2800 نقطة فاتحة ووردية (من 3 إلى 6 بكسل) تنجرف على الإطار كله. ثم تتجمع في كلمة مثل "IDEAS" بخط Geist Bold، موزعة لتملأ x 395-1520 بارتفاع حروف كبيرة من y 382 إلى 668، بحركة sine.inOut خلال 0.42 ث مع تأخر كل نقطة قليلًا. تثبت مع اهتزاز بمقدار بكسل واحد. عند 7.5 ث تنفجر إلى الخارج من المركز بسرعة متزايدة، وتخرج كل نقطة من الإطار بحلول 7.8 ث. تترك النقاط خطوطًا على مسارها عندما تتحرك بسرعة.
من 8 إلى 10 ث، سائل على خلفية وردية، تسمية صغيرة شبه سوداء "LIVE PREVIEW". سبع قطرات فاتحة من نوع الميتابول، واحدة كبيرة في المنتصف وست حولها، تدور وتتنفس، وتتصل وتندمج عندما تقترب. عند 8.45 ث تُمتص في قطرة واحدة (power2.in لمدة 0.17 ث)، تبقى صغيرة. عند 9.05 ث تُقذف إلى الخارج مجددًا بحركة back.out.
من 10 إلى 12 ث، جدار نصوص على الصفحة الفاتحة، التسمية "KINETIC TYPE". ثمانية صفوف بخط Geist Bold بحجم 152 بكسل وبخطوة 150 بكسل تغطي الإطار. تتناوب الكلمات بين قوية شبه سوداء وهادئة رمادية باهتة، مع مسافة إضافية صغيرة بين الكلمات، مثل "MOTION IDEAS TYPE SHAPES SOUND PREVIEW" بالتكرار (استبدلها بكلمات ميزاتك). تُزاح الصفوف الزوجية بمعظم دورة كلمات حتى لا تصطف الكلمات في أعمدة أبدًا. تتحرك الصفوف الزوجية إلى اليسار والفردية إلى اليمين، وكل صف أسرع بمقدار 60 بكسل/ث من الذي فوقه (من 900 إلى 1320 بكسل/ث). عند 11.0 ث تتوقف كل الصفوف فجأة، ثم تندفع بقدر نحو 0.17 ث من المسافة (power3.inOut لمدة 0.28 ث). في اللحظة نفسها ينفتح شريط وردي بعرض الإطار كاملًا وارتفاع 300 بكسل من مركزه عبر المنتصف (scaleY، expo.out لمدة 0.35 ث). يرتفع اسم بخط Geist Bold أبيض بحجم 262 بكسل، مثل "STUDIO NAME"، داخل الشريط من حافته السفلية (expo.out لمدة 0.33 ث).
من 12 إلى 14 ث، مكعب ثلاثي الأبعاد على خلفية شبه سوداء، التسمية "3D EFFECTS". مكعب بحجم 514 بكسل في منظور (2400 بكسل)، مائل بمقدار -14.5 درجة بحيث يظهر وجهه العلوي بلون الحبر الداكن العميق. يستقر في منظر ثلاثة أرباع ويدور ربع دورة كل نصف ثانية (power3.out لمدة 0.3 ث)، وكل وجه يستقر بالزاوية نفسها. تحمل أربعة أوجه كلمة ثقيلة واحدة لكل وجه، مثلًا: "TYPE" شبه أسود على فاتح، "3D" أبيض على وردي، "SHAPES" فاتح على شبه أسود، "SOUND" وردي على فاتح. الكلمات القصيرة بحجم 200 بكسل. تُصغَّر الكلمات الأطول إلى نحو 85% من الوجه، فتتسع كل كلمة داخل وجهها مع هوامش.
من 14 إلى 15 ث، بطاقة ختامية على خلفية شبه سوداء. اسم من كلمتين بخط Geist Bold بحجم 224 بكسل، مثل "Studio Name"، الكلمة الأولى فاتحة والثانية وردية، يرتفع من حافة حادة تحت خط الأساس مباشرة (expo.out لمدة 0.45 ث). عند 14.15 ث تتبعه جملة مثل "your tagline · your website" بخط Geist Medium بحجم 44 بكسل. عند 14.25 ث تظهر دعوة صغيرة لاتخاذ إجراء مثل "TRY IT FREE" بخط Geist Mono. ابتداءً من 14.55 ث تتلاشى البطاقة كلها خطيًا إلى الأسود، لتصل إلى الأسود في الإطار الأخير.

التكوين

Palette:

الصفحة الفاتحة #FAF9FF.
شبه الأسود #0D0B1E للصفحات الداكنة والنص الداكن.
حبر داكن عميق #1C0B5D للوحات الداكنة والخلايا الفارغة في الشبكة وأعلى المكعب.
لون مميز واحد وردي #FB2D89.
أبيض #FFFFFF للنص على الوردي.
خافت #6B6385 للتسميات الصغيرة على الصفحات الفاتحة، وبشفافية 24% للكلمات الهادئة في جدار النصوص.
تسميات الفصول على شبه الأسود بلون #E9E4F2 وبشفافية 55%.
الخطوط:
Geist Bold لكل ما هو كبير، بتقارب شديد: letter-spacing -0.07em، line-height 1.
Geist Medium لجملة البطاقة الختامية فقط.
Geist Mono بحجم 22 بكسل للتسميات الركنية، على بعد 64 بكسل من اليسار و60 بكسل من الأعلى.
تبقى العناصر الكبيرة في منتصف الإطار، مع مساحة فارغة واسعة حول العنصر البطل الوحيد في كل مشهد.

التقنيات

تحمل كل حركة سريعة أثر غالق الكاميرا. ارسم ثلاث نسخ من الطبقة المتحركة مأخوذة بفارق ربع إطار (t - 1/240 s، t، t + 1/240 s) وكدّسها بشفافية 1 و1/2 و1/3. هذا يجعلها متوسطًا، فتترك الحركة أشباحًا رمادية متدرجة. تحسب المشاهد المرسومة على canvas (التحول، الشبكة، الجسيمات، السائل) متوسط ثلاث تمريرات بالطريقة نفسها. تدخل الكلمات بالارتفاع أو السقوط من حواف قص حادة بحركة expo.out، وليس بالتلاشي أبدًا. يُخفى القطع الأول بتكبير expo.in إلى خط حرف. كل التغييرات الأخرى قطع حاد على النبضة القوية. التلاشي الخطي للبطاقة الختامية إلى الأسود هو التلاشي الوحيد.

الموسيقى

مقطوعة هاوس أصلية بإيقاع 120 BPM، مدتها 15 ثانية بالضبط، بميزان واحد لكل مشهد، وكلها على شبكة نبضات التركيب. فيها طبلة four-on-the-floor، وتصفيق على 2 و4، وهاي-هات مفتوح على النبضات الضعيفة، وخط باص فانكي نابض، وضربات وترية ساطعة على النبضات الضعيفة. الميزان الأول، تحت العنوان، تصاعد هادئ. يمتد رايزر وووش قصير إلى التكبير، ويهبط الإيقاع الكامل عند 2.0 ث بدويّ. تقع كل طبلة على الشبكة، فيقع كل قطع على نبضة قوية. تتلاشى المقطوعة في النصف ثانية الأخير. المزج عند نحو -14 LUFS، وقمة حقيقية دون -1 dBTP.

الصوت

ضربات صوتية موضوعة على الصورة فوق الموسيقى:

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

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

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

الطباعة

كلمات تخرج من خط ينمو

خط بسمك 6 px ينمو من مركزه (scaleX من 0 إلى 1، expo.out 0.45 s). تصعد الكلمة الأولى من الخط من الأسفل، وتنزل الثانية منه من الأعلى، بفارق 0.5 s؛ وتوضع كل كلمة في صندوق overflow-hidden خاص بها حافته هي الخط، فتبدو كأنها تخرج من الخط (y من 290 px إلى 0، expo.out 0.45 s). خط غروتيسك ثقيل بحجم 248 px وتباعد -0.07em، أسود تقريباً على صفحة فاتحة.

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

عرض الكود

<!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=Geist:wght@400;500;700&family=Geist+Mono&display=swap");
html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Geist", sans-serif; }
.scene { position: absolute; inset: 0; overflow: hidden; }
.scene { background: #faf9ff; }
.rule { position: absolute; left: 210px; top: 537px; width: 1500px; height: 6px; background: #0d0b1e; transform: scaleX(0); }
.box { position: absolute; left: 0; width: 1920px; overflow: hidden; }
.box.top { top: 0; height: 534px; }      /* bottom edge = the rule */
.box.bottom { top: 566px; height: 514px; } /* top edge just under the rule */
.word { position: absolute; left: 0; width: 1920px; text-align: center; white-space: nowrap;
  font: 700 248px/1 "Geist", sans-serif; letter-spacing: -0.07em; color: #0d0b1e; }
.box.top .word { top: 316px; }
.box.bottom .word { top: 0; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080">
  <div class="scene clip" data-start="0" data-duration="3">
    <div class="rule"></div>
    <div class="box top"><div class="word">"SHOW"</div></div>
    <div class="box bottom"><div class="word">"REEL"</div></div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const RISE = 290;   // travel of each word, about one line height
const DUR = 0.45;   // every move: expo.out over 0.45 s
tl.fromTo(".rule", { scaleX: 0 }, { scaleX: 1, duration: DUR, ease: "expo.out" }, 0);
tl.fromTo(".box.top .word", { y: RISE }, { y: 0, duration: DUR, ease: "expo.out" }, 0.5);
tl.fromTo(".box.bottom .word", { y: -RISE }, { y: 0, duration: DUR, ease: "expo.out" }, 1.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:01 من الفيديو

انتقال

تكبير عبر خط حرف، مع أثر غالق بثلاث تعريضات

تتحجم طبقة العنوان كلها من 1 إلى 41 خلال 0.4 s بتسارع expo.in حول نقطة داخل خط سميك (هنا عارضة حرف T)، فينتهي الإطار ممتلئاً بلون الخط، وهو خلفية المشهد التالي: قطع سلس بلا فواصل. الأثر عبارة عن ثلاث نسخ من الطبقة مأخوذة بفارق ربع إطار (t - 1/240 s وt وt + 1/240 s) متراكبة بـ opacity قدرها 1 و1/2 و1/3، أي متوسط دقيق لثلاث تعريضات، فتترك الحركات السريعة أشباحاً رمادية متدرجة كالغالق الحقيقي.

متى تُستخدم أي قطع حاد من عنوان فاتح إلى مشهد داكن؛ وحيلة الأثر تصلح لأي حركة سريعة في DOM.

عرض الكود

<!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=Geist:wght@400;500;700&family=Geist+Mono&display=swap");
html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Geist", sans-serif; }
.scene { position: absolute; inset: 0; overflow: hidden; }
.scene { background: #faf9ff; }
.layer { position: absolute; inset: 0; background: #faf9ff; }
.zoom { position: absolute; inset: 0; transform-origin: 956px 368px; } /* a point inside the T's bar */
.word { position: absolute; left: 0; top: 316px; width: 1920px; text-align: center; white-space: nowrap;
  font: 700 248px/1 "Geist", sans-serif; letter-spacing: -0.07em; color: #0d0b1e; }
.next { position: absolute; inset: 0; background: #0d0b1e; }
.dot { position: absolute; left: 910px; top: 490px; width: 100px; height: 100px; border-radius: 50%; background: #fb2d89; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080">
  <div class="scene clip" data-start="0" data-duration="3">
    <div id="stack"></div>
    <div class="next clip" data-start="2" data-duration="1"><div class="dot"></div></div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const SH = 0.25 / 60;                 // a quarter frame at 60 fps
const SAMPLES = [-SH, 0, SH], OPACITY = [1, 1 / 2, 1 / 3];
const expoIn = gsap.parseEase("expo.in");
const stack = document.getElementById("stack");
const layers = SAMPLES.map((dt, i) => {
  const L = document.createElement("div");
  L.className = "layer"; L.style.opacity = OPACITY[i];
  L.innerHTML = '<div class="zoom"><div class="word">MOTION</div></div>';
  stack.appendChild(L);
  return { dt, zoom: L.querySelector(".zoom") };
});
function pose(L, t) {
  const p = Math.min(1, Math.max(0, (t - 1.6) / 0.4)); // zoom from 1.6 s to 2.0 s
  L.zoom.style.transform = "scale(" + (1 + 40 * expoIn(p)).toFixed(4) + ")";
}
const clock = { t: 0 };
tl.to(clock, { t: 3, duration: 3, ease: "none", onUpdate: () => layers.forEach((L) => pose(L, clock.t + L.dt)) }, 0);
layers.forEach((L) => pose(L, L.dt));
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 من الفيديو

أشكال

تحول شكلي شعاعي متمايل مع حلقات تموج

يُعاد رسم مسار SVG واحد في كل إطار من 240 نقطة حول المركز: كل شكل (دائرة ومربع ومثلث ونجمة ناعمة بخمس أذرع) هو دالة نصف قطر بحسب الزاوية، وتمتزج كل نقطة مع الشكل التالي خلال 0.07 s بتأخير صغير خاص بها (من 0 إلى 0.05 s، مجموع جيوب)، فيتمايل المحيط أثناء التحول. يدور الإطار باتجاه عقارب الساعة بدوران سريع power2.inOut عند استقرار كل شكل، وبانجراف بطيء بينهما. تغادر حلقات رفيعة الشكل كل ربع ثانية وتتسع من 300 إلى 980 px (expo.out، 0.95 s) وهي تتلاشى.

متى تُستخدم لحظة مرحة بعنوان «شكل» أو «أشكال» على الموسيقى، تحول واحد لكل نبضة.

عرض الكود

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>تحول شكلي شعاعي متمايل مع حلقات تموج</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;700&family=Geist+Mono&display=swap");
html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Geist", sans-serif; }
.scene { position: absolute; inset: 0; overflow: hidden; }
.scene { background: #0d0b1e; }
.ring { position: absolute; left: -20px; top: -440px; width: 1960px; height: 1960px; opacity: 0; }
#turn { position: absolute; inset: 0; transform-origin: 960px 540px; }
svg { position: absolute; left: 0; top: 0; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2" data-width="1920" data-height="1080">
  <div class="scene clip" data-start="0" data-duration="2">
    <div id="rings"></div>
    <div id="turn"><svg width="1920" height="1080" viewBox="0 0 1920 1080"><path id="shape" fill="#fb2d89" d=""></path></svg></div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const TAU = Math.PI * 2, N = 240, CX = 960, CY = 540, d2r = Math.PI / 180;
const rings = [];
for (let k = 0; k < 8; k++) {
  const d = document.createElement("div"); d.className = "ring";
  d.innerHTML = '<svg width="1960" height="1960" viewBox="0 0 1960 1960"><circle cx="980" cy="980" r="978" fill="none" stroke="#faf9ff" stroke-width="2.5" vector-effect="non-scaling-stroke"/></svg>';
  document.getElementById("rings").appendChild(d); rings.push(d);
}
// radius of each shape at angle a, in the turning frame
const circleR = (t) => { const u = Math.max(0, t - 0.025); return 256 * (1 - Math.exp(-9 * u) * Math.cos(11 * u)); };
const polyR = (a, n, rc, v) => { const ap = rc * Math.cos(Math.PI / n), seg = TAU / n; const x = (((a - v) % seg) + seg) % seg; return ap / Math.cos(x - Math.PI / n); };
const squareR = (a) => 169 / Math.max(Math.abs(Math.cos(a)), Math.abs(Math.sin(a)));
const starR = (a) => { const c = (1 + Math.cos(5 * (a + Math.PI / 2))) / 2; return 108 + 154 * c * c; };
const shapes = [(a, t) => circleR(t), (a) => squareR(a), (a) => polyR(a + 22 * d2r, 3, 266, -Math.PI / 2), (a) => starR(a + 100 * d2r)];
const morphAt = [0.5, 1.0, 1.5];
const delay = Array.from({ length: N }, (_, i) => { const a = (i / N) * TAU; return 0.03 * (0.5 + 0.5 * Math.sin(3 * a + 1.3)) + 0.02 * (0.5 + 0.5 * Math.sin(7 * a + 0.4)); });
const morphE = gsap.parseEase("power2.inOut"), ringE = gsap.parseEase("expo.out");
const path = document.getElementById("shape");
function draw(t) {
  let k = 0; while (k < 3 && t >= morphAt[k]) k++;
  const from = shapes[Math.max(0, k - 1)], to = shapes[k], m0 = k > 0 ? morphAt[k - 1] : -1;
  let d = "";
  for (let i = 0; i < N; i++) {
    const a = (i / N) * TAU;
    let r = shapes[0](a, t);
    if (k > 0) { const e = morphE(Math.min(1, Math.max(0, (t - m0 - delay[i]) / 0.07))); r = from(a, t) * (1 - e) + to(a, t) * e; }
    d += (i ? "L" : "M") + (CX + r * Math.cos(a)).toFixed(1) + " " + (CY + r * Math.sin(a)).toFixed(1);
  }
  path.setAttribute("d", d + "Z");
  rings.forEach((el, j) => {
    const age = t - j * 0.25, p = age / 0.95;
    if (age < 0 || p >= 1) { el.style.opacity = 0; return; }
    el.style.opacity = 0.32 * (1 - p);
    el.style.transform = "scale(" + (300 / 980 + (1 - 300 / 980) * ringE(p)) + ")";
  });
}
const clock = { t: 0 };
tl.to(clock, { t: 2, duration: 2, ease: "none", onUpdate: () => draw(clock.t) }, 0);
// clockwise spin as each shape lands, slow drift between
tl.set("#turn", { rotation: -15 }, 0);
tl.to("#turn", { rotation: 32, duration: 0.25, ease: "power2.inOut" }, 0.52);
tl.to("#turn", { rotation: 45, duration: 0.23, ease: "sine.out" }, 0.77);
tl.to("#turn", { rotation: 82, duration: 0.2, ease: "power2.inOut" }, 1.0);
tl.to("#turn", { rotation: 100, duration: 0.4, ease: "sine.out" }, 1.2);
tl.to("#turn", { rotation: 136, duration: 0.4, ease: "power2.out" }, 1.6);
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 من الفيديو

انتقال

موجة انقلاب في شبكة بكسلات تكشف كلمة مضيئة

شبكة 32 x 18 من البلاطات بحجم 56 px وخطوة 60 px على أرضية شبه سوداء، مرسومة على canvas. تنقلب كل بلاطة كالبطاقة (الارتفاع x |cos(الزاوية)|، الزاوية من 0 إلى 180 درجة، power2.inOut خلال 0.23 s) وتغير لونها في منتصف الحركة؛ وتتبع أوقات الانقلاب موجة تنتشر من الخلية الوسطى (0.028 s لكل خلية، مع احتساب المسافات العمودية 1.2 مرة)، فينفتح حدقة متعرجة بشقوق أفقية. تُحوَّل الكلمة مرة واحدة من الخط إلى خلايا (تضيء الخلية حين يغطي الحرف معظمها). لاحقاً يجري مسح عمودي من اليمين إلى اليسار ويضغط الخلايا الفارغة فقط لنبضة.

متى تُستخدم كشف رقمي بأسلوب لوحة LED لرقم أو كلمة قصيرة.

عرض الكود

<!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=Geist:wght@400;500;700&family=Geist+Mono&display=swap");
html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Geist", sans-serif; }
.scene { position: absolute; inset: 0; overflow: hidden; }
.scene { background: #0d0b1e; }
canvas { position: absolute; left: 0; top: 0; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2" data-width="1920" data-height="1080">
  <div class="scene clip" data-start="0" data-duration="2">
    <canvas id="grid" width="1920" height="1080"></canvas>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const COLS = 32, ROWS = 18, PITCH = 60, TILE = 56, WORD = "02";
const C = { light: "#faf9ff", tile: "#1c0b5d", lit: "#fb2d89", gap: "#0d0b1e" };
let PIX = [];
function raster(word) {   // the word into 32 x 18 cells: cap height 13 cells, 26 cells wide at most
  const S = 10, cv = document.createElement("canvas"); cv.width = COLS * S; cv.height = ROWS * S;
  const g = cv.getContext("2d"), size = (13 / 0.708) * S;
  g.font = "700 " + size + 'px "Geist"';
  const m = g.measureText(word), w = m.actualBoundingBoxLeft + m.actualBoundingBoxRight;
  g.fillStyle = "#fff"; g.fillText(word, 16 * S - w / 2 + m.actualBoundingBoxLeft, 15 * S);
  const d = g.getImageData(0, 0, cv.width, cv.height).data, rows = [];
  for (let r = 0; r < ROWS; r++) { let row = ""; for (let c = 0; c < COLS; c++) { let on = 0; for (let j = 1; j < S; j += 2) for (let i = 1; i < S; i += 2) if (d[((r * S + j) * cv.width + c * S + i) * 4 + 3] > 127) on++; row += on > 12 ? "#" : "."; } rows.push(row); }
  return rows;
}
const mid = [];
for (let r = 0; r < ROWS; r++) for (let c = 0; c < COLS; c++) { const dx = c - 16, dy = (r - 9) * 1.2; mid.push(0.19 + 0.0277 * Math.hypot(dx, dy)); }
const FLIP = 0.2333, flipE = gsap.parseEase("power2.inOut");
const sweep = (c) => 1.3 + (8.5 + 0.71 * (31 - c)) / 60;
const ctx = document.getElementById("grid").getContext("2d");
function draw(t) {
  ctx.fillStyle = C.gap; ctx.fillRect(0, 0, 1920, 1080);
  for (let r = 0; r < ROWS; r++) for (let c = 0; c < COLS; c++) {
    const lit = PIX.length && PIX[r][c] === "#";
    const p = Math.min(1, Math.max(0, (t - mid[r * COLS + c] + FLIP / 2) / FLIP)), a = Math.PI * flipE(p);
    let s = Math.abs(Math.cos(a));
    if (!lit && p >= 1) { const d = (t - sweep(c)) / 0.034; s *= 1 - 0.75 * Math.exp(-d * d); }
    const h = TILE * s; if (h < 0.3) continue;
    ctx.fillStyle = a < Math.PI / 2 ? C.light : lit ? C.lit : C.tile;
    ctx.fillRect(c * PITCH + 2, r * PITCH + 2 + (TILE - h) / 2, TILE, h);
  }
}
tl.eventCallback("onUpdate", () => draw(tl.time()));
tl.to({}, { duration: 2 }, 0);
document.fonts.load('700 100px "Geist"').then(() => { PIX = raster(WORD); draw(tl.time()); });
draw(0);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

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

جسيمات

كلمة من جسيمات: تجمع، ثبات، انفجار

نحو 2,800 نقطة (نصف القطر من 1.6 إلى 3.2 px، ثلاثة أرباعها فاتحة وربعها بلون التمييز) تبدأ متناثرة في الإطار وتنجرف. أهدافها نقاط عشوائية داخل حروف كلمة رُسمت مرة واحدة على canvas خارج الشاشة، بتباعد حروف يملأ صندوقاً ثابتاً. تسافر كل نقطة بـ sine.inOut خلال 0.42 s بعد تأخيرها الخاص (من 0 إلى 0.05 s)، وترتجف بمقدار بكسل بينما تثبت الكلمة، ثم ينفجر كل شيء إلى الخارج من المركز: تتضخم الكلمة (scale 1 + 40 u^2) ويقذف دفع شعاعي متزايد مع u^3 كل نقطة خارج الإطار خلال 0.3 s، فلا يبقى شيء عند القطع. تُرسم كل نقطة كخط بطرفين مستديرين من موضعها قبل ثلث إطار إلى ثلث إطار بعده، فتترك النقاط السريعة خطوطاً.

متى تُستخدم تحويل فكرة أو كلمة إلى مادة والعودة: كشف بالتجميع وخروج انفجاري.

عرض الكود

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>كلمة من جسيمات: تجمع، ثبات، انفجار</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;700&family=Geist+Mono&display=swap");
html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Geist", sans-serif; }
.scene { position: absolute; inset: 0; overflow: hidden; }
.scene { background: #0d0b1e; }
canvas { position: absolute; left: 0; top: 0; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2" data-width="1920" data-height="1080">
  <div class="scene clip" data-start="0" data-duration="2">
    <canvas id="dots" width="1920" height="1080"></canvas>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const WORD = "IDEAS", BOX = { x0: 395, x1: 1520, top: 382, base: 668 }, N = 2800;
let seed = 7; const rnd = () => { seed = (seed * 16807) % 2147483647; return seed / 2147483647; };
let P = [];
function build() {
  const c = document.createElement("canvas"); c.width = 1920; c.height = 1080; const g = c.getContext("2d");
  const size = (BOX.base - BOX.top) / 0.708; g.font = "700 " + size + 'px "Geist"';
  const ink = (ls) => { g.letterSpacing = ls + "px"; const m = g.measureText(WORD); return m.actualBoundingBoxLeft + m.actualBoundingBoxRight - ls; };
  const ls = (BOX.x1 - BOX.x0 - ink(0)) / (WORD.length - 1); g.letterSpacing = ls + "px";
  const m = g.measureText(WORD); g.fillStyle = "#fff"; g.fillText(WORD, BOX.x0 + m.actualBoundingBoxLeft, BOX.base);
  const d = g.getImageData(0, 0, 1920, 1080).data, pts = [];
  for (let y = 300; y < 760; y += 2) for (let x = 300; x < 1620; x += 2) if (d[(y * 1920 + x) * 4 + 3] > 128) pts.push([x, y]);
  P = Array.from({ length: N }, () => { const tg = pts[Math.floor(rnd() * pts.length)]; return { sx: rnd() * 1920, sy: rnd() * 1080, vx: (rnd() - 0.5) * 30, vy: (rnd() - 0.5) * 30, tx: tg[0], ty: tg[1], delay: rnd() * 0.05, r: 1.6 + rnd() * 1.6, col: rnd() < 0.24 ? "#fb2d89" : "#faf9ff", ph: rnd() * 6.28, burst: 0.7 + rnd() * 0.6 }; });
}
const gather = gsap.parseEase("sine.inOut");
function pos(p, t) {
  const fx = p.sx + p.vx * t, fy = p.sy + p.vy * t, e = gather(Math.min(1, Math.max(0, (t - 0.3 - p.delay) / 0.42)));
  let x = fx + (p.tx - fx) * e + Math.sin(t * 9 + p.ph) * 1.2 * e, y = fy + (p.ty - fy) * e + Math.cos(t * 7 + p.ph) * 1.2 * e;
  if (t > 1.5) { // swell, then fling every dot clear of the frame within 0.3 s
    const u = t - 1.5, k = 1 + 40 * p.burst * u * u, dx = x - 960, dy = y - 540, r = Math.hypot(dx, dy) || 1, push = 61000 * p.burst * u * u * u;
    x = 960 + dx * k + (dx / r) * push; y = 540 + dy * k + (dy / r) * push;
  }
  return [x, y];
}
const ctx = document.getElementById("dots").getContext("2d"); ctx.lineCap = "round";
function draw(t) {
  ctx.clearRect(0, 0, 1920, 1080);
  for (const p of P) { const a = pos(p, t - 1 / 180), b = pos(p, t + 1 / 180); ctx.strokeStyle = p.col; ctx.lineWidth = p.r * 2; ctx.beginPath(); ctx.moveTo(a[0], a[1]); ctx.lineTo(b[0] + 0.01, b[1]); ctx.stroke(); }
}
tl.eventCallback("onUpdate", () => draw(tl.time()));
tl.to({}, { duration: 2 }, 0);
document.fonts.load('700 400px "Geist"').then(() => { build(); 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:09 من الفيديو

أشكال

قطرات ميتابول تدور وتندمج وتنفجر

سبع قطرات (واحدة كبيرة وست حولها) تُرسم كحقل على canvas بنصف الدقة: يُملأ البكسل حيث يتجاوز مجموع (radius / distance)^2 القيمة 1، مع نطاق ناعم من 0.92 إلى 1.08 لتنعيم الحواف، فتنتفخ القطرات وتتشكل بينها جسور عند اقترابها. تدور التوابع بسرعاتها الزاوية الخاصة وتتنفس؛ وعلى النبضة تُسحب مسافتها وأحجامها نحو المركز (power2.in، 0.17 s)، وتثبت كقطرة واحدة، ثم تُقذف للخارج من جديد بـ back.out. يُؤخذ متوسط ثلاث تعريضات لتتلطخ الحركات السريعة.

متى تُستخدم لحظة سائلة وعضوية بين مشاهد غرافيكية؛ لحظات مصباح الحمم أو «السوائل».

عرض الكود

<!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=Geist:wght@400;500;700&family=Geist+Mono&display=swap");
html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Geist", sans-serif; }
.scene { position: absolute; inset: 0; overflow: hidden; }
.scene { background: #fb2d89; }
canvas { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2" data-width="1920" data-height="1080">
  <div class="scene clip" data-start="0" data-duration="2">
    <canvas id="fluid" width="960" height="540"></canvas>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const BG = [251, 45, 137], FG = [250, 249, 255], d2r = Math.PI / 180;
const SAT = [{ a: -118, d: 251, r: 85, w: 38, ph: 0.3 }, { a: -164, d: 279, r: 83, w: -30, ph: 1.9 }, { a: 149, d: 246, r: 108, w: 44, ph: 3.1 }, { a: -42, d: 296, r: 108, w: -36, ph: 4.4 }, { a: -4, d: 394, r: 90, w: 28, ph: 5.2 }, { a: 36, d: 281, r: 83, w: -48, ph: 2.6 }];
const inE = gsap.parseEase("power2.in"), outE = gsap.parseEase("back.out(1.6)"), grow = gsap.parseEase("power2.out");
const reach = (t) => t < 0.45 ? 1 : t < 0.62 ? 1 - inE((t - 0.45) / 0.17) : t < 1.05 ? 0 : t < 1.3 ? outE((t - 1.05) / 0.25) : 1;
const size = (t) => t < 0.45 ? 1 : t < 0.62 ? 1 - 0.45 * inE((t - 0.45) / 0.17) : t < 1.05 ? 0.55 : t < 1.2 ? 0.55 + 0.45 * grow((t - 1.05) / 0.15) : 1;
function balls(t) {
  const R = reach(t), S = size(t), cx = 480 + 21 * Math.sin(t * 2.1), out = [[cx, 270, 66.5 * S]];
  for (const s of SAT) { const a = (s.a + s.w * (t - 1.2)) * d2r, d = s.d * R * (1 + 0.16 * Math.sin(t * 5.7 + s.ph)) / 2; out.push([cx + d * Math.cos(a), 270 + d * Math.sin(a), (s.r / 2) * S]); }
  return out;
}
const ctx = document.getElementById("fluid").getContext("2d"), img = ctx.createImageData(960, 540), px = img.data, acc = new Float32Array(960 * 540);
function draw(t) {
  acc.fill(0);
  for (const ts of [t - 1 / 180, t, t + 1 / 180]) {
    const B = balls(ts);
    for (let y = 0; y < 540; y++) for (let x = 0; x < 960; x++) {
      let f = 0; for (const b of B) { const dx = x + 0.5 - b[0], dy = y + 0.5 - b[1]; f += (b[2] * b[2]) / (dx * dx + dy * dy + 0.01); }
      acc[y * 960 + x] += (f <= 0.92 ? 0 : f >= 1.08 ? 1 : (f - 0.92) / 0.16) / 3;
    }
  }
  for (let i = 0, j = 0; i < acc.length; i++, j += 4) { const a = acc[i]; px[j] = BG[0] + (FG[0] - BG[0]) * a; px[j + 1] = BG[1] + (FG[1] - BG[1]) * a; px[j + 2] = BG[2] + (FG[2] - BG[2]) * a; px[j + 3] = 255; }
  ctx.putImageData(img, 0, 0);
}
tl.eventCallback("onUpdate", () => draw(tl.time()));
tl.to({}, { duration: 2 }, 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:11 من الفيديو

الطباعة

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

ثمانية صفوف من الحروف الكبيرة الثقيلة بحجم 152 px وخطوة 150 px تملأ الإطار، والكلمات تتناوب بين عالية (شبه سوداء) وهادئة (رمادي باهت عند 24%، نحو 1.4:1 على الصفحة)، مرتبة بحسب عروض الخط نفسه مع مسافة كلمات زائدة قليلاً؛ وتبدأ الصفوف الزوجية بعد الفردية بنحو دورة كلمة كاملة حتى لا تتراص الكلمات في أعمدة. تتحرك الصفوف الزوجية يساراً والفردية يميناً، وكل صف أسرع بـ 60 px/s من الذي فوقه (من 900 إلى 1320 px/s)؛ وعند النبضة تتوقف فجأة ثم تندفع بمسافة 0.173 s من الحركة بـ power3.inOut خلال 0.28 s. وعند توقفها ينفتح شريط تمييز بكامل العرض من مركزه (scaleY expo.out 0.35 s) ويرتفع الاسم داخله من الحافة السفلية للشريط (expo.out 0.33 s).

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

عرض الكود

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>جدار نصوص متعاكس الحركة يتوقف فجأة ويندفع ويفتح شريطاً</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;700&family=Geist+Mono&display=swap");
html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Geist", sans-serif; }
.scene { position: absolute; inset: 0; overflow: hidden; }
.scene { background: #faf9ff; }
.row { position: absolute; left: 0; white-space: pre; font: 700 152px/1 "Geist", sans-serif; letter-spacing: -0.07em; }
.row span { position: absolute; top: 0; }
.loud { color: #0d0b1e; } .quiet { color: rgba(107, 99, 133, 0.24); }
.band { position: absolute; left: 0; top: 390px; width: 1920px; height: 300px; background: #fb2d89; overflow: hidden; transform: scaleY(0); }
.name { position: absolute; left: 0; top: 18px; width: 1920px; text-align: center; white-space: nowrap; font: 700 262px/1 "Geist", sans-serif; letter-spacing: -0.07em; color: #ffffff; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2" data-width="1920" data-height="1080">
  <div class="scene clip" data-start="0" data-duration="2">
    <div id="rows"></div>
    <div class="band"><div class="name">"YOUR NAME"</div></div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const WORDS = ["MOTION", "IDEAS", "TYPE", "SHAPES", "SOUND", "PREVIEW"], SIZE = 152, GAP = 24.5;
function build() {
  const g = document.createElement("canvas").getContext("2d"); g.font = "700 " + SIZE + 'px "Geist"'; g.letterSpacing = -0.07 * SIZE + "px";
  const adv = (w) => g.measureText(w).width, space = adv(" ");
  const C = WORDS.reduce((sum, w) => sum + adv(w) + space + GAP, 0);
  const evenAnchor = -1397 + 0.867 * C;   // even rows start 0.867 of a word cycle after the odd ones: staggered, never in columns
  for (let k = 0; k < 8; k++) {
    const row = document.createElement("div"); row.className = "row"; row.style.top = (-40 + 150 * k - 0.15 * SIZE) + "px";
    let x = 0, anchor = 0;
    for (let c = 0; c < 4; c++) WORDS.forEach((w, i) => { const s = document.createElement("span"); s.className = i % 2 ? "quiet" : "loud"; s.textContent = w; s.style.left = x + "px"; row.appendChild(s); if (c === 2 && i === 3) anchor = x; x += adv(w) + space + GAP; });
    document.getElementById("rows").appendChild(row);
    const x0 = (k % 2 ? -1397 : evenAnchor) - anchor, dir = k % 2 ? 1 : -1, v = 900 + 60 * k;
    tl.fromTo(row, { x: x0 }, { x: x0 + dir * v, duration: 1, ease: "none" }, 0);             // run
    tl.to(row, { x: x0 + dir * v * 1.1733, duration: 0.28, ease: "power3.inOut" }, 1.0);     // stop dead, lurch on
  }
  tl.fromTo(".band", { scaleY: 0 }, { scaleY: 1, duration: 0.35, ease: "expo.out" }, 1.0);
  tl.fromTo(".name", { y: 300 }, { y: 0, duration: 0.33, ease: "expo.out" }, 1.128);
  window.__timelines = window.__timelines || {}; window.__timelines["main"] = tl;
}
document.fonts.load('700 152px "Geist"').then(build, build);
</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:12 من الفيديو

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

مكعب كلمات كالقرص الدوار، ربع دورة لكل نبضة

مكعب CSS ثلاثي الأبعاد (أوجه 514 px، perspective 2400 px) مائل بزاوية -14.5 درجة في فضاء الشاشة بواسطة غلاف، ليظهر الوجه العلوي، ويدور داخله حول المحور Y. يستقر في منظور ثلاثة أرباع (-26.7 درجة) ويدور -90 درجة كل نصف ثانية بـ power3.out خلال 0.3 s، فيستقر كل وجه بالزاوية نفسها. تتناوب الأوجه بين أرضيات فاتحة وبلون التمييز وداكنة، ولكل وجه كلمة ثقيلة واحدة بحجم يناسبه (الكلمات القصيرة بحجم 200 px، والأطول تُصغَّر إلى نحو 85% من عرض الوجه حتى لا يتجاوز شيء الحافة)؛ والوجه العلوي لوحة داكنة.

متى تُستخدم سرد ثلاث أو أربع قدرات أو ميزات على الإيقاع في جسم ثلاثي الأبعاد مدمج.

عرض الكود

<!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=Geist:wght@400;500;700&family=Geist+Mono&display=swap");
html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Geist", sans-serif; }
.scene { position: absolute; inset: 0; overflow: hidden; }
.scene { background: #0d0b1e; }
.stage { position: absolute; inset: 0; perspective: 2400px; perspective-origin: 960px 540px; }
.tilt { position: absolute; left: 703px; top: 283px; width: 514px; height: 514px; transform-style: preserve-3d; transform: rotateX(-14.5deg); }
.cube { position: absolute; inset: 0; transform-style: preserve-3d; }
.face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 200px/1 "Geist", sans-serif; letter-spacing: -0.07em; white-space: nowrap; }
.front { transform: translateZ(257px); background: #faf9ff; color: #0d0b1e; }
.right { transform: rotateY(90deg) translateZ(257px); background: #fb2d89; color: #ffffff; }
.back { transform: rotateY(180deg) translateZ(257px); background: #0d0b1e; color: #faf9ff; letter-spacing: -0.05em; }
.left { transform: rotateY(-90deg) translateZ(257px); background: #faf9ff; color: #fb2d89; }
.top { transform: rotateX(90deg) translateZ(257px); background: #1c0b5d; }
.bottom { transform: rotateX(-90deg) translateZ(257px); background: #1c0b5d; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2" data-width="1920" data-height="1080">
  <div class="scene clip" data-start="0" data-duration="2">
    <div class="stage"><div class="tilt"><div class="cube">
      <div class="face front">"TYPE"</div><div class="face right">"3D"</div><div class="face back">"SHAPES"</div><div class="face left">"SOUND"</div>
      <div class="face top"></div><div class="face bottom"></div>
    </div></div></div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
// every word fits its face: short words keep 200 px, longer ones fill about 85% of the 514 px face
const FIT = { front: [0.9, -0.07], right: [0.9, -0.07], back: [0.85, -0.05], left: [0.85, -0.07] };
function fit() {
  const g = document.createElement("canvas").getContext("2d"); g.font = '700 100px "Geist"';
  for (const [k, [fill, ls]] of Object.entries(FIT)) {
    const el = document.querySelector(".face." + k), w = el.textContent.replace(/"/g, ""), m = g.measureText(w);
    const ink = m.actualBoundingBoxLeft + m.actualBoundingBoxRight + (w.length - 1) * ls * 100;
    el.style.fontSize = Math.min(200, (100 * fill * 514) / ink) + "px";
  }
}
document.fonts.load('700 100px "Geist"').then(fit);
tl.set(".cube", { rotationY: 63.3 }, 0);                       // starts one face early
for (let k = 0; k < 4; k++) tl.to(".cube", { rotationY: -26.7 - 90 * k, duration: 0.3, ease: "power3.out" }, 0.5 * k);
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 MotionTQW

بيان طباعي حركي تربطه خط واحد متحرك

<direction> أنشئ فيديو طباعيًا حركيًا عموديًا (1080x1920) مدته 46 ثانية يحمل بيان رسالة قصيرًا من عنوانين، مرورًا بثلاث فقرات، إلى ثلاث دعوات لاتخاذ إجراء وبطاقة ختامية. الفكرة: خط ملوّن واحد يتحرك عبر القطعة كلها ويربط كل مشهد في سرد بصري واحد، ويتخذ شكلًا مختلفًا في كل مرة (حلقة، عقدة، إطار، صفحة ترتفع، مسار تتبعه الكاميرا). الأسلوب بسيط وعصري، بألوان مسطحة نابضة بالحياة، وكل النصوص بخط Montserrat، وهو خط سانس سيريف نظيف. اكتب النص كلمة بكلمة تمامًا كما هو مكتوب. يجب أن يبدو كقطعة هوية موشن ديزاين بمستوى الجوائز: عاطفية ومعاصرة وفنية ودقيقة وإنسانية. يجب أن يبدو كل مشهد مختلفًا عن الآخرين. تجنّب أي شيء يشبه عرض شرائح أو قالب Canva أو إعلانًا عامًا لمنظمة غير حكومية أو لقطات جاهزة. لا تستخدم صورًا أو لقطات أو رسومًا توضيحية تفسّر الكلمات، ولا تضف كلمات ذات صلة أو معاد صياغتها: الطباعة والخط هما كل العناصر البصرية. استخدم موسيقى أصلية هادئة بدون تعليق صوتي. </direction> <structure> توقيت تقريبي، مع كون الفقرات الكاملة العمود الفقري للسرد: 1. العنوان الأول (من 0 إلى 5 ثوانٍ تقريبًا): "THREADS OF HOPE." (استبدله بعنوانك) على خلفية بيضاء مائلة للرمادي. خط أرجواني (ماجنتا) يدخل على شكل حلقة ويكشف كل سطر من العنوان من الأسفل، ثم يعقد عقدة. ينبثق اللون الأزرق من العقدة ويملأ الشاشة. 2. العنوان الثاني (من 5 إلى 10 ثوانٍ تقريبًا): "ROOTS OF PEACE." (استبدله بعنوانك). يرسم خط أصفر إطارًا مربعًا حول الكلمات بينما ترتفع حروف الكلمة الأولى واحدًا تلو الآخر. 3. الفقرة الأولى (من 10 إلى 18 ثانية تقريبًا): يرتفع الخط إلى صفحة صفراء كاملة تحمل "Across [your country], we are weaving new connections through psychological support, collective action, and community-led initiatives." (استبدلها بنصك). أبرز العبارات الرئيسية بتطويقها بخط متصل، مثل "weaving new connections" و"psychological support" و"collective action" و"community-led initiatives". 4. الفقرة الثانية (من 18 إلى 27 ثانية تقريبًا): مشهد أزرق داكن مع "We bring together professionals, organizations, and communities to rebuild the social fabric, strengthen psychosocial well-being, and cultivate cultures of peace rooted in empathy, solidarity, dialogue, and mutual care." (استبدلها بنصك). تحظى العبارة الرئيسية "cultures of peace" بلحظتها الخاصة. تقع في سطر مستقل بحجم يقارب 1.5 ضعف حجم النص المحيط، بلون أصفر ساطع، وتنمو من حجم أصغر قليلًا إلى الحجم الكامل. مع وصول الأسطر التالية، يخفت بقية الفقرة إلى شفافية أقل، لكن هذه العبارة تبقى بكامل سطوعها حتى نهاية المشهد. تُبرز "emphaty" باللون الأرجواني (ماجنتا)، وتُبرز "solidarity" باللون الأزرق الفاتح، وتُبرز "dialogue" باللون الأخضر، وتُبرز "mutual care" باللون اللافندر، بحيث يكون الأصفر هنا للعبارة الرئيسية فقط. 5. الفقرة الثالثة (من 27 إلى 35 ثانية تقريبًا): مشهد أخضر تنتقل فيه الكاميرا على طول الخط بينما تنكشف "From individual healing to collective transformation, we are creating opportunities for communities to reconnect, grow, and shape more peaceful futures." كلها بخط عريض (استبدلها بنصك) على امتداد مساره. 6. الدعوات لاتخاذ إجراء (من 35 إلى 41 ثانية تقريبًا): ثلاث دعوات بارزة تظهر تباعًا: "Explore our work." و"Connect with our mission." و"Help cultivate cultures of peace." (استبدلها بنصوصك). يمكن للأخيرة أن تردد الإبراز الأصفر لعبارة "cultures of peace". 7. البطاقة الختامية (من 41 إلى 46 ثانية تقريبًا): "Know More about" / "[your brand]" / "[your website]". يستقر الخط وتنتهي القطعة على لقطة هادئة ثابتة. </structure> <composition> استخدم تأطيرًا عموديًا مع هوامش سخية ومساحة فارغة كبيرة. لكل مشهد تخطيطه الخاص بحيث لا يتشابه مشهدان: عناوين في المنتصف، وعنوان داخل إطار، وصفحة ملونة بلا حدود، وحقل داكن بتسلسل هرمي قوي، ومسار تنتقل عبره الكاميرا. اكتب كل النصوص بخط Montserrat. العناوين بخط عريض وبأحرف كبيرة، تمامًا كما هي مكتوبة. النص الأساسي بوزن أخف، في أسطر قصيرة سهلة القراءة. اجعل الكلمات الرئيسية بارزة عبر اللون أو الوزن أو الحجم بدلًا من الزخرفة. اللوحة اللونية نابضة ومسطحة: أساس أبيض مائل للرمادي، مع الأرجواني (ماجنتا) والأزرق المشبع والأصفر والأزرق الداكن والأخضر كألوان للمشاهد. الأزرق الفاتح لون تمييز ثانوي، والأصفر الساطع محجوز للعبارة الرئيسية "cultures of peace". يتباين الخط دائمًا مع الخلفية التي يعبرها. </composition> <techniques> الخط المتصل هو الأداة الرئيسية. يُرسم بكشف الحدّ ويعمل كقناع يكشف النص من الأسفل. يعقد عقدة تطلق فيضانًا لونيًا بملء الشاشة كانتقال إلى المشهد التالي. يرسم إطارًا مربعًا. يرتفع كورقة إلى الصفحة التالية. وأخيرًا يصبح مسارًا تتبعه الكاميرا عبر المشهد الأخضر. يُسلَّم كل انتقال بواسطة الخط نفسه، وليس بقطعات أو مسحات عامة أبدًا. حركة النص: ترتفع الحروف واحدًا تلو الآخر بتتابع متدرج. تنكشف الكلمات والأسطر بترتيب القراءة. تستقر العبارات الرئيسية متأخرة قليلًا وبقوة أكبر. تتكبّر العبارة المُبرزة من حجم أصغر قليلًا إلى الحجم الكامل، بينما تخفت الأسطر المكتملة في الشفافية. أبقِ كل الحركة سلسة ودقيقة، مع وصول ناعم بتخفيف عند النهاية وبلا ارتدادات. استخدم إيقاعًا هادئًا يترك وقتًا لقراءة كل فقرة. </techniques>

معاينة الموجّه «شوريل منوِّم لغوص داخل العين بأسلوب السينثويف النيوني»

Simple MotionPHY

شوريل منوِّم لغوص داخل العين بأسلوب السينثويف النيوني

<direction> اصنع شوريل موشن غرافيك سايكيديلي منوِّم مدته 20 ثانية، بنسبة 16:9 وبدقة 1920x1080 و60 إطارًا في الثانية. كل شيء مرسوم ومُولَّد: أنماط إجرائية وأشكال مُصيَّرة ثلاثية الأبعاد، بلا لقطات فيديو ولا صور فوتوغرافية. قصّه على مقطوعة سينثويف نيونية بإيقاع 120 BPM. الفكرة: عين تنفتح من خط واحد، وتواصل الكاميرا الغوص عبرها إلى عوالم أغرب فأغرب قبل أن تحطّ على عنوان. كل إطار تحكمه ثانيةُ الزمن. تتغير الأقسام عند حدود الموازير (كل ثانيتين) خلف وميض أبيض، وتُبقي نبضات السطوع على الضربات الصورةَ تتنفس. المظهر حبر عميق وشبه أسود مع وردي ونيوني وبرتقالي وبنفسجي وتركوازي وأصفر، وتوهج ناعم bloom، وانحراف لوني خفيف، وحبيبات دقيقة وتظليل للحواف، مع HUD تقني رفيع يؤطّر كل شيء. جميع الكلمات المقتبسة أمثلة استبدلها بكلماتك؛ أبقِ أطوالها قريبة لكي يصمد التصميم. تجنّب اللقطات الفيديوية والصور الجاهزة، والتعبئات المسطحة بلا ملمس، والأسود الخالص (لا تنزل الألوان الداكنة عن #0D0B1E)، والألوان شديدة التشبع، وأي أسماء أو علامات تجارية حقيقية على الشاشة. </direction> <structure> 1. من 0.0 إلى 4.0 ث، العين. أسود، ثم عند 0.3 ث يظهر خط رموش رفيع متوهج. العين لوزة مدببة: شكل العدسة بين دائرتين متداخلتين، بعرض نحو 0.55 من عرض الإطار. يمتلئ الإطار كله حولها بخطوط كنتورها، وهي خطوط متساوية القيمة للشكل نفسه ذي الدائرتين بخطوات لوغاريتمية (كل فجوة أعرض من سابقتها بنحو 13%). تتدفق ببطء إلى الخارج وتخفت مع البعد: لافندر شاحب وبرتقالي وتركوازي قرب العين، ووردي أبعد، فوق نطاقات من الحبر العميق. من 0.3 إلى 0.85 ث تكون العين شقًّا. من 0.85 إلى 1.33 ث ينفتح الجفنان (power2.out) بينما تكبر العين من 86% إلى الحجم الكامل. القزحية ليفية، بنطاقات برتقالية وخوخية ونعناعية وبنفسجية، مع حلقة حافة وردية وتوهج تركوازي وبريق على شكل حلقة في أعلى اليسار؛ وللجفنين حافة داخلية بيضاء ناعمة. تنطلق تموجات الإيقاع عبر الخطوط عند 1.5 و1.75 و2.5 و2.75 ث. تُفكّ شيفرة تعليق متمركز بخط أحادي المسافة صغير ومتباعد الحروف («YOUR LINE OF TWENTY-SIX LETTERS») من 1.4 ث بنحو 45 حرفًا في الثانية، ثم يتفتت من اليمين عند 2.8–3.1 ث. من 2.75 ث تتسع الحدقة وتُظهر المشهد التالي وهو يعمل بالفعل في داخلها، بينما تتحول نطاقات القزحية إلى البنفسجي والأصفر. من 3.42 إلى 3.98 ث تندفع الكاميرا نحو الحدقة حتى يملأ المشهد الداخلي الإطار بنسبة 1:1. 2. من 4.0 إلى 8.0 ث، النفق. قطع على وميض أبيض بأشعة شعاعية. إنه نفق منظوري من حلقات متباعدة بحيث يزداد مقلوب نصف القطر بمقدار 0.75 لكل حلقة. تحمل كل حلقة 18 عينًا لوزية بحدود تركوازية وقزحيات وردية وبنفسجية وبريق أبيض. الحلقات المتناوبة مزاحة بنصف خلية وتدور في اتجاهين متعاكسين. تنطلق الحلقات إلى الخارج بنحو 11 حلقة في الثانية مع دفعة على كل ضربة، وتذوب الحلقات البعيدة في ضباب حبري حول نواة بيضاء. على كل ضربة تغادر حلقة متوهجة النواةَ وتكبر، بالتناوب أبيض ثم وردي ثم تركوازي. من 6.05 إلى 6.45 ث تتحول العيون إلى رقعة شطرنج قطبية، ثم إلى انفجار شمسي من 36 شعاعًا تدور ببطء بألوان قوس قزح خافتة، مع حلقة ساطعة حول المركز تنتفخ بعد 7.0 ث. من 7.45 إلى 7.8 ث تومض رقعة الشطرنج عائدة، ومن 7.72 إلى 7.97 ث يتحول كل شيء إلى أبيض. 3. من 8.0 إلى 11.33 ث، الكتلة الكرومية. يتلاشى الأبيض خلال 0.5 ث ليكشف عن كرة ميتابول كرومية قزحية فوق تموجات متحدة المركز داكنة. هي ست كرات في اتحاد سلس: جسم داكن بنطاقات كنتور رفيعة كبقع الزيت بالتركوازي والوردي، وإضاءة حافة وردية وبريق أبيض حاد. تدور وتتحول. سلسلة رأسية تتجمع في كتلة، وتنفصل قطرتان عند 9.1–9.5 ث، ثم تتجعد عند 9.5–9.9 ث. من 10.0 ث يصبح الإطار كاليديوسكوبًا يمر عبر 4 ثم 6 ثم 3 ثم 8 ثم 10 طيّات مرآة، ويكتسح قوس شاحب إلى الخارج عند 10.0–10.25 ث. 4. من 11.33 إلى 14.0 ث، الحلزون. وميض غليتش، ثم اثنا عشر ذراعًا حلزونيًّا لوغاريتميًّا من خلايا على شكل دمعة. كل خلية أكبر 1.5 مرة من سابقتها على امتداد ذراعها، وتدور الأذرع عكس عقارب الساعة نحو الخارج. للخلايا حدود لافندر مزدوجة وتحمل إما قزحية (تركوازية أو وردية أو برتقالية) أو معينًا متدرجًا متداخلًا (وردي أو بنفسجي). تتتبع خطوط ذهبية رفيعة الأذرع والحلقات، وتتوهج نواة بيضاء في المركز. يقترب الحلزون من المركز بنحو وحدة لوغاريتمية واحدة في الثانية ويدور ببطء؛ وتحصل الحركتان على دفعة عند كل ضربة، مع نبضة سطوع على كل ضربة. من 13.82 إلى 14.0 ث ينمو توهج أبيض من المركز ليملأ الإطار. 5. من 14.0 إلى 15.5 ث، غرفة الكرات. يتلاشى الأبيض خلال 0.7 ث إلى غرفة ثلاثية الأبعاد. الأقواس مصنوعة من خرز يشبه اللؤلؤ، وكرات قزحية كبيرة تصطف على الجدران، وأقراص أرضية مسطحة تحمل خطوطًا متعرجة بأسلوب الأوب آرت بألوان قوس قزح باستيلية، كل ذلك في ضباب بنفسجي حبري. تتقدم الكاميرا للأمام وتميل إلى اليمين. 6. من 15.5 إلى 16.0 ث، مونتاج على الأنغام السادسة عشرة (قطعات عند 15.5 و15.633 و15.75 و15.883 ث): لقطة قريبة للقزحية، ثم الأشعة، ثم الكاليديوسكوب، ثم الحلزون، لكلٍّ منها وميض صغير. 7. من 16.0 إلى 18.0 ث، العين مرة أخرى. وميض أبيض بقرص داكن في المركز يتقلص إلى لا شيء خلال 50 مللي ثانية. تتراجع الكاميرا من الحدقة، وغرفة الكرات ظاهرة داخلها، إلى العين الكاملة عند 16.32 ث. الآن خطوط الكنتور نطاقات نيون سميكة: وردية قرب العين، ثم بنفسجية، ثم حبر عميق أبعد، تتحول إلى تركوازي خلال 16.9–17.8 ث. القزحية حلقة قوس قزح باستيلية حول حدقة داكنة كبيرة. تقع نبضات الإيقاع عند 16.5 و17.0 و17.5 ث. من 17.84 إلى 17.98 ث تغمض العين في رمشة: تستقيم النطاقات إلى خطوط أفقية مع خط ساطع واحد في الوسط. عند 18.0 ث ينهار كل شيء إلى الظلام خلال 50 مللي ثانية. 8. من 18.1 إلى 20.0 ث، العنوان. كلمة بخط غروتسك أسود عريض («YOUR WORD») تُضبط على عرض نحو 1436 بكسل وتُوسَّط. تظهر بمسح من اليسار إلى اليمين بحافة ناعمة ضبابية خلال 0.52 ث. حروفها شاحبة (لافندر ثم نعناعي ثم وردي باهت من اليسار إلى اليمين) ومملوءة بالحبيبات، مع انفصال أحمر/أزرق يستقر من 10 إلى 3 بكسل وتوهج مائل إلى البنفسجي والتركوازي والوردي. عند 18.62 ث يظهر تحتها تدريجيًّا عنوان فرعي مائل («your short tagline»). عند 19.1 ث يُفكّ فوقها سطر صغير جدًّا بخط أحادي المسافة ومتباعد الحروف («( a short call to action )»). من 19.55 إلى 19.95 ث تتحلل الكلمة إلى ضوضاء ويتلاشى الإطار. </structure> <composition> لوحة الألوان: حبر عميق #1C0B5D وشبه أسود #0D0B1E لكل منطقة داكنة (الخلفيات والنطاقات وبياض العين). الألوان المميزة هي الوردي #FB2D89 (الرئيسي) والبرتقالي #FE9117 والبنفسجي #7C6CF2 والتركوازي #2DD4B0 والأصفر #FFD23F والأبيض #FFFFFF. استخدم اللافندر الفاتح #F0EDFF / #FAF9FF للدرجات الشاحبة والنص، واللافندر الخافت #9890B4 لنص HUD الصغير، و#E9E4F2 للخطوط. عناصر قوس قزح تتناوب بين الوردي والبنفسجي والتركوازي والأصفر والبرتقالي. التدرج اللوني على كل شيء: توهج ناعم على الأشكال الساطعة (العتبة نحو 0.7)، وانحراف لوني شعاعي خفيف نحو الزوايا، وحبيبات دقيقة، وتظليل للحواف، وتشبع خافت قليلًا. لا تنزل الألوان الداكنة عن #0D0B1E. الخطوط: Unbounded 900 (غروتسك أسود عريض جدًّا) للعنوان، وJetBrains Mono 400/700 بحجم 11–15 بكسل وتباعد حروف نحو 0.3 em للـ HUD، وSpectral Italic 400 بنحو 43 بكسل للعنوان الفرعي. الـ HUD: يجلس فوق كل شيء من 1.0 ث، ويظهر تدريجيًّا خلال 0.5 ث ويتلاشى عند 19.6–19.9 ث. أقواس زاوية رفيعة على شكل L تقع على بعد 28 بكسل من كل زاوية. - أعلى اليسار: اسم بخط أحادي المسافة عريض («YOUR NAME») وتحته شعار («YOUR TAGLINE»). - أعلى اليمين، محاذى لليمين: عدّاد الفصول («01 / 07») وعنوان فصل عريض («FIRST CHAPTER»)، يتغيران عند كل قسم. - أسفل اليسار: رمز زمني «TC 00:00:SS:FF» يعدّ الإطارات بمعدل 60 إطارًا في الثانية، و«120 BPM · bar.beat.sixteenth» (مثلًا 02.3.3). - أسفل اليمين: أربعة مربعات بحجم 8 بكسل تضيء الضربة الحالية منها بالأبيض، وسطر ائتمان قصير بخط عريض (مثلًا «YOURSITE.COM»). - خط تقدم بسمك 1.5 بكسل يمتد بين الأقواس السفلية ويمتلئ مع رأس التشغيل. </composition> <techniques> - فكّ شيفرة النص: عند بداية كل قسم يُفكّ عدّاد الفصول وعنوانه حرفًا بحرف خلال 0.38 ث. يمر كل حرف عبر رموز مثل # % & = + @ < | / $ بمعدل 30 تغييرًا في الثانية ويستقر من اليسار إلى اليمين. يستخدم التعليق والدعوة إلى اتخاذ إجراء الفكّ نفسه، ويتفتت التعليق من اليمين بالطريقة نفسها. - وميض الأقسام: يخبو كل وميض أبيض بأشعة شعاعية وفق 0.94 / (1 + (t / 0.07)^2.5). - دفعة الحدقة (3.42–3.98 ث): يتسارع التقريب أُسّيًّا، مع تقريب لوغاريتمي = 5.5·x² / (x + 0.1) على امتداد الحركة. يعمل المشهد التالي داخل الحدقة وينتهي تمامًا عند 1:1، فيكون القطع سلسًا. ويعكسه الابتعاد عند 16.0 ث. - دفعات الإيقاع: تحصل سرعة النفق وتقريب الحلزون ودورانه والتموجات والحلقات على ركلة عند كل ضربة، مع نبضات سطوع على الضربات. - تحولات بدل القطعات داخل المشاهد: العيون إلى رقعة شطرنج إلى انفجار شمسي، وسلسلة الميتابول إلى كتلة إلى قطرات إلى تجعّد، ثم أعداد طيّات الكاليديوسكوب 4 و6 و3 و8 و10. - الانتقالات: تحولات إلى الأبيض وتلاشٍ منه عند حدود الموازير، ووميض غليتش إلى الحلزون، وتوهج أبيض من المركز إلى غرفة الكرات، وقطعات وميضية على الأنغام السادسة عشرة في المونتاج، وانهيار إلى الظلام خلال 50 مللي ثانية قبل العنوان. - العنوان: مسح من اليسار إلى اليمين بحافة ناعمة، وانفصال RGB يهدأ من 10 إلى 3 بكسل، ثم تحلل إلى ضوضاء وتلاشٍ في النهاية. </techniques> <music> سينثويف نيوني بإيقاع 120 BPM في سلّم لا الصغير، وتر واحد لكل مازورة (ثانيتان): Am F للمقدمة، ثم Am F C G Am، وF في الاستراحة، وG عند العودة، وAm في النهاية. تقع الكيك تمامًا على ضربات الصورة (كل 0.5 ث). - 0–4 ث: نغمة جرس بأنغام ثُمنية فوق باد دافئ، مع رايزر طويل وصنج معكوس، بلا طبول. - عند 4.0 ث: كيك four-on-the-floor، وباص بأنغام ثُمنية بقفزات أوكتاف، وأربيجيو سو بأنغام سادسة عشرة. يخفق الباص والأربيجيو مع الكيك. - من 8.0 ث: سنير كبير بصدى على الضربتين الثانية والرابعة، وهاي هات على الضربات الضعيفة، وليد مربّع بنغمات طويلة، مع حشوة سنير نحو 14.0 ث. - 14.0–16.0 ث: تتوقف الطبول والباص، ويتضخم الباد، ويصعد أربيجيو مفلتر مع رول سنير بأنغام اثنين وثلاثين نحو 16.0 ث. - عند 16.0 ث: يعود كل شيء بقوة. - تتوقف الطبول قبل 18.0 ث بنصف ضربة، ويحمل وتر لا الصغير add9 الرنّان بطاقة النهاية. </music> <sound> المؤثرات الصوتية على الصورة: - موجة جيبية عالية ناعمة عند 0.3 ث لخط الرموش - رايزر يصعد إلى بوم عميق عند 4.0 ث - رايزر قصير وبوم عند 8.0 ث - غليتش عند 11.33 ث - رايزر وووش نحو 14.0 ث - أربع نقرات غليتش قصيرة على قطعات المونتاج - رايزر طويل إلى بوم عند 16.0 ث - ووش على الرمشة عند 17.95 ث - داونر وسب دروب عند 18.0 ث - جرس ناعم عند ظهور العنوان عند 18.12 ث - ووش هوائي أثناء تحلل العنوان بلا تعليق صوتي. اضبط المزج على نحو −14 LUFS، مع ذروة حقيقية أقل من −1 dBTP. </sound> <references> ألوان الـ outrun والسينثويف في أواخر الثمانينيات، وموريه الأوب آرت ووهم خطوط الكنتور، وصور العيون السايكيديلية، وشوريلات إجرائية بأسلوب الديموسين، وريلات استوديوهات الموشن ديزاين المؤطَّرة بـ HUD تقني. </references>

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

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

Simple MotionTKM

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

<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>

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

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

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

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

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