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

AR

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

Simple Motion

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

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

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

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

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

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

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

الفكرة

اصنع ريل علامة تجارية عمودياً مدته 15.5 ثانية (1080x1920، 30 إطاراً في الثانية). جولة ثلاثية الأبعاد على هاتف فوق الملف الشخصي لعلامتي التجارية تتحول إلى لحظة الشعار، ثم كتابة متحركة مقطّعة مقطعاً مقطعاً على إيقاع تراب قوي بنصف السرعة تنتهي بشعاري. كل شيء مرسوم، من دون لقطات مصوّرة. استخدم شعاري، واستخدم ألوان علامتي وكلماتها بدلاً من الأمثلة أدناه. للمظهر ثلاثة عوالم: تدرجات من الأزرق الداكن العميق إلى ما يقارب الأسود للجزء ثلاثي الأبعاد، واستوديو رمادي فاتح في المنتصف، وأسود خالص مع توهج نيون في النهاية. تجنب لوحة مربعة أو مكعباً خلف الشعار، والحروف المعكوسة عندما تمر كلمة خلف شيء ما، والنص الذي يلامس حواف الإطار، والإطار المقلوب رأساً على عقب بعد حركة الكاميرا الخاطفة، وشعار الهولوغرام المسطح أو المضغوط. يجب أن تتناسب شاشة الهاتف تماماً داخل إطارها.

البنية

من 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 مللي ثانية). تصعد منها نسخة دائرية من شعاري بحدود وردية وتوهج، مائلة نحو المشاهد كأنها هولوغرام.
من 4.3 إلى 6.5 ث، الشعار ثلاثي الأبعاد. قطع حاد إلى رمز شعاري نفسه مُسحوباً بثلاثة أبعاد: كومة من طبقات رقيقة بلون عميق (مثل الوردي الداكن) خلف الواجهة المضاءة، من دون مربع خلفه. يتوهج على تدرج دائري أزرق داكن. يدخل دائراً من وضعية مائلة (power3.out، ثانية واحدة)، ويتمايل، ثم يبتعد دائراً وصغيراً (power3.in) إلى القطع. كلمة جريئة مثل "AHHHH" (استبدلها بكلمتك) تستقر على حلقة أسفل الشعار مباشرة، وليس فوقه أبداً. تُكتب بخط غروتيسك عريض جداً مع تدرج من البرتقالي إلى الوردي وتوهج وردي ناعم، والحروف متباعدة وغير معكوسة أبداً. تمر الكلمة عبر الواجهة ثم تطير مع الشعار. من 4.75 ث تظهر تدريجياً كلمة خلفية عملاقة بخطوط خارجية ("OMG") وتنجرف إلى الأعلى.
من 6.5 إلى 9.2 ث، كلمات مكتوبة في غرفة فاتحة. قطع حاد إلى غرفة رمادية فاتحة بحواف معتمة. تُكتب الكلمات حرفاً حرفاً على مقاطع الإيقاع، في مجموعة ثلاثية الأبعاد تنجرف الكاميرا عبرها. أولاً "yeah". ثم "she" بالأبيض على صندوق أسود يظهر أولاً كخط رفيع ثم ينفتح بخطفة. ثم "typed" بالوردي، و"one"، و"single prompt" أكبر حجماً. عند 8.1 ث تنغلق الحواف المعتمة على شكل قطع ناقص أفقي خلال 0.22 ث وتنفتح من جديد خلال 0.25 ث، بينما تطير الكلمات القديمة إلى اليسار. تسقط كلمات جديدة من الأعلى خارجة من ضبابية: "Now" / "it moves like". ترتفع كلمة "magic" الوردية ضبابية من الأسفل قبل القطع مباشرة.
من 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") خارجاً من الضبابية ويثبت حتى النهاية. جميع الكلمات بين علامات الاقتباس أمثلة عليك استبدالها بكلماتك.

التكوين

