Simple Motionرمز الموجّه: NPXريل منتج «العينة الحيّة» مع تحوّل الشعار
placeholder
استُخدم مرة واحدةSimple Motion
فيديو ترويجي لتطبيق بالطباعة المتحركة على إيقاع 128 BPM
فيديو تطبيق أفقي مدته 15 ثانية بطباعة متحركة ورسومات واجهة: سحابة شرائح، عنوان مؤشر، غوص الكاميرا، مخطط، محرر مباشر، ثلاث خطوات وبطاقة ختامية.
رمز الموجّه MOCتاريخ النشر استُخدم 3 مرات
استخدام الموجّهيُفتح الموجّه في التطبيق: أضِف موادك وسيبني الوكيل الفيديو.
الإبلاغ عن هذا الموجّهالموجّه
الفكرة
اصنع فيديو ترويجياً أفقياً للمنتج مدته 15 ثانية (1920x1080، 60 إطاراً في الثانية) لتطبيقي، مبنياً بالكامل من الطباعة ورسومات الواجهة ومقطوعاً على إيقاع هاوس بسرعة 128 BPM. يجب أن يبدو كشوريل تصميم حركة فاخر. كل مشهد يسلّم إلى التالي بحركة، لا بقطع عادي أبداً: وميض، مؤشر، غوص عبر حرف، بطاقة تنطوي، ستائر أعمدة، انفجار، ضغط إلى خط. يحدث شيء عند كل نبضة تقريباً. ينتقل الفيديو من لوحة داكنة منقطة تحت واجهة HUD بأسلوب الكاميرا إلى صفحة محرر فاتحة في المنتصف، ثم صفحة وردية قرب النهاية وبطاقة ختامية داكنة بأيقونة تطبيقي واسمه. استخدم اسم تطبيقي وأيقونتي المربعة وعنوان موقعي وسطوري القصيرة الخاصة بدل الأمثلة المقتبسة أدناه. بدون صور أو لقطات فيديو. ارسم كل الأيقونات (الأسهم، والأقواس الزاوية، والنجوم، وعلامات الصح، والصلبان، والمربعات الصغيرة، ومربع المؤشر) كأشكال متجهة، وليس كأحرف مكتوبة، حتى لا يظهر خط بديل أو مربع فارغ أبداً. يجب ألا يخرج أي نص من الإطار أو من كبسولته، ويجب أن تنتهي كل حركة فك تشفير أو كتابة على النص الصحيح.
البنية
شبكة النبضات: 128 BPM منذ الثانية 0، أي أن النبضة 0.469 ث والمازورة 1.875 ث. يقع الوميض على المازورة 2 (1.875 ث)، وتنفجر الصفحة الوردية على المازورة 7 (11.25 ث)، وتضرب البطاقة الختامية على المازورة 8 (13.125 ث). تقع إبرازات الميزات على أربع نبضات متتالية في المشهد 3، وتبديلات التحرير على أربع نبضات متتالية في المشهد 4.
0–1.9 ث، سحابة الشرائح وتبديل الكلمة. نحو 24 شريحة صغيرة مستديرة الزوايا تطفو في أماكن ثابتة حول مركز اللوحة الداكنة. كل واحدة بخط أحادي المسافات 21 px مع نقطة على اليسار وحدّ رفيع؛ وبعضها بحدّ وردي. كل شريحة مائلة بضع درجات ومائلة قليلاً في الأبعاد الثلاثة، وبعضها ضبابي كأنه خارج التركيز. تظهر في التركيز واحدة تلو الأخرى من 0.08 ث إلى 1.1 ث (الشفافية، والضبابية من 6 px إلى الحدة، والمقياس من 0.94 إلى 1 في 0.22 ث) وتنجرف بضع بكسلات. يسرد نصها ما يفعله التطبيق، مثل "Kinetic type, shapes" و"Describe your idea" و"Live preview" و"MP4 export". عنوان تمهيدي أحادي المسافات "TELL THE CHAT WHAT TO SHOW" يُفك تشفيره من رموز عشوائية فوق المركز عند 0.4 ث. عنوان ضخم بحجم 155 px "No keyframes." يصعد حرفاً حرفاً من 0.11 ث. عند 0.92 ث تغادر الكلمة الثانية إلى الأعلى عبر أعلى السطر، حرفاً حرفاً، كل ذلك خلال 0.1 ث. تصعد "timeline." مكانها باللون البرتقالي في نحو 0.13 ث؛ والكلمة الأولى لا تتحرك أبداً. عند 1.42 ث يغادر العنوان كله إلى الأعلى، ويظهر مربع صغير متوهج في المركز وينمو إلى نحو 42 px. من 1.58 ث تميل كل شريحة بقوة وتطير نحو الكاميرا وتتجاوزها على امتداد خطها من المركز، بمنظور ثلاثي الأبعاد (0.22 ث، تسارع ease-in على نمط power1).
1.9–3.7 ث، وميض ومؤشر وغوص. وميض رمادي وردي يملأ الإطار ويخفت في 0.25 ث بينما تنطلق 40 شعاعاً رفيعاً إلى الخارج وتتمدد حلقتان ناعمتان. يصل المربع (برتقالي، مستدير الزوايا) بحجم نحو 45 px مائلاً، وينتفخ إلى نحو 215 px في ربع ثانية بينما يستقيم. ثم يعمل كمؤشر: عنوان عملاق "OPEN APP" (311 px، تقريباً بعرض الإطار) يصعد حرفاً حرفاً بينما يركض المربع أمام الأحرف متقلصاً أثناء ذلك. يهبط كنقطة ختامية (نحو 60 px) ويتحول إلى الوردي. عند نحو 2.66 ث تظهر كبسولة وردية بعنوان موقعي تحت العنوان (ease من نوع back-out) وتُفك تشفيرها. يتبع ذلك دفع بطيء إلى الأمام. عند 3.2 ث تغوص الكاميرا في فراغ الحرف O الأول: يتكبر العنوان على منحنى متسارع (من نحو 1.07 إلى 3 في 0.3 ث، ثم إلى 22 عند 0.5 ث) بينما ينزلق الحرف O إلى المركز. يظهر المشهد التالي عبر ثقب الحرف O ويملأ الإطار بينما تمرّ حافة الحرف مسرعة.
3.25–5.8 ث، المخطط. مشهد داكن بتسمية صغيرة في أعلى اليسار: مربع صغير مرسوم، ثم "02 —— DESCRIBE THE VIDEO". بطاقة مركزية بحدّ وردي وشعاري واسم التطبيق وعنوان فرعي صغير أحادي المسافات مثل "AI MOTION DESIGNER" ونقطة فيروزية مع عنوان موقعي وأربعة أزرار ميزات مثل "Edit in words" و"No keyframes" و"Live preview" و"MP4 export". على اليسار تنزلق ثلاثة مدخلات ("Footage" و"Photos" و"Logos"، لكل منها أيقونة صغيرة مرسومة). على اليمين تنزلق ست مخرجات بفارق 50 ms بينها: "Kinetic type" و"Shapes" و"3D effects" و"Music" و"Sound effects" و"Vertical"، لكل منها سطر فرعي صغير أحادي المسافات ووسم. العنوان "From idea to video in one chat." يصعد حرفاً حرفاً في أعلى اليمين، وكلماته الأخيرة بالبرتقالي. تُرسم أسلاك منحنية من المدخلات إلى البطاقة ومن البطاقة إلى المخرجات، مع نقاط متوهجة تتدفق على امتدادها. تمتلئ أزرار الميزات الأربعة باللون الوردي، واحد لكل نبضة. عند 5.6 ث تنبض البطاقة وتنطوي إلى شريط فاتح ضيق وبسيط.
5.7–9.75 ث، الصفحة الفاتحة. تنفتح الصفحة الفاتحة من ذلك الشريط. تتسع من نحو 80 px إلى الإطار الكامل في نحو 0.23 ث (بطيئاً، ثم سريعاً، ثم بتباطؤ ناعم) مع ضبابية حركة تزول عند الهبوط.
الجانب الأيسر: تسمية صغيرة (مربع مرسوم، "03 —— LIVE PREVIEW")، وعنوان من سطرين "Chat instead / of a timeline." (السطر الثاني وردي) يصعد حرفاً حرفاً، وسطران من النص الأساسي الباهت "Tell the chat what to show. / The agent builds the animation." يصعدان كلمة كلمة، وخمس نقاط صغيرة.
الجانب الأيمن: نافذة محرر بيضاء بأزرار إشارة المرور وعنواني في شريط العنوان و"Try it free" على اليمين. ثمانية أسطر أحادية المسافات مرقمة تُكتب بنفسها بنحو 100 حرف في الثانية مع مؤشر وردي، مثل "Pick a template" و"idea = describe(" وsay="Bigger" وجملة النص الأساسي بين علامتي اقتباس و"Refine in words, then export". شريط حالة في الأسفل يعرض "MP4 export" مع مربع مؤشر صغير بحدود عند يمينه.
على امتداد الأسفل، شريط من الكلمات ("bigger" و"slower" و"another colour" و"vertical" و"horizontal" و"square" و"kinetic type" ...) يتحرك نحو اليسار بنحو 167 px/ث. من 7.5 ث، على أربع نبضات متتالية، تتبدل القيمة المقتبسة بعد say= إلى "Slower" و"Another colour" و"Vertical" و"Square" داخل مربع تمييز وردي مع فك تشفير سريع. عند كل تبديل يعرض شريط الحالة "Live preview · Slower" وهكذا، وتنمو نقطة بلون تمييز جديد، وتتحول الكلمة المطابقة في الشريط إلى كبسولة وردية. تتقدم الصفحة كلها ببطء بنسبة 2.5%.9.45–11.35 ث، الإطارات المفتاحية مقابل الكلمات. تسمية صغيرة (مربع مرسوم، "04 —— NO KEYFRAMES") في أعلى اليسار. تسع أعمدة رأسية تمسح المشهد الداكن فوق الفاتح، بالتناوب من الأعلى ومن الأسفل. يستغرق كل منها 0.15 ث، بحافة ناعمة وشريط وردي متوهج عند حافته الأمامية. يصعد عنوان "Edit in words." كبسولة وردية بطلب مقتبس مثل 'Bigger' و'slower' ترتبط بخط بمعيّن مستدير الزوايا عليه تسمية "AGENT". نقطة متوهجة تركض إلى بطاقة علوية "keyframes / to hunt for"، تتحول إلى البرتقالي مع شارة "NO" بعلامة x مرسومة ومسار متقطع. ثم تركض النقطة على المسار السفلي (تسمية صغيرة "say what should change") إلى بطاقة "chat/say-what-should-change / live preview". تتحول تلك البطاقة إلى الفيروزي مع شارة "LIVE" بعلامة صح مرسومة وتوهج. في الأثناء تصعد "Live preview." بعد العنوان باللون البرتقالي، وتصعد ثلاثة إحصاءات صغيرة في الأسفل: "PREVIEW live" و"EXPORT MP4" و"KEYFRAMES none" بالفيروزي.
11.15–13.4 ث، ثلاث خطوات. تنفجر صفحة وردية من شارة LIVE كدائرة ناعمة الحواف بحافة متوهجة. حجمها نحو 130 px، ثم 190 px خلال أول إطارين، ثم تندفع متجاوزة الزاوية البعيدة خلال 0.1 ث أخرى. ثلاثة أرقام ضخمة "01" و"02" و"03" (243 px) تتدحرج كبكرات ماكينة القمار، ضبابية أثناء الدوران، وتهبط من اليسار إلى اليمين عند 11.32 و11.5 و11.77 ث. يأتي مع كل رقم خط رفيع يُرسم تحت صفّه، وتسمية صغيرة أحادية المسافات تُفك تشفيرها ("TEMPLATE" و"IDEA" و"EXPORT"، وقبل كل منها نجمة صفراء صغيرة مرسومة) وجملة تظهر تدريجياً ("Pick a template" و"Describe your idea" و"Refine in words, then export"). من 12.65 ث يصبح كل شيء ضبابياً ويُضغط عمودياً إلى خط رفيع عبر منتصف الإطار، يصبح سكة البطاقة الختامية.
12.8–15 ث، البطاقة الختامية. ينطلق الخط الأبيض الرفيع إلى العرض الكامل في إطارين. أيقونة تطبيقي (نحو 150 px، تقف على الخط) تدخل من اليمين على امتداده، بسرعة كبيرة ثم تكبح بقوة: معظم المسافة في أول 0.13 ث، وتستقر عند 13.2 ث، مع بضع خطوط سرعة خلفها. تسحب صفحة داكنة يتبعها أنفها المستدير على شكل رصاصة ثم ينتشر حتى يصبح الإطار داكناً عند 13.4 ث. يظهر اسم تطبيقي (Geist 500، 176 px) خلف الأيقونة أثناء مرورها، وتستقر الأيقونة والاسم معاً في المنتصف كوحدة واحدة. ينكمش الخط إلى خط تحتي يمتد نحو 30 px بعد طرفي الوحدة ويخفت. الشعار "Your AI motion designer." يصعد كلمة كلمة عند 13.75 ث. يظهر زرّا كبسولة عند 14.1 و14.17 ث، كل منهما بعرض كلماته مضافاً إليه الحشو نفسه، متمركزان كزوج بفاصل 23 px: واحد بحدود مع سهم زاوية صغير مرسوم و"Try it free"، وآخر وردي بعنوان موقعي وسهم مرسوم. يمسح لمعان برتقالي الاسم عند 14.6 ث. حافظ على الثبات حتى النهاية، ظاهراً بالكامل ومقروءاً حتى الإطار الأخير.
التكوين
لوحة الألوان:
المشاهد الداكنة: أسود تقريباً #0D0B1E وحبر عميق #1C0B5D، مع توهج حبر عميق ناعم في المنتصف وشبكة منقطة خافتة 48 px فوق كل شيء.
الصفحة الفاتحة: #FAF9FF بصبغة لافندر #F0EDFF وتظليل أفقي يغمّق الحافتين اليسرى واليمنى إلى نحو #B6B1C6.
اللون المميز الرئيسي: وردي #FB2D89 للكبسولات والأزرار والتمييزات والمؤشر.
اللون المميز الثاني: برتقالي #FE9117 للكلمة المميزة في كل عنوان.
الألوان المحايدة: أبيض #FFFFFF، نص باهت #6B6385 على الفاتح و#8E87A6 على الداكن، خطوط #E9E4F2.
التفاصيل: فيروزي #2DD4B0 للنجاح؛ أصفر #FFD23F وبنفسجي #7C6CF2 للتفاصيل الصغيرة فقط.
الخطوط: Geist لكل شيء كبير. العناوين بوزن 800 بتباعد ضيق نحو -0.023em؛ شعار الاسم في البطاقة الختامية بوزن 500. Geist Mono للتسميات والشرائح والكود وواجهة HUD، مع تسميات صغيرة بنمط الأحرف الكبيرة الصغيرة بتباعد أحرف واسع 0.15–0.35em.
واجهة HUD فوق المشاهد 1–6:أقواس زاوية رفيعة عند الزوايا الأربع.
أعلى اليسار: نقطة وردية مع اسم التطبيق أو شعار.
أعلى اليمين: رمز زمني جارٍ (HH:MM:SS:FF بمعدل 60 إطاراً في الثانية).
أسفل اليسار: القسم الحالي ("01 OPEN APP" و"02 DESCRIBE THE VIDEO" و"03 LIVE PREVIEW" و"04 NO KEYFRAMES" و"05 TRY IT FREE").
أسفل اليمين: "VERTICAL · HORIZONTAL · SQUARE".
كل نص HUD بخط أحادي المسافات 14 px بلون باهت يتحول إلى داكن على الصفحة الفاتحة وأبيض على الصفحة الوردية. تتلاشى واجهة HUD عند وصول البطاقة الختامية.
التقنيات
تصعد العناوين إلى سطرها حرفاً حرفاً. كل حرف مقصوص بحدود السطر ويصعد من الأسفل (0.15 ث، ease-out على نمط power3)، مع توزيع التأخير بحيث يهبط السطر كله في نحو 0.4 ث مهما كان طوله. الكلمات المستبدلة تغادر إلى الأعلى عبر أعلى السطر حرفاً حرفاً بينما تصعد الكلمة الجديدة مكانها. النص الأساسي والشعارات تصعد كلمة كلمة. العناوين التمهيدية والتسميات والعناوين الأحادية المسافات تُفك تشفيرها من رموز عشوائية. الكبسولات والأزرار تظهر بتجاوز طفيف (ease من نوع back-out). يُكتب الكود بنحو 100 حرف في الثانية مع مؤشر وردي. استخدم ضبابية الحركة في أسرع الحركات: فتح الصفحة، والأرقام الدوّارة، والضغط إلى خط، ودخول الأيقونة. حافظ على دفع بطيء إلى الأمام في المشاهد الثابتة، بحيث لا يكون الإطار ساكناً أبداً حتى ثبات البطاقة الختامية.
الموسيقى
مقطوعة هاوس instrumental أصلية وحيوية بسرعة 128 BPM بالضبط، ومدتها 15 ث بالضبط، مع طبول كيك على شبكة النبضات. تبدأ بمازورة أولى مكتومة مرشّحة بمرشح تمرير منخفض وصاعد ضجيج أبيض. يدخل الإيقاع الكامل بالضبط عند الوميض في 1.875 ث مع ضربة ودويّ سب عميق. من هناك يستمر إيقاع four-on-the-floor ثابت مع تصفيق وهاتس وباص نابض وأوتار سينثسايزر ساطعة، دون هبوط أو فراغات في المستوى في أي مكان. قبل البطاقة الختامية مباشرة تنغلق المقطوعة على صوت مرشّح بتمرير منخفض لنصف مازورة (تصاعد مرشّح) بدل أن تتوقف. تضرب دويّة ورشّة أخيرة عند 13.125 ث، يتبعها ختام المقطوعة القصير الخاص بها حتى 15 ث.
ما يلزم تجهيزه
- أيقونة تطبيقي المربعة، حادة ويفضل أن تكون على خلفية شفافة؛ تظهر في بطاقة المخطط وتدخل بسرعة في البطاقة الختامية.
- اسم تطبيقي وعنوان موقعي وسطوري القصيرة (العناوين وأسماء الميزات والشعار) لتحل محل الأمثلة المقتبسة.
التقنيات في هذا الفيديو
حيل الموشن ديزاين التي بُني منها الفيديو، ولكل منها كود مستقل تفتحه في المتصفح أو تعطيه لوكيلك.
عند 0:01 من الفيديو الطباعةصعود الأحرف المقنَّعة مع تبديل كلمة
يوجد كل حرف من عنوان عريض داخل صندوق قصّ خاص به بارتفاع السطر، ويصعد إليه من الأسفل (0.15 ث، power3.out). يُوزَّع التتابع (stagger) على مدة ثابتة (نحو 0.26 ث للعنوان كله)، فتستغرق الكلمة الطويلة الوقت نفسه الذي تستغرقه القصيرة. ولتبديل الكلمة الأخيرة، تغادر حروفها إلى الأعلى عبر حافة السطر العلوية خلال 0.1 ث (power2.in) بينما تصعد الكلمة البديلة، المكدّسة في المكان نفسه بلون التمييز، خلال نحو 0.13 ث؛ أما الكلمة الأولى فلا تتحرك أبدًا.
متى تُستخدم عبارة قوية تغيّر كلمة واحدة على الإيقاع دون قطع.
عرض الكود
<!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:[email protected]&family=Geist+Mono:[email protected]&display=block"); * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; } #root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Geist", sans-serif; color: #fff; background: radial-gradient(ellipse 62% 70% at 50% 50%, #16102e 0%, #0e0b20 45%, #090714 100%); } #root::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(240, 237, 255, 0.07) 1.3px, transparent 1.9px); background-size: 48px 48px; } #kicker { position: absolute; left: 0; right: 0; top: 398px; text-align: center; font: 400 23px/1 "Geist Mono", monospace; letter-spacing: 0.15em; color: #8e87a6; white-space: pre; } #title { position: absolute; left: 409px; top: 452px; white-space: pre; font: 800 155px/1.2 "Geist", sans-serif; letter-spacing: -0.023em; } #w2 { position: relative; display: inline-block; } #wb { position: absolute; left: 0; top: 0; color: #FE9117; } .m { display: inline-block; clip-path: inset(-6% -12% 0 -12%); } /* the line is the mask */ .c { display: inline-block; } </style> </head> <body> <div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1920" data-height="1080"> <div id="kicker" class="clip" data-start="0" data-duration="4">TELL THE CHAT WHAT TO SHOW</div> <div id="title" class="clip" data-start="0" data-duration="4"><span id="w1">No </span><span id="w2"><span id="wa">keyframes.</span><span id="wb">timeline.</span></span></div> </div> <script> // Split a word into masked characters: the outer span clips on the line, the inner one moves. function split(el) { const text = el.textContent; el.textContent = ""; const out = []; for (const ch of text) { const m = document.createElement("span"); m.className = "m"; const c = document.createElement("span"); c.className = "c"; c.textContent = ch; m.appendChild(c); el.appendChild(m); if (ch !== " ") out.push(c); } return out; } const tl = gsap.timeline({ paused: true }); const w1 = split(document.getElementById("w1")), wa = split(document.getElementById("wa")), wb = split(document.getElementById("wb")); const IN = 0.15, OUT = 0.11; // rise and exit durations of one letter const spread = (n, total) => total / Math.max(1, n - 1); // stagger that fits n letters into `total` seconds gsap.set(wb, { yPercent: 105 }); const first = w1.concat(wa), last = w1.concat(wb); first.forEach((c, i) => tl.fromTo(c, { yPercent: 105 }, { yPercent: 0, duration: IN, ease: "power3.out", immediateRender: true }, 0.1 + i * spread(first.length, 0.264))); wa.forEach((c, i) => tl.to(c, { yPercent: -105, duration: OUT, ease: "power2.in" }, 1.6 + i * spread(wa.length, 0.1))); // the old word leaves upward wb.forEach((c, i) => tl.to(c, { yPercent: 0, duration: IN, ease: "power3.out" }, 1.68 + i * spread(wb.length, 0.132))); // the new word rises in its place last.forEach((c, i) => tl.to(c, { yPercent: -105, duration: OUT, ease: "power2.in" }, 3.3 + i * spread(last.length, 0.144))); tl.fromTo("#kicker", { opacity: 0 }, { opacity: 1, duration: 0.25 }, 0.4); tl.to("#kicker", { opacity: 0, duration: 0.1 }, 3.25); 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 من الفيديو الطباعةمؤشر مربع يكتب عنوانًا ويستقر كنقطة نهايته
يصل مربع صغير مائل من اللقطة السابقة بحجم نحو 45 px، ثم يتضخم إلى نحو 215 px في ربع ثانية، ويستقيم، ثم يركض أمام الحروف وهي تصعد إلى السطر وهو يصغر أثناء ذلك، ويستقر كنقطة نهاية العنوان، متحولًا إلى لون التمييز مع توهج. حجمه وزاويته ومساره إطارات مفتاحية تُقرأ من زمن الخط الزمني.
متى تُستخدم ظهور عنوان ينقل عنصرًا من اللقطة السابقة إلى النص.
عرض الكود
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>مؤشر مربع يكتب عنوانًا ويستقر كنقطة نهايته</title> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script> <style> html, body { margin: 0; height: 100%; overflow: hidden; background: #000; } #root { position: relative; overflow: hidden; transform-origin: 0 0; } </style> <style> @import url("https://fonts.googleapis.com/css2?family=Geist:[email protected]&family=Geist+Mono:[email protected]&display=block"); * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; } #root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Geist", sans-serif; color: #fff; background: radial-gradient(ellipse 62% 70% at 50% 50%, #16102e 0%, #0e0b20 45%, #090714 100%); } #root::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(240, 237, 255, 0.07) 1.3px, transparent 1.9px); background-size: 48px 48px; } #title { position: absolute; left: 124px; top: 337px; white-space: pre; font: 800 311px/1.2 "Geist", sans-serif; letter-spacing: -0.022em; } .m { display: inline-block; clip-path: inset(-6% -12% 0 -12%); } .c { display: inline-block; } #sq { position: absolute; left: 910px; top: 490px; width: 100px; height: 100px; border-radius: 22px; background: linear-gradient(140deg, #ffc27a 0%, #FE9117 55%, #fb5a5f 100%); box-shadow: 0 0 40px rgba(254, 145, 23, 0.5); } #sqd { position: absolute; inset: 0; border-radius: inherit; background: #FB2D89; opacity: 0; } </style> </head> <body> <div id="root" data-composition-id="main" data-start="0" data-duration="3.5" data-width="1920" data-height="1080"> <div id="title" class="clip" data-start="0" data-duration="3.5">OPEN APP</div> <div id="sq" class="clip" data-start="0" data-duration="3.5"><div id="sqd"></div></div> </div> <script> const tl = gsap.timeline({ paused: true }); const title = document.getElementById("title"), sq = document.getElementById("sq"); const text = title.textContent; title.textContent = ""; const chars = []; for (const ch of text) { const m = document.createElement("span"); m.className = "m"; const c = document.createElement("span"); c.className = "c"; c.textContent = ch; m.appendChild(c); title.appendChild(m); if (ch !== " ") chars.push(c); } // Letters rise one after another (a short pause on the space). [0.37, 0.4, 0.43, 0.46, 0.53, 0.56, 0.59].forEach((t, i) => tl.fromTo(chars[i], { yPercent: 105 }, { yPercent: 0, duration: 0.16, ease: "power3.out", immediateRender: true }, t)); // The square (100 px box) by keyframes [seconds, value]: it arrives at 45 px and tilted, swells to about 215 px, // straightens, then runs ahead of the letters shrinking until it rests as the full stop (centre x, y in px). const K = { s: [[0.1, 0.45], [0.17, 1.1], [0.22, 1.75], [0.27, 2.15], [0.32, 2.15], [0.37, 2.1], [0.42, 1.73], [0.52, 1.1], [0.57, 0.77], [0.67, 0.61]], r: [[0.1, 15], [0.17, 4], [0.22, -5], [0.27, -6], [0.32, -2], [0.37, 0]], x: [[0.37, 960], [0.42, 1032], [0.47, 1240], [0.52, 1420], [0.57, 1588], [0.62, 1700], [0.67, 1755]], y: [[0.37, 535], [0.42, 518], [0.52, 530], [0.57, 545], [0.62, 580], [0.67, 600]] }; const at = (keys, t) => { if (t <= keys[0][0]) return keys[0][1]; for (let i = 1; i < keys.length; i++) if (t <= keys[i][0]) { const [a, va] = keys[i - 1], [b, vb] = keys[i]; return va + (vb - va) * (t - a) / (b - a); } return keys[keys.length - 1][1]; }; const draw = (t) => gsap.set(sq, { scale: at(K.s, t), rotation: at(K.r, t), x: at(K.x, t) - 960, y: at(K.y, t) - 540 }); tl.to({}, { duration: 3.5, onUpdate: () => draw(tl.time()) }, 0); draw(0); // Landed: the cursor becomes the full stop in the accent colour. tl.to("#sqd", { opacity: 1, duration: 0.25, ease: "power1.inOut" }, 0.52); tl.to(sq, { boxShadow: "0 0 70px rgba(251, 45, 137, 0.6)", duration: 0.3 }, 0.52); 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 من الفيديو انتقالالغوص عبر تجويف حرف إلى المشهد التالي
تقوم الكاميرا بتكبير العنوان حول تجويف حرف O الأول فيه على إطارات مفتاحية متباعدة لوغاريتميًا (1.07 عند بداية الغوص، 3 بعد 0.3 ث، 22 بعد 0.5 ث) بينما تجلب حركة power2.out ذلك التجويف إلى مركز الإطار؛ وتُمنح خلفية العنوان فتحة قناع بيضاوية تتبع التجويف، فيُرى المشهد التالي الموجود تحتها من خلال الحرف ويملأ الإطار بينما تمرّ حافة الـO مسرعة.
متى تُستخدم الانتقال من كلمة كبيرة إلى لقطة منتج أو قسم جديد في حركة واحدة متصلة.
عرض الكود
<!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:[email protected]&family=Geist+Mono:[email protected]&display=block"); * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; } #root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Geist", sans-serif; color: #fff; background: radial-gradient(ellipse 62% 70% at 50% 50%, #16102e 0%, #0e0b20 45%, #090714 100%); } #root::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(240, 237, 255, 0.07) 1.3px, transparent 1.9px); background-size: 48px 48px; } #next { position: absolute; inset: 0; background: radial-gradient(ellipse 50% 58% at 50% 54%, #22124a 0%, #100c26 62%, #090714 100%); } #card { position: absolute; left: 679px; top: 399px; width: 562px; height: 351px; border-radius: 22px; border: 2px solid #FB2D89; background: #1a1340; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 16px; padding: 40px; } #card b { width: 50px; height: 50px; border-radius: 12px; background: #1C0B5D; box-shadow: inset 0 0 0 3px #FB2D89; } #card span { font: 700 45px/50px "Geist", sans-serif; } #card i { width: 233px; height: 64px; border-radius: 10px; background: #FB2D89; } #back { position: absolute; inset: 0; background: radial-gradient(ellipse 62% 70% at 50% 50%, #16102e 0%, #0e0b20 45%, #090714 100%); } #cam { position: absolute; inset: 0; } #title { position: absolute; left: 124px; top: 337px; white-space: pre; font: 800 311px/1.2 "Geist", sans-serif; letter-spacing: -0.022em; color: #fff; } </style> </head> <body> <div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080"> <div id="next" class="clip" data-start="0" data-duration="3"><div id="card"><b></b><span>"Next scene"</span><i></i><i></i></div></div> <div id="back" class="clip" data-start="0" data-duration="3"></div> <div id="cam" class="clip" data-start="0" data-duration="3"><div id="title">OPEN APP</div></div> </div> <script> // The camera dives into the counter of the first letter "O": the title scales up about the counter while the // counter slides to the frame centre; the background gets an elliptical hole that follows the counter, so the // next scene (underneath) shows through it. const tl = gsap.timeline({ paused: true }); const F = 311; // font size of the title const title = document.getElementById("title"), cam = document.getElementById("cam"), back = document.getElementById("back"); // Counter of Geist 800 "O" in its line box (line-height 1.2), as fractions of the font size. const ocx = title.offsetLeft + 0.3935 * F, ocy = title.offsetTop + 0.5995 * F, RX = 0.1735 * F, RY = 0.2285 * F; gsap.set(cam, { transformOrigin: `${ocx}px ${ocy}px` }); // Scale keyframes [seconds, scale], interpolated in log space: slow, then exploding past the camera. const DIVE = [[0.6, 1.075], [0.683, 1.2], [0.733, 1.4], [0.783, 1.6], [0.833, 1.9], [0.867, 2.3], [0.917, 3], [0.967, 4.5], [1.017, 8], [1.05, 12.5], [1.083, 17], [1.1, 22]]; const scaleAt = (t) => { if (t <= DIVE[0][0]) return 1 + 0.075 * Math.max(0, t) / DIVE[0][0]; // slow push-in before the dive for (let i = 1; i < DIVE.length; i++) if (t <= DIVE[i][0]) { const [a, sa] = DIVE[i - 1], [b, sb] = DIVE[i]; return Math.exp(Math.log(sa) + (Math.log(sb) - Math.log(sa)) * (t - a) / (b - a)); } return 40; }; const k = { v: 0 }; tl.to(k, { v: 1, duration: 0.32, ease: "power2.out" }, 0.6); // the counter travels to the centre gsap.set("#card", { scale: 0.86 }); tl.to("#card", { scale: 1, duration: 0.5, ease: "power2.out" }, 1.02); const draw = (t) => { const s = scaleAt(t), cx = ocx + (960 - ocx) * k.v, cy = ocy + (540 - ocy) * k.v; gsap.set(cam, { scale: s, x: cx - ocx, y: cy - ocy, opacity: t > 1.1 ? 0 : 1 }); const hole = t >= 0.68 ? `radial-gradient(ellipse ${RX * 1.1 * s}px ${RY * 1.07 * s}px at ${cx}px ${cy}px, transparent 99%, #000 100%)` : "none"; back.style.webkitMaskImage = back.style.maskImage = hole; back.style.opacity = t > 1.1 ? 0 : 1; }; tl.to({}, { duration: 3, onUpdate: () => draw(tl.time()) }, 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:09 من الفيديو انتقالمسح بالأعمدة مع حواف أمامية متوهجة
تكشف تسعة أعمدة متساوية المشهد التالي، بالتناوب من الأعلى ومن الأسفل، وتبدأ بفارق 20-70 مللي ثانية ويستغرق كل عمود 0.15 ث (power2.inOut)؛ وكل عمود هو طبقة قناع CSS واحدة بحافة ناعمة 36 px، ويمتطي حافته الأمامية شريط رفيع متوهج بلون التمييز.
متى تُستخدم تغيير حاد في الأجواء (من الفاتح إلى الداكن) يبقى مع ذلك ميكانيكيًا وعلى الإيقاع.
عرض الكود
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>مسح بالأعمدة مع حواف أمامية متوهجة</title> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script> <style> html, body { margin: 0; height: 100%; overflow: hidden; background: #000; } #root { position: relative; overflow: hidden; transform-origin: 0 0; } </style> <style> @import url("https://fonts.googleapis.com/css2?family=Geist:[email protected]&family=Geist+Mono:[email protected]&display=block"); * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; } #root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Geist", sans-serif; color: #fff; background: radial-gradient(ellipse 62% 70% at 50% 50%, #16102e 0%, #0e0b20 45%, #090714 100%); } #root::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(240, 237, 255, 0.07) 1.3px, transparent 1.9px); background-size: 48px 48px; } #from { position: absolute; inset: 0; background: linear-gradient(90deg, #b6b1c6 0%, #e2ddef 20%, #FAF9FF 50%, #e0dbee 78%, #b6b1c6 100%); color: #0D0B1E; } #to { position: absolute; inset: 0; background: radial-gradient(ellipse 48% 58% at 52% 56%, #22124a 0%, #100c26 64%, #090714 100%); color: #fff; } .word { position: absolute; left: 0; right: 0; top: 470px; text-align: center; font: 800 120px/1 "Geist", sans-serif; letter-spacing: -0.025em; } #bars { position: absolute; inset: 0; } .bar { position: absolute; height: 7px; background: #FB2D89; box-shadow: 0 0 18px 4px rgba(251, 45, 137, 0.7); opacity: 0; } </style> </head> <body> <div id="root" data-composition-id="main" data-start="0" data-duration="2.5" data-width="1920" data-height="1080"> <div id="from" class="clip" data-start="0" data-duration="2.5"><div class="word">"Light scene"</div></div> <div id="to" class="clip" data-start="0" data-duration="2.5"><div class="word">"Dark scene"</div></div> <div id="bars" class="clip" data-start="0" data-duration="2.5"></div> </div> <script> // Nine columns reveal the next scene, each sliding in from the top or the bottom with a soft edge and a glowing bar // at its leading edge. One CSS mask layer per column, sized and placed from the timeline's time. const tl = gsap.timeline({ paused: true }); const COLS = [[0, 0.5, 1], [1, 0.53, -1], [2, 0.55, 1], [3, 0.575, -1], [4, 0.595, 1], [5, 0.665, -1], [6, 0.62, 1], [7, 0.64, -1], [8, 0.685, 1]]; // [column, start s, from top 1 / bottom -1] const CW = 1920 / 9, CD = 0.15, FEATHER = 36; const to = document.getElementById("to"), barsEl = document.getElementById("bars"); const bars = COLS.map(([i]) => { const b = document.createElement("div"); b.className = "bar"; b.style.left = i * CW + "px"; b.style.width = Math.ceil(CW) + "px"; barsEl.appendChild(b); return b; }); const ease = gsap.parseEase("power2.inOut"); const draw = (t) => { const imgs = [], sizes = [], poss = []; COLS.forEach(([i, t0, dir], k) => { const p = ease(Math.min(1, Math.max(0, (t - t0) / CD))), h = Math.round(p * 1110); imgs.push(`linear-gradient(${dir > 0 ? 180 : 0}deg, #000 calc(100% - ${FEATHER}px), transparent)`); sizes.push(`${Math.ceil(CW) + 1}px ${h}px`); poss.push(`${Math.floor(i * CW)}px ${dir > 0 ? 0 : 1080 - h}px`); bars[k].style.opacity = p > 0 && p < 1 ? 1 : 0; bars[k].style.top = (dir > 0 ? h - 26 : 1080 - h + 19) + "px"; }); const m = to.style; m.webkitMaskImage = m.maskImage = imgs.join(","); m.webkitMaskSize = m.maskSize = sizes.join(","); m.webkitMaskPosition = m.maskPosition = poss.join(","); m.webkitMaskRepeat = m.maskRepeat = "no-repeat"; }; tl.to({}, { duration: 2.5, onUpdate: () => draw(tl.time()) }, 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 من الفيديو انتقالانفجار دائري من شارة حالة
يُقنَّع المشهد التالي بدائرة مركزها شارة صغيرة من المشهد الأخير، بحافة ناعمة 26 px وحلقة متوهجة مرسومة خارجها مباشرة؛ ويتبع نصف القطر إطارات مفتاحية (نحو 130 و190 px خلال الإطارين الأولين، ثم يتجاوز الزاوية البعيدة خلال 0.1 ث أخرى)، فينفجر اللون الجديد من الشارة ويصعد المحتوى الجديد عند استقراره.
متى تُستخدم تحويل لحظة نجاح صغيرة إلى القسم التالي بملء الشاشة.
عرض الكود
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>انفجار دائري من شارة حالة</title> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script> <style> html, body { margin: 0; height: 100%; overflow: hidden; background: #000; } #root { position: relative; overflow: hidden; transform-origin: 0 0; } </style> <style> @import url("https://fonts.googleapis.com/css2?family=Geist:[email protected]&family=Geist+Mono:[email protected]&display=block"); * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; } #root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Geist", sans-serif; color: #fff; background: radial-gradient(ellipse 62% 70% at 50% 50%, #16102e 0%, #0e0b20 45%, #090714 100%); } #root::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(240, 237, 255, 0.07) 1.3px, transparent 1.9px); background-size: 48px 48px; } #badge { position: absolute; left: 1636px; top: 732px; width: 137px; height: 42px; border-radius: 21px; background: #2DD4B0; color: #05302a; display: flex; align-items: center; justify-content: center; gap: 10px; font: 700 20px/1 "Geist Mono", monospace; } #badge svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 3; fill: none; stroke-linecap: round; } #rim { position: absolute; left: 1705px; top: 753px; width: 0; height: 0; border-radius: 50%; box-shadow: 0 0 0 10px rgba(255, 140, 195, 0.35), 0 0 40px 18px rgba(255, 90, 160, 0.35); } #next { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at 33% 40%, #ff4f9c 0%, #FB2D89 30%, #e81f7b 55%, #cc176b 80%, #b0125d 100%); } .word { position: absolute; left: 127px; top: 152px; font: 800 243px/1.08 "Geist", sans-serif; letter-spacing: -0.022em; color: #fff; } </style> </head> <body> <div id="root" data-composition-id="main" data-start="0" data-duration="2.5" data-width="1920" data-height="1080"> <div id="badge" class="clip" data-start="0" data-duration="2.5"><svg viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7" /></svg>LIVE</div> <div id="next" class="clip" data-start="0" data-duration="2.5"><div class="word">"01"</div></div> <div id="rim" class="clip" data-start="0" data-duration="2.5"></div> </div> <script> // The next scene bursts out of the status badge as a soft-edged circle with a glowing rim; its radius follows // keyframes (slow for two frames, then racing past the corners), and the new content rises in as it lands. const tl = gsap.timeline({ paused: true }); const next = document.getElementById("next"), rim = document.getElementById("rim"); const CX = 1705, CY = 753; // centre of the badge const R = [[1.0, 0], [1.017, 127], [1.05, 191], [1.067, 545], [1.1, 737], [1.117, 1330], [1.15, 1580], [1.167, 2000]]; // [s, radius px] const radius = (t) => { if (t <= R[0][0]) return 0; for (let i = 1; i < R.length; i++) if (t <= R[i][0]) { const [a, ra] = R[i - 1], [b, rb] = R[i]; return ra + (rb - ra) * (t - a) / (b - a); } return 2000; }; tl.fromTo("#badge", { scale: 0 }, { scale: 1, duration: 0.16, ease: "back.out(2.4)", immediateRender: true }, 0.2); tl.fromTo(".word", { y: 40, opacity: 0 }, { y: 0, opacity: 1, duration: 0.24, ease: "power3.out", immediateRender: true }, 1.17); const draw = (t) => { const r = radius(t); const m = r >= 1999 ? "none" : `radial-gradient(circle at ${CX}px ${CY}px, #000 ${Math.max(0, r - 26)}px, transparent ${r}px)`; next.style.webkitMaskImage = next.style.maskImage = m; gsap.set(rim, { width: 2 * r, height: 2 * r, x: -r, y: -r, opacity: r > 0 && r < 1999 ? 1 : 0 }); }; tl.to({}, { duration: 2.5, onUpdate: () => draw(tl.time()) }, 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 من الفيديو بياناتبكرات أرقام كآلة القمار
كل رقم هو بكرة عمودية من 10 أرقام أو أكثر داخل عمود بعرض الرقم الأخير؛ تنزلق البكرة إلى الأعلى حتى قيمتها في نحو 0.25 ث بـpower3.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:[email protected]&family=Geist+Mono:[email protected]&display=block"); * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; } #root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Geist", sans-serif; color: #fff; background: radial-gradient(ellipse 62% 70% at 50% 50%, #16102e 0%, #0e0b20 45%, #090714 100%); } #root::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(240, 237, 255, 0.07) 1.3px, transparent 1.9px); background-size: 48px 48px; } #root { background: radial-gradient(ellipse 60% 70% at 33% 40%, #ff4f9c 0%, #FB2D89 30%, #e81f7b 55%, #cc176b 80%, #b0125d 100%); } .dv { position: absolute; left: 127px; width: 1666px; height: 2px; background: rgba(255, 255, 255, 0.34); transform-origin: 0 50%; } .num { position: absolute; left: 127px; display: flex; font: 800 243px/1 "Geist", sans-serif; letter-spacing: -0.022em; color: #fff; } .col { position: relative; display: inline-block; overflow: hidden; height: 1.08em; } .reel { display: block; } .reel span { display: block; height: 1.08em; line-height: 1.08em; text-align: center; margin: 0 -0.2em; } </style> </head> <body> <div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080"> <div class="dv clip" id="d0" data-start="0" data-duration="3" style="top: 147px;"></div> <div class="dv clip" id="d1" data-start="0" data-duration="3" style="top: 421px;"></div> <div class="dv clip" id="d2" data-start="0" data-duration="3" style="top: 695px;"></div> <div class="num clip" id="n0" data-start="0" data-duration="3" style="top: 152px;"></div> <div class="num clip" id="n1" data-start="0" data-duration="3" style="top: 426px;"></div> <div class="num clip" id="n2" data-start="0" data-duration="3" style="top: 700px;"></div> </div> <script> // Each digit is a reel of digits that scrolls up and lands on its value, blurred while fast; later digits spin // longer, so the number settles left to right. The column is as wide as the landed digit. const tl = gsap.timeline({ paused: true }); const NUMS = [["01", 0.3], ["02", 0.5], ["03", 0.77]]; // [value, starts at s] NUMS.forEach(([str, t0], ni) => { const el = document.getElementById("n" + ni); [...str].forEach((ch, di) => { const col = document.createElement("span"); col.className = "col"; const reel = document.createElement("span"); reel.className = "reel"; const spins = 10 + di * 3, target = +ch; for (let k = 0; k <= spins; k++) { const s = document.createElement("span"); s.textContent = String((target - spins + k + 100) % 10); reel.appendChild(s); } col.appendChild(reel); el.appendChild(col); const probe = document.createElement("span"); probe.textContent = ch; probe.style.cssText = "display:inline-block;position:absolute;visibility:hidden"; el.appendChild(probe); col.style.width = probe.getBoundingClientRect().width + "px"; probe.remove(); const h = 100 / (spins + 1), dur = 0.24 + di * 0.035; tl.fromTo(reel, { yPercent: 0, filter: "blur(6px)" }, { yPercent: -h * spins, filter: "blur(0px)", duration: dur, ease: "power3.out", immediateRender: true }, t0 + di * 0.02); tl.fromTo(col, { opacity: 0 }, { opacity: 1, duration: 0.05, immediateRender: true }, t0 + di * 0.02); }); tl.fromTo("#d" + ni, { scaleX: 0 }, { scaleX: 1, duration: 0.3, ease: "power2.out", immediateRender: true }, t0 - 0.02); }); 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 من الفيديو جسيماتسحابة رقائق في العمق مع عبور warp
نحو عشرين رقاقة بتسميات تقع في مواضع ثابتة مع ميل دوراني صغير وإمالة ثلاثية الأبعاد، وبعضها مموّه كأنه خارج التركيز؛ تتركّز واحدة تلو الأخرى (opacity، وblur من 6 px إلى الوضوح، وscale من 0.94 إلى 1، خلال 0.22 ث) وتنجرف بضعة بكسلات؛ وللخروج تميل كل واحدة بقوة (0.14 ث) وتطير على خطها من المركز مارّة بالكاميرا باستخدام translateZ في صندوق منظور (0.22 ث، power1.in)، وتتموّه حتى نحو 10 px كأنها خط سريع، بينما ينمو مربع صغير في المركز إلى نحو 42 px.
متى تُستخدم عرض «كل شيء دفعة واحدة» حول عنوان ثم إخلاء المسرح بسرعة.
عرض الكود
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>سحابة رقائق في العمق مع عبور warp</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:[email protected]&family=Geist+Mono:[email protected]&display=block"); * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; } #root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Geist", sans-serif; color: #fff; background: radial-gradient(ellipse 62% 70% at 50% 50%, #16102e 0%, #0e0b20 45%, #090714 100%); } #root::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(240, 237, 255, 0.07) 1.3px, transparent 1.9px); background-size: 48px 48px; } #space { position: absolute; inset: 0; perspective: 1000px; perspective-origin: 960px 540px; } .chip { position: absolute; display: flex; align-items: center; gap: 13px; height: 44px; padding: 0 18px 0 16px; border-radius: 10px; white-space: pre; font: 500 21px/1 "Geist Mono", monospace; color: #E3DEF0; background: rgba(22, 18, 46, 0.86); border: 1.5px solid rgba(233, 228, 242, 0.14); } .chip i { width: 7px; height: 7px; border-radius: 50%; background: #6B6385; } .chip.hl { color: #fff; background: rgba(251, 45, 137, 0.13); border-color: #FB2D89; } .chip.hl i { background: #FB2D89; } #core { position: absolute; left: 955px; top: 535px; width: 10px; height: 10px; border-radius: 22%; background: linear-gradient(135deg, #FE9117, #FB2D89); box-shadow: 0 0 18px rgba(251, 45, 137, 0.9); } </style> </head> <body> <div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080"> <div id="space" class="clip" data-start="0" data-duration="3"></div> <div id="core" class="clip" data-start="0" data-duration="3"></div> </div> <script> // Labels float at different depths (roll, small 3D tilt, depth-of-field blur), focus in one by one and drift; // then each tilts hard and flies past the camera along its line from the centre (translateZ in a perspective box). const tl = gsap.timeline({ paused: true }); const CHIPS = [["\"Tell the chat what to show\"", 907, 340, 3, 1, 0], ["\"Kinetic type\"", 1349, 740, 2, 0, 0], ["\"Live preview\"", 225, 598, 2, 0, 0.4], ["\"Describe your idea\"", 1213, 931, 4, 1, 0], ["\"MP4 export\"", 1700, 590, -3, 0, 1.6], ["\"Shapes\"", 571, 853, 0, 0, 0], ["\"3D effects\"", 1677, 652, -3, 0, 1.4], ["\"Fonts for every script\"", 650, 940, 2, 0, 0], ["\"Music and sound effects\"", 1432, 167, -2, 0, 0], ["\"Pick a template\"", 1128, 828, 0, 0, 0], ["\"Edit in words\"", 286, 873, 4, 0, 0.6], ["\"Your own footage\"", 380, 757, 2, 0, 0.6]]; // [text, x, y, roll, highlighted, blur] let seed = 11; const rnd = () => { seed = (seed * 16807) % 2147483647; return seed / 2147483647; }; // seeded const space = document.getElementById("space"); CHIPS.forEach(([text, x, y, roll, hl, blur], i) => { const el = document.createElement("div"); el.className = "chip" + (hl ? " hl" : ""); el.innerHTML = "<i></i>" + text.replace(/"/g, ""); el.style.left = x + "px"; el.style.top = y + "px"; space.appendChild(el); const at = 0.08 + i * 0.07; gsap.set(el, { xPercent: -50, yPercent: -50, rotation: roll, rotationY: (rnd() - 0.5) * 16, rotationX: (rnd() - 0.5) * 12, opacity: 0, filter: `blur(${blur + 6}px)`, scale: 0.94 }); tl.to(el, { opacity: 1, filter: `blur(${blur}px)`, scale: 1, duration: 0.22, ease: "power2.out" }, at); // focus pull in tl.to(el, { x: (rnd() - 0.5) * 24, y: (rnd() - 0.5) * 22, duration: 2.0 - at, ease: "none" }, at); // drift const w = 2.0 + rnd() * 0.04; tl.to(el, { rotationX: (rnd() - 0.5) * 120, rotationY: (rnd() - 0.5) * 130, duration: 0.14, ease: "power2.out" }, w); // tilt tl.to(el, { z: 860 + rnd() * 100, filter: `blur(${blur + 10}px)`, duration: 0.22, ease: "power1.in" }, w); // fly past, blurring like a streak tl.to(el, { opacity: 0, duration: 0.06 }, w + 0.17); }); gsap.set("#core", { scale: 0, rotation: 45 }); tl.to("#core", { scale: 1, duration: 0.1, ease: "power2.out" }, 1.85); tl.to("#core", { scale: 2.6, rotation: 15, duration: 0.33, ease: "power1.out" }, 1.95); 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 Motionرمز الموجّه: NPX
Simple Motionرمز الموجّه: MOVريل علامة تجارية «بيان الكرة المرتدة»
<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 Motionرمز الموجّه: SYPريل علامة تجارية بجولة ثلاثية الأبعاد على الهاتف وكتابة نيون متحركة
<direction> اصنع ريل علامة تجارية عمودياً مدته 15.5 ثانية (1080x1920، 30 إطاراً في الثانية). جولة ثلاثية الأبعاد على هاتف فوق الملف الشخصي لعلامتي التجارية تتحول إلى لحظة الشعار، ثم كتابة متحركة مقطّعة مقطعاً مقطعاً على إيقاع تراب قوي بنصف السرعة تنتهي بشعاري. كل شيء مرسوم، من دون لقطات مصوّرة. استخدم شعاري، واستخدم ألوان علامتي وكلماتها بدلاً من الأمثلة أدناه. للمظهر ثلاثة عوالم: تدرجات من الأزرق الداكن العميق إلى ما يقارب الأسود للجزء ثلاثي الأبعاد، واستوديو رمادي فاتح في المنتصف، وأسود خالص مع توهج نيون في النهاية. تجنب لوحة مربعة أو مكعباً خلف الشعار، والحروف المعكوسة عندما تمر كلمة خلف شيء ما، والنص الذي يلامس حواف الإطار، والإطار المقلوب رأساً على عقب بعد حركة الكاميرا الخاطفة، وشعار الهولوغرام المسطح أو المضغوط. يجب أن تتناسب شاشة الهاتف تماماً داخل إطارها. </direction> <structure> 1. من 0 إلى 4.3 ث، جولة الهاتف. هاتف ثلاثي الأبعاد (وجه الشاشة وظهر فضي متوهج مع نتوء الكاميرا) يدخل متقلباً، صغيراً ومائلاً، والظهر أولاً. يدور نحو 200 درجة ويستقر منتصباً على شاشته عند 1.05 ث (power2.out). تقع الشاشة في منتصف الإطار مع حافة متساوية من جميع الجهات. تعرض العلامة التجارية كملف شخصي اجتماعي: اسم المستخدم، وصورة رمزية دائرية بشعاري، والاسم وشعار نصي من سطر واحد، ونبذة من سطرين مع الموقع الإلكتروني، وزراً رئيسياً وردياً، وأربع قصص مميزة دائرية لا تتداخل تسمياتها. أسفلها شبكة 3x3 من مربعات ملونة صغيرة قليلاً بزوايا مستديرة تناسب الشاشة، مع تسميات قصيرة تتسع داخل كل مربع ("IDEAS IN MOTION" و"3D" و"LOGO REVEAL"؛ استبدلها بتسمياتك). من 1.05 ث يميل الهاتف إلى الخلف نحو 48 درجة ويكبر، بينما ترتفع المربعات عن الشاشة نحو الكاميرا بارتفاعات مختلفة. تهبط حركة كاميرا خاطفة عند 1.95 ث قريباً من رأس الملف الشخصي. تتحرك الكاميرا ببطء إلى أسفل النبذة مائلةً، حتى تدير حركة خاطفة ثانية عند 3.0 ث نظرها إلى الأسفل نحو الصورة الرمزية. تهبط منتصبة فيبقى الملف الشخصي مقروءاً. تتراكم ثلاث حلقات وردية متوهجة خارجة من الصورة الرمزية (back.out، بفارق 80 مللي ثانية). تصعد منها نسخة دائرية من شعاري بحدود وردية وتوهج، مائلة نحو المشاهد كأنها هولوغرام. 2. من 4.3 إلى 6.5 ث، الشعار ثلاثي الأبعاد. قطع حاد إلى رمز شعاري نفسه مُسحوباً بثلاثة أبعاد: كومة من طبقات رقيقة بلون عميق (مثل الوردي الداكن) خلف الواجهة المضاءة، من دون مربع خلفه. يتوهج على تدرج دائري أزرق داكن. يدخل دائراً من وضعية مائلة (power3.out، ثانية واحدة)، ويتمايل، ثم يبتعد دائراً وصغيراً (power3.in) إلى القطع. كلمة جريئة مثل "AHHHH" (استبدلها بكلمتك) تستقر على حلقة أسفل الشعار مباشرة، وليس فوقه أبداً. تُكتب بخط غروتيسك عريض جداً مع تدرج من البرتقالي إلى الوردي وتوهج وردي ناعم، والحروف متباعدة وغير معكوسة أبداً. تمر الكلمة عبر الواجهة ثم تطير مع الشعار. من 4.75 ث تظهر تدريجياً كلمة خلفية عملاقة بخطوط خارجية ("OMG") وتنجرف إلى الأعلى. 3. من 6.5 إلى 9.2 ث، كلمات مكتوبة في غرفة فاتحة. قطع حاد إلى غرفة رمادية فاتحة بحواف معتمة. تُكتب الكلمات حرفاً حرفاً على مقاطع الإيقاع، في مجموعة ثلاثية الأبعاد تنجرف الكاميرا عبرها. أولاً "yeah". ثم "she" بالأبيض على صندوق أسود يظهر أولاً كخط رفيع ثم ينفتح بخطفة. ثم "typed" بالوردي، و"one"، و"single prompt" أكبر حجماً. عند 8.1 ث تنغلق الحواف المعتمة على شكل قطع ناقص أفقي خلال 0.22 ث وتنفتح من جديد خلال 0.25 ث، بينما تطير الكلمات القديمة إلى اليسار. تسقط كلمات جديدة من الأعلى خارجة من ضبابية: "Now" / "it moves like". ترتفع كلمة "magic" الوردية ضبابية من الأسفل قبل القطع مباشرة. 4. من 9.2 إلى 15.5 ث، كومة النيون والشعار. قطع إلى الأسود مع كلمة "magic" الوردية المتوهجة في الأعلى. لكل سطر تالٍ لونه وتوهجه ودخوله الخاص، وتتراكم: "And I'm" بالبرتقالي، و"unstoppable" بالبنفسجي، و"might do" بالأبيض، و"MOTION" بالوردي. تدور الكومة ببطء بثلاثة أبعاد ثم تطير إلى الأعلى وخارج الإطار خلال 0.25 ث عند 11.95 ث. يظهر سطر ختامي كلمة كلمة خارجاً من ضبابية بالوردي: "no" / "more" / "timelines". عند 12.7 ث تسقط خمس قضبان معدنية فوقه من الأعلى. عند 13.25 ث يتلاشى كل شيء بضبابية، ويظهر شعاري بالأبيض مع شعار نصي متباعد ("YOUR TAGLINE HERE") خارجاً من الضبابية ويثبت حتى النهاية. جميع الكلمات بين علامات الاقتباس أمثلة عليك استبدالها بكلماتك. </structure> <composition> مثال على لوحة الألوان: أزرق داكن #1C0B5D، وأسود تقريباً #04020C، ووردي ساطع #FB2D89، وبرتقالي #FE9117، وبنفسجي #8F7BFF، ورمادي فاتح #D2D4D9، ورمادي النص #4A4E56، وأبيض. استخدم خط غروتيسك ثقيلاً واحداً، عريضاً جداً مع تباعد ضيق بين الحروف (-0.045em)، مثل Manrope ExtraBold، لكل كلمة. الكلمة الخلفية في المشهد 2 عبارة عن خطوط خارجية عملاقة (text-stroke بشفافية نحو 20%). يقع الجزء ثلاثي الأبعاد على تدرجات من الأزرق الداكن العميق إلى ما يقارب الأسود، ومشهد الشعار على تدرج دائري أزرق داكن. المنتصف غرفة رمادية فاتحة بحواف معتمة، والنهاية سوداء خالصة مع توهجات نيون. أبقِ كل سطر نصي داخل الإطار مع هوامش آمنة، خاصة السطرين الطويلين "And I'm" و"unstoppable". البطاقة الأخيرة هي الشعار في المنتصف بالأبيض مع شعار نصي صغير ومتباعد جداً أسفله. </composition> <techniques> حركات الكاميرا الخاطفة: 0.08 ث من ضبابية 14 بكسل، وقفزة إلى التأطير الجديد، ثم 0.12 ث للعودة إلى الحدة. تتراكم الحلقات بتأثير back.out وبفارق 80 مللي ثانية. يصعد هولوغرام الشعار بحدود وردية وتوهج وميل طفيف نحو الكاميرا. يدور الشعار ثلاثي الأبعاد داخلاً بتأثير power3.out (ثانية واحدة) وخارجاً بتأثير power3.in. ينقلب كل حرف مكتوب إلى الأعلى من الأسفل (rotationX -70، back.out، 0.18 ث، بفارق 30–70 مللي ثانية). ينفتح صندوق "she" من خط رفيع بخطفة. يغلق انتقال القزحية الحواف المعتمة على شكل قطع ناقص أفقي (0.22 ث) ويعيد فتحها (0.25 ث). دخول أسطر النيون: تدخل حروف "And I'm" بقوة من حجم كبير، وتنزلق "unstoppable" من اليمين خارجة من ضبابية، وترتفع حروف "might do"، وتندفع حروف "MOTION" من اليسار مع ميل وأثر حركة. تخرج الكومة إلى الأعلى خلال 0.25 ث. تظهر الكلمات الختامية واحدة تلو الأخرى خارجة من ضبابية. تسقط خمس قضبان معدنية من الأعلى (power3.in، بفارق 30 مللي ثانية). في النهاية يتلاشى كل شيء بضبابية، ثم يظهر الشعار من ضبابية 24 بكسل (0.45 ث) ويكبر ببطء 4% أثناء ثباته. تتغير الكلمات كل 0.1–0.3 ث على مقاطع الإيقاع؛ والشعار وحده يثبت. </techniques> <music> تراب بنصف السرعة بنحو 147 نبضة في الدقيقة في سُلّم صول الصغير، موسيقى بلا غناء. تحت جزء الهاتف تُعزف نغمة أجراس داكنة بتوتر متصاعد. يدخل الإيقاع الكامل (طبلة 808 قوية، وجهير مشوّه، وتصفيق، وهاي-هات متدحرج مع تدحرجات ثلاثية) تماماً عند القطع إلى الشعار ثلاثي الأبعاد عند 4.33 ث. قصّ المقطع بحيث يقع الدروب هناك. تلاشٍ تدريجي في النهاية. </music> <sound> تصميم صوتي فقط فوق الموسيقى: دويّ عند هبوط الهاتف، وأصوات اندفاع عند حركتي الكاميرا الخاطفتين، ولمعان لشعار الهولوغرام. أضف ضربة عند القطع إلى الشعار ثلاثي الأبعاد، وصدمة عند القطع إلى الغرفة الفاتحة، وصوت اندفاع عند القزحية. ثم دويّ عند القطع إلى الأسود، وأصوات اندفاع عند انزلاق الأسطر ودخولها وطيرانها، وضربة معدنية عند هبوط القضبان، ودويّ عميق عند الشعار الأخير، ثم تلاشٍ تدريجي. من دون تعليق صوتي. </sound>
استُخدم 9 مراتالنشرة البريدية
موجّهات جديدة في بريدك
نرسل لك أفضل موجّهات المجتمع الجديدة مع فيديوهاتها. بلا رسائل مزعجة، وفي كل رسالة رابط لإلغاء الاشتراك.
نستخدم بريدك لهذه النشرة فقط. سياسة الخصوصية
