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

AR

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

Simple Motion

فيديو شرح منتج بكرة نطاطة وكشف الشعار

كرة وردية لامعة ترتد وتُطلق بطاقات وتبتلعها في فصل داكن وتحط كنقطة نهاية لعنوان ثم تنمو لتصبح شعارك.

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

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

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

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

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

الفكرة

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

البنية

0.0–2.4 ث، السقوط. على الورق، يُرسم خط أرضية متموّج قليلًا من اليسار (0.08–0.4 ث، power2.out). تسقط الكرة من أعلى اليسار بجاذبية حقيقية وتنضغط على الخط (حوالي 1.38 x 0.64 لمدة 0.05 ث). ترتد ثلاث مرات، بارتفاع وانجراف أقل في كل مرة، وتستقر في المنتصف عند 1.5 ث. في الهواء تتمدد على امتداد سرعتها. خلفها يُبنى مخطط تباعد لرسّام متحركات: مخطط رفيع للكرة كل 0.05 ث ومسار منقّط كل 16 بكسل. تُكتب ملاحظة وردية بقلم التمييز، «فكرتك»، عند 1.15 ث ويُرسم سهم نحو الكرة.
2.4–5.0 ث، ما يدخل. تتلاشى الملاحظة وتنضغط الكرة وتتمدد للأعلى. تنفجر منها أربع بطاقات، بفارق 0.1 ث. تنمو كل واحدة من 40% من الحجم مع دوران كبير إلى ميل صغير في حالة الراحة خلال 0.3 ث (power3.out)، ثم تطفو لأعلى بضعة بكسلات. البطاقات الأربع هي:

بطاقة ملخص بيضاء بعنوان «YOUR VIDEO» وفيها صفوف مثل «نص حركي» و«أشكال» و«تأثيرات ثلاثية الأبعاد» و«خطوط» و«صوت». فيها صف عريض «MP4 export» مع شريط وردي وختم برتقالي مائل، «بلا إطارات مفتاحية».
بطاقة بيضاء برسم خطي لتخطيط وكتلة عنوان صغيرة، «اختر قالبًا / 01».
ورقة لاصقة بلون الخزامى بقلم التمييز: «أكبر، أبطأ، لون آخر».
بطاقة قائمة، «ما تملكه أنت»، فيها «لقطات» و«صور» و«شعارات» و«موسيقى».
ملاحظات خافتة بقلم التمييز مع أسهم تسمّي البطاقات واحدة تلو الأخرى («بالكلمات»، «قالب»، «لقطات»). ملاحظة برتقالية من سطرين تشير إلى الورقة اللاصقة: «قل للدردشة / ماذا تعرض». عند 4.73 ث تتلاشى الملاحظات، ويرتدّ خط الأرضية إلى داخل الكرة وتنكمش الكرة قليلًا: التقاط الأنفاس قبل التحوّل.

5.0–6.5 ث، التحوّل. قطع حاد إلى الفصل الداكن. البطاقات الأربع نفسها، وقد صارت داكنة، تحيط بالكرة في المنتصف، وهي تنتفخ بمقدار الخُمس. يزداد توهج هالة وردية حولها مع كل بطاقة تبتلعها. واحدة تلو الأخرى تميل البطاقات وتدور وتغوص في الكرة (power3.in، حوالي 0.25 ث لكل منها). كل اصطدام يضغط الكرة ويقذف دفعة من شرارات قصيرة بالوردي والبرتقالي والأبيض. شبكة من خطوط رفيعة بعقد بيضاء وبرتقالية تومض من الكرة ثم تنطوي عائدة. ثم تتمدد الكرة طوليًا وتنطلق إلى الأعلى خارج الإطار تاركة أثرًا من نسخ تتلاشى.
6.4–8.5 ث، العنوان. أحرف كبيرة ضخمة في سطرين متمركزين، «YOUR AI MOTION / DESIGNER»، تسقط حرفًا بحرف، بفارق 0.024 ث. تسقط الكرة مجددًا كنقطة النهاية وترتد حتى تستقر. يُخطّ تسطير برتقالي بقلم التمييز تحت السطر الثاني.
8.5–11.0 ث، الطريقة الجديدة. تقفز النقطة إلى اليسار في قوس وتطيح بالحروف؛ فتتدحرج خارج الإطار بفعل الجاذبية وهي تدور. تُرسم محاور المخطط بخطوط فاتحة: «ideas in motion» على امتداد الجانب و«chat» على امتداد الأسفل. تتدحرج الكرة على خط مسطح تاركة خلفها دوائر مخطّطة. ملاحظة بقلم التمييز، «the timeline»، تسمّي الخط ثم تُشطب، ويتحول الخط المسطح إلى موجة برتقالية. ترتد الكرة إلى الخلف، ويُرسم منحنى وردي على شكل S نحو الأعلى واليمين والكرة تركب طرفه (sine.inOut، حوالي 0.55 ث) بينما يخفت الخط القديم. ملاحظة بقوس معقوف، «one chat»، وملاحظة، «MP4 export»، مع علامة صح تكمل المخطط.
11.0–15.0 ث، الشعار. ينكسر المخطط الداكن إلى كتل غليتش ويعود إلى الورق. تطفو الكرة عبر الإطار في قوس بطيء وهي تكبر، مع نسخ مخطّطة خلفها. تحط في حلقة برتقالية مرسومة بيد بعرض حوالي 130 بكسل، مرسومة حيث سيظهر الشعار. تنمو علامة شعاري منها مع تجاوز طفيف. يتسلل اسم العلامة («[علامتك التجارية]») حرفًا بحرف من اليسار. وتحته يرتفع الوعد المكوّن من سطر واحد كلمة بكلمة: «Describe the video. The agent animates it.» ثم يظهر عنوان موقعي («[عنوان موقعك]») تدريجيًا ويُرسم حوله بيضاوي برتقالي. أبقِ بطاقة النهاية كاملة ومقروءة حتى الإطار الأخير. الإيقاع: فكرة جديدة كل 1.5–2 ث.

التكوين

فصل الورق: قماش بلون #FAF9FF في المنتصف مع تعتيم ناعم للحواف حتى #DEDAED في الزوايا. الحبر #1C0B5D، النص الخافت #6B6385، الخطوط #E9E4F2، اللوحات الناعمة #F0EDFF. اللمسات: وردي #FB2D89 (الكرة، التمييز) وبرتقالي #FE9117 (ملاحظات القلم، الأختام، التسطير).
الفصل الداكن: #1C0B5D في المنتصف حتى #0D0B1E في الزوايا. شبكة نقاط 36 بكسل من نقاط صغيرة بلون الخزامى بشفافية حوالي 22%، مع وهج وردي ناعم يتبع الكرة.
إذا اختلفت ألوان علامتي التجارية، فاستبدلها بحسب الدور.
الكرة بقطر 92 بكسل بتدرج شعاعي لامع: إضاءة #FF9CC9 في أعلى اليسار، #FB2D89 في الوسط، #C41264 عند الحافة. لها ظل تماس ناعم على الورق.
الخطوط:

Anton للعنوان الضخم.
Caveat Bold لكل ملاحظة بخط اليد.
Inter semibold وbold لبطاقات الواجهة واسم العلامة.
EB Garamond للشعار اللفظي.
IBM Plex Mono للتسميات الصغيرة وعنوان الموقع.
العنوان سطران متمركزان من أحرف كبيرة ضخمة. في التركيب النهائي، تشترك العلامة واسم العلامة في خط وسطي واحد ويقع التركيب في مركز الإطار، مع الشعار اللفظي والعنوان تحته. حافظ على هوامش نظيفة. لا شيء مضغوط أو ممدود، ولا تظهر خطوط بديلة أو رموز ناقصة.

التقنيات

كل خط مرسوم بيد يُرسم بسلاسة على امتداد طوله: خط الأرضية والأسهم والحلقات والتسطيرات والمحاور والموجة ومنحنى S والقوس المعقوف والبيضاوي حول العنوان. لا يظهر أي منها كاملًا دفعة واحدة. تُكتب الملاحظات بخط اليد من اليسار إلى اليمين، وتنكشف داخل صندوقها بمعدل حوالي 0.022 ث لكل حرف.
تنضغط الكرة وتتمدد عند كل ارتداد واصطدام وتتمدد في اتجاه حركتها في الهواء. الحركات السريعة تترك آثارًا من نسخ متلاشية أو مخطّطة.
في العنوان، يسقط كل حرف بميل خفيف وخلفه نسختان ملونتان: برتقالية متأخرة 0.03 ث ووردية متأخرة 0.06 ث. تستقر النسختان كبثق ثلاثي الأبعاد، 7 و15 بكسل نحو الأسفل واليمين. يقفز كل حرف 36 بكسل عند الهبوط.
العودة إلى الورق غليتش: تسع شرائط بعرض 120 بكسل تنقلب من الداكن إلى الورق كتلة بكتلة بين 11.2 و11.47 ث، معظمها في منتصف الطريق، وتبقى بضع كتل داكنة للحظة.
تنزلق حروف اسم العلامة من اليسار مع ضبابية، منتقلة من الرمادي إلى لون الحبر. ويرتفع الشعار اللفظي كلمة بكلمة.

الموسيقى

خلفية موسيقية أصلية مبهجة ومشرقة من السينث بوب / الإلكترو هاوس بإيقاع 120 BPM، بطول 15 ثانية بالضبط، مضبوطة على شبكة الإيقاع لعمليات القطع:

ضربة تمهيدية، ثم الإيقاع الكامل عند 0.55 ث؛
ضربة وتر كبيرة عند 4.55 ث، مع توقف الطبول لصالح رايزر نحو التحوّل الداكن عند 5.0 ث؛
الدروب عند 6.55 ث حين يحط العنوان؛
بريك داون ثانٍ من 9.55 ث يحافظ على مستواه ويتصاعد برايزر؛
الدروب النهائي عند 11.55 ث حين يعود الورق؛
ضربة أخيرة عند 14.55 ث، تليها الصمت.
لا تتوقف الموسيقى أبدًا. أقسامها الكاملة ضمن 2 ديسيبل من بعضها، والبريك داونان فقط أهدأ.