مثال على لوحة الألوان: أزرق داكن #1C0B5D، وأسود تقريباً #04020C، ووردي ساطع #FB2D89، وبرتقالي #FE9117، وبنفسجي #8F7BFF، ورمادي فاتح #D2D4D9، ورمادي النص #4A4E56، وأبيض. استخدم خط غروتيسك ثقيلاً واحداً، عريضاً جداً مع تباعد ضيق بين الحروف (-0.045em)، مثل Manrope ExtraBold، لكل كلمة. الكلمة الخلفية في المشهد 2 عبارة عن خطوط خارجية عملاقة (text-stroke بشفافية نحو 20%). يقع الجزء ثلاثي الأبعاد على تدرجات من الأزرق الداكن العميق إلى ما يقارب الأسود، ومشهد الشعار على تدرج دائري أزرق داكن. المنتصف غرفة رمادية فاتحة بحواف معتمة، والنهاية سوداء خالصة مع توهجات نيون. أبقِ كل سطر نصي داخل الإطار مع هوامش آمنة، خاصة السطرين الطويلين "And I'm" و"unstoppable". البطاقة الأخيرة هي الشعار في المنتصف بالأبيض مع شعار نصي صغير ومتباعد جداً أسفله.

التقنيات

حركات الكاميرا الخاطفة: 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 ث على مقاطع الإيقاع؛ والشعار وحده يثبت.

الموسيقى

تراب بنصف السرعة بنحو 147 نبضة في الدقيقة في سُلّم صول الصغير، موسيقى بلا غناء. تحت جزء الهاتف تُعزف نغمة أجراس داكنة بتوتر متصاعد. يدخل الإيقاع الكامل (طبلة 808 قوية، وجهير مشوّه، وتصفيق، وهاي-هات متدحرج مع تدحرجات ثلاثية) تماماً عند القطع إلى الشعار ثلاثي الأبعاد عند 4.33 ث. قصّ المقطع بحيث يقع الدروب هناك. تلاشٍ تدريجي في النهاية.

الصوت

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

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

شعارك بصيغة SVG أو PNG بخلفية شفافة؛ يظهر في الصورة الرمزية والهولوغرام ومشهد الشعار ثلاثي الأبعاد والبطاقة الأخيرة.

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

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

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

انقلاب الهاتف من الخلف إلى الشاشة

هاتف بتقنية CSS (وجهان داخل صندوق preserve-3d) يدخل صغيرًا ومائلًا ويُظهر ظهره الفضي المتوهج، ثم يدور 200 درجة على المحور Y بتسهيل power2.out خلال نحو ثانية واحدة ويستقر عموديًا على شاشته. يتجاهل الـ3D المتداخل خاصية backface-visibility، لذا يتم تبديل الوجهين عبر opacity في اللحظة التي يمر فيها الدوران بوضع الحافة (rotationY 90، هنا 0.3 ث).

متى تُستخدم افتتاح ريل لمنتج أو تطبيق بجهاز يطير إلى الإطار ويلتفت نحو المشاهد.

عرض الكود

