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

AR

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

Simple Motion

فيديو ترويجي لصفحة هبوط بانتقالات قائمة على الأجسام

فيديو ترويجي لمنتج مدته 15 ثانية تنبض فيه صفحة هبوط بالحياة ويتحول كل مشهد إلى التالي عبر جسم، وينتهي بالشعار.

تاريخ النشر 10 نوفمبر 2026

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

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

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

الفكرة

اصنع فيديو ترويجيًا بالموشن غرافيك أفقيًا مدته 15 ثانية بدقة 1920x1080 لـ [your brand]، مبنيًا كأن صفحة هبوط تنبض بالحياة. اقطعه على إيقاع مقطوعة إلكترونية بسرعة 128 BPM بدون تعليق صوتي. الفكرة أنه لا يوجد قطع بسيط أبدًا: كل مشهد يسلّم إلى التالي عبر جسم (نقطة، أو اختيار من البكرة، أو هاتف، أو بلاطة فائزة). حافظ على مظهر واجهة منتج نظيف ومشرق: خلفيات فاتحة، وأزرار كبسولية مستديرة، وبطاقات، وهاتف، ولوحة معلومات، وجدار فيديوهات، مع كل التسميات كنص داكن على لوحات بيضاء واستخدام ألوان علامتي التجارية حسب الدور. تجنب القطع الحاد والتلاشي المتقاطع والصوت البشري والنص الأبيض على خلفيات فاتحة أو مخططة والتسميات التي تتداخل مع الحلقات أو الأشكال المجاورة.

البنية

خمس ضربات متساوية تقريبًا في الطول، نحو 3 ثوانٍ لكل منها، وكل تسليم يقع على الإيقاع.

الافتتاح: تظهر نقطة واحدة في المنتصف وتكبر لتصبح كبسولة أفقية تحمل صفًا من الدوائر: صور شخصية صغيرة وأيقونات مثل "Aa" وأشكال بسيطة ومكعب. كل أيقونة ظاهرة بالكامل وغير مغطاة بالدائرة المجاورة. تتراجع الكاميرا لتكشف عنوانًا من سطرين، كلاهما في المنتصف. السطر الأول مثل "No … keyframes." (استبدله بعنوانك). الكلمة الأخيرة من العنوان تظل تتقلب بين بدائل مثل بكرة ماكينة الحظ.
تغوص حركة تكبير إلى بكرة دوّارة من صور المبدعين والبطاقات. تتباطأ البكرة وتستقر على اختيار واحد، فيُبرَز.
يتحول الاختيار إلى هاتف، وتنفرد حوله مروحة من بطاقات الميزات. تقول إحدى البطاقات "Edit in words" مع الرقم الكبير "03" ووسم صغير "Live preview" بجوار الرقم مباشرة (استبدلها بميزاتك). تظهر تسميات البطاقات على لوحات بيضاء.
تقود حركة بانوراما سريعة إلى لوحة معلومات من بلاطات الفيديو بتسميات على لوحات بيضاء. تقيّمها وتختار فيديو فائزًا، فيُبرَز.
تنفتح البلاطة الفائزة إلى جدار مائل من الفيديوهات بتسميات على لوحات بيضاء. ثم يطوي الجدار نفسه ليصبح شعاري في بطاقة النهاية، مع "[your website]" بجوار الشعار على لوحة بيضاء.

التكوين

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

التقنيات

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

الموسيقى

أنشئ مقطوعة إلكترونية أصلية حماسية بسرعة 128 BPM ومدتها 15 ثانية بالضبط، بمسار واضح: بداية خفيفة، وتصاعد عبر مشهدي البكرة والهاتف، وذروة (drop) حول البانوراما السريعة، ونهاية نظيفة على الشعار. ضعها على شبكة إيقاع المونتاج، مع ضربات مؤلفة فوقها لكل تسليم، وصعود (riser) نحو الذروة، وضربة أخيرة عندما ينطوي الجدار إلى الشعار. اضبط الماستر عند نحو -14 LUFS مع ذروة حقيقية أقل من -1 dBTP.

الصوت

بدون تعليق صوتي. أضف أصوات whoosh عند التكبير والبانوراما السريعة، وطقة قصيرة مع توقف عند استقرار البكرة، وصدمة ناعمة على الشعار. أبقها كلها تحت الموسيقى وعلى الإيقاع.

المراجع

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

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

شعارك أو أيقونة تطبيقك، ويُفضَّل على خلفية شفافة؛ يظهر في بطاقة النهاية بعد أن ينطوي جدار الفيديوهات ليصبح هو.

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

معاينة تقنية «كشف من نقطة إلى كبسولة مع ابتعاد الكاميرا» — عند 0:01 من الفيديو

الكاميرا

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

تظهر نقطة في المنتصف (المقياس من 0 إلى 1.29 خلال 0.16 ث ثم تستقر عند 1)، ينتشر هالة ناعمة، ثم تتمدد النقطة إلى كبسولة بيضاء وتظهر أربع شرائح دائرية داخلها بفارق 0.08 ث. بعدها تبتعد الكاميرا من 2x إلى 1x (power3.out، ثانية واحدة، نقطة الأصل على الكبسولة) بينما تنزلق كلمات السطر 1 من تحت الكبسولة بضبابية 10 px، ويرتفع السطر 2 ضبابيًا.

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