الصوت

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

أصوات بوب ناعمة عند الارتدادات وعند انفجار البطاقات؛
نقرات خفيفة عند بدء الملاحظات؛
ووش وبوم عند التحوّل؛
ضربات زجاجية عند ابتلاع كل بطاقة؛
صوت بيب لشبكة الخطوط؛
ووش عندما تنطلق الكرة إلى الأعلى؛
بوم على العنوان وبوب على نقطة النهاية؛
سويش على التسطير؛
لكمة عند إطاحة الحروف؛
ضربات غليتش عند الشطب وعند العودة إلى الورق؛
بوم على الدروب النهائي؛
بوب وبوم عميق عند ظهور العلامة؛
نقرة عند عنوان الموقع.
اضبط المزج على حوالي -14 LUFS مع ذروة حقيقية أقل من -1 dBTP.

المراجع

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

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

علامة شعارك بصيغة SVG أو PNG نظيف؛ تنمو من الكرة في التركيب النهائي المتمركز.

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

معاينة تقنية «ارتداد فيزيائي مع squash وstretch وأثر onion-skin» — عند 0:01 من الفيديو

أشكال

ارتداد فيزيائي مع squash وstretch وأثر onion-skin

تسقط كرة من أعلى اليسار تحت تأثير الجاذبية، وتصطدم بخط أرض مرسوم باليد، وتنضغط (1.38 x 0.64 لمدة 0.05 s)، ثم ترتد بنصف سرعتها وبانجراف أقل بمقدار الثلث، ثلاث مرات، ثم تستقر. تُحاكى الحركة بتردد 240 Hz وتُخبز في keyframe واحد لكل إطار عند 60 fps، مع تمدد على امتداد السرعة. خلفها يُترك مخطط للكرة كل 0.05 s ومسار منقط كل 16 px، فيُقرأ القوس كمخطط تباعد لدى رسام الرسوم المتحركة؛ ويتلاشى الأثر عندما ينتقل المشهد.

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

عرض الكود

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ارتداد فيزيائي مع squash وstretch وأثر onion-skin</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
#root{position:relative;width:100%;height:100%;overflow:hidden}
#stage{position:absolute;inset:0}
.layer{position:absolute;left:0;top:0;width:1920px;height:1080px}
#root{background:radial-gradient(ellipse farthest-corner at 50% 48%,#faf9ff 0%,#f5f3fd 42%,#ece9f6 62%,#dedaed 100%);}
#line{fill:none;stroke:#1c0b5d;stroke-width:2.6;stroke-linecap:round}
#ball{position:absolute;left:0;top:0;width:92px;height:92px;opacity:0;border-radius:50%;background:radial-gradient(circle at 36% 30%,#ff9cc9 0%,#ff5aa5 28%,#fb2d89 52%,#e01c76 76%,#c41264 100%);}
#shadow{position:absolute;left:0;top:0;width:104px;height:12px;border-radius:50%;background:rgba(28,11,93,.2);filter:blur(3px);opacity:0}
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080">
  <div id="stage" class="clip" data-start="0" data-duration="3">
    <svg id="trail" class="layer" viewBox="0 0 1920 1080"><g id="rings"></g><g id="dots"></g></svg>
    <svg class="layer" viewBox="0 0 1920 1080"><path id="line" d="M588 760.5 C760 759.2 860 761.6 960 760.2 S1150 759.4 1253 761"/></svg>
    <div id="shadow"></div>
    <div id="ball"></div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
// Strokes draw on in real pixels: each path's dash is its own length
const toDraw = (sel) => { const p = document.querySelector(sel); const L = Math.ceil(p.getTotalLength()) + 2; p.setAttribute("stroke-dasharray", L + " " + L); p.setAttribute("stroke-dashoffset", L); return L; };
const R = 46, GROUND = 713;      // ball radius and the centre's resting height (line at 760)
const G = 6700, KEEP = 0.5;      // gravity in px/s² and the share of speed kept by each bounce
const START = 0.2, F = 1 / 60;
// Simulate at 240 Hz and keep one pose per frame: [x, y, scaleX, scaleY]
const poses = [];
let x = 320, y = -110, vx = 669, vy = 0, hold = 0, rest = false;
for (let i = 0; i < 240 * 1.5; i++) {
  const dt = 1 / 240;
  if (i % 4 === 0) {
    let sx = 1, sy = 1, cy = y;
    if (hold > 0) { const k = hold / 0.05; sx = 1 + 0.38 * k; sy = 1 - 0.36 * k; cy = GROUND + R * (1 - sy); }
    else if (!rest) { const s = 1 + Math.min(0.26, Math.abs(vy) / 9000); sx = 1 / s; sy = s; }
    poses.push([x, cy, sx, sy]);
  }
  if (rest) continue;
  if (hold > 0) { hold -= dt; continue; }
  vy += G * dt; x += vx * dt; y += vy * dt;
  if (y >= GROUND && vy > 0) {
    y = GROUND;
    if (vy < 420) { rest = true; vy = 0; } else { vy = -vy * KEEP; vx *= 0.65; hold = 0.05; }
  }
}
tl.fromTo("#line", { strokeDashoffset: toDraw("#line") }, { strokeDashoffset: 0, duration: 0.32, ease: "power2.out" }, 0.08);
tl.set("#ball", { x: poses[0][0] - R, y: poses[0][1] - R }, START - 0.01);
tl.set("#ball", { opacity: 1 }, START);
tl.to("#ball", { keyframes: poses.map((p) => ({ x: p[0] - R, y: p[1] - R, scaleX: p[2], scaleY: p[3], duration: F, ease: "none" })) }, START);
tl.to("#shadow", { keyframes: poses.map((p) => { const k = Math.max(0, 1 - (GROUND - p[1]) / 260); return { x: p[0] - 52, y: 758, opacity: k, scaleX: 0.55 + 0.45 * k, duration: F, ease: "none" }; }) }, START);
// Onion skin: an outline every 0.05 s while the ball is high, a dot every 16 px of the path
const NS = "http://www.w3.org/2000/svg";
const rings = document.getElementById("rings"), dots = document.getElementById("dots");
poses.forEach((p, i) => {
  if (i % 3 || p[1] < -40 || i > 50) return;
  const e = document.createElementNS(NS, "ellipse");
  e.setAttribute("cx", p[0]); e.setAttribute("cy", p[1]); e.setAttribute("rx", R * p[2]); e.setAttribute("ry", R * p[3]);
  e.setAttribute("fill", "none"); e.setAttribute("stroke", "#a8a1c4"); e.setAttribute("stroke-width", "1.4"); e.setAttribute("opacity", "0");
  rings.appendChild(e);
  tl.set(e, { opacity: 0.85 }, START + i * F + 0.034);
});
let run = 0;
for (let i = 1; i < poses.length; i++) {
  run += Math.hypot(poses[i][0] - poses[i - 1][0], poses[i][1] - poses[i - 1][1]);
  if (run < 16) continue;
  run = 0;
  if (poses[i][1] < 0) continue;
  const d = document.createElementNS(NS, "circle");
  d.setAttribute("cx", poses[i][0]); d.setAttribute("cy", poses[i][1]); d.setAttribute("r", "1.9"); d.setAttribute("fill", "#8c84aa"); d.setAttribute("opacity", "0");
  dots.appendChild(d);
  tl.set(d, { opacity: 0.9 }, START + i * F + 0.03);
}
tl.to("#trail", { opacity: 0, duration: 0.4, ease: "power1.in" }, 2.5);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

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

الطباعة

ملاحظة بقلم ماركر تُكتب ثم ترسم سهمها

تظهر تسميات مكتوبة بخط يد ماركر سميك (Caveat 700، من 52 إلى 65 px، مائلة قليلاً) بإيقاع القلم: يفتح clip-path inset على صندوق الملاحظة نفسه من اليسار إلى اليمين بنحو 0.022 s لكل حرف مع easing خطي، ثم يُرسم سهم SVG مرسوم باليد (منحنى وشوكتان في path واحد، pathLength 1) بواسطة stroke-dashoffset خلال 0.14-0.2 s، power1.inOut. الملاحظات رمادية بنفسجية خافتة للتسميات المحايدة وبرتقالية للمهمة منها؛ وتتلاشى معاً في 0.2 s عندما يغادر المشهد.

متى تُستخدم التعليق على العناصر على الشاشة كما في رسم تخطيطي لمصمم: تسمية المدخلات والإشارة إلى البطل.