<!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>
#stage{position:absolute;inset:0;perspective:1600px;background:radial-gradient(75% 55% at 50% 45%,#2a1585,#04020c)}
#cam{position:absolute;left:540px;top:960px;transform-style:preserve-3d}
#phone{position:absolute;left:-280px;top:-580px;width:560px;height:1160px;transform-style:preserve-3d}
.face{position:absolute;inset:0;border-radius:86px}
.front{background:#0d0b16;border:12px solid #5b5868;opacity:0}
.front .ui{color:#fff;font:800 60px sans-serif;text-align:center;margin-top:400px}
.back{transform:rotateY(180deg);background:linear-gradient(140deg,#fff,#bdbbc8);box-shadow:0 0 120px rgba(255,255,255,.55)}
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3.0" data-width="1080" data-height="1920" style="position:relative;width:1080px;height:1920px;overflow:hidden;background:#000"><div id="stage"><div id="cam"><div id="phone"><div class="face back"></div><div class="face front"><div class="ui">"Your app"</div></div></div></div></div></div>
<script>
const tl = gsap.timeline({ paused: true });
// start pose: small, tilted, back to camera (rotationY 200)
tl.fromTo('#cam', { scale: 0.2, rotationY: 200, rotationZ: 38, rotationX: 18, y: -120 },
  { scale: 0.62, rotationY: 0, rotationZ: 0, rotationX: 6, y: 0, duration: 1.05, ease: 'power2.out' }, 0);
// swap faces when the spin passes edge-on (solve 200*(1-p)=90 for the ease)
tl.fromTo('.front', { opacity: 0 }, { opacity: 1, duration: 0.01 }, 0.3);
tl.fromTo('.back', { opacity: 1 }, { opacity: 0, duration: 0.01 }, 0.3);
window.__timelines = window.__timelines || {}; window.__timelines['main'] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

معاينة تقنية «منصة كاميرا بنقطة تركيز وتمويه الاندفاع» — عند 0:02 من الفيديو

الكاميرا

منصة كاميرا بنقطة تركيز وتمويه الاندفاع

الكاميرا نقطة preserve-3d فارغة في مركز الإطار؛ ويُزاح الكائن ثلاثي الأبعاد داخلها بحيث تقع نقطة التركيز المختارة (بإحداثيات بكسلات الكائن نفسه) على تلك النقطة. تحريك نقطة التركيز ينتج حركة بانوراما، وتحريك مقياس المنصة ودوراناتها ينتج اقترابًا وميلانًا، ويخفي blur(12-14px) بمدة 0.08-0.15 ث على غلاف القطعات الحادة للاندفاعات (اثنتان هنا، عند 1.95 ث و3.0 ث).

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

عرض الكود

<!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>
#wrap{position:absolute;inset:0;background:#0b0620}
#stage{position:absolute;inset:0;perspective:1600px}
#cam{position:absolute;left:540px;top:960px;transform-style:preserve-3d}
#obj{position:absolute;left:0;top:0;width:560px;height:1160px;background:#14121c;border-radius:80px}
.a,.b{position:absolute;color:#fff;font:800 40px sans-serif}
.a{left:60px;top:200px}.b{left:60px;top:700px;color:#fb2d89}
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3.7" data-width="1080" data-height="1920" style="position:relative;width:1080px;height:1920px;overflow:hidden;background:#000"><div id="wrap"><div id="stage"><div id="cam"><div id="obj"><div class="a">"Header"</div><div class="b">"Avatar"</div></div></div></div></div></div>
<script>
const tl = gsap.timeline({ paused: true });
const focus = (fx, fy) => ({ x: -fx, y: -fy }); // object pixel that sits on the camera point
tl.set('#obj', focus(280, 580), 0);
tl.fromTo('#cam', { scale: 0.6, rotationX: 6 }, { scale: 1.35, rotationX: 48, rotationZ: -14, duration: 0.9, ease: 'power2.in' }, 0);
// whip: blur in, jump the rig, blur out
tl.to('#wrap', { filter: 'blur(14px)', duration: 0.08, ease: 'none' }, 0.85);
tl.set('#cam', { scale: 2.6, rotationX: 34, rotationZ: -20 }, 0.93);
tl.set('#obj', focus(160, 220), 0.93);
tl.to('#wrap', { filter: 'blur(0px)', duration: 0.12, ease: 'power1.out' }, 0.98);
// slow track to the next focus point
tl.to('#obj', { ...focus(160, 720), duration: 1.4, ease: 'sine.inOut' }, 1.1);
tl.to('#cam', { rotationZ: -30, duration: 1.4, ease: 'sine.inOut' }, 1.1);
window.__timelines = window.__timelines || {}; window.__timelines['main'] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

معاينة تقنية «شعار مُبثوق مع حلقة كلمة تدور حوله» — عند 0:05 من الفيديو

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

شعار مُبثوق مع حلقة كلمة تدور حوله

يتحول شعار مسطح إلى جسم ثلاثي الأبعاد صلب: 15 نسخة منه مرصوصة بفاصل 2.5 px داخل مجموعة preserve-3d، الأمامية بلون كامل مع توهج، والبقية بدرجة غامقة واحدة، والأخيرة مقلوبة ليُقرأ الظهر أيضًا. تدور المجموعة داخلة من وضع مائل بتسهيل power3.out خلال ثانية واحدة، وتتمايل، ثم تدور خارجة صغيرة بتسهيل power3.in. وتحتها تقف حروف كلمة واحدة سميكة (extra-bold، تعبئة متدرجة من البرتقالي إلى الوردي، توهج) على أسطوانة (rotateY(i*22deg) translateZ(380px)، مع إخفاء الوجه الخلفي)، وتدور الحلقة 200 درجة فتمر الكلمة عبر الواجهة ثم تطير بعيدًا. وتظهر كلمة ضخمة بحدود فقط في الخلفية بتلاشٍ وتنجرف إلى أعلى.

متى تُستخدم لحظة شعار بعمق حقيقي انطلاقًا من SVG مسطح، دون محرك ثلاثي الأبعاد.

عرض الكود

<!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>
#bg{position:absolute;left:-200px;top:300px;font:800 330px sans-serif;color:transparent;-webkit-text-stroke:3px rgba(255,140,200,.22);white-space:nowrap;opacity:0}
#stage{position:absolute;inset:0;perspective:1400px;background:radial-gradient(70% 50% at 50% 50%,#3a1aa8,#07031a)}
#mark,#ring{position:absolute;left:540px;top:960px;transform-style:preserve-3d}
#ring{top:1250px}
.lay{position:absolute;left:-150px;top:-150px;width:300px;height:300px;border-radius:50% 50% 50% 8%;background:#7c1650}
.lay.front{background:conic-gradient(from 200deg,#fb2d89,#fe9117,#fff 60%,#fb2d89);box-shadow:0 0 40px rgba(251,45,137,.85)}
#ring span{backface-visibility:hidden;position:absolute;left:-65px;top:-95px;width:130px;text-align:center;font:800 190px/190px sans-serif;background:linear-gradient(180deg,#ffe2a8,#fe9117 38%,#fb2d89);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 16px rgba(251,45,137,.75))}
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3.1" data-width="1080" data-height="1920" style="position:relative;width:1080px;height:1920px;overflow:hidden;background:#000"><div id="bg">"WOW WOW"</div><div id="stage"><div id="mark"></div><div id="ring"></div></div></div>
<script>
const mark = document.getElementById('mark');
const ring = document.getElementById('ring');
const layers = 14, gap = 2.5; // depth layers and the distance between them (px)
for (let k = 0; k <= layers; k++) { const d = document.createElement('div'); d.className = 'lay' + (k === 0 ? ' front' : ''); d.style.transform = `translateZ(${-k * gap}px)` + (k === layers ? ' rotateY(180deg)' : ''); mark.appendChild(d); }
const word = 'AHHHH', step = 22, radius = 380; // letter spacing in degrees, ring radius
[...word].forEach((c, i) => { const s = document.createElement('span'); s.textContent = c; s.style.transform = `rotateY(${(i - (word.length - 1) / 2) * step}deg) translateZ(${radius}px)`; ring.appendChild(s); });
const tl = gsap.timeline({ paused: true });
tl.fromTo('#mark', { scale: 0.45, rotationX: 25, rotationY: -150, rotationZ: 20 }, { scale: 1, rotationX: 8, rotationY: 0, rotationZ: -4, duration: 1, ease: 'power3.out' }, 0);
tl.to('#mark', { rotationY: 12, rotationX: -6, rotationZ: 3, duration: 0.56, ease: 'sine.inOut' }, 1);
tl.to('#mark', { scale: 0.35, rotationY: 120, rotationZ: -45, rotationX: 30, duration: 0.56, ease: 'power3.in' }, 1.57);
tl.fromTo('#ring', { rotationY: -200, rotationZ: -18, rotationX: 12, scale: 0.5 }, { rotationY: 0, rotationZ: -6, scale: 1, duration: 1.4, ease: 'power2.out' }, 0);
tl.to('#ring', { rotationY: 160, rotationZ: 30, scale: 0.4, duration: 0.73, ease: 'power2.in' }, 1.4);
tl.fromTo('#bg', { opacity: 0, y: 0 }, { opacity: 1, y: -140, duration: 2.1, ease: 'power1.out' }, 0.4);
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 من الفيديو

الطباعة

حروف تُكتب داخل غرفة ثلاثية الأبعاد مع قزحية العدسة

تُقسَّم كل كلمة إلى حروف تنقلب صعودًا من rotationX -70 وy +40 بتسهيل back.out(2) خلال 0.18 ث، بفارق 30-70 مللي ثانية، متوافقة مع المقاطع الصوتية؛ وتوجد كلمة داخل صندوق أسود يظهر أولًا كخط رفيع (scaleX 0.03) ثم ينفتح بسرعة خلال 0.16 ث، وكلمة بلون التمييز. مجموعة الكلمات كلها طبقة preserve-3d تنجرف الكاميرا عبرها بثلاث حركات sine مدة كل منها 0.6 ث. وتنغلق طبقة سوداء بقناع radial-gradient تتحكم فيه متغيرات CSS إلى شكل بيضاوي خلال 0.22 ث، وتنفتح من جديد خلال 0.25 ث عند تغيّر السطر، بينما تغادر الكلمات القديمة إلى اليسار خلال 0.2 ث.

متى تُستخدم طباعة لكلمات الأغاني أو التعليق الصوتي ينبغي أن تبدو مكتوبة على الإيقاع في الفضاء لا ملصقة.

عرض الكود

<!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>
#room{position:absolute;inset:0;background:radial-gradient(62% 44% at 50% 48%,#f6f6f8,#d2d4d9 48%,#6b6f77)}
#stage{position:absolute;inset:0;perspective:1300px}
#grp{position:absolute;left:540px;top:960px;transform-style:preserve-3d}
.w{position:absolute;white-space:nowrap;font:800 140px/1 sans-serif;letter-spacing:-.045em;color:#4a4e56}
.ch{display:inline-block}
#w1{left:-330px;top:-260px}#w2{left:-290px;top:-120px}#w3{left:-320px;top:30px;color:#fb2d89;font-size:170px}
#w2t{position:relative;color:#fff;padding-left:40px}
#box{position:absolute;left:-10px;top:-12px;width:300px;height:160px;background:#17181c;transform-origin:0 50%}
#iris{position:absolute;inset:0;background:#000;--rx:1500px;--ry:1500px;-webkit-mask-image:radial-gradient(var(--rx) var(--ry) at 50% 50%,transparent 97%,#000 100%);mask-image:radial-gradient(var(--rx) var(--ry) at 50% 50%,transparent 97%,#000 100%)}
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3.8" data-width="1080" data-height="1920" style="position:relative;width:1080px;height:1920px;overflow:hidden;background:#000"><div id="room"><div id="stage"><div id="grp"><div class="w" id="w1">"yeah"</div><div class="w" id="w2"><div id="box"></div><span id="w2t">"she"</span></div><div class="w" id="w3">"typed"</div></div></div><div id="iris"></div></div></div>
<script>
const w1 = document.getElementById('w1');
const w2t = document.getElementById('w2t');
const w3 = document.getElementById('w3');
const tl = gsap.timeline({ paused: true });
const split = (el) => { const t = el.textContent.replace(/"/g, ''); el.textContent = ''; return [...t].map((c) => { const s = document.createElement('span'); s.className = 'ch'; s.textContent = c; el.appendChild(s); return s; }); };
// at: first letter, gap: seconds between letters
const type = (chars, at, gap) => chars.forEach((c, i) => tl.fromTo(c, { opacity: 0, y: 40, rotationX: -70 }, { opacity: 1, y: 0, rotationX: 0, duration: 0.18, ease: 'back.out(2)' }, at + i * gap));
type(split(w1), 0.05, 0.07);
tl.fromTo('#box', { opacity: 0, scaleX: 0.03 }, { opacity: 1, scaleX: 0.03, duration: 0.01 }, 0.45);
tl.to('#box', { scaleX: 1, duration: 0.16, ease: 'power3.out' }, 0.52);
type(split(w2t), 0.62, 0.04);
type(split(w3), 0.85, 0.035);
tl.fromTo('#grp', { rotationY: -28, rotationX: 14, rotationZ: -10, z: -220 }, { rotationY: 8, rotationX: 8, rotationZ: 0, z: -20, duration: 1.2, ease: 'sine.inOut' }, 0);
tl.to('#grp', { rotationY: 16, z: 40, duration: 0.6, ease: 'sine.inOut' }, 1.2);
// the lens closes to an ellipse and opens again
tl.to('#iris', { '--rx': '560px', '--ry': '240px', duration: 0.22, ease: 'power2.in' }, 1.65);
tl.to('#iris', { '--rx': '1500px', '--ry': '1500px', duration: 0.25, ease: 'power2.out' }, 1.93);
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 من الفيديو

الطباعة

رصة أسطر متوهجة بألوان مرمّزة مع أشرطة وبطاقة ختامية بتبديل التمويه

على خلفية سوداء، يحصل كل سطر من كلمات الأغنية على لونه وتوهجه الخاصين (text-shadow بمقدار 30 px من اللون نفسه) ودخوله الخاص: حروف تقتحم من scale 1.8 وz 200، وكلمة كاملة تنزلق من x +500 خارجة من تمويه 12 px، وحروف ترتفع 60 px، وحروف تندفع من x -160 مع skewX -25 وأثر مصنوع من text-shadow مزاحة. تقع الرصة داخل مجموعة ثلاثية الأبعاد تدور ببطء (scale 1.35) وتطير إلى الأعلى خلال 0.25 ث بتسهيل power3.in. يظهر السطر الأخير كلمة كلمة خارجًا من التمويه، وتسقط فوقه خمسة أشرطة معدنية (أسطوانات بتدرج أفقي) بتسهيل power3.in بفارق 30 مللي ثانية، ثم يتلاشى كل شيء بالتمويه خلال 0.25 ث، ويظهر الشعار الأبيض من تمويه 24 px ومقياس 1.08 خلال 0.45 ث، ثم يتقدم ببطء إلى 1.04.

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

عرض الكود

<!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>
#stage{position:absolute;inset:0;perspective:1300px;background:#000}
#grp{position:absolute;left:540px;top:960px;transform-style:preserve-3d}
.g{position:absolute;white-space:nowrap;font:800 120px/1 sans-serif;letter-spacing:-.045em}
.ch{display:inline-block}
#l1{left:-300px;top:-200px;color:#fe9117;text-shadow:0 0 30px rgba(254,145,23,.7)}
#l2{left:-300px;top:-60px;font-size:100px;color:#8f7bff;text-shadow:0 0 26px rgba(120,95,255,.85)}
#l3{left:-260px;top:70px;font-size:150px;color:#fb2d89;text-shadow:-26px 0 0 rgba(251,45,137,.35),-52px 0 0 rgba(251,45,137,.15),0 0 30px rgba(251,45,137,.8)}
#bars{position:absolute;inset:0}
.bar{position:absolute;top:-40px;width:64px;height:2000px;border-radius:32px;background:linear-gradient(90deg,#07080b,#3b3f48 35%,#9aa0ab 50%,#3b3f48 65%,#07080b)}
#end{position:absolute;left:0;right:0;top:880px;text-align:center;font:800 150px sans-serif;color:#fff;text-shadow:0 0 30px rgba(255,255,255,.45);opacity:0}
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="5.0" data-width="1080" data-height="1920" style="position:relative;width:1080px;height:1920px;overflow:hidden;background:#000"><div id="stage"><div id="grp"><div class="g" id="l1">"And I'm"</div><div class="g" id="l2">"unstoppable"</div><div class="g" id="l3">"MOTION"</div></div></div><div id="bars"></div><div id="end">"BRAND"</div></div>
<script>
const l1 = document.getElementById('l1');
const l3 = document.getElementById('l3');
const bars = document.getElementById('bars');
[110, 310, 517, 724, 924].forEach((x) => { const b = document.createElement('div'); b.className = 'bar'; b.style.left = x + 'px'; bars.appendChild(b); });
const tl = gsap.timeline({ paused: true });
const split = (el) => { const t = el.textContent.replace(/"/g, ''); el.textContent = ''; return [...t].map((c) => { const s = document.createElement('span'); s.className = 'ch'; s.textContent = c; el.appendChild(s); return s; }); };
const type = (chars, at, gap, from) => chars.forEach((c, i) => tl.fromTo(c, { opacity: 0, ...from }, { opacity: 1, x: 0, y: 0, z: 0, scale: 1, skewX: 0, duration: 0.2, ease: 'power3.out' }, at + i * gap));
tl.fromTo('#grp', { rotationY: -18, rotationX: 10, scale: 1.35 }, { rotationY: 10, rotationX: 4, scale: 1.35, duration: 2.6, ease: 'sine.inOut' }, 0);
type(split(l1), 0.1, 0.04, { scale: 1.8, z: 200 });
tl.fromTo('#l2', { x: 500, opacity: 0, filter: 'blur(12px)' }, { x: 0, opacity: 1, filter: 'blur(0px)', duration: 0.3, ease: 'power3.out' }, 0.8);
type(split(l3), 1.5, 0.05, { x: -160, skewX: -25 });
tl.to('#grp', { y: -1300, rotationX: 30, duration: 0.25, ease: 'power3.in' }, 2.6);
tl.fromTo('.bar', { y: -2100 }, { y: 0, duration: 0.3, ease: 'power3.in', stagger: 0.03 }, 2.9);
tl.to('#bars', { opacity: 0, filter: 'blur(18px)', duration: 0.25, ease: 'power2.in' }, 3.5);
tl.fromTo('#end', { opacity: 0, scale: 1.08, filter: 'blur(24px)' }, { opacity: 1, scale: 1, filter: 'blur(0px)', duration: 0.45, ease: 'power2.out' }, 3.6);
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 MotionMOV

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

<direction> اصنع ريل علامة تجارية عموديًا مدته 19.2 ثانية (1080x1920، 30 إطارًا في الثانية) يتكرر بسلاسة تامة. كله موشن جرافيك، مقطوع على إيقاع 150 نبضة في الدقيقة (0.4 ثانية للنبضة، 12 مازورة). الفكرة: كرة لامعة واحدة هي بطلة الفيلم كله. ترتد عبر بيان افتتاحي بكلمة لكل نبضة، ثم تصبح ثقل بندول، ثم تتحول إلى مصباح يضيء صفحة، وتنتظر مونتاجًا سريعًا خلف اسم علامتك، وتنتهي وحيدة في بطاقة النهاية تمامًا حيث يبدأ الإطار الأول. المظهر: خط تحريري جريء على خلفيات مسطحة بلون الليل العميق والورق، مع لون مميز متدرج من الوردي إلى البرتقالي ولون ثانٍ بنفسجي. الإيقاع: محموم في أول 3.2 ثانية، ثم مشهدان طويلان يتنفسان بنبض من نبضتين، ثم دفعة مدتها 3.2 ثانية من القطعات على الأثمان، وذروة مدتها ثانيتان، ونقطة تكرار هادئة. تجنب اللقطات المصورة والتعليق الصوتي والانتقالات الناعمة وأي قطع يخطئ الإيقاع: كل قطع يقع على نبضة أو نصف نبضة. يجب أن تستخدم الكلمات الملونة باللون المميز نفس سماكة ExtraBold كباقي النص، وليس أرفع منها أبدًا. </direction> <structure> 1. الافتتاح، 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). استبدلها بأسطر البيان الخاصة بك. تتبدل الخلفية بين الداكن والورقي مع كل قطع. عند «ضوء» و«عمق» تطير الكرة إلى الأعلى وتخرج من أعلى اليسار. 2. البندول، 3.2–8.0 ث. خلفية ورقية. تصبح الكرة ثقل (112 بكسل) قضيب داكن رفيع معلق من محور فوق مركز الأعلى بمقدار 380 بكسل (طول الذراع 1317 بكسل). ظل ضبابي للقضيب والثقل مزاح إلى اليمين. عنوان من سطرين بأحرف كبيرة يتوسط الشاشة ويتغير مع كل تأرجحة: «صُنع / يدويًا؟» ← «صُنع / بالكود.» (السطر الثاني باللون المميز) ← «بلا / خط زمني.» ← «بلا / إطارات مفتاحية.» ← «فقط / كلمات.» (اللون المميز) ← «و / ضوء.». هذه أمثلة لتستبدلها. عند 7.2 ث ينطفئ الضوء خلف خط القضيب، وتجر التأرجحة الأخيرة العتمة عبر الإطار. 3. المصباح، 8.0–12.8 ث. داكن #14112E. تصبح الكرة مصباحًا متوهجًا يكشف مخروط ضوئه صفحة ورقية. تحمل الصفحة «الضوء / ليس سوى / رياضيات.» بأحرف كبيرة (مثال؛ السطر الأخير بالبنفسجي) وشعارًا صغيرًا قرب y 1430: نقطة متدرجة وشعارك النصي بلون الحبر. من 12.27 ث تُضاء الصفحة كلها. 4. المونتاج، 12.8–16.0 ث. عند الدروب، يثبت «[علامتك]» بخط Anton (بارتفاع نحو 260 بكسل، في المنتصف) بينما يتغير العالم خلفه مع كل ثُمن نبضة (0.2 ث). العوالم بالترتيب: - كتلة هلامية ثلاثية الأبعاد لامعة ومرخّمة بالوردي والبرتقالي بحافة واضحة، فوق الرمادي - الكتلة نفسها أقرب - كتل مسطحة: مربعات بنفسجية وداكنة وورقية والتدرج المميز - حلقات منومة من الحبر والورق تقترب وتدور - بطاقة ورقية فارغة تتأرجح من خيط فوق البنفسجي - حقل من مفاتيح لوحة مفاتيح داكنة من الأعلى، وبعض المفاتيح الوردية والبرتقالية يُضغط عليها - طارة مرسومة بنقاط هافتون متميزة بوضوح على الداكن - بنفسجي مسطح مع شبكة خافتة - أشكال ثلاثية الأبعاد كأنها ألعاب تتقلب على لون برقوقي داكن (مكعبات وكرات وحلقات ومخاريط وكبسولات بألوان اللوحة مع الأصفر #FFD23F) - الأشكال نفسها ضبابية على وردي باستيل - هاتف زجاجي على الرمادي - الكتلة الهلامية على البنفسجي - أرضية من مكعبات بيضاء مع أعمدة وردية وبرتقالية ترتفع - الطارة الهافتون كنقاط حبر على الأبيض - مرجاني مسطح مع شبكة 5. الخاتمة بالفوكسل، 16.0–18.2 ث. خلفية بنفسجية. تُبنى كلمة قصيرة (منتجك، أو النصف الثاني من اسم علامتك) من مكعبات صغيرة. تتشكل بالكامل عند 16.6 ث، وتتنفس، ثم تتفجر من 17.72 ث بينما ينفتح ثقب أسود من المركز ويملأ الإطار عند 18.17 ث. 6. بطاقة النهاية، 18.2–19.2 ث. داكنة. تنمو الكرة من العدم في المركز (142 بكسل عند x 539، y 959). يظهر شعارك النصي بتدرج الوردي إلى البرتقالي تحتها عند 18.1 ث، ويثبت، ثم يتلاشى عند 18.85 ث. فتبقى الكرة وحدها، تمامًا حيث يبدأ الإطار الأول من الفيلم، فيكون التكرار سلسًا. </structure> <composition> اللوحة اللونية: - ليل عميق #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 بكسل. </composition> <techniques> الافتتاح: - تهبط كل كلمة في أربعة إطارات بتباطؤ خروج قوي (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 ث. </techniques> <music> اصنع مقطوعة إلكترونية آلية أصلية، داكنة وقوية، بإيقاع 150 نبضة في الدقيقة في ري صغير بإحساس half-time (الكيك على الواحد، السنير على الثلاثة). فيها باس مشوّه نابض بالأثمان، وطبول محكمة، وباد متوترة، إضافة إلى مقطع صوتي معالج بلا كلمات يُستخدم كنسيج صوتي، بلا غناء. تُشغَّل من الإطار الأول. تقع الكيكات والسنيرات على قطعات الكلمات وتأرجحات البندول، ويأتي الدروب عند 12.8 ث. تنتهي بضربة ثقيلة مع وتر داكن تمامًا على الثقب الأسود عند 18.0 ث، يرنّ تحت بطاقة النهاية. اقتطعها عند 19.2 ث على نهاية المازورة. </music> <sound> ضع هذه فوق الموسيقى: - نقرة خفيفة مع كل ومضة كلمة - صوت whoosh مع كل تأرجحة - riser نحو البندول - مسحة هابطة عند انطفاء الضوء - جرس عندما تضيء الكرة - riser يؤدي إلى boom في المونتاج عند 12.8 ث - تكة هادئة مع كل عالم جديد - صوت whoosh عند اندفاع المكعبات - boom صغير عندما تستقر الكلمة - riser يؤدي إلى boom عميق تحت الثقب الأسود بلا صوت بشري. </sound>

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

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

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

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