عرض الكود

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>كشف من نقطة إلى كبسولة مع ابتعاد الكاميرا</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700&display=swap");
#root{position:relative;width:1920px;height:1080px;overflow:hidden;background:#faf9ff;font-family:Inter,sans-serif;font-weight:600;color:#1c0b5d}
.scene{position:absolute;inset:0}
#cam{position:absolute;inset:0}
.w{position:absolute;top:22px;font-size:155px;line-height:153px;letter-spacing:-0.035em;white-space:pre}
#wl{position:absolute;left:0;width:682px;top:360px;height:200px;overflow:hidden}
#wr{position:absolute;left:682px;right:0;top:360px;height:200px;overflow:hidden}
#wleft{right:224px}
#wright{left:226px}
#halo,#pill{position:absolute;left:682px;top:459px;width:28px;height:28px;border-radius:65px;background:#fb2d89}
.chip{position:absolute;top:7px;width:116px;height:116px;border-radius:50%;border:4px solid #fff}
#l2{position:absolute;left:0;right:0;top:531px;text-align:center;font-size:155px;line-height:153px;letter-spacing:-0.035em;white-space:pre}
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1920" data-height="1080">
  <div class="scene clip" data-start="0" data-duration="4">
    <div id="cam">
      <div id="wl"><div id="wleft" class="w">Let</div></div>
      <div id="wr"><div id="wright" class="w">type move.</div></div>
      <div id="halo"></div>
      <div id="pill">
        <div class="chip" style="left:7px;background:#fb2d89"></div>
        <div class="chip" style="left:87px;background:#fe9117"></div>
        <div class="chip" style="left:167px;background:#7c6cf2"></div>
        <div class="chip" style="left:247px;background:#1c0b5d"></div>
      </div>
      <div id="l2">and shapes talk.</div>
    </div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const P = { x: 682, y: 459 };            // the pill's centre (placed so line 1 is centred): the camera's focus
gsap.set(["#pill", "#halo"], { xPercent: -50, yPercent: -50 });
// camera: 2x on the pill (its centre on the frame's centre), then pull back
tl.fromTo("#cam", { transformOrigin: P.x + "px " + P.y + "px", scale: 2, x: 960 - P.x, y: 540 - P.y },
  { scale: 1, x: 0, y: 0, duration: 1.0, ease: "power3.out" }, 1.0);
// the dot pops with a soft pulse
tl.fromTo("#pill", { scale: 0 }, { scale: 1.29, duration: 0.16, ease: "power2.out" }, 0.02);
tl.to("#pill", { scale: 1, duration: 0.18, ease: "sine.inOut" }, 0.18);
tl.fromTo("#halo", { scale: 1, opacity: 0.42 }, { scale: 3.2, opacity: 0, duration: 0.34, ease: "power2.out" }, 0.1);
// it stretches into a white pill
tl.to("#pill", { width: 230, height: 26, duration: 0.07, ease: "power2.in" }, 0.45);
tl.to("#pill", { width: 370, height: 130, duration: 0.12, ease: "back.out(1.4)" }, 0.52);
tl.to("#pill", { backgroundColor: "#ffffff", boxShadow: "0 10px 28px rgba(28,11,93,0.13)", duration: 0.1, ease: "none" }, 0.47);
// chips pop in one by one
gsap.utils.toArray(".chip").forEach((c, i) => tl.fromTo(c, { opacity: 0, scale: 0.5 }, { opacity: 1, scale: 1, duration: 0.16, ease: "back.out(1.6)" }, 0.68 + i * 0.08));
// words slide out from under the pill (their boxes are clipped at the pill's centre)
tl.fromTo(["#wleft", "#wright"], { autoAlpha: 0 }, { autoAlpha: 1, duration: 0.01 }, 0.97);
tl.fromTo("#wleft", { x: 300, filter: "blur(10px)" }, { x: 0, filter: "blur(0px)", duration: 0.44, ease: "power3.out" }, 0.98);
tl.fromTo("#wright", { x: -1000, filter: "blur(10px)" }, { x: 0, filter: "blur(0px)", duration: 0.44, ease: "power3.out" }, 0.98);
// line 2 rises in, blurred
tl.fromTo("#l2", { opacity: 0, y: 30, filter: "blur(12px)" }, { opacity: 1, y: 0, filter: "blur(0px)", duration: 0.26, ease: "power2.out" }, 1.42);
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 من الفيديو

الطباعة

كلمة أخيرة متدحرجة مع سطر يعيد التمركز

تمر الكلمة الأخيرة في سطر متمركز على ثلاث كلمات باهتة ثم تستقر على رابعة بلون ink. كل تغيير يتدحرج: تصعد الكلمة القديمة 70 px بضبابية 6 px وتتلاشى خلال 0.15 ث (power2.in)، وتأتي الجديدة من 70 px أسفل (0.17 ث، power2.out)، ويتحرك صندوق الكلمة تدريجيًا إلى العرض الجديد فيعاد تمركز السطر كله. تصبح الكلمة الأخيرة بلون ink.

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

عرض الكود

<!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@500;600;700&display=swap");
#root{position:relative;width:1920px;height:1080px;overflow:hidden;background:#faf9ff;font-family:Inter,sans-serif;font-weight:600;color:#1c0b5d}
.scene{position:absolute;inset:0}
#line{position:absolute;left:0;right:0;top:463px;height:153px;display:flex;justify-content:center;font-size:155px;line-height:153px;letter-spacing:-0.035em;white-space:pre}
#roll{position:relative;display:inline-block;height:153px}
.rw{position:absolute;left:0;top:0;color:#6b6385;white-space:pre}
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1920" data-height="1080">
  <div class="scene clip" data-start="0" data-duration="4">
    <div id="line"><span>Made for </span><span id="roll"><span class="rw">makers</span><span class="rw">teams</span><span class="rw">brands</span><span class="rw">you</span></span></div>
  </div>
</div>
<script>
document.fonts.ready.then(() => {
  const tl = gsap.timeline({ paused: true });
  const words = gsap.utils.toArray("#roll .rw");
  const widths = words.map((w) => w.offsetWidth);   // read before anything moves
  gsap.set(words, { opacity: 0 });
  gsap.set(words[0], { opacity: 1 });
  gsap.set("#roll", { width: widths[0] });
  [0.8, 1.4, 2.0].forEach((t, i) => {              // one roll every 0.6 s
    tl.to(words[i], { y: -70, opacity: 0, filter: "blur(6px)", duration: 0.15, ease: "power2.in" }, t);
    tl.fromTo(words[i + 1], { y: 70, opacity: 0, filter: "blur(6px)" }, { y: 0, opacity: 1, filter: "blur(0px)", duration: 0.17, ease: "power2.out" }, t + 0.03);
    tl.to("#roll", { width: widths[i + 1], duration: 0.18, ease: "power2.inOut" }, t);
  });
  tl.to(words[3], { color: "#1c0b5d", duration: 0.08, ease: "none" }, 2.2);
  window.__timelines = window.__timelines || {};
  window.__timelines["main"] = tl;
});
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

معاينة تقنية «تكبير عبر المشهد إلى شريط ضبابي الحركة يستقر على اختيار» — عند 0:04 من الفيديو

انتقال

تكبير عبر المشهد إلى شريط ضبابي الحركة يستقر على اختيار

يكبّر العنوان الخارج بـ power3.in (من 1.035x إلى 2.3x خلال 0.45 ث)، ويضبب حتى 14 px ويتلاشى؛ يبدأ عمود البطاقات القادم من 0.86x وينمو إلى 1x بينما يتمرر لأسفل ست خطوات بطاقات بـ expo.out (1.15 ث)، تحت ضبابية SVG عمودية فقط (stdDeviation 0 34 تنخفض إلى 0). يثبّت العمود البطاقة المختارة في المنتصف خلال 0.14 ث، وتكبر البطاقة إلى 1.035x بـ back.out، وتحصل على حد مميز 5 px، وتظهر شارة علامة صح بعد 0.11 ث.

متى تُستخدم للانتقال من بيان إلى اختيار: تغوص الكاميرا ويستقر دوّار سريع على العنصر الذي يدور حوله المشهد التالي.

عرض الكود

<!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@500;600;700&display=swap");
#root{position:relative;width:1920px;height:1080px;overflow:hidden;background:#faf9ff;font-family:Inter,sans-serif;font-weight:600;color:#1c0b5d}
.scene{position:absolute;inset:0}
#head{position:absolute;left:0;right:0;top:420px;text-align:center;font-size:155px;line-height:153px;letter-spacing:-0.035em}
#zoom{position:absolute;inset:0}
#reel{position:absolute;left:1138px;top:0;width:465px;filter:url(#vblur)}
.card{position:absolute;left:0;width:465px;height:802px;border-radius:30px;overflow:hidden;box-shadow:0 14px 34px rgba(28,11,93,.16)}
.sel{position:absolute;inset:0;border-radius:30px;border:5px solid #fb2d89;opacity:0}
.check{position:absolute;right:26px;top:30px;width:56px;height:56px;border-radius:50%;background:#fb2d89;transform:scale(0)}
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1920" data-height="1080">
  <div class="scene clip" data-start="0" data-duration="4">
    <svg width="0" height="0" style="position:absolute"><filter id="vblur" x="-5%" y="-20%" width="110%" height="140%"><feGaussianBlur id="vk" stdDeviation="0 0"/></filter></svg>
    <div id="head">Pick one.</div>
    <div id="zoom"><div id="reel"></div></div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const fills = ["#f0edff", "#fb2d89", "#1c0b5d", "#fe9117", "#7c6cf2", "#2dd4b0", "#ffd23f", "#0d0b1e", "#fb2d89"];
const reel = document.getElementById("reel");
fills.forEach((f, i) => {                       // a column of cards, pitch 822 px
  const c = document.createElement("div");
  c.className = "card"; c.style.top = i * 822 + "px"; c.style.background = f;
  if (i === 1) { c.id = "pick"; c.innerHTML = '<div class="sel"></div><div class="check"></div>'; }
  reel.appendChild(c);
});
// out: zoom through the headline
tl.fromTo("#head", { scale: 1.035, transformOrigin: "1000px 50%" }, { scale: 2.3, duration: 0.45, ease: "power3.in" }, 0.1);
tl.to("#head", { filter: "blur(14px)", duration: 0.25, ease: "power1.in" }, 0.3);
tl.to("#head", { opacity: 0, duration: 0.22, ease: "none" }, 0.46);
// in: the reel grows and spins down under a vertical blur, landing a little low
tl.fromTo("#zoom", { transformOrigin: "1370px 540px", scale: 0.86, opacity: 0 }, { scale: 1, opacity: 1, duration: 0.55, ease: "power2.out" }, 0.42);
tl.fromTo("#reel", { y: -602 - 6 * 822 }, { y: -602, duration: 1.15, ease: "expo.out" }, 0.45);
tl.fromTo("#vk", { attr: { stdDeviation: "0 34" } }, { attr: { stdDeviation: "0 0" }, duration: 0.85, ease: "power2.in" }, 0.45);
tl.to("#reel", { y: -583, duration: 0.25, ease: "sine.inOut" }, 1.6);
// the pick: snap to centre, grow, border, check
tl.to("#reel", { y: -685, duration: 0.14, ease: "power3.out" }, 1.85);
tl.fromTo("#pick", { scale: 1 }, { scale: 1.035, duration: 0.16, ease: "back.out(2)" }, 1.85);
tl.to("#pick .sel", { opacity: 1, duration: 0.08, ease: "none" }, 1.86);
tl.to("#pick .check", { scale: 1, duration: 0.18, ease: "back.out(2.4)" }, 1.97);
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 من الفيديو

التخطيط

مروحة بطاقات تنطلق من خلف هاتف

يصل هاتف كبيرًا (1.27x) من اليمين بـ expo.out، ثم يستقر عند 1x ويهبط إلى مكانه (power3.out، 0.34 ث) تحت عنوان يظهر من الضبابية. تبدأ أربع بطاقات من مركز الهاتف عند 0.8x وتطير لتشكل مروحة: الزوج الداخلي عند ±6 درجات و1x، والزوج الخارجي عند ±12 درجة و0.82x، 0.3 ث power3.out، بفارق 0.02-0.08 ث، مع ضبابية تتلاشى. عند الخروج تطير البطاقات 700-760 px جانبًا مع ضبابية (0.22 ث 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=Inter:wght@500;600;700&display=swap");
#root{position:relative;width:1920px;height:1080px;overflow:hidden;background:#faf9ff;font-family:Inter,sans-serif;font-weight:600;color:#1c0b5d}
.scene{position:absolute;inset:0}
#title{position:absolute;left:0;right:0;top:82px;text-align:center;font-size:94px;line-height:94px;letter-spacing:-0.038em}
.card{position:absolute;width:292px;height:527px;margin:-263.5px 0 0 -146px;border-radius:34px;box-shadow:0 16px 36px rgba(28,11,93,.16)}
#phone{position:absolute;left:773px;top:272px;width:375px;height:786px;border-radius:58px;background:#0d0b1e;box-shadow:0 24px 50px rgba(28,11,93,.18)}
#screen{position:absolute;inset:10px;border-radius:48px;background:linear-gradient(160deg,#fb2d89,#fe9117)}
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1920" data-height="1080">
  <div class="scene clip" data-start="0" data-duration="4">
    <div id="title">Every kind of video.</div>
    <div class="card" id="lo" style="left:267px;top:692px;background:#f0edff"></div>
    <div class="card" id="ro" style="left:1672px;top:697px;background:#0d0b1e"></div>
    <div class="card" id="li" style="left:562px;top:647px;background:#7c6cf2"></div>
    <div class="card" id="ri" style="left:1365px;top:645px;background:#2dd4b0"></div>
    <div id="phone"><div id="screen"></div></div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
// the phone arrives big, then settles under the title
tl.fromTo("#phone", { x: 220, y: -120, scale: 1.27 }, { x: 0, duration: 0.3, ease: "expo.out" }, 0);
tl.to("#phone", { y: 0, scale: 1, duration: 0.34, ease: "power3.out" }, 0.53);
tl.fromTo("#title", { opacity: 0, filter: "blur(14px)" }, { opacity: 1, filter: "blur(0px)", duration: 0.18, ease: "power2.out" }, 0.5);
// four cards fan out from behind it
[["#li", -6, 1, 0.48], ["#ri", 6, 1, 0.5], ["#lo", -12, 0.82, 0.54], ["#ro", 12, 0.82, 0.56]].forEach(([sel, rot, sc, t]) => {
  const el = document.querySelector(sel);
  const dx = 960 - parseFloat(el.style.left), dy = 665 - parseFloat(el.style.top);
  tl.fromTo(sel, { x: dx, y: dy, rotation: 0, scale: 0.8, opacity: 0, filter: "blur(8px)" },
    { x: 0, y: 0, rotation: rot, scale: sc, opacity: 1, filter: "blur(0px)", duration: 0.3, ease: "power3.out" }, t);
});
// out: cards fly off to the sides, the title blurs away, the phone moves on
[["#lo", -760], ["#li", -700], ["#ri", 700], ["#ro", 760]].forEach(([sel, dx], i) => {
  tl.to(sel, { x: dx, opacity: 0, filter: "blur(10px)", duration: 0.22, ease: "power2.in" }, 1.65 + (i % 2) * 0.03);
});
tl.to("#title", { opacity: 0, filter: "blur(12px)", duration: 0.15, ease: "power2.in" }, 1.85);
tl.to("#phone", { x: 440, y: -133, scale: 0.853, duration: 0.33, ease: "power2.inOut" }, 1.65);
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 من الفيديو

انتقال

تحريك سريع للكاميرا مع ضبابية حركة اتجاهية

ينزلق المشهد الخارج كله، بما فيه شبكة النقاط، 1900 px إلى اليسار خلال 0.26 ث بـ power2.in بينما ينمو عليه feGaussianBlur من SVG حتى stdDeviation 46 0 (أفقي فقط). تدخل البطاقة التالية متأرجحة من 420 px يمينًا بميلان 5 درجات يستقر (power3.out، 0.36 ث)، وتنزلق شبكتها معها، ويظهر العنوان الجديد من الضبابية بعد 0.12 ث.

متى تُستخدم انتقل بين تخطيطين بطاقة حركة الكاميرا السريعة، دون قطع حاد واحد.

عرض الكود

<!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@500;600;700&display=swap");
#root{position:relative;width:1920px;height:1080px;overflow:hidden;background:#faf9ff;font-family:Inter,sans-serif;font-weight:600;color:#1c0b5d}
.scene{position:absolute;inset:0}
#a,#b{position:absolute;inset:0}
#a{filter:url(#hb)}
.grid{position:absolute;inset:-200px;background:radial-gradient(circle at 17.5px 17.5px,#e9e4f2 1.7px,rgba(0,0,0,0) 2.4px) 0 0/35px 35px}
.h{position:absolute;left:120px;top:418px;font-size:120px;line-height:120px;letter-spacing:-0.044em}
.ph{position:absolute;top:200px;width:300px;height:640px;border-radius:50px;background:#7c6cf2;border:10px solid #0d0b1e}
#card{position:absolute;left:958px;top:150px;width:834px;height:780px;border-radius:44px;background:#fff;box-shadow:0 30px 70px rgba(28,11,93,.16)}
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080">
  <div class="scene clip" data-start="0" data-duration="3">
    <svg width="0" height="0" style="position:absolute"><filter id="hb" x="-20%" y="-5%" width="140%" height="110%"><feGaussianBlur id="hk" stdDeviation="0 0"/></filter></svg>
    <div id="a"><div class="grid"></div><div class="h">Before.</div><div class="ph" style="left:940px"></div><div class="ph" style="left:1260px;background:#fe9117"></div><div class="ph" style="left:1580px;background:#2dd4b0"></div></div>
    <div id="b"><div class="grid"></div><div class="h">After.</div><div id="card"></div></div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
// out: the scene whips left under a horizontal-only blur
tl.to("#a", { x: -1900, duration: 0.26, ease: "power2.in" }, 0.8);
tl.fromTo("#hk", { attr: { stdDeviation: "0 0" } }, { attr: { stdDeviation: "46 0" }, duration: 0.2, ease: "power2.in" }, 0.8);
// in: the card swings in from the right and its tilt settles; the heading blurs in
tl.fromTo("#b .grid", { x: 900, opacity: 0 }, { x: 0, opacity: 1, duration: 0.3, ease: "power3.out" }, 0.94);
tl.fromTo("#card", { x: 420, rotation: 5, opacity: 0 }, { x: 0, rotation: 0, opacity: 1, duration: 0.36, ease: "power3.out" }, 0.97);
tl.fromTo("#b .h", { opacity: 0, filter: "blur(14px)" }, { opacity: 1, filter: "blur(0px)", duration: 0.22, ease: "power2.out" }, 1.09);
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 من الفيديو

بيانات

بطاقة لوحة معلومات تعدّ وترسم منحناها وتختار الفائز

تعدّ بطاقة بيضاء رقمها تصاعديًا (power2.out، 0.55 ث)، ويُرسم خطها بـ stroke-dashoffset بينما يكشف مستطيل clipPath المنطقة المتدرجة تحته (0.42 ث، power1.inOut)، وتظهر النقطة الأخيرة (back.out 2.2). ترتفع ثلاث بلاطات 30 px وتظهر بفارق 65 مللي ثانية. تخسر اثنتان (حلقة تحذير 4 px، وشارة علامة خطأ، وطبقة بيضاء 22 بالمئة، وgrayscale)، وتفوز الثالثة: 1.1x، مرفوعة 13 px، ووهج ملوّن، وكبسولة وشارة علامة صح تظهران بـ back.out.

متى تُستخدم اعرض منتجًا يقارن الخيارات ويختار الأفضل في أقل من ثانيتين من زمن الشاشة.

عرض الكود

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>بطاقة لوحة معلومات تعدّ وترسم منحناها وتختار الفائز</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700&display=swap");
#root{position:relative;width:1920px;height:1080px;overflow:hidden;background:#faf9ff;font-family:Inter,sans-serif;font-weight:600;color:#1c0b5d}
.scene{position:absolute;inset:0}
#card{position:absolute;left:543px;top:150px;width:834px;height:780px;border-radius:44px;background:#fff;box-shadow:0 30px 70px rgba(28,11,93,.16)}
#label{position:absolute;left:45px;top:48px;font-size:24px;font-weight:500;color:#6b6385}
#num{position:absolute;left:43px;top:84px;font-size:64px;line-height:70px;font-weight:700;letter-spacing:-0.03em;font-variant-numeric:tabular-nums}
#badge{position:absolute;left:180px;top:112px;height:36px;padding:0 14px;border-radius:18px;background:#d9f7ef;font-size:21px;line-height:36px}
#chart{position:absolute;left:0;top:0;width:834px;height:420px}
.th{position:absolute;top:427px;width:233px;height:308px;border-radius:22px;overflow:hidden}
.wash{position:absolute;inset:0;background:rgba(255,255,255,.22);opacity:0}
.ring{position:absolute;inset:0;border-radius:22px;border:4px solid #fe9117;opacity:0}
#win .ring{border:5px solid #2dd4b0}
.x,#ok{position:absolute;right:18px;top:18px;width:40px;height:40px;border-radius:50%;background:#fe9117;transform:scale(0)}
#ok{background:#2dd4b0;width:48px;height:48px;right:14px;top:14px}
#pill{position:absolute;left:14px;top:14px;height:40px;padding:0 16px;border-radius:20px;background:#2dd4b0;font-size:22px;line-height:40px;transform:scale(0)}
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1920" data-height="1080">
  <div class="scene clip" data-start="0" data-duration="4">
    <div id="card">
      <div id="label">Results this week</div>
      <div id="num">0</div>
      <div id="badge">Best pick</div>
      <svg id="chart" viewBox="0 0 834 420"><defs><linearGradient id="fill" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#fb2d89" stop-opacity="0.16"/><stop offset="1" stop-color="#fb2d89" stop-opacity="0"/></linearGradient><clipPath id="rev"><rect id="revr" x="0" y="0" width="87" height="420"/></clipPath></defs>
        <g clip-path="url(#rev)"><path d="M87 357 C200 340 300 330 372 315 C450 297 505 278 542 257 C600 236 680 220 747 205 L747 380 L87 380 Z" fill="url(#fill)"/></g>
        <path id="line" d="M87 357 C200 340 300 330 372 315 C450 297 505 278 542 257 C600 236 680 220 747 205" fill="none" stroke="#fb2d89" stroke-width="4" stroke-linecap="round"/>
        <circle id="dot" cx="747" cy="205" r="8" fill="#fff" stroke="#fb2d89" stroke-width="4"/></svg>
      <div class="th" style="left:44px;background:#7c6cf2"><div class="wash"></div><div class="ring"></div><div class="x"></div></div>
      <div class="th" style="left:301.5px;background:#2dd4b0"><div class="wash"></div><div class="ring"></div><div class="x"></div></div>
      <div class="th" id="win" style="left:559px;background:#fe9117"><div class="ring"></div><div id="pill">Winner</div><div id="ok"></div></div>
    </div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const line = document.getElementById("line");
const len = line.getTotalLength();
gsap.set(line, { strokeDasharray: len, strokeDashoffset: len });
tl.fromTo("#card", { x: 420, rotation: 5, opacity: 0 }, { x: 0, rotation: 0, opacity: 1, duration: 0.36, ease: "power3.out" }, 0.1);
const n = { v: 0 }, num = document.getElementById("num");
tl.to(n, { v: 128, duration: 0.55, ease: "power2.out", onUpdate: () => { num.textContent = Math.round(n.v); } }, 0.12);
tl.to(line, { strokeDashoffset: 0, duration: 0.42, ease: "power1.inOut" }, 0.32);
tl.to("#revr", { attr: { width: 760 }, duration: 0.42, ease: "power1.inOut" }, 0.32);
tl.fromTo("#dot", { scale: 0, transformOrigin: "747px 205px" }, { scale: 1, duration: 0.16, ease: "back.out(2.2)" }, 0.87);
tl.fromTo("#badge", { opacity: 0, scale: 0.6 }, { opacity: 1, scale: 1, duration: 0.16, ease: "back.out(1.8)" }, 0.75);
const th = gsap.utils.toArray(".th");
th.forEach((t, i) => tl.fromTo(t, { opacity: 0, y: 30 }, { opacity: 1, y: 0, duration: 0.2, ease: "power2.out" }, 0.59 + i * 0.065));
[[th[0], 1.02], [th[1], 1.15]].forEach(([t, at]) => {          // two lose
  tl.to(t.querySelector(".ring"), { opacity: 1, duration: 0.08 }, at);
  tl.to(t.querySelector(".wash"), { opacity: 1, duration: 0.12 }, at);
  tl.to(t, { filter: "grayscale(0.6)", duration: 0.12 }, at);
  tl.to(t.querySelector(".x"), { scale: 1, duration: 0.16, ease: "back.out(2.2)" }, at + 0.02);
});
tl.to("#win", { scale: 1.1, y: -13, boxShadow: "0 14px 34px rgba(45,212,176,.35)", duration: 0.2, ease: "back.out(1.8)" }, 1.41);   // one wins
tl.to("#win .ring", { opacity: 1, duration: 0.08 }, 1.41);
tl.to(["#pill", "#ok"], { scale: 1, duration: 0.18, ease: "back.out(2.2)", stagger: 0.03 }, 1.45);
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 من الفيديو

انتقال

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

جدار من البطاقات في أعمدة (الخطوة 298 px، وكل عمود أخفض بـ 81 px من السابق) مائل بزاوية -13.6 درجة ويتمرر لأسفل على أعمدته بسرعة ثابتة 221 px/s. ينفتح من بلاطة صغيرة: تنمو نافذة clip-path مستديرة من صندوق البلاطة بما يصل إلى 1500 px بـ power2.in خلال 0.19 ث بينما يتحجم الجدار من 0.72 إلى 1. في النهاية تتبع النافذة إطارات مفتاحية إلى صندوق صغير مستدير بجوار موضع هبوط بلاطة الشعار، ويتحجم الجدار إلى 0.35 بـ power2.out، فيبدو الجدار كله كأنه يطوى داخل الشعار. تُحسب النافذة من زمن الخط الزمني، لذا يرسم كل seek الإطار نفسه.

متى تُستخدم قل «هناك الكثير منه» في صورة واحدة، ثم حوّل هذه الوفرة إلى علامة العلامة التجارية.

عرض الكود

<!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@500;600;700&display=swap");
#root{position:relative;width:1920px;height:1080px;overflow:hidden;background:#faf9ff;font-family:Inter,sans-serif;font-weight:600;color:#1c0b5d}
.scene{position:absolute;inset:0}
#win,#wall{position:absolute;inset:0}
#grid{position:absolute;left:1241px;top:307px;width:0;height:0;transform:rotate(-13.6deg);transform-origin:0 0}
#drift{position:absolute;left:0;top:0}
.c{position:absolute;width:262px;height:468px;border-radius:30px;box-shadow:0 10px 26px rgba(28,11,93,.16)}
#logo{position:absolute;left:883px;top:341px;width:154px;height:154px;border-radius:36px;background:#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 class="scene clip" data-start="0" data-duration="4">
    <div id="win"><div id="wall"><div id="grid"><div id="drift"></div></div></div></div>
    <div id="logo"></div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const fills = ["#fb2d89", "#fe9117", "#7c6cf2", "#2dd4b0", "#ffd23f", "#1c0b5d", "#f0edff"];
const drift = document.getElementById("drift");
for (let c = 0; c < 4; c++) for (let r = -2; r <= 2; r++) {
  const d = document.createElement("div");
  d.className = "c";
  d.style.left = 298 * c - 131 + "px";
  d.style.top = 500 * r + 81 * c - 234 + "px";
  d.style.background = fills[(c * 5 + r + 10) % fills.length];
  drift.appendChild(d);
}
tl.fromTo("#drift", { y: -287 }, { y: 600, duration: 4, ease: "none" }, 0);      // 221 px/s down the columns
const win = document.getElementById("win");
const grow = gsap.parseEase("power2.in");
const keys = [[2.66, 1018, 0, 1920, 1080], [2.7, 1018, 46, 1747, 979], [2.75, 1018, 115, 1517, 826], [2.8, 1006, 227, 1248, 649], [2.85, 998, 292, 1114, 553], [2.9, 1029, 342, 1056, 495]];
const rect = (l, t, r, b, rad) => `inset(${Math.max(0, t)}px ${Math.max(0, 1920 - r)}px ${Math.max(0, 1080 - b)}px ${Math.max(0, l)}px round ${rad}px)`;
function windowAt(g) {                               // the window as a pure function of time
  if (g < 0.4) { const m = 1500 * grow(gsap.utils.clamp(0, 1, (g - 0.2) / 0.19)); return rect(1465 - m, 548 - m, 1722 + m, 888 + m, 24); }
  if (g < keys[0][0]) return "none";
  for (let i = 1; i < keys.length; i++) if (g <= keys[i][0]) {
    const [t0, ...a] = keys[i - 1], [t1, ...b] = keys[i], k = (g - t0) / (t1 - t0);
    const v = a.map((x, j) => x + (b[j] - x) * k);
    return rect(v[0], v[1], v[2], v[3], 30);
  }
  return rect(1029, 342, 1056, 495, 30);
}
tl.to({}, { duration: 4, ease: "none", onUpdate: () => { win.style.clipPath = windowAt(tl.time()); } }, 0);
win.style.clipPath = windowAt(0);
tl.fromTo("#wall", { transformOrigin: "1605px 544px", scale: 0.72, x: -12, y: 174 }, { scale: 1, x: 0, y: 0, duration: 0.2, ease: "power2.out" }, 0.2);
tl.to("#wall", { transformOrigin: "1040px 420px", scale: 0.35, duration: 0.24, ease: "power2.out" }, 2.66);
tl.to("#win", { opacity: 0, duration: 0.03 }, 2.9);
tl.fromTo("#logo", { opacity: 0, scale: 0.9 }, { opacity: 1, scale: 1, duration: 0.12, ease: "power2.out" }, 2.77);
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:13 من الفيديو

الطباعة

الاسم ينزلق من خلف بلاطة الشعار ثم نقرة

تهبط بلاطة الشعار في المنتصف، وتظهر علامتها (back.out 2)، ثم تنزلق البلاطة 336 px إلى اليسار (power3.out، 0.55 ث) بينما ينزلق الاسم من خلفها: يتحرك صندوق قص الاسم تحت مركز البلاطة بالحركة نفسها، فلا تظهر الحروف إلا من خلف البلاطة. يظهر السطر ودعوة الإجراء من الضبابية بفارق 0.19 ث، ويعبر وميض ضوء البلاطة، وينزلق مؤشر إلى الزر (power2.out، 0.27 ث)، ويضغطه (0.96x yoyo)، وتنتشر حلقة من النقرة ثم تتلاشى.

متى تُستخدم اختم بالعلامة التجارية: الرمز أولًا ثم الاسم، ثم نقرة مرئية تخبر بما يجب فعله بعد ذلك.

عرض الكود

<!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@500;600;700&display=swap");
#root{position:relative;width:1920px;height:1080px;overflow:hidden;background:#faf9ff;font-family:Inter,sans-serif;font-weight:600;color:#1c0b5d}
.scene{position:absolute;inset:0}
#tile{position:absolute;left:546.5px;top:341px;width:154px;height:154px;border-radius:36px;overflow:hidden;background:#1c0b5d;box-shadow:0 18px 40px rgba(28,11,93,.28)}
#mark{position:absolute;left:42px;top:42px;width:70px;height:70px;border-radius:50%;background:conic-gradient(#fb2d89,#fe9117,#fb2d89)}
#sheen{position:absolute;left:-160px;top:-40px;width:110px;height:240px;transform:rotate(20deg);background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.35),rgba(255,255,255,0))}
#clip{position:absolute;left:623.5px;top:330px;width:760px;height:170px;overflow:hidden}
#name{position:absolute;left:114px;top:27px;font-size:124px;line-height:127px;font-weight:500;letter-spacing:-0.02em;white-space:pre}
#tag{position:absolute;left:0;right:0;top:554px;text-align:center;font-size:49px;line-height:48px}
#tag span{color:#6b6385;font-weight:500}
#cta{position:absolute;left:0;right:0;top:656px;height:71px;display:flex;justify-content:center;align-items:center;gap:33px}
#btn{height:71px;padding:0 36px;border-radius:36px;display:flex;align-items:center;background:linear-gradient(180deg,#fb2d89,#e4167a);color:#fff;font-size:22px;font-weight:700}
#url{font-family:monospace;font-size:23px;font-weight:400;color:#6b6385}
#ring{position:absolute;left:835px;top:640px;width:106px;height:106px;border-radius:50%;border:3px solid #fc5aa3;opacity:0}
#cur{position:absolute;left:888px;top:700px;width:22px;height:32px}
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080">
  <div class="scene clip" data-start="0" data-duration="3">
    <div id="clip"><div id="name">Brand name</div></div>
    <div id="tile"><div id="mark"></div><div id="sheen"></div></div>
    <div id="tag">One short line<span> about it.</span></div>
    <div id="cta"><div id="btn">Try it</div><div id="url">web address</div></div>
    <div id="ring"></div>
    <svg id="cur" viewBox="0 0 22 32"><path d="M2 2 L2 25 L7.5 19.5 L11.5 29 L15.5 27.3 L11.6 18 L19 18 Z" fill="#0d0b1e" stroke="#fff" stroke-width="1.8" stroke-linejoin="round"/></svg>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
tl.fromTo("#tile", { x: 336.5, scale: 0.9, opacity: 0 }, { scale: 1, opacity: 1, duration: 0.12, ease: "power2.out" }, 0.02);
tl.fromTo("#mark", { scale: 0 }, { scale: 1, duration: 0.14, ease: "back.out(2)" }, 0.25);
// the tile slides left; the name's clip box rides under the tile's centre, the name inside it moves further
tl.to("#tile", { x: 0, duration: 0.55, ease: "power3.out" }, 0.37);
tl.fromTo("#clip", { x: 336.5 }, { x: 0, duration: 0.55, ease: "power3.out" }, 0.37);
tl.fromTo("#name", { x: -1026.5 }, { x: 0, duration: 0.55, ease: "power3.out" }, 0.37);
tl.fromTo("#tag", { opacity: 0, filter: "blur(12px)" }, { opacity: 1, filter: "blur(0px)", duration: 0.2, ease: "power2.out" }, 0.71);
tl.fromTo("#cta", { opacity: 0, filter: "blur(10px)" }, { opacity: 1, filter: "blur(0px)", duration: 0.18, ease: "power2.out" }, 0.9);
tl.fromTo("#sheen", { x: 0 }, { x: 420, duration: 0.45, ease: "power1.inOut" }, 1.0);
// the click
tl.fromTo("#cur", { x: 184, y: 152, opacity: 0 }, { opacity: 1, duration: 0.05 }, 1.1);
tl.to("#cur", { x: 0, y: 0, duration: 0.27, ease: "power2.out" }, 1.13);
tl.to("#btn", { scale: 0.96, duration: 0.06, ease: "power1.in", yoyo: true, repeat: 1 }, 1.42);
tl.fromTo("#ring", { scale: 0.1, opacity: 0.75 }, { scale: 1, opacity: 0.55, duration: 0.2, ease: "power2.out" }, 1.45);
tl.to("#ring", { opacity: 0, duration: 0.3, ease: "power1.in" }, 1.65);
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>

موجّهات أخرى

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

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

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

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

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

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

معاينة الموجّه «فيديو إطلاق تطبيق حركي مع نموذج واجهة متحرك»

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

<direction> اصنع فيديو إطلاق منتج حركيًا أفقيًا بدقة 1920x1080 ومدته 42 ثانية لـ [your app]. يُظهر كيف يصنع مؤسس فيديو إطلاق لشركته الناشئة بمجرد الدردشة في التطبيق. أعد بناء واجهة تطبيقي من لقطات الشاشة الخاصة بي كنموذج متحرك نظيف مصنوع من أشكال ونصوص، قريب من الواقع. في هذا الفيديو هو تطبيق داكن بلون كحلي-بنفسجي مع Live preview على اليسار، وتبويبات Chat / Files / Panels على اليمين، وأزرار تمييز وردية. لا تعرض لقطات الشاشة أبدًا كصور ثابتة: يجب أن يتحرك كل عنصر. حافظ على واجهة واحدة متصلة بلا قطعات حادة. تتقدم الكاميرا وتتحرك أفقيًا وتتراجع بين اللوحات بينما يتحرك المؤشر وينقر. التزم بشبكة إيقاع 120 BPM (النبضة الواحدة = 0.5 ثانية) واجعل شيئًا يحدث مع كل نبضة. كلمات حركية ضخمة تصطدم فوق الواجهة بين الخطوات. الشركة الناشئة للمؤسس هي تطبيق مُختلق، مثلًا "Pulse — standups your team actually reads" (استبدله بتطبيقك). تجنب القطعات الحادة ولقطات الشاشة الثابتة وأي شيء مقصوص عند حواف الإطار والنصوص أو أشرطة التظليل التي تمتد إلى الأعمدة المجاورة. </direction> <structure> 1) الافتتاحية، 0–3 ث: "YOUR LAUNCH VIDEO." ثم "IN ONE CHAT." بخط ضخم، تُقطع كلمة بكلمة على الإيقاع. تتحول "CHAT." إلى تبويب Chat وتتراجع الكاميرا لتُظهر نافذة التطبيق كاملة. 2) المراجع، 3–8 ث: يُلصق رابط "pulse-demo.app" في الدردشة. يطير عرض تقديمي PDF وشعار كبطاقات مرفقات ويستقران في مكانهما. الكلمة الكبيرة "DROP". 3) الطلب، 8–13 ث: يكتب المؤسس "Make a 30-second launch video for Pulse, kinetic style, our colours" حرفًا حرفًا، ثم ينقر المؤشر على إرسال. الكلمة الكبيرة "ASK". 4) الخطة، 13–18 ث: يرد الوكيل بخطة من خمس خطوات على شكل قائمة تحقق. تظهر الخطوات وتُعلَّم واحدة تلو الأخرى، وتتراجع الكاميرا قليلًا مع كل سطر جديد حتى لا يبدو الإطار فارغًا. الكلمة الكبيرة "PLAN". 5) المخطط وGo، حوالي 18–21 ث: مخطط رمادي هيكلي للإعلان يملأ Live preview بسرعة، مع ظهور تسمية "Live preview" وشريط التشغيل. ينقر المؤسس على Go، وتنمو خلفية وردية من الزر المضغوط وتغمر الشاشة خلف "GO!" ضخمة. 6) البث الحي، حوالي 21–31 ث: تظهر أسطر الحالة في الدردشة ("Picking fonts" و"Animating the title" و"Writing a soundtrack") بينما يتحول المخطط إلى الإعلان النهائي. تتقدم الكاميرا حتى يملأ الإعلان الإطار. عند حوالي 27 ث ينزلق عنوان الإعلان "Standups your team actually reads." ويُرسم شريط تظليل ليموني تحت "actually reads.". بجانبه عمود إحصائيات فيه "92%" و"updates read". الكلمة الكبيرة "LIVE". 7) التصدير، حوالي 31–37 ث: تتراجع الكاميرا إلى التطبيق. زر Export والتبويبات ظاهرة بالكامل بينما يعمل التصدير ويكتمل. الكلمة الكبيرة "DONE". 8) البطاقة الختامية، حوالي 37–42 ث: شعار [your app] و"Live on [launch site] today" (استبدله بما يخصك)، يستقران على النبضة الأخيرة ويبقيان حتى النهاية. </structure> <composition> لوحة الألوان: واجهة داكنة كحلية-بنفسجية، وأزرار تمييز بلون أرجواني وردي والفيضان الوردي، وتدرج وردي إلى برتقالي على الشعار، والليموني كلون تظليل داخل الإعلان التجريبي. الكلمات الحركية ضخمة وعريضة وبأحرف كبيرة بخط بلا زوائد بخطوط العلامة التجارية وتمتد على معظم عرض الإطار. صغّر الكلمة الطويلة قليلًا بدل أن تُقص. حافظ على هوامش آمنة في كل مكان. في اللقطات الواسعة تكون نافذة التطبيق كاملة داخل الإطار. في الدردشة يكون حقل الإدخال ظاهرًا بالكامل. في مشهد التصدير يكون زر Export والتبويبات داخل الإطار. في الإعلان يبقى العنوان وشريط الليمون في عمودهما مع مساحة كافية. يطابق الشريط عرض كلماته تمامًا ولا يتداخل أبدًا مع عمود "92%". </composition> <techniques> كاميرا افتراضية متصلة مع تقدم وتحريك أفقي وتراجع سلس (ease-in-out) بين اللوحات ودون قطعات. ينزلق المؤشر نحو أهدافه وينقر مع تصغير طفيف عند الضغط. تدخل كلمات الافتتاحية واحدة مع كل نبضة. تطير بطاقات المرفقات وتستقر في مكانها بتجاوز طفيف. يُكتب نص الدردشة حرفًا حرفًا. تظهر عناصر قائمة التحقق وتُعلَّم على نبضات متتالية. يمتلئ المخطط الرمادي بسرعة ثم يتحول عنصرًا بعنصر إلى الإعلان النهائي. ينمو الفيضان الوردي تحت "GO!" شعاعيًا من الزر المنقور. تصطدم الكلمات الكبيرة بتأثير تصغير سريع فوق الواجهة وتغادر بسرعة مع النبضة التالية. لكل نبضة حدث مرئي: كلمة أو نقرة أو بطاقة أو علامة أو سطر حالة أو حركة كاميرا. </techniques> <music> مقطوعة إلكترونية حيوية بإيقاع 120 BPM، يرتبط فيها كل قطع واصطدام كلمة وحدث في الواجهة بالإيقاع. تتصاعد خلال خطوات الإعداد، وترتفع نحو "GO!"، وتدفع البناء الحي، وتنتهي بضربة أخيرة على البطاقة الختامية. </music> <sound> نقرات لوحة المفاتيح تقع تمامًا على كل حرف يُكتب. نقرات الفأرة عند كل نقرة للمؤشر. أصوات whoosh عند حركات الكاميرا وعند طيران بطاقات المرفقات، وأصوات طقطقة عند هبوطها. نقرات خفيفة لخطوات القائمة وأسطر الحالة. تأثير قوي تحت كل كلمة كبيرة، وصوت riser نحو "GO!" وضربة أخيرة على البطاقة الختامية. أبقِ الموسيقى تحت المؤثرات حتى تُسمع النقرات والتأثيرات بوضوح. </sound> <references> إعلانات تشويقية حركية لإطلاق التطبيقات تعيد بناء واجهة SaaS كنموذج متحرك واضح بحركة كاميرا واحدة متصلة، على طراز إعلانات يوم إطلاق المنتج. </references>

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

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

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