عرض الكود

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ملاحظة بقلم ماركر تُكتب ثم ترسم سهمها</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@700&display=block");
#root{position:relative;width:100%;height:100%;overflow:hidden}
#stage{position:absolute;inset:0}
.layer{position:absolute;left:0;top:0;width:1920px;height:1080px}
#root{background:radial-gradient(ellipse farthest-corner at 50% 48%,#faf9ff 0%,#f5f3fd 42%,#ece9f6 62%,#dedaed 100%);}
.card{position:absolute;width:300px;height:220px;background:#fff;border-radius:4px;box-shadow:0 8px 22px rgba(28,11,93,.12)}
#cardA{left:270px;top:430px;transform:rotate(-6deg)}
#cardB{left:1310px;top:560px;transform:rotate(3deg)}
.note{position:absolute;left:0;top:0;font:700 59px/1 'Caveat',cursive;white-space:nowrap;clip-path:inset(-30% 106% -40% -6%)}
.arrow{fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080">
  <div id="stage" class="clip" data-start="0" data-duration="3">
    <div id="cardA" class="card"></div>
    <div id="cardB" class="card"></div>
    <svg class="layer" viewBox="0 0 1920 1080">
      <path id="arA" class="arrow" stroke="#6b6385" d="M691 461 C680 482 660 496 640 504 C626 510 608 514 595 517 M595 517 L620 502 M595 517 L618 531" />
      <path id="arB" class="arrow" stroke="#fe9117" d="M1262 689 C1263 678 1266 668 1272 661 C1280 652 1290 648 1300 644 M1300 644 L1281 644 M1300 644 L1295 662" />
    </svg>
    <div id="noteA" class="note" style="color:#6b6385">in words</div>
    <div id="noteB" class="note" style="color:#fe9117">tell the chat</div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
// Strokes draw on in real pixels: each path's dash is its own length
const toDraw = (sel) => { const p = document.querySelector(sel); const L = Math.ceil(p.getTotalLength()) + 2; p.setAttribute("stroke-dasharray", L + " " + L); p.setAttribute("stroke-dashoffset", L); return L; };
const STEP = 0.022; // seconds per character: the pen's pace
function write(sel, x, y, rot, start) {
  const el = document.querySelector(sel);
  tl.set(el, { x, y, rotation: rot }, 0.01);
  tl.fromTo(el, { clipPath: "inset(-30% 106% -40% -6%)" }, { clipPath: "inset(-30% -8% -40% -6%)", duration: el.textContent.length * STEP, ease: "none" }, start);
  return start + el.textContent.length * STEP;
}
const arrow = (sel, at, dur) => tl.fromTo(sel, { strokeDashoffset: toDraw(sel) }, { strokeDashoffset: 0, duration: dur, ease: "power1.inOut" }, at);
arrow("#arA", write("#noteA", 642, 390, -4, 0.4) + 0.02, 0.18);
arrow("#arB", write("#noteB", 1112, 680, -4, 1.0) + 0.02, 0.16);
tl.to([".note", ".arrow"], { opacity: 0, duration: 0.2, ease: "none" }, 2.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>

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

التخطيط

بطاقات تنفجر من البطل وتدور إلى أماكنها

تتهيأ كرة البطل (squash إلى 1.26 x 0.76)، ثم تتمدد للأعلى (0.65 x 1.3) وتنطلق أربع بطاقات واجهة من مركزها الواحدة تلو الأخرى (بفواصل 0 و0.1 و0.17 و0.27 s): تبدأ كل منها بمقياس 40%، شفافة، ومدارة 40-70 درجة، وتنتقل إلى زاويتها في 0.3 s مع power3.out وهي تدور إلى ميل راحة صغير (من -7 إلى +6 درجات)؛ وتبلغ opacity القيمة 1 في 0.08 s. بعد ذلك تنجرف كل بطاقة للأعلى 6 px على مدى 1.7 s ليبقى التخطيط يتنفس.

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

عرض الكود

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>بطاقات تنفجر من البطل وتدور إلى أماكنها</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@600&family=Caveat:wght@700&display=block");
#root{position:relative;width:100%;height:100%;overflow:hidden}
#stage{position:absolute;inset:0}
.layer{position:absolute;left:0;top:0;width:1920px;height:1080px}
#root{background:radial-gradient(ellipse farthest-corner at 50% 48%,#faf9ff 0%,#f5f3fd 42%,#ece9f6 62%,#dedaed 100%);}
.card{position:absolute;left:0;top:0;width:300px;height:230px;padding:22px;background:#fff;border-radius:4px;box-shadow:0 8px 22px rgba(28,11,93,.12);opacity:0}
.card b{display:block;font:600 17px/1 'Inter',sans-serif;letter-spacing:.06em;color:#1c0b5d;padding-bottom:12px;border-bottom:2px solid #1c0b5d;margin-bottom:14px}
.card i{display:block;height:9px;margin:16px 0;border-radius:5px;background:#e3ddf0}
.card i:nth-child(2){width:70%}
.card i:nth-child(3){width:85%}
.sticky{background:#ebe6ff;font:700 36px/46px 'Caveat',cursive;color:#1c0b5d;padding:40px 26px}
#ball{position:absolute;left:914px;top:668px;width:92px;height:92px;transform-origin:50% 100%;border-radius:50%;background:radial-gradient(circle at 36% 30%,#ff9cc9 0%,#ff5aa5 28%,#fb2d89 52%,#e01c76 76%,#c41264 100%);}
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080">
  <div id="stage" class="clip" data-start="0" data-duration="3">
    <div id="c1" class="card"><b>YOUR VIDEO</b><i></i><i></i><i></i><i></i></div>
    <div id="c2" class="card"><b>A TEMPLATE</b><i></i><i></i><i></i></div>
    <div id="c3" class="card sticky">"bigger,<br />slower"</div>
    <div id="c4" class="card"><b>YOUR OWN</b><i></i><i></i><i></i></div>
    <div id="ball"></div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
// The hero: anticipation, then the push that throws the cards out
tl.to("#ball", { scaleX: 1.26, scaleY: 0.76, duration: 0.12, ease: "power2.in" }, 0.38);
tl.to("#ball", { scaleX: 0.65, scaleY: 1.3, duration: 0.03, ease: "none" }, 0.5);
tl.to("#ball", { scaleX: 1, scaleY: 1, duration: 0.45, ease: "elastic.out(1, 0.4)" }, 0.53);
// [selector, final centre x, y, resting tilt, starting spin, start]
const CARDS = [["#c1", 436, 347, -6.7, -68, 0.5], ["#c2", 1474, 342, 4.2, 47, 0.6], ["#c3", 1460, 740, -3, 56, 0.67], ["#c4", 447, 748, 5.6, -40, 0.77]];
for (const [sel, cx, cy, rot, spin, t0] of CARDS) {
  tl.fromTo(sel, { x: 960 - 172, y: 714 - 137, rotation: spin, scale: 0.4 },
    { x: cx - 172, y: cy - 137, rotation: rot, scale: 1, duration: 0.3, ease: "power3.out" }, t0);
  tl.fromTo(sel, { opacity: 0 }, { opacity: 1, duration: 0.08, ease: "none" }, t0);
  tl.to(sel, { y: cy - 137 - 6, duration: 1.7, ease: "none" }, t0 + 0.32);
}
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 من الفيديو

انتقال

تحول من الفاتح إلى الداكن حيث تبتلع نواة متوهجة البطاقات

قطع حاد يقلب مشهد الورق إلى حبر عميق (شعاعي من #1c0b5d إلى #0d0b1e، وشبكة نقاط 36 px بلون لافندر 22%) مع إعادة رسم البطاقات نفسها داكنة حول كرة في المركز وتوهج وردي ناعم. تنتفخ الكرة إلى 1.22 في 0.17 s؛ ثم تميل كل بطاقة إلى الداخل (أقرب بنسبة 6%، مع دوران صغير، sine.inOut) وتغوص في الكرة في نحو 0.25 s مع power3.in وهي تدور 60-70 درجة إضافية وتتقلص إلى 12%. كل اصطدام يضغط الكرة (1.48 x 1.09، وتعود في 0.09 s)، ويبني حولها هالة وردية أكثر سطوعاً، ويقذف 18 شرارة قصيرة بالوردي والبرتقالي والأبيض بعيداً عن الجهة التي جاءت منها البطاقة.

متى تُستخدم إظهار نظام يمتص كل شيء: مدخلات تُمتص في نواة واحدة على إيقاع الانتقال من الفاتح إلى الداكن.

عرض الكود

<!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=Inter:wght@600&family=Caveat:wght@700&display=block");
#root{position:relative;width:100%;height:100%;overflow:hidden}
#stage{position:absolute;inset:0}
.layer{position:absolute;left:0;top:0;width:1920px;height:1080px}
#root{background:radial-gradient(ellipse farthest-corner at 50% 50%,#1c0b5d 0%,#190b52 30%,#130a3d 58%,#0d0b1e 100%);}
.dots{background-image:radial-gradient(circle at center,rgba(240,237,255,.22) 0,rgba(240,237,255,.22) 1.1px,transparent 1.7px);background-size:36px 36px}
#glow{position:absolute;left:579px;top:89px;width:760px;height:760px;border-radius:50%;background:radial-gradient(circle,rgba(251,45,137,.3) 0%,rgba(251,45,137,.16) 18%,rgba(251,45,137,.06) 40%,rgba(251,45,137,0) 68%)}
#halo{position:absolute;left:629px;top:139px;width:660px;height:660px;border-radius:50%;opacity:0;background:radial-gradient(circle,rgba(255,130,190,.62) 0%,rgba(251,45,137,.36) 20%,rgba(251,45,137,.14) 42%,rgba(251,45,137,0) 66%)}
.card{position:absolute;left:0;top:0;width:300px;height:220px;padding:22px;background:#0d0b1e;border-radius:4px;box-shadow:0 0 0 1px rgba(255,255,255,.05),0 10px 26px rgba(0,0,0,.55)}
.card b{display:block;font:600 17px/1 'Inter',sans-serif;letter-spacing:.07em;color:#fff;padding-bottom:12px;border-bottom:2px solid #f0edff;margin-bottom:14px}
.card i{display:block;height:9px;margin:16px 0;border-radius:5px;background:#2e2852}
.sticky{background:#2a1a5e;font:700 36px/46px 'Caveat',cursive;color:#f0edff;padding:40px 26px}
.spark{position:absolute;left:0;top:0;width:16px;height:2.5px;border-radius:2px;opacity:0;transform-origin:0 50%}
#ball{position:absolute;left:913px;top:423px;width:92px;height:92px;border-radius:50%;background:radial-gradient(circle at 36% 30%,#ff9cc9 0%,#ff5aa5 28%,#fb2d89 52%,#e01c76 76%,#c41264 100%);}
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080">
  <div id="stage" class="clip" data-start="0" data-duration="3">
    <div class="layer dots"></div>
    <div id="glow"></div>
    <div id="halo"></div>
    <div id="d1" class="card"><b>YOUR VIDEO</b><i></i><i></i><i></i></div>
    <div id="d2" class="card"><b>A TEMPLATE</b><i></i><i></i></div>
    <div id="d3" class="card"><b>YOUR OWN</b><i></i><i></i><i></i></div>
    <div id="d4" class="card sticky">"slower"</div>
    <div id="sparks" class="layer"></div>
    <div id="ball"></div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const CX = 959, CY = 469;
let seed = 7;
const rnd = () => { seed = (seed * 16807) % 2147483647; return (seed - 1) / 2147483646; };
tl.fromTo("#ball", { scale: 1 }, { scale: 1.22, duration: 0.17, ease: "power2.out" }, 0.05);
// [selector, centre x, y, tilt, start of the dive, impact, extra spin]
const CARDS = [["#d1", 458, 365, -6.7, 0.32, 0.6, 70], ["#d2", 1452, 362, 4.2, 0.47, 0.73, -60], ["#d3", 1445, 748, -3, 0.62, 0.87, 55], ["#d4", 467, 747, 5.6, 0.76, 1.0, -65]];
for (const [sel, cx, cy, r, s0, hit, spin] of CARDS) {
  tl.set(sel, { x: cx - 172, y: cy - 132, rotation: r }, 0.01);
  tl.to(sel, { x: cx - 172 + (CX - cx) * 0.06, y: cy - 132 + (CY - cy) * 0.06, rotation: r + spin * 0.15, duration: s0, ease: "sine.inOut" }, 0.02);
  tl.to(sel, { x: CX - 172, y: CY - 132, rotation: r + spin, scale: 0.12, duration: hit - s0, ease: "power3.in" }, s0);
  tl.to(sel, { opacity: 0, duration: 0.03, ease: "none" }, hit - 0.03);
  tl.to("#halo", { opacity: Math.min(1, 0.35 + CARDS.findIndex((c) => c[0] === sel) * 0.22), duration: 0.12, ease: "power2.out" }, hit);   // the core glows brighter with every card
  tl.to("#ball", { scaleX: 1.48, scaleY: 1.09, duration: 0.04, ease: "power2.out" }, hit);
  tl.to("#ball", { scaleX: 1.22, scaleY: 1.22, duration: 0.09, ease: "back.out(2)" }, hit + 0.04);
  const away = Math.atan2(cy - CY, cx - CX) + Math.PI;
  for (let k = 0; k < 18; k++) {
    const s = document.createElement("div");
    s.className = "spark"; s.style.background = ["#ff7ab6", "#ffffff", "#fe9117", "#fb2d89"][k % 4];
    document.getElementById("sparks").appendChild(s);
    const a = away + (rnd() - 0.5) * 2.4, r0 = 50 + rnd() * 10, r1 = 95 + rnd() * 70;
    tl.fromTo(s, { x: CX + Math.cos(a) * r0, y: CY + Math.sin(a) * r0, rotation: (a * 180) / Math.PI, scaleX: (10 + rnd() * 16) / 16, opacity: 1 },
      { x: CX + Math.cos(a) * r1, y: CY + Math.sin(a) * r1, scaleX: 0.3, opacity: 0, duration: 0.24 + rnd() * 0.1, ease: "power2.out", immediateRender: false }, hit);
  }
}
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:06 من الفيديو

الطباعة

سقوط الأحرف مع بثق الصدى

أحرف كبيرة ضخمة ضيقة (Anton، 223 px، سطران في الوسط) تسقط حرفاً حرفاً بفاصل 0.024 s. كل حرف عبارة عن ثلاث نسخ متراكبة: طبقة وردية بعيدة (#fb2d89) مع text-shadow بسمك 6 px يغمق تدريجياً، وطبقة برتقالية، والوجه الأبيض. تسقط الثلاث من فوق الإطار بميل عشوائي (+-13 درجة) في 0.15 s، power2.in، لكن النسخ الملونة تتأخر 0.03 و0.06 s وتهبط بإزاحة 7 px و15 px نحو الأسفل واليمين، فيستقر أثر الحركة على هيئة بثق ثلاثي الأبعاد. عند الهبوط ترتد كل طبقة 36 px (0.045 s، power2.out) ثم تسقط ثانية (0.05 s، power2.in).

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

عرض الكود

<!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=Anton&display=block");
#root{position:relative;width:100%;height:100%;overflow:hidden}
#stage{position:absolute;inset:0}
.layer{position:absolute;left:0;top:0;width:1920px;height:1080px}
#root{background:radial-gradient(ellipse farthest-corner at 50% 50%,#1c0b5d 0%,#190b52 30%,#130a3d 58%,#0d0b1e 100%);}
#type{position:absolute;left:0;right:0;top:160px;text-align:center;font:400 223px/217px 'Anton',sans-serif}
.line{display:block;white-space:nowrap}
.L{display:inline-block;position:relative}
.L .g,.L .c{position:absolute;left:0;top:0}
.L .g{color:#fb2d89;text-shadow:1px 1px 0 #f02a83,2px 2px 0 #e3277c,3px 3px 0 #d42474,4px 4px 0 #c4216b,5px 5px 0 #b31e62,6px 6px 0 #a01b58}
.L .c{color:#fe9117}
.L .f{position:relative;color:#faf9ff;display:inline-block}
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080">
  <div id="stage" class="clip" data-start="0" data-duration="3">
    <div id="type"><div class="line">SAY IT</div><div class="line">SEE IT</div></div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
let seed = 3;
const rnd = () => { seed = (seed * 16807) % 2147483647; return (seed - 1) / 2147483646; };
// Split each line into letters, each letter into far layer, near layer and face
document.querySelectorAll(".line").forEach((line) => {
  line.innerHTML = [...line.textContent].map((ch) => ch === " " ? '<span class="L">&nbsp;</span>' : `<span class="L"><span class="g">${ch}</span><span class="c">${ch}</span><span class="f">${ch}</span></span>`).join("");
});
const letters = [...document.querySelectorAll(".L")].filter((l) => l.children.length);
letters.forEach((L, k) => {
  const land = 0.5 + k * 0.024, r0 = (rnd() - 0.5) * 26;
  const drop = (node, lag, off) => {
    tl.fromTo(node, { x: off * 0.3, y: -900 + off, rotation: r0 }, { x: off, y: off, rotation: 0, duration: 0.15, ease: "power2.in" }, land - 0.15 + lag);
    tl.to(node, { y: off - 36, duration: 0.045, ease: "power2.out" }, land + lag);
    tl.to(node, { y: off, duration: 0.05, ease: "power2.in" }, land + lag + 0.045);
  };
  const [g, c, f] = L.children;
  drop(g, 0.06, 15); drop(c, 0.03, 7); drop(f, 0, 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:10 من الفيديو

بيانات

خط قديم مشطوب ومنحنى جديد يركبه البطل

رسم بياني مرسوم باليد بخطوط فاتحة: ترسم المحاور من نقطة الأصل (0.2 s لكل منها، power2.out)، وتتدحرج الكرة على خط مسطح تاركة دوائر مخططة كل 0.05 s، وتسمّي ملاحظة ماركر الخط المسطح ثم تُشطب (0.07 s)، ويتحول الخط المسطح إلى موجة برتقالية سريعة (0.15 s، linear). ثم يُرسم منحنى لوجستي وردي بواسطة stroke-dashoffset في 0.55 s مع sine.inOut بينما تركب الكرة طرفه بحسب طول القوس، محاطة بحلقة كل 0.05 s، ويخفت الخط القديم والموجة والملاحظة إلى 42%. وتختم القوس المعقوف وملاحظة مكتوبة بخط اليد 'done' مع علامة صح المشهد.

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

عرض الكود

<!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=Caveat:wght@700&display=block");
#root{position:relative;width:100%;height:100%;overflow:hidden}
#stage{position:absolute;inset:0}
.layer{position:absolute;left:0;top:0;width:1920px;height:1080px}
#root{background:radial-gradient(ellipse farthest-corner at 50% 50%,#1c0b5d 0%,#190b52 30%,#130a3d 58%,#0d0b1e 100%);}
.s{fill:none;stroke-linecap:round;stroke-linejoin:round}
.hand{position:absolute;left:0;top:0;font:700 46px/1 'Caveat',cursive;white-space:nowrap;clip-path:inset(-30% 106% -40% -6%)}
#ball{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 36% 30%,#ff9cc9 0%,#ff5aa5 28%,#fb2d89 52%,#e01c76 76%,#c41264 100%);}
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1920" data-height="1080">
  <div id="stage" class="clip" data-start="0" data-duration="4">
    <svg class="layer" viewBox="0 0 1920 1080">
      <path id="yax" class="s" stroke="#f0edff" stroke-width="3" d="M469 830 V234 M457 247 L469 233 L481 247" />
      <path id="xax" class="s" stroke="#f0edff" stroke-width="3" d="M469 830 H1568 M1554 818 L1569 830 L1554 842" />
      <path id="flat" class="s" stroke="#e9e4f2" stroke-width="2.4" d="M540 700 H1421" />
      <g id="rolls"></g>
      <path id="wave" class="s" stroke="#fe9117" stroke-width="3" d="" />
      <path id="strike" class="s" stroke="#fe9117" stroke-width="2.8" d="M1018 622 C1100 618 1190 614 1282 615" />
      <g id="rings"></g>
      <path id="curve" class="s" stroke="#fb2d89" stroke-width="5.5" d="" />
      <path id="check" class="s" stroke="#ffffff" stroke-width="3.4" d="M1716 300 C1722 306 1728 314 1733 322 C1740 302 1748 288 1761 274" />
    </svg>
    <div id="old" class="hand" style="color:#fe9117">"the old way"</div>
    <div id="done" class="hand" style="color:#ffffff;font-size:52px">"done"</div>
    <div id="ball"></div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
// Strokes draw on in real pixels: each path's dash is its own length
const toDraw = (sel) => { const p = document.querySelector(sel); const L = Math.ceil(p.getTotalLength()) + 2; p.setAttribute("stroke-dasharray", L + " " + L); p.setAttribute("stroke-dashoffset", L); return L; };
const NS = "http://www.w3.org/2000/svg", F = 1 / 60;
const ring = (g, x, y, color, at) => {
  const c = document.createElementNS(NS, "circle");
  c.setAttribute("cx", x); c.setAttribute("cy", y); c.setAttribute("r", "19.5"); c.setAttribute("fill", "none"); c.setAttribute("stroke", color); c.setAttribute("stroke-width", "1.3"); c.setAttribute("opacity", "0");
  document.getElementById(g).appendChild(c); tl.set(c, { opacity: 0.45 }, at);
};
const write = (sel, x, y, at, step) => { tl.set(sel, { x, y }, 0.01); tl.fromTo(sel, { clipPath: "inset(-30% 106% -40% -6%)" }, { clipPath: "inset(-30% -8% -40% -6%)", duration: document.querySelector(sel).textContent.length * step, ease: "none" }, at); };
toDraw("#yax"); tl.to("#yax", { strokeDashoffset: 0, duration: 0.2, ease: "power2.out" }, 0.1);
toDraw("#xax"); tl.to("#xax", { strokeDashoffset: 0, duration: 0.2, ease: "power2.out" }, 0.23);
// the ball rolls the flat line at a constant 2200 px/s, a ring every 0.05 s
tl.set("#ball", { x: 520, y: 680 }, 0.4);
tl.to("#ball", { x: 1399, duration: 0.4, ease: "none" }, 0.45);
toDraw("#flat"); tl.to("#flat", { strokeDashoffset: 0, duration: 0.4, ease: "none" }, 0.45);
for (let s = 0.05; s < 0.4; s += 0.05) ring("rolls", 540 + 2200 * s, 700, "#c9c3e6", 0.45 + s + 0.03);
write("#old", 1030, 592, 0.65, 0.013);
toDraw("#strike"); tl.to("#strike", { strokeDashoffset: 0, duration: 0.07, ease: "power1.in" }, 1.0);
let wd = "M575 700";
for (let x = 575; x <= 1395; x += 6) wd += ` L${x} ${(700 + 22 * Math.sin(((x - 575) / 110) * Math.PI * 2 - Math.PI / 2)).toFixed(1)}`;
document.getElementById("wave").setAttribute("d", wd);
toDraw("#wave"); tl.to("#wave", { strokeDashoffset: 0, duration: 0.15, ease: "none" }, 1.06);
tl.to("#ball", { x: 520, y: 680, duration: 0.25, ease: "power1.inOut" }, 1.15);
// the curve: logistic from the old line up to the result; the ball rides its tip by arc length
const curveY = (x) => 700 - 370 / (1 + Math.exp(-(x - 975) / 80));
const pts = [[540, 700]];
for (let x = 544; x <= 1420; x += 4) pts.push([x, curveY(x)]);
document.getElementById("curve").setAttribute("d", "M" + pts.map((p) => p[0] + " " + p[1].toFixed(1)).join(" L"));
const cum = [0];
for (let i = 1; i < pts.length; i++) cum.push(cum[i - 1] + Math.hypot(pts[i][0] - pts[i - 1][0], pts[i][1] - pts[i - 1][1]));
const atLen = (s) => { const i = Math.max(1, cum.findIndex((c) => c >= s)); const u = (s - cum[i - 1]) / (cum[i] - cum[i - 1] || 1); return [pts[i - 1][0] + (pts[i][0] - pts[i - 1][0]) * u, pts[i - 1][1] + (pts[i][1] - pts[i - 1][1]) * u]; };
const C0 = 1.45, STEPS = 33, ease = gsap.parseEase("sine.inOut");
toDraw("#curve"); tl.to("#curve", { strokeDashoffset: 0, duration: STEPS * F, ease: "sine.inOut" }, C0);
const kf = [];
for (let j = 1; j <= STEPS; j++) {
  const p = atLen(ease(j / STEPS) * cum[cum.length - 1]);
  kf.push({ x: p[0] - 20, y: p[1] - 20, duration: F, ease: "none" });
  if (j % 3 === 0 && j < STEPS) ring("rings", p[0], p[1], "#fb2d89", C0 + j * F + 0.03);
}
tl.to("#ball", { keyframes: kf }, C0);
tl.to(["#wave", "#old", "#strike"], { opacity: 0.42, duration: 0.15 }, C0 + 0.12);
tl.to("#flat", { stroke: "#5a5385", duration: 0.15 }, C0 + 0.12);
write("#done", 1465, 262, 2.05, 0.03);
toDraw("#check"); tl.to("#check", { strokeDashoffset: 0, duration: 0.1, ease: "power1.in" }, 2.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>

معاينة تقنية «عودة بكتل glitch من الظلام إلى الورق» — عند 0:11 من الفيديو

انتقال

عودة بكتل glitch من الظلام إلى الورق

طريق العودة من الفصل المظلم: يُقطع الإطار إلى تسعة أشرطة بارتفاع 120 px، وكل شريط إلى كتل بعرض عشوائي (60-580 px، بذرة ثابتة)، وتتحول كل كتلة إلى لون الورق في إطارها الخاص بين 0.17 و0.44 s، ومعظمها في المنتصف (توزيع على شكل جيب، فترتفع نسبة الورق 7 و17 و32 و48 و65 و80 و92% إطاراً بعد إطار). عند 0.44 s يتولى مشهد الورق الكامل، وتبقى ثماني كتل داكنة (بارتفاع 60 أو 120 px) ظهرت عند 0.37 s حتى 0.40-0.46 s، فيتعثر التحول كإشارة سيئة قبل أن يستقر.

متى تُستخدم تغيير مشهد حاد لكنه مرح بين مظهرين، على الإيقاع، دون أي تلاشٍ.

عرض الكود

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>عودة بكتل glitch من الظلام إلى الورق</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=Inter:wght@700&display=block");
#root{position:relative;width:100%;height:100%;overflow:hidden}
#stage{position:absolute;inset:0}
.layer{position:absolute;left:0;top:0;width:1920px;height:1080px}
#darkScene{background:radial-gradient(ellipse farthest-corner at 50% 50%,#1c0b5d 0%,#190b52 30%,#130a3d 58%,#0d0b1e 100%);}
#paper{opacity:0;background:radial-gradient(ellipse farthest-corner at 50% 48%,#faf9ff 0%,#f5f3fd 42%,#ece9f6 62%,#dedaed 100%);}
.label{position:absolute;left:0;right:0;top:470px;text-align:center;font:700 110px/1 'Inter',sans-serif}
.blk{position:absolute;left:0;top:0;height:120px;opacity:0}
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2" data-width="1920" data-height="1080">
  <div id="stage" class="clip" data-start="0" data-duration="2">
    <div id="darkScene" class="layer"><div class="label" style="color:#f0edff">"dark act"</div></div>
    <div id="blocks" class="layer"></div>
    <div id="paper" class="layer"><div class="label" style="color:#1c0b5d">"paper act"</div></div>
    <div id="linger" class="layer"></div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
let seed = 11;
const rnd = () => { seed = (seed * 16807) % 2147483647; return (seed - 1) / 2147483646; };
const T0 = 0.5; // when the switch starts
for (let row = 0; row < 9; row++) {
  for (let x = 0; x < 1920;) {
    const w = Math.min(1920 - x, 60 + Math.round(rnd() * 520));
    const b = document.createElement("div");
    b.className = "blk"; b.style.width = w + "px"; b.style.background = "#f7f5ff";
    document.getElementById("blocks").appendChild(b);
    tl.set(b, { x, y: row * 120 }, 0.01);
    tl.set(b, { opacity: 1 }, T0 + 0.17 + 0.27 * Math.acos(1 - 2 * rnd()) / Math.PI);   // most blocks flip mid-way
    x += w;
  }
}
tl.set("#paper", { opacity: 1 }, T0 + 0.44);
[[0, 360, 580], [410, 330, 70], [210, 390, 480], [0, 450, 120], [1840, 0, 80], [480, 840, 400], [765, 960, 780], [915, 840, 180]].forEach(([x, y, w], i) => {
  const b = document.createElement("div");
  b.className = "blk"; b.style.width = w + "px"; b.style.height = (i % 3 === 0 ? 120 : 60) + "px"; b.style.background = "#150b45";
  document.getElementById("linger").appendChild(b);
  tl.set(b, { x, y }, 0.01);
  tl.set(b, { opacity: 1 }, T0 + 0.37);
  tl.set(b, { opacity: 0 }, T0 + 0.4 + (i % 4) * 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>

معاينة تقنية «الكرة ترسم قوساً إلى حلقة مرسومة وتنمو إلى lockup الشعار» — عند 0:12 من الفيديو

التخطيط

الكرة ترسم قوساً إلى حلقة مرسومة وتنمو إلى lockup الشعار

تطفو الكرة عبر الإطار على قطع مكافئ بطيء (نحو 1.1 s، جاذبية 1340 px/s²)، وتكبر من 40 إلى 60 px وكأنها تقترب، وتتمدد على امتداد سقوطها، مع مخطط خلفها كل إطارين. تُرسم حلقة برتقالية مرسومة باليد بعرض نحو 130 px عند موضع الهبوط (0.2 s)، فتسقط الكرة فيها وتنضغط، ثم يخرج الرمز منها بتكبير من 18% مع back.out(2.2) في 0.16 s، ومركزه بمستوى ارتفاع الأحرف الكبيرة في العلامة النصية، والـ lockup بأكمله في منتصف الإطار. تنزلق أحرف العلامة النصية من 70 px إلى اليسار مع تمويه 8 px وتتحول من الرمادي إلى لون الحبر، بفاصل 0.033 s، power3.out؛ ويرتفع الشعار الكلامي كلمة كلمة (6 px، 0.25 s)، ويظهر العنوان تدريجياً ويُرسم بيضاوي برتقالي ثانٍ حوله.

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

عرض الكود

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>الكرة ترسم قوساً إلى حلقة مرسومة وتنمو إلى lockup الشعار</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=Inter:wght@700&family=EB+Garamond&family=IBM+Plex+Mono&display=block");
#root{position:relative;width:100%;height:100%;overflow:hidden}
#stage{position:absolute;inset:0}
.layer{position:absolute;left:0;top:0;width:1920px;height:1080px}
#root{background:radial-gradient(ellipse farthest-corner at 50% 48%,#faf9ff 0%,#f5f3fd 42%,#ece9f6 62%,#dedaed 100%);}
.s{fill:none;stroke-linecap:round;stroke-linejoin:round}
#mark{opacity:0}
#ball{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 36% 30%,#ff9cc9 0%,#ff5aa5 28%,#fb2d89 52%,#e01c76 76%,#c41264 100%);}
#word{position:absolute;left:592px;top:310px;font:700 190px/1 'Inter',sans-serif;letter-spacing:-1.6px;color:#1c0b5d;white-space:nowrap}
#word span{display:inline-block}
#tag{position:absolute;left:0;right:0;top:612px;text-align:center;font:400 58px/1 'EB Garamond',serif;color:#6b6385}
#tag span{display:inline-block}
#url{position:absolute;left:0;right:0;top:716px;text-align:center;font:400 37.5px/1 'IBM Plex Mono',monospace;color:#1c0b5d;opacity:0}
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1920" data-height="1080">
  <div id="stage" class="clip" data-start="0" data-duration="4">
    <svg class="layer" viewBox="0 0 1920 1080"><g id="trail"></g>
      <path id="ring" class="s" stroke="#fe9117" stroke-width="2.6" d="M370.7 383.8 L373.8 375.7 L377.8 367.8 L382.8 360.5 L388.9 353.9 L396.1 348.3 L404.2 344.1 L412.9 341.3 L422.0 340.2 L431.0 340.6 L439.8 342.4 L448.1 345.4 L455.8 349.4 L462.9 354.1 L469.5 359.5 L475.6 365.5 L481.0 372.0 L485.8 379.3 L489.6 387.2 L492.3 395.6 L493.6 404.5 L493.3 413.5 L491.4 422.3 L488.0 430.6 L483.2 438.2 L477.4 444.8 L470.7 450.4 L463.5 455.0 L456.0 458.8 L448.2 461.8 L440.1 464.1 L431.9 465.6 L423.4 466.1 L414.7 465.6 L406.2 463.7 L398.0 460.5 L390.4 455.9 L383.7 450.0 L378.3 443.0 L374.1 435.3 L371.4 427.0 L369.8 418.6 L369.3 410.2 L369.8 401.9 L371.0 393.7 L373.0 385.7 L375.8 377.9 L379.5 370.4 L384.2 363.3" />
      <path id="oval" class="s" stroke="#fe9117" stroke-width="3" d="M910 699 C828 700 769 712 770 734 C771 758 852 773 962 773 C1070 773 1153 760 1153 735 C1153 712 1079 697 978 696 C936 696 895 698 864 703" />
    </svg>
    <svg id="mark" class="layer" viewBox="0 0 1920 1080"><g transform="translate(314 290) scale(2.3)"><rect width="100" height="100" rx="24" fill="#1c0b5d" /><path d="M40 30 L74 50 L40 70 Z" fill="#fb2d89" stroke="#fb2d89" stroke-width="6" stroke-linejoin="round" /></g></svg>
    <div id="ball"></div>
    <div id="word">Wordmark</div>
    <div id="tag">"Your one-line promise goes here."</div>
    <div id="url">example.app</div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
// Strokes draw on in real pixels: each path's dash is its own length
const toDraw = (sel) => { const p = document.querySelector(sel); const L = Math.ceil(p.getTotalLength()) + 2; p.setAttribute("stroke-dasharray", L + " " + L); p.setAttribute("stroke-dashoffset", L); return L; };
const NS = "http://www.w3.org/2000/svg", F = 1 / 60;
// a slow parabola from the top right to the ring, 66 frames
const N = 66, X0 = 1420, Y0 = 330, X1 = 429, Y1 = 405, PEAK = 140;
const pose = (i) => {
  const u = i / N, x = X0 + (X1 - X0) * u;
  const y = (1 - u) * (1 - u) * Y0 + 2 * (1 - u) * u * (2 * PEAK - (Y0 + Y1) / 2) + u * u * Y1;
  const size = 40 + 20 * Math.min(1, u * 2), stretch = 1 + Math.max(0, u - 0.5) * 0.9;
  return [x, y, size / 40, (size * stretch) / 40];
};
tl.set("#ball", { x: X0 - 20, y: Y0 - 20 }, 0.01);
const kf = [];
for (let i = 1; i <= N; i++) { const p = pose(i); kf.push({ x: p[0] - 20, y: p[1] - 20, scaleX: p[2], scaleY: p[3], duration: F, ease: "none" }); }
kf.push({ scaleX: 2.5, scaleY: 1.55, duration: 2 * F, ease: "none" });
tl.to("#ball", { keyframes: kf }, 0.2);
for (let i = 3; i < N - 3; i += 2) {
  const p = pose(i), c = document.createElementNS(NS, "circle");
  c.setAttribute("cx", p[0]); c.setAttribute("cy", p[1]); c.setAttribute("r", (20 * Math.min(p[2], p[3])).toFixed(1));
  c.setAttribute("fill", "none"); c.setAttribute("stroke", "#a8a1c4"); c.setAttribute("stroke-width", "1.3"); c.setAttribute("opacity", "0");
  document.getElementById("trail").appendChild(c);
  tl.set(c, { opacity: 0.7 }, 0.2 + i * F + 0.05);
}
tl.to("#trail", { opacity: 0, duration: 0.4, ease: "power1.in" }, 1.9);
toDraw("#ring"); tl.to("#ring", { strokeDashoffset: 0, duration: 0.2, ease: "power1.inOut" }, 0.5);
const LAND = 0.2 + N * F + 2 * F;
tl.to("#ring", { opacity: 0, duration: 0.06 }, LAND);
tl.set("#mark", { opacity: 1 }, LAND + 0.01);
tl.fromTo("#mark", { scale: 0.18, transformOrigin: "429px 405px" }, { scale: 1, duration: 0.16, ease: "back.out(2.2)" }, LAND + 0.01);
tl.to("#ball", { opacity: 0, duration: 0.02 }, LAND + 0.04);
const word = document.getElementById("word");
word.innerHTML = [...word.textContent].map((c) => `<span>${c === " " ? "&nbsp;" : c}</span>`).join("");
[...word.children].forEach((s, i) => tl.fromTo(s, { x: -70, opacity: 0, color: "#a39cbd", filter: "blur(8px)" }, { x: 0, opacity: 1, color: "#1c0b5d", filter: "blur(0px)", duration: 0.28, ease: "power3.out" }, LAND + 0.04 + i * 0.033));
const tag = document.getElementById("tag");
tag.innerHTML = tag.textContent.split(" ").map((w) => `<span>${w}</span>`).join(" ");
[...tag.children].forEach((s, i) => tl.fromTo(s, { opacity: 0, y: 6 }, { opacity: 1, y: 0, duration: 0.25, ease: "power2.out" }, LAND + 0.4 + i * 0.06));
tl.to("#url", { opacity: 1, duration: 0.2, ease: "power1.out" }, LAND + 0.8);
toDraw("#oval"); tl.to("#oval", { strokeDashoffset: 0, duration: 0.3, ease: "power1.inOut" }, LAND + 1.05);
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 MotionERQ

شرح المنتج على شكل وصفة مشروب مرسومة يدويًا

<direction> اصنع موشن جرافيك مربعًا مدته 30 ثانية (1080x1080، 30 إطارًا في الثانية) بموسيقى لاونج خفيفة في الخلفية، ومؤثرات صوتية مرحة مع كل حركة، وبدون صوت تعليق. إنه فيديو توضيحي مرسوم يدويًا على شكل «وصفة» لمنتجي: تُعرض خطواته كمشروب يُحضَّر خطوة بخطوة داخل كأس. هو مشهد مرسوم متواصل واحد بلا قطعات، وكل شيء يتغير في مكانه. الشكل رسم ثنائي الأبعاد مسطح على صفحة بلون لافندر أبيض باهت، بخطوط خارجية بلون حبر داكن «تغلي» مثل الرسوم المتحركة المرسومة يدويًا، وحروف كبيرة كرتونية عريضة بأسلوب الملصقات. استبدل كل كلمة بين علامتي اقتباس أدناه بكلمات منتجي، مع إبقاء كل كلمة بطول مماثل تقريبًا ليبقى التصميم متماسكًا. تجنب القطعات وحركات الكاميرا والتظليل أو التدرجات خارج التعبئة المسطحة، وتجنب التعليق الصوتي. </direction> <structure> الإيقاع هادئ ومتساوٍ. المقدمة سريعة ومرتدة، وكل سكب يستغرق 5 ثوانٍ ثابتة، والتحريك والقشرة الملتوية أسرع قليلًا، والخاتمة تستمر 3 ثوانٍ. كل تغيير للبطاقة يقع على نبضة من الموسيقى بإيقاع 120 نبضة في الدقيقة: 6.0 و11.0 و16.0 و21.0 و24.5 و27.0 ثانية. - 0–2.5 ث، العنوان: «YOUR BRAND» (استبدله باسم علامتك) يُوضع كبيرًا في المنتصف بعرض نحو 920 بكسل. ابتداءً من 0.15 ث تُختم حروفه واحدًا تلو الآخر في أماكنها خلال 0.83 ث. يبدأ كل حرف بحجم 10%، وأخفض بمقدار 22 بكسل ومائلًا بزاوية ±8–14°، ويهبط في 0.36 ث مع تجاوز ناعم (back.out 1.7). عند 1.4 ث يظهر سطر صغير، «what your product is»، تدريجيًا تحته، ويختفي عند 2.45 ث. - 2.5–3.6 ث، التسليم: يرتفع العنوان 365 بكسل ويصغر إلى 58% في 0.8 ث (power3.inOut) ليصبح الترويسة. في الأثناء، ابتداءً من 2.87 ث، يرسم الكأس نفسه كرسم تخطيطي بالقلم: الجدار الأيسر، ثم الأيمن، ثم قطع حافة الكأس، ثم منحنى القاع، في نحو 0.4 ث إجمالًا. بعد ذلك يظهر تعبئته تدريجيًا (0.28 ث)، ويظهر العنوان الفرعي للترويسة تدريجيًا تحت العنوان. - 3.6–6.0 ث، الخطوة 1: تدخل البطاقة بميل 4° وظهور تدريجي سريع (0.15 ث)، وتُختم قيمتها الكبيرة من تلقاء نفسها. تقرأ البطاقة «STEP 01» و«PICK» و«TEMPLATE» و«vertical, horizontal or square». يظهر المتتبع تدريجيًا مع أول دائرة نشطة. تسقط ثلاث مكعبات ثلج من أعلى الإطار بفاصل 0.35 ث. يسقط كل منها بالجاذبية (power2.in، نحو 0.3 ث)، ويرتد نحو 140 بكسل، ويقفز 20 بكسل ثم يستقر: اثنان في القاع وواحد في الأعلى. تومض ثلاث خطوط شرارة صغيرة فوق كل مكعب أثناء مروره بحافة الكأس. كل هبوط يملأ ثلث شريط تقدم البطاقة ويضيف كلمة واحدة من الحالة «three short words». - 6.0–21.0 ث، الخطوات 2–4: ثلاث عمليات سكب مدة كل منها 5 ثوانٍ، وكلها على النمط نفسه. تقرأ البطاقات «STEP 02 / SAY / KINETIC TYPE / tell the chat what to show»، ثم «STEP 02 / SAY / SHAPES / the agent builds the animation»، ثم «STEP 02 / SAY / SOUND / music and sound effects to the rhythm». تنزلق زجاجة من اليسار (0.23 ث) وتقف. ثم تميل إلى 115° على قوس صغير، قليلًا إلى الأعلى ثم إلى الأسفل نحو نقطة السكب (0.37 ث)، وتسكب تيارًا منحنيًا في الكأس. الزجاجات لافندر، ثم وردية، ثم بلون الحبر الداكن. على كل منها ملصق أبيض عليه شعاري كأيقونة صغيرة مربعة بحواف مدورة، وكلمة («TYPE» و«SHAPES» و«SOUND») وسطر صغير («kinetic» و«3D effects» و«music»). تظهر علامة هدف رمادية («01» ثم «02» ثم «03») بجانب الكأس مع خط متقطع يعبرها. يرتفع المشروب إلى تلك العلامة خلال 2 ث (sine.inOut)، ويطفو الثلج معه، وتقفز قطرات الرذاذ حيث يسقط التيار. يبدأ المشروب أبيض صافيًا، ثم يتحول إلى الوردي مع السكب الثاني، ثم إلى أرجواني داكن (وردي ممزوج بحبر داكن) مع الثالث، ويمتزج كل لون خلال نحو 1.3 ث. يمتلئ شريط التقدم وتُكتب عبارة «live preview» من تلقاء نفسها في عشر خطوات. ثم تتحول العلامة إلى الوردي، ويترك أعلى التيار ويسقط، وتميل الزجاجة عائدة وتنزلق خارجة. - 21.0–24.5 ث، الخطوة 5: تقرأ البطاقة «STEP 03 / REFINE / IN WORDS / “bigger”, “slower”, “another colour”». ملعقة بار خفيفة برأس كروي تسقط بتباطؤ سريع. تتأرجح 8° ذهابًا وإيابًا بدورة مدتها 0.8 ث بينما تتزاحم المكعبات وتخفت، ثم ترتفع خارجة. يمتلئ الشريط بخطوات من 4 إطارات بينما تُكتب «live preview». - 24.5–27.0 ث، الخطوة 6: تقرأ البطاقة «STEP 03 / MP4 / EXPORT / download the MP4». تظهر فجأة قشرة برتقال ملتوية فوق الكأس، وتلتف وتنضغط نحو 0.8 ث بينما تسقط قطرات برتقالية. ثم تنزلق إلى الحافة (0.5 ث، power2.inOut) بينما تنتهي كتابة «try it free». - 27.0–30 ث، الخاتمة: تُعاد البطاقة كـ «YOUR TAGLINE / OPEN APP / YOURSITE.COM / pick · describe · refine». تنطلق سبع شرطات قصيرة وردية وبرتقالية حول الكأس (0.16 ث) وتستمر في «التنفس» بلطف. يكبر الكأس 4% خلال 0.6 ث ويثبت حتى النهاية. </structure> <composition> الألوان: - الصفحة: لافندر أبيض باهت (#FAF9FF). - الخطوط الخارجية: حبر داكن (#1C0B5D)، نحو 3 بكسل بأطراف مستديرة. - الكأس: لافندر (#F0EDFF) مع قاعدة بصبغة بنفسجية. - مكعبات الثلج: مربعات مدورة، بيضاء بنسبة 40% فوق ما خلفها، مع خط في الزاوية الداخلية. - البطاقات: بيضاء بظل لافندر ناعم مزاح. - البرتقالي (#FE9117): الزينة ونصف شرطات الخاتمة. الخطوط: - خط العرض: حروف كبيرة كرتونية عريضة (شيء مثل Lalezar) بأسلوب الملصقات. الوجه وردي (#FB2D89)، مع خط خارجي بلون الحبر الداكن خلفه وبروز بنفسجي (#7C6CF2) مزاح نحو الأسفل واليسار. - النص الصغير: خط يدوي طباعي ودود (شيء مثل Playpen Sans)، رمادي أرجواني خافت (#6B6385) للنص الأساسي ووردي للتسميات. التخطيط بعد المقدمة: - الترويسة: أعلى المنتصف، بعرض نحو 540 بكسل، مع سطر صغير تحتها: «first benefit · second benefit · third benefit». - الكأس: كأس قصير مخروطي يسار المنتصف، بعرض نحو 290 بكسل، الحافة عند y 457 والقاعدة عند y 797. - بطاقة المعلومات: على اليمين، 390x248 بكسل بزوايا 14 بكسل وإطار بلون الحبر الداكن. من الأعلى إلى الأسفل تضم عنوانًا تمهيديًا ورديًا صغيرًا، والقيمة الكبيرة بحروف الملصقات، وعنوانًا بحروف كبيرة داكنة، وسطرًا مكتوبًا بخط اليد، وشريط تقدم على شكل حبة مع كلمة حالة قصيرة على يمينه. - المتتبع: ست خطوات على طول الأسفل. الدوائر بعرض 43 بكسل وتبعد 156 بكسل عن بعضها على سكة رفيعة، مع تسميات صغيرة بحروف كبيرة مصغرة تحتها: «TEMPLATE» و«TYPE» و«SHAPES» و«SOUND» و«REFINE» و«EXPORT». </composition> <techniques> - الخطوط الغالية: يحصل كل خط مرسوم على اهتزاز خفيف بمقدار 1–2 بكسل يتغير إلى اهتزاز جديد كل 4 إطارات، في القطعة كلها، مثل إزاحة اضطراب فوق الخطوط. - إعادة تركيب البطاقة: في أول إطار من كل خطوة، تظهر القيمة الكبيرة الجديدة وحدها لإطار واحد، ثم تعود البطاقة. تُختم القيمة الكبيرة من تلقاء نفسها من حجم 72% مع تجاوز back.out. - الكتابة: تُكتب كلمات الحالة من تلقاء نفسها على خطوات. - المتتبع، الخطوة الحالية: دائرتها بحلقة بلون الحبر الداكن ونقطة وردية وتسمية وردية، و«تتنفس» بين 100% و112% كل ثانية. - المتتبع، الخطوة المنتهية: قبل البطاقة التالية بنحو 0.1 ث، تمتلئ دائرتها بالوردي وتُرسم علامة صح بيضاء في 0.17 ث. تتحول تسميتها إلى لون الحبر الداكن، وتمتلئ السكة إلى الدائرة التالية بالوردي في 0.37 ث. - المتتبع، الخطوات القادمة: تبقى خافتة مع نقطة رمادية صغيرة. </techniques> <music> مقطوعة موسيقية لاونج-بوب دافئة ومريحة بإيقاع 120 نبضة في الدقيقة في مقام كبير: طبول بالفرش، وكونترباص مستدير، وفيبرافون، وأوتار بيتزيكاتو، وطقطقة أصابع، وقليل من الشيكر. اجعلها قليلة الكثافة بلا لحن رئيسي، لتبقى تحت المؤثرات. تبدأ ببضع نوتات منقورة من الفيبرافون والبيتزيكاتو بلا طبول، ويدخل باص ناعم عند 2 ث. الإيقاع الكامل بالفرش مع الباص المتنقل يبدأ تمامًا عند بطاقة السكب الأولى عند 6.0 ث. يبقى ثابتًا خلال عمليات السكب والتحريك والقشرة الملتوية، ويصل إلى ضربة وتر ختامية عند 28.0 ث بينما يستقر الكأس المنتهي، ويتلاشى حتى النهاية. اجعلها 30 ثانية بالضبط، بمزج نحو -14 LUFS وذروة حقيقية تحت -1 dBTP. </music> <sound> بدون صوت تعليق. كل مؤثر يقع على إطاره، واضحًا فوق الموسيقى؛ ولا تحتاج الموسيقى أبدًا إلى أن ترتفع لتفسح له المجال. - العنوان: فرقعة ناعمة لكل حرف، ترتفع قليلًا في النغمة وتتحرك من اليسار إلى اليمين بينما تُبنى الكلمة. - التسليم: صوت اندفاع لطيف تحت ارتفاع العنوان، وخدش قلم خافت لكل خط بينما يرسم الكأس نفسه. - البطاقات: خفقة ورق وضربة خافتة في كل مرة تُوزَّع فيها بطاقة وتُختم كلمتها الكبيرة. - هبوط الثلج: طرقة جافة قصيرة من الثلج على الكأس لكل مكعب، مع اتصالين أو ثلاثة بفارق بضعة ميلي ثوانٍ وضربة منخفضة تحت السقوط. أنعم للارتداد وأصغر للقفزة الأخيرة، وكل ضربة بارزة بوضوح عن الموسيقى. - الزجاجات: صوت اندفاع ناعم عند انزلاق كل زجاجة وعند ميلانها. - عمليات السكب: كل واحدة مسموعة بوضوح ومختلفة. أولًا تيار صافٍ فوّار ومتناثر يطرق الثلج، ثم سكب أكثر امتلاءً بقرقرات سريعة، ثم سكب داكن شرابي بقرقرات بطيئة وعميقة. امنح كل سكب جسمًا في نطاق 1–4 كيلوهرتز حيث يقع التيار وجيب الهواء الرنان في الكأس، ليبدو أعلى بنحو 8 ديسيبل من الثواني المحيطة هناك. اجعلها نقية: في الغالب زجاج رنان وفقاعات، وقليل من الهسهسة. - حول كل سكب: ترتفع نغمة جيب الهواء من سكب إلى آخر مع امتلاء الكأس، وتسقط بضع قطرات أخيرة بعد كل منها. تنخفض الموسيقى نحو 5 ديسيبل تحت كل سكب وتعود بلطف، ويتبع صوت اندفاع الزجاجة وهي تخرج. - المتتبع: رنين تأكيد ناعم من نغمتين كلما أُنجزت خطوة، أعلى قليلًا للأخيرة. - الملعقة: رنة معدنية عند سقوطها، وثلج يطرق الكأس عند كل طرف من تأرجحها، وصوت اندفاع عند خروجها. - القشرة: نقرة عند ظهورها، وثلاث رشات رذاذ ناعمة أثناء التفافها، وطرقة خفيفة عند استقرارها على الحافة. - الخاتمة: رنين ساطع مع انفجار الشرطات، فوق لمعان زجاجي خافت حتى النهاية. - المزج النهائي: نحو -14 LUFS، وذروة حقيقية تحت -1 dBTP. </sound> <references> رسوم متحركة مرسومة يدويًا بخطوط تغلي، وفيديوهات توضيحية مسطحة للتطبيقات بأسلوب الملصقات، ورسوم وصفات الكوكتيل حيث يمثل كل مكوّن ميزة. </references>

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

معاينة الموجّه «الغوص في جدار تطبيقات ثلاثي الأبعاد: عرض منتج في ثلاث خطوات»

Simple MotionTKA

الغوص في جدار تطبيقات ثلاثي الأبعاد: عرض منتج في ثلاث خطوات

<direction> أنشئ عرضًا توضيحيًا أفقيًا لمنتج بمقاس 1280x720 ومدته 31 ثانية، مبنيًا بالكامل على الرسوم المتحركة ومعه صوت. يُعرض كحركة كاميرا واحدة متواصلة بلا قطع ويتكرر بسلاسة: الإطار الأخير يلتقي بالأول. الفكرة: جدار من شاشات التطبيق مائل إلى الخلف في 3D، تغوص الكاميرا في إحدى الشاشات، فتصبح تلك الشاشة نافذة التطبيق، وتعرض ثلاث خطوات مرقمة ما يفعله المنتج قبل بطاقة ختامية بشعاري. المظهر نظيف وعصري: واجهة متجهية مسطحة ترسمها أنت، وعمق ناعم، ومساحة واسعة، وحركة هادئة ودقيقة. تجنب القطع الحادة واللقطات الحقيقية والصور الجاهزة والخلفيات المزدحمة وحركات التسارع المرتدة أو الكرتونية وأي شيء يكسر التكرار. </direction> <structure> البداية، من 0 إلى 4 ث تقريبًا: جدار من شاشات التطبيق مائل إلى الخلف في 3D ينجرف ببطء. يظهر فوقه عنوان في المنتصف مثل "Your ideas, in motion" (استبدله بعنوانك)، ثم يتلاشى بضبابية. الغوص، من 4 إلى 6 ث تقريبًا: تندفع الكاميرا إلى إحدى الشاشات، فتكبر لتصبح نافذة التطبيق وتستقر في جانب من الإطار. الخطوة 01، من 6 إلى 13 ث تقريبًا: رقم خطوة صغير "01" وعنوان مثل "Sketch your idea" (استبدله بعنوانك) ينزلقان للأعلى سطرًا بسطر بجانب النافذة. داخل النافذة، تُرسم ضربة فرشاة على اللوحة. الخطوة 02، من 13 إلى 20 ث تقريبًا: ينزلق النص السابق للأعلى ويخرج، ثم ينزلق "02" وعنوان مثل "Chat to shape it" بالطريقة نفسها. يتغير محتوى النافذة ليتناسب. الخطوة 03، من 20 إلى 26 ث تقريبًا: يدخل "03" وعنوان مثل "Export in one click" بالطريقة نفسها، وتعرض النافذة طرفية تكتب أسطرًا من النص مع مؤشر وامض. البطاقة الختامية، من 26 إلى 31 ث تقريبًا: شعاري و"[your brand]" مع شعار قصير مثل "Make it move" (استبدله بشعارك). ثم تتراجع الكاميرا إلى جدار الشاشات المائل ليطابق الإطار الأخير الأول ويتكرر الفيديو. </structure> <composition> اجعل النافذة كبيرة، بحوالي 60% من عرض الإطار، في أحد الجانبين. ضع عمود النص في الجانب الآخر، محاذيًا لليسار. اجعل رقم الخطوة صغيرًا، بلون التمييز، فوق العنوان. اكتب العناوين بخط سان سيريف نظيف وعريض، في سطرين قصيرين على الأكثر، مع وزن أخف لأي سطر مساند. استخدم شعاري كأيقونة للتطبيق في إطار النافذة وفي منتصف البطاقة الختامية. استخدم ألوانًا حسب الدور من علامتي، مثل خلفية شبه سوداء (#0E0F13)، ونص أبيض مائل للرمادي (#F4F4F6)، ولون تمييز ساطع واحد لأرقام الخطوات والتمييزات وضربة الفرشاة، ورمادي هادئ لإطار النافذة والواجهة الثانوية. أبقِ جدار الشاشات بالألوان نفسها مع تباين أقل ليُقرأ العنوان فوقه. </composition> <techniques> كل شيء يحدث ضمن حركة كاميرا واحدة متواصلة: انجراف بطيء فوق الجدار ثلاثي الأبعاد، المائل إلى الخلف بحوالي 25 درجة، مع تأثير بارالاكس لطيف بين الشاشات. يغادر العنوان بضبابية متزايدة وتلاشٍ خلال حوالي 0.6 ث. الغوص دفعة سلسة ease-in-out نحو شاشة واحدة بينما تكبر وتتسطح لتصبح نافذة التطبيق. تنزلق أسطر العنوان للأعلى بحوالي 30 px مع تلاشٍ، بفارق حوالي 0.1 ث، بتباطؤ ease-out ناعم. ينزلق النص الخارج للأعلى ويتلاشى قبل دخول الخطوة التالية. يتغير محتوى النافذة في مكانه بتلاشيات متقاطعة وانزلاقات قصيرة. تُرسم ضربة الفرشاة تدريجيًا. تكتب الطرفية حرفًا بحرف مع مؤشر وامض. في البطاقة الختامية، يكبر الشعار برفق، ثم تتراجع الكاميرا بسلاسة إلى جدار البداية لتكرار سلس. </techniques> <music> استخدم مقطوعة synthwave هادئة instrumental بإيقاع حوالي 100 BPM، مدتها 31 ثانية بالضبط، مع القطعات والضربات على شبكة الإيقاع. يعزف pad دافئ تحت العنوان. يدخل الإيقاع بدويّ ناعم عندما تغوص الكاميرا في النافذة. ترتفع المقطوعة قليلًا للخطوة 02 وتخف تحت الطرفية. يقود riser إلى البطاقة الختامية، وتنتهي المقطوعة بحيث يكون التكرار إلى البداية سلسًا. استهدف حوالي -14 LUFS مع true peak أقل من -1 dBTP. </music> <sound> أضف صوت whoosh عند الغوص في النافذة، ونقرة UI ناعمة عند هبوط كل سطر من العنوان، وحفيف فرشاة خفيف على الضربة في الخطوة 01، ونقرات لوحة مفاتيح هادئة تحت الكتابة في الطرفية. أضف صدمة لطيفة أو رنينًا عند هبوط الشعار على البطاقة الختامية. أبقِ المؤثرات تحت الموسيقى، بلا تعليق صوتي. </sound> <references> يشبه أنيميشن مصقولًا لإطلاق تطبيق أو جولة تعريفية: كاميرا تحلق فوق شبكة ثلاثية الأبعاد من شاشات الواجهة إلى نافذة منتج نظيفة، مع خطوات ميزات مرقمة، كما في العروض التوضيحية الحديثة لصفحات هبوط البرمجيات. </references>

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

Simple MotionNPX

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

placeholder

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

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

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

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

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

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