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

AR

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

Simple Motion

تجميع شعار بأسلوب لو-بولي مع كتابة الاسم في تصميم أفقي

يتكوّن شعار من هيكل سلكي مرسوم ومثلثات low-poly متقلبة، ويومض عند الذروة ليصبح أيقونة تطبيق، ثم يُكتب بجانبه الاسم والشعار النصي.

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

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

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

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

الفكرة

اصنع كشف شعار أفقي مدته 21 ثانية بدقة 1920x1080 وبمعدل 60 إطارًا في الثانية. يجمّع شعاري ببطء من أوجه low-poly وينتهي بتصميم أفقي (lockup) يُكتب فيه اسم علامتي التجارية وتحته شعار نصي. الفكرة: بناء طويل وهادئ بلا أي قطع لمدة أربع عشرة ثانية، ثم انطلاق عند ذروة الموسيقى (drop) خلال ثانيتين، ثم نهاية هادئة بالكتابة. المظهر: خلفية شبه سوداء مع تعتيم دائري ناعم عند الحواف، وألوان العلامة مسطحة، وخط غروتيسك نظيف. تجنّب التدرجات على الشعار، والخطوط المرئية بين المثلثات، والقطع أثناء البناء، وأي شيء مزدحم خلف الشعار.

البنية

من 0 إلى 2.6 ث، الهيكل السلكي: يرسم هيكل سلكي low-poly لمحيط شعاري نفسه بدءًا من أسفل الشعار نحو الخارج. فيه نحو 35–45 رأسًا و90 خطًا رفيعًا.
من 1.9 إلى 13.3 ث، التجميع: يُقطَّع الشعار إلى نحو 55 مثلثًا على امتداد ذلك الهيكل، وتطير إلى الداخل قطعة بعد قطعة من خارج الإطار. تبدأ الهبوطات بطيئة عند أسفل الشعار وتزداد كثافة نحو الأعلى. تهبط القطعة الأخيرة عند 13.3 ث، ويصبح الشعار كاملًا ودقيقًا. أبقِ الشعار المكتمل نحو ثانية واحدة.
عند 14.38 ث، الوميض، تمامًا على ذروة الموسيقى. ينطلق انفجار ضوئي وحلقة برتقالية متوسعة ووميض ساطع على الشعار معًا. بعد 0.1 ث من الضربة، تنمو لوحة بلون حبر داكن خلف الشعار وتتحول إلى مربع بزوايا مدورة كأيقونة تطبيق. أبقِ الأيقونة في المنتصف لمدة ثانية.
من 15.74 إلى 16.15 ث، الانزلاق: تتقلص الأيقونة إلى نحو 42% وتنتقل إلى الثلث الأيسر لتفسح مجالًا للاسم.
من 16.1 إلى 21 ث، الاسم: يظهر مؤشر وردي إلى يمين الأيقونة ويُكتب الاسم، مثلًا "Brand Name" (استبدله بعلامتك). عند 18.15 ث يمرّ الشعار النصي تحته، مثلًا "Your tagline here" (استبدله بشعارك). يومض المؤشر ثلاث مرات مع الإيقاع ويختفي عند 19.9 ث. أبقِ التصميم الأفقي حتى النهاية.

التكوين

الخلفية: تعتيم شعاعي شبه أسود، #0D0B1E في المركز ويغمق حتى #040308 عند الزوايا.
لوحة الألوان:

حبر عميق #1C0B5D للوحة الأيقونة.
وردي #FB2D89 كلون تمييز رئيسي.
برتقالي #FE9117.
أبيض #FFFFFF.
لافندر فاتح #E9E4F2 و#F0EDFF للخطوط والنص الناعم.
بنفسجي #7C6CF2 في توهج الخلفية فقط.
يبقى الشعار بألوان مسطحة بلا تدرجات.
الهيكل السلكي: خطوط بلون لافندر #E9E4F2 بشفافية 60%، بسماكة 1.3 بكسل؛ ونقاط الرؤوس بلون #F0EDFF بنصف قطر 2.6 بكسل.
لوحة الأيقونة: دائرة بقطر 676 بكسل تتحول إلى مربع بزوايا مدورة بنصف قطر 24% وظل ناعم.
الخط: الاسم بخط غروتيسك عريض (Golos Text 700، نحو 155 بكسل، أبيض). والشعار النصي تحته بخط غروتيسك خفيف (Onest 400، نحو 49 بكسل، لافندر بشفافية 74%).
المؤشر: شريط وردي #FB2D89 بحجم 10 × 128 بكسل مع توهج وردي ناعم.
التصميم الأفقي النهائي (الأيقونة على اليسار والاسم والشعار النصي على اليمين) متمركز في الإطار ككل.

التقنيات

التقريب: تبدأ اللقطة بتقريب بطيء جدًا نحو مركز الإطار، من مقياس 0.886 عند 0 ث إلى 0.998 عند 11 ث، ثم تثبت.
رسم الهيكل السلكي: ينمو كل خط خطيًا من رأسه الأسبق إلى الأحدث خلال 0.08–0.45 ث. وتظهر نقطة صغيرة تدريجيًا عند كل رأس حين يصل إليه الخط.
الطيران إلى الداخل: كل قطعة من مثلث إلى ثلاثة مثلثات. تأتي بسرعة على مسار منحنٍ وتتباطأ حتى تستقر في مكانها خلال نحو 0.5 ث، وهي تتقلب في 3D. يخفت الدوران والانقلاب والميلان تدريجيًا إلى الصفر عند وصولها. أثناء الطيران تكون معتمة إلى نحو 60% وناعمة قليلًا؛ وعند الهبوط تكون حادة ومضاءة بالكامل. يعرض كل مثلث الجزء الخاص به تمامًا من الشعار المسطح، فيكون التجميع النهائي بلا أي خطوط.
التوهج: توهج وردي خافت #FB2D89 بشفافية أقل من 10% ويتحول إلى البنفسجي #7C6CF2 ينمو خلف الشعار مع اكتماله.
الوميض عند 14.38 ث:

ينفجر ضوء وردي-أرجواني بوضع screen حول الشعار ويتلاشى خلال 0.8 ث.
حلقة رفيعة برتقالية دافئة بسماكة 7 بكسل تبدأ بنصف قطر 300 بكسل وتنطلق خارج الإطار بسرعة ثابتة خلال 0.38 ث.
يومض الشعار بشدة ثم يستقر خلال 0.3 ث.
اللوحة: بعد 0.1 ث من الضربة، تنمو لوحة #1C0B5D من نقطة إلى دائرة 676 بكسل خلال 0.21 ث (sine ease-out). تكون مضاءة في البداية، ثم تتحول زواياها إلى مربعة بنصف قطر 24%.
الانزلاق: تتحجم الأيقونة إلى نحو 42% وتنتقل إلى الثلث الأيسر خلال 0.415 ث (power3 ease-in-out). تتشوش حتى 7 بكسل عند أسرع لحظة وتستقر حادة. بعد ذلك تواصل النمو ببطء شديد، نحو 3% خلال خمس ثوانٍ.
الكتابة: حرف واحد لكل نوتة سادسة عشرة في الموسيقى (0.156 ث عند 96 BPM). يظهر كل حرف تدريجيًا خلال 0.05 ث بينما يقفز المؤشر خلفه.
الشعار النصي: يمرّ من اليسار إلى اليمين خلال نحو 0.2 ث، حرفًا بحرف.

الموسيقى

مقطوعة موسيقية آلية بإيقاع 96 BPM، متفائلة وعصرية، مدتها 21 ثانية بالضبط.

البداية: غلوكنشبيل ناعم بأسلوب صندوق الموسيقى فوق أصوات pads دافئة.
عند نحو 4.4 ث: يدخل توزيع كامل مفعم بالحيوية (طبول وباس وآلات وترية وخط غلوكنشبيل ساطع). يُفتح فلتر على مدى مازورتين ويتصاعد نحو الوميض.
عند 14.38 ث: ضربة صنج وآكورد كبير يقعان تمامًا على الوميض.
بعد الذروة: يعود صندوق الموسيقى فوق pads ممتدة تحت التصميم الأفقي ويتلاشى إلى الصمت عند 21 ث.
أبقِ كل شيء على شبكة الإيقاع بحيث تقع الكتابة ووميض المؤشر على النوتات السادسة عشرة والنبضات.

الصوت

مؤثرات صوتية فوق الموسيقى:

صوت riser ناعم نحو هبوط المثلث الأول.
riser نحو الوميض، ثم دويّ عميق وصدمة زجاجية خفيفة عليه.
صوت whoosh قصير حين تنطلق الحلقة، وآخر حين تنزلق الأيقونة.
نقرة مفتاح ناعمة لكل حرف يُكتب، ونقرة خافتة عند ظهور الشعار النصي.
بلا تعليق صوتي. مستوى الصوت العام نحو -14 LUFS، وذروة حقيقية أقل من -1 dBTP.

المراجع

مقدمة شعار راقية لتقنية أو لإطلاق تطبيق: تجميع من هيكل سلكي low-poly إلى شكل صلب بأسلوب بناء أوجه ثلاثي الأبعاد، يتحرر عند الذروة إلى كشف أيقونة تطبيق، مع تصميم أفقي لاسم يُكتب بأسلوب الطرفية.

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

معاينة تقنية «Wireframe that draws itself from one point outward» — عند 0:01 من الفيديو

أشكال

Wireframe that draws itself from one point outward

A low-poly outline of the logo is drawn as thin lavender lines (#E9E4F2 at 62%, 1.3 px) with small dots on the vertices. Every vertex gets a time from its distance to a start point, every line draws (stroke-dashoffset, linear) from its earlier vertex to its later one in 0.08-0.45 s, and a dot fades in in 0.08 s when the first line reaches it. Under it the whole drawing scales 0.886 to 0.91 about the frame's centre, a push-in too slow to notice.

متى تُستخدم To open a logo reveal or a diagram with the structure before the surface.

عرض الكود

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Wireframe that draws itself from one point outward</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>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #040308; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(circle at 960px 540px, #0D0B1E 0, #0D0B1E 250px, #0a0817 500px, #06050f 600px, #040308 900px); }
#w { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 960px 540px; }
#w line { stroke: #E9E4F2; stroke-opacity: 0.62; stroke-width: 1.3; fill: none; }
#w circle { fill: #F0EDFF; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1920" data-height="1080"><svg id="w" viewBox="0 0 1920 1080"></svg></div>
<script>
const tl = gsap.timeline({ paused: true });
const NS = "http://www.w3.org/2000/svg", svg = document.getElementById("w");
let seed = 3; const rnd = () => (seed = (seed * 16807) % 2147483647) / 2147483647;
// vertices of a rough disc (any low-poly outline works the same)
const pts = [];
for (let r = 0; r <= 4; r++) { const n = r ? r * 6 : 1; for (let i = 0; i < n; i++) { const a = (i / n) * Math.PI * 2 + r, R = r * 55 + rnd() * 18; pts.push([960 + R * Math.cos(a), 540 + R * Math.sin(a)]); } }
const START = [960, 760], SPEED = 160; // where the drawing starts, how fast it spreads (px/s)
const t = pts.map(([x, y]) => 0.3 + Math.hypot(x - START[0], y - START[1]) / SPEED);
const seen = new Set();
pts.forEach((p, i) => {
  pts.map((q, j) => [Math.hypot(q[0] - p[0], q[1] - p[1]), j]).sort((a, b) => a[0] - b[0]).slice(1, 4).forEach(([d, j]) => {
    const key = i < j ? i + "," + j : j + "," + i; if (seen.has(key)) return; seen.add(key);
    const [a, b] = t[i] <= t[j] ? [i, j] : [j, i];
    const ln = document.createElementNS(NS, "line");
    ln.setAttribute("x1", pts[a][0]); ln.setAttribute("y1", pts[a][1]); ln.setAttribute("x2", pts[b][0]); ln.setAttribute("y2", pts[b][1]);
    ln.setAttribute("stroke-dasharray", d + " " + (d + 2)); ln.setAttribute("stroke-dashoffset", d);
    svg.appendChild(ln);
    tl.to(ln, { attr: { "stroke-dashoffset": 0 }, duration: Math.max(0.08, Math.min(0.45, t[b] - t[a])), ease: "none" }, t[a]);
  });
});
pts.forEach(([x, y], i) => {
  const c = document.createElementNS(NS, "circle"); c.setAttribute("cx", x); c.setAttribute("cy", y); c.setAttribute("r", 2.6); c.setAttribute("opacity", 0);
  svg.appendChild(c); tl.to(c, { attr: { opacity: 1 }, duration: 0.08, ease: "none" }, t[i]);
});
tl.fromTo(svg, { scale: 0.886 }, { scale: 0.912, duration: 4, ease: "none" }, 0); // the slow push-in
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>

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

Low-poly facets that fly in, tumble and settle into the exact logo

The finished flat logo is cut into triangles; each triangle is its own layer showing only its window onto the logo (an SVG mask of the triangle grown 1.1 px on every side about its incentre, so neighbours overlap and meet without seams). Each piece flies in from off-screen on a decelerating path (expo.out, about 0.6 s), tumbling in 3D (rotation 70-220 deg, rotationY 40-120 deg, rotationX 20-80 deg, perspective 900 px) down to zero, dimmed and slightly soft in flight (brightness 0.58, blur 2.4 px) and sharp on landing. They land one after another from the bottom of the logo to the top over about eleven seconds; when the last one lands the logo is pixel-exact.

متى تُستخدم To assemble a logo, a product or an illustration from its own pieces.

عرض الكود

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Low-poly facets that fly in, tumble and settle into the exact logo</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>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #040308; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(circle at 960px 540px, #0D0B1E 0, #0D0B1E 250px, #0a0817 500px, #06050f 600px, #040308 900px); }
#pieces { position: absolute; inset: 0; }
.piece { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; opacity: 0; will-change: transform; }
.piece svg { position: absolute; left: 0; top: 0; overflow: visible; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="6" data-width="1920" data-height="1080"><div id="pieces"></div></div>
<script>
const tl = gsap.timeline({ paused: true });
const host = document.getElementById("pieces");
// the finished logo, flat (any vector mark): an orange halo, a white disc, a pink play triangle
const LOGO = '<circle cx="960" cy="540" r="230" fill="#FE9117"/><circle cx="960" cy="540" r="200" fill="#FFFFFF"/><path d="M905 445 L1060 540 L905 635 Z" fill="#FB2D89"/>';
let seed = 11; const rnd = () => (seed = (seed * 16807) % 2147483647) / 2147483647;
const N = 6, X0 = 720, Y0 = 300, S = 480 / N, P = []; // a jittered grid over the logo's box, two triangles a cell
for (let j = 0; j <= N; j++) for (let i = 0; i <= N; i++) P.push([X0 + i * S + (i % N ? (rnd() - 0.5) * 30 : 0), Y0 + j * S + (j % N ? (rnd() - 0.5) * 30 : 0)]);
const tris = [];
for (let j = 0; j < N; j++) for (let i = 0; i < N; i++) { const a = j * (N + 1) + i, b = a + 1, c = a + N + 1, d = c + 1; tris.push([a, b, d], [a, d, c]); }
const used = tris.filter((t) => t.some((k) => Math.hypot(P[k][0] - 960, P[k][1] - 540) < 240));
used.sort((u, v) => Math.max(...v.map((k) => P[k][1])) - Math.max(...u.map((k) => P[k][1]))); // bottom first
const SPAN = 4.6, FLY = 0.6; // seconds over which pieces land, seconds each flight takes
used.forEach((t, n) => {
  const [A, B, C] = t.map((k) => P[k]);
  const la = Math.hypot(B[0] - C[0], B[1] - C[1]), lb = Math.hypot(A[0] - C[0], A[1] - C[1]), lc = Math.hypot(A[0] - B[0], A[1] - B[1]), per = la + lb + lc;
  const ix = (la * A[0] + lb * B[0] + lc * C[0]) / per, iy = (la * A[1] + lb * B[1] + lc * C[1]) / per;
  const r = Math.abs((B[0] - A[0]) * (C[1] - A[1]) - (C[0] - A[0]) * (B[1] - A[1])) / per, g = (r + 1.1) / r; // grow 1.1 px a side
  const win = [A, B, C].map(([x, y]) => [ix + (x - ix) * g, iy + (y - iy) * g]);
  const el = document.createElement("div"); el.className = "piece"; el.style.transformOrigin = ix + "px " + iy + "px";
  el.innerHTML = '<svg width="1920" height="1080" viewBox="0 0 1920 1080"><defs><mask id="m' + n + '" maskUnits="userSpaceOnUse" x="0" y="0" width="1920" height="1080"><polygon fill="#fff" points="' + win.map((q) => q.join(",")).join(" ") + '"/></mask></defs><g mask="url(#m' + n + ')">' + LOGO + '</g></svg>';
  host.appendChild(el);
  const land = FLY + 0.2 + (n * SPAN) / used.length, ang = rnd() * Math.PI * 2, sgn = () => (rnd() < 0.5 ? -1 : 1);
  tl.set(el, { opacity: 1 }, land - FLY);
  tl.fromTo(el, { x: Math.cos(ang) * 1300, y: Math.sin(ang) * 1300, rotation: sgn() * (70 + 150 * rnd()), rotationY: sgn() * (40 + 80 * rnd()), rotationX: sgn() * (20 + 60 * rnd()), transformPerspective: 900, filter: "brightness(0.58) blur(2.4px)" },
    { x: 0, y: 0, rotation: 0, rotationY: 0, rotationX: 0, filter: "brightness(1) blur(0px)", duration: FLY, ease: "expo.out", immediateRender: false }, land - FLY);
});
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>

معاينة تقنية «Light burst and racing ring that grow an app-icon plate» — عند 0:14 من الفيديو

انتقال

Light burst and racing ring that grow an app-icon plate

On the hit a screen-blended radial burst (pink-mauve, strongest around the logo) appears at once and fades over 0.8 s (power2.out); a 7 px warm ring starts at a 300 px radius and races out at constant speed to 1150 px in 0.38 s; the logo flashes (brightness 1.45, saturation 0.65, back in 0.3 s). 0.1 s after the hit the icon plate grows from a dot behind the logo (scale 0.02 to 1 in 0.21 s, sine.out), lit at first (brightness 1.35, settling in 0.25 s), and turns from a circle into a rounded square (border-radius 50% to 24% in 0.08 s).

متى تُستخدم To turn a free-floating logo into an app icon on the drop.

عرض الكود

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Light burst and racing ring that grow an app-icon plate</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>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #040308; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(circle at 960px 540px, #0D0B1E 0, #0D0B1E 250px, #0a0817 500px, #06050f 600px, #040308 900px); }
#flash { position: absolute; inset: 0; opacity: 0; mix-blend-mode: screen; background: radial-gradient(circle at 960px 500px, rgb(185, 85, 135) 0, rgb(160, 68, 115) 220px, rgb(104, 40, 74) 330px, rgb(66, 26, 48) 450px, rgb(26, 10, 19) 640px, #000 860px); }
#ring { position: absolute; left: 660px; top: 240px; width: 600px; height: 600px; border-radius: 50%; border: 7px solid rgb(60, 34, 6); mix-blend-mode: screen; opacity: 0; }
#plate { position: absolute; left: 622px; top: 202px; width: 676px; height: 676px; border-radius: 50%; background: #1C0B5D; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); opacity: 0; }
#logo { position: absolute; left: 780px; top: 360px; width: 360px; height: 360px; border-radius: 50%; background: #FFFFFF; box-shadow: inset 0 0 0 40px #FE9117; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080"><div id="flash"></div><div id="ring"></div><div id="plate"></div><div id="logo"></div></div>
<script>
const tl = gsap.timeline({ paused: true });
const T = 1.0; // the hit
tl.set("#flash", { opacity: 1 }, T).to("#flash", { opacity: 0, duration: 0.8, ease: "power2.out" }, T);
const ring = (r) => ({ left: 960 - r, top: 540 - r, width: 2 * r, height: 2 * r }); // grow the box, not the scale, so the line keeps its width
tl.set("#ring", { opacity: 1, ...ring(300) }, T).to("#ring", { ...ring(1150), duration: 0.382, ease: "none" }, T).set("#ring", { opacity: 0 }, T + 0.382);
tl.fromTo("#logo", { filter: "brightness(1.45) saturate(0.65)" }, { filter: "brightness(1) saturate(1)", duration: 0.3, ease: "power2.out", immediateRender: false }, T);
tl.set("#plate", { opacity: 1, scale: 0.02, filter: "brightness(1.35)" }, T + 0.097)
  .to("#plate", { scale: 1, duration: 0.21, ease: "sine.out" }, T + 0.097)
  .to("#plate", { filter: "brightness(1)", duration: 0.25, ease: "power1.out" }, T + 0.18)
  .to("#plate", { borderRadius: "24%", duration: 0.08, ease: "power2.inOut" }, T + 0.257);
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>

معاينة تقنية «Icon shrinks aside with a motion blur to make room for the name» — عند 0:15 من الفيديو

التخطيط

Icon shrinks aside with a motion blur to make room for the name

The centred 676 px icon scales to 0.417 and slides to the left third in 0.415 s (power3.inOut, about the frame's centre), blurring up to 7 px at its fastest moment and sharp again as it lands; afterwards it keeps growing by 2.8% over five seconds so the lockup never freezes. The name then starts where the icon made room.

متى تُستخدم To go from a hero icon to a horizontal logo lockup.

عرض الكود

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Icon shrinks aside with a motion blur to make room for the name</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>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #040308; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(circle at 960px 540px, #0D0B1E 0, #0D0B1E 250px, #0a0817 500px, #06050f 600px, #040308 900px); }
#wrap { position: absolute; inset: 0; transform-origin: 960px 540px; }
#icon { position: absolute; left: 622px; top: 202px; width: 676px; height: 676px; border-radius: 24%; background: #1C0B5D; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); }
#icon i { position: absolute; left: 158px; top: 158px; width: 360px; height: 360px; border-radius: 50%; background: #FFFFFF; box-shadow: inset 0 0 0 40px #FE9117; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1920" data-height="1080"><div id="wrap"><div id="icon"><i></i></div></div></div>
<script>
const tl = gsap.timeline({ paused: true });
const AT = 0.6, X = -438, Y = -18.5, S = 0.417; // when, where the icon's centre goes (px from the centre), how small
tl.to("#wrap", { scale: S, x: X, y: Y, duration: 0.415, ease: "power3.inOut" }, AT);
tl.fromTo("#wrap", { filter: "blur(0px)" }, { filter: "blur(7px)", duration: 0.2, ease: "power2.in", immediateRender: false }, AT + 0.015);
tl.to("#wrap", { filter: "blur(0px)", duration: 0.2, ease: "power2.out" }, AT + 0.215);
tl.to("#wrap", { scale: S * 1.028, duration: 3, ease: "none" }, AT + 0.415); // keeps breathing
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>

الطباعة

Wordmark typed on sixteenth notes with a cursor that blinks on the beat

A pink cursor bar (10 x 128 px, soft glow) appears, then the name types one letter every sixteenth note at 96 BPM (0.156 s), each letter fading in over 0.05 s while the cursor jumps to its advance edge plus 16 px. Typed, the cursor blinks on the beat (off 0.28 s, on 0.34 s) three times and goes; meanwhile the tagline sweeps in left to right, each character fading in over 0.06 s as a front passes at about 3000 px/s. Bold grotesk for the name (Golos Text 700, 155 px), light text for the tagline (Onest 400, 49 px, lavender at 74%).

متى تُستخدم For a logo lockup or a title that should feel typed live, in time with the music.

عرض الكود

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Wordmark typed on sixteenth notes with a cursor that blinks on the beat</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=Golos+Text:wght@700&family=Onest:wght@400&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #040308; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(circle at 960px 540px, #0D0B1E 0, #0D0B1E 250px, #0a0817 500px, #06050f 600px, #040308 900px); }
#word { position: absolute; left: 720px; top: 395px; white-space: nowrap; font-family: "Golos Text", sans-serif; font-weight: 700; font-size: 155px; letter-spacing: -1.45px; color: #FFFFFF; }
#tag { position: absolute; left: 724px; top: 600px; white-space: nowrap; font-family: "Onest", sans-serif; font-weight: 400; font-size: 49px; letter-spacing: -0.95px; color: rgba(233, 228, 242, 0.74); }
#word span, #tag span { opacity: 0; }
#cursor { position: absolute; left: 0; top: 446px; width: 10px; height: 128px; border-radius: 1px; background: #FB2D89; box-shadow: 0 0 14px rgba(251, 45, 137, 0.45); opacity: 0; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="5" data-width="1920" data-height="1080"><div id="word"></div><div id="cursor"></div><div id="tag"></div></div>
<script>
const tl = gsap.timeline({ paused: true });
const WORD = "Brand Name", TAG = "Your tagline goes here";
const BEAT = 60 / 96, STEP = BEAT / 4, T0 = 0.4; // the music's beat, a sixteenth, when typing starts
const word = document.getElementById("word"), tag = document.getElementById("tag"), cur = document.getElementById("cursor");
const spans = (el, s) => [...s].map((c) => { const e = document.createElement("span"); e.textContent = c; el.appendChild(e); return e; });
const L = spans(word, WORD), G = spans(tag, TAG);
document.fonts.ready.then(() => {
  const x0 = word.offsetLeft, edge = L.map((s) => x0 + s.offsetLeft + s.offsetWidth + 16);
  tl.set(cur, { x: x0 + 9, opacity: 1 }, T0 - 0.15);
  L.forEach((s, k) => { const t = T0 + k * STEP; tl.to(s, { opacity: 1, duration: 0.05, ease: "none" }, t); tl.set(cur, { x: edge[k] - 5 }, t); });
  const done = T0 + L.length * STEP;
  for (let b = 0; b < 3; b++) { tl.set(cur, { opacity: 0 }, done + 0.5 + b * BEAT); tl.set(cur, { opacity: 1 }, done + 0.78 + b * BEAT); }
  tl.set(cur, { opacity: 0 }, done + 0.5 + 3 * BEAT);
  G.forEach((s) => tl.to(s, { opacity: 1, duration: 0.06, ease: "none" }, done + 0.48 + s.offsetLeft / 3050));
  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> اصنع فيديو ترويجيًا بالموشن غرافيك أفقيًا مدته 15 ثانية بدقة 1920x1080 لـ [your brand]، مبنيًا كأن صفحة هبوط تنبض بالحياة. اقطعه على إيقاع مقطوعة إلكترونية بسرعة 128 BPM بدون تعليق صوتي. الفكرة أنه لا يوجد قطع بسيط أبدًا: كل مشهد يسلّم إلى التالي عبر جسم (نقطة، أو اختيار من البكرة، أو هاتف، أو بلاطة فائزة). حافظ على مظهر واجهة منتج نظيف ومشرق: خلفيات فاتحة، وأزرار كبسولية مستديرة، وبطاقات، وهاتف، ولوحة معلومات، وجدار فيديوهات، مع كل التسميات كنص داكن على لوحات بيضاء واستخدام ألوان علامتي التجارية حسب الدور. تجنب القطع الحاد والتلاشي المتقاطع والصوت البشري والنص الأبيض على خلفيات فاتحة أو مخططة والتسميات التي تتداخل مع الحلقات أو الأشكال المجاورة. </direction> <structure> خمس ضربات متساوية تقريبًا في الطول، نحو 3 ثوانٍ لكل منها، وكل تسليم يقع على الإيقاع. 1. الافتتاح: تظهر نقطة واحدة في المنتصف وتكبر لتصبح كبسولة أفقية تحمل صفًا من الدوائر: صور شخصية صغيرة وأيقونات مثل "Aa" وأشكال بسيطة ومكعب. كل أيقونة ظاهرة بالكامل وغير مغطاة بالدائرة المجاورة. تتراجع الكاميرا لتكشف عنوانًا من سطرين، كلاهما في المنتصف. السطر الأول مثل "No … keyframes." (استبدله بعنوانك). الكلمة الأخيرة من العنوان تظل تتقلب بين بدائل مثل بكرة ماكينة الحظ. 2. تغوص حركة تكبير إلى بكرة دوّارة من صور المبدعين والبطاقات. تتباطأ البكرة وتستقر على اختيار واحد، فيُبرَز. 3. يتحول الاختيار إلى هاتف، وتنفرد حوله مروحة من بطاقات الميزات. تقول إحدى البطاقات "Edit in words" مع الرقم الكبير "03" ووسم صغير "Live preview" بجوار الرقم مباشرة (استبدلها بميزاتك). تظهر تسميات البطاقات على لوحات بيضاء. 4. تقود حركة بانوراما سريعة إلى لوحة معلومات من بلاطات الفيديو بتسميات على لوحات بيضاء. تقيّمها وتختار فيديو فائزًا، فيُبرَز. 5. تنفتح البلاطة الفائزة إلى جدار مائل من الفيديوهات بتسميات على لوحات بيضاء. ثم يطوي الجدار نفسه ليصبح شعاري في بطاقة النهاية، مع "[your website]" بجوار الشعار على لوحة بيضاء. </structure> <composition> تأطير متمركز ومتماثل للعنوان وبطاقة النهاية مع الشعار. تُرتَّب عناصر الواجهة كما في صفحة هبوط حقيقية: صف من الكبسولات، وبطاقات بأرقام كبيرة ووسوم صغيرة، ونموذج هاتف، وشبكة لوحة معلومات، وجدار مائل بمنظور. استخدم ألوان علامتي التجارية حسب الدور: درجات الخلفية (فاتحة مع بعض التعبئات المخططة)، ولونًا مميزًا واحدًا للإبرازات والتحديدات والحلقات، ولون نص داكنًا. كل تسمية على البطاقات والبلاطات والجدار نص داكن على لوحة بيضاء مستديرة لتُقرأ على أي خلفية. استخدم عائلة خطوط واحدة نظيفة بدون زوائد: عنوان بخط عريض، وتسميات بوزن عادي، وتسميات الأزرار بخط عريض. اترك هوامش سخية حتى لا يلامس أي نص الحلقات أو الحواف. </composition> <techniques> كل انتقال هو جسم يتحول إلى المشهد التالي، وليس قطعًا أبدًا. تكبر النقطة لتصبح الكبسولة بتباطؤ ناعم في النهاية، وتظهر الدوائر بقفزة مع فارق زمني طفيف. تراجع الكاميرا تصغير سلس للمقياس يكشف العنوان. الكلمة المتقلبة هي بكرة عمودية تدور بين الكلمات في حلقة. يمر التكبير عبر الكبسولة إلى البكرة. تدور البكرة بسرعة ثم تتباطأ بتباطؤ طويل لتستقر بدقة على الاختيار. يتغير مقياس الاختيار وشكله ليصبح الهاتف، وتنفرد البطاقات حوله بدوران وانزلاق متتابعين. البانوراما السريعة حركة أفقية سريعة مع ضبابية حركة وتسارع وتباطؤ حادين. تحديد لوحة المعلومات حلقة إبراز وتكبير للفائز. يتمدد الفائز إلى الجدار ثلاثي الأبعاد المائل الذي ينطوي وينهار إلى الشعار باستقرار أخير. كل الحركات والهبوطات الرئيسية تصيب شبكة الإيقاع. </techniques> <music> أنشئ مقطوعة إلكترونية أصلية حماسية بسرعة 128 BPM ومدتها 15 ثانية بالضبط، بمسار واضح: بداية خفيفة، وتصاعد عبر مشهدي البكرة والهاتف، وذروة (drop) حول البانوراما السريعة، ونهاية نظيفة على الشعار. ضعها على شبكة إيقاع المونتاج، مع ضربات مؤلفة فوقها لكل تسليم، وصعود (riser) نحو الذروة، وضربة أخيرة عندما ينطوي الجدار إلى الشعار. اضبط الماستر عند نحو -14 LUFS مع ذروة حقيقية أقل من -1 dBTP. </music> <sound> بدون تعليق صوتي. أضف أصوات whoosh عند التكبير والبانوراما السريعة، وطقة قصيرة مع توقف عند استقرار البكرة، وصدمة ناعمة على الشعار. أبقها كلها تحت الموسيقى وعلى الإيقاع. </sound> <references> صفحة هبوط لـ SaaS محركة لتصبح فيديو ترويجيًا لمنتج: بطاقات واجهة، ونموذج هاتف، ولوحة تحليلات، وجدار فيديوهات، بأسلوب فيديوهات إطلاق التطبيقات الحديثة مع انتقالات سلسة من جسم إلى آخر. </references>

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

فيديو ترويجي بتذكرة وحقيبة وصيغ متعددة مع كشف الشعار

<direction> اصنع فيديو ترويجيًا بتصميم حركي مدته 15 ثانية بشكل أفقي (1920x1080، 60 إطارًا في الثانية) لـ [your brand]، وهو منتج يحوّل الوصف إلى فيديو جاهز (كيّف الكلمات لتناسب منتجك). الفكرة: يتحول الطلب إلى تذكرة، وتنفتح التذكرة على وعد، وتسلّم حقيبة سفر الخطوات واحدة تلو الأخرى، وتمر ثلاث صيغ بسرعة، ثم يستقر كل شيء على شعاري. لا يوجد تعليق صوتي: الكلمات على الشاشة والموسيقى تحمل الإيقاع. كل شيء مرسوم: رسومات ثنائية الأبعاد مسطحة مع بطاقة واحدة مائلة بتأثير ثلاثي الأبعاد، دون لقطات مصوّرة. المظهر فاتح ونظيف ونابض بالطاقة: لون وردي واحد مميز على صفحة فاتحة، مع حقل داكن بلون حبر عميق. تجنب اللقطات المصوّرة والصوت والضبابية داخل أقنعة النص وأي انجراف أو تشويه للشعار. يتشكل الشعار كاملًا تمامًا كما هو مرسوم، ويبقى ثابتًا تمامًا من نحو 13.3 ثانية حتى النهاية. </direction> <structure> 1. 0–1.9 ثانية، الطلب. على اليسار، عنوان صغير وردي بتباعد بين الأحرف «YOUR AI MOTION DESIGNER» يعلو عنوانًا رئيسيًا من ثلاثة أسطر بحجم نحو 180 بكسل: «Describe» / «the» / «video.» (استبدله بعنوانك؛ السطر الأخير وردي). ترتفع الأسطر من خطوطها القاعدية واحدًا تلو الآخر. يتحرك الأول فعلًا عند الإطار 0 وتتبعه البقية بفارق 0.13 ثانية، بشكل خطي، 0.17 ثانية لكل سطر. على اليمين بطاقة تذكرة بيضاء مائلة في المنظور، وجانبها الأيسر أقرب. لها رأس وردي «FROM IDEA TO VIDEO» وشعاري صغير مع «[your brand]» بجانبه. حقلان، «FROM IDEA · Your idea» و«TO MP4 · Video»، يربط بينهما خط متقطع مع مثلث تشغيل وردي. تحمل أيضًا تسميات صغيرة «EDIT WORDS» و«STEP 03» و«EFFECTS 3D» و«PREVIEW LIVE»، وباركود، و«03» على القسيمة. تطير البطاقة من اليمين عند 0.23 ثانية (power3.out، 0.35 ثانية)، وتتجاوز نحو 125 بكسل إلى اليسار ثم تستقر عائدة (sine.inOut، 0.37 ثانية). في الأثناء يقلّب رمز «MP4» أحرفًا عشوائية 15 مرة في الثانية ويثبت حرفًا بحرف عند 0.67 و0.8 و0.93 ثانية. عند 1.17 ثانية يهوي ختم وردي بإطار «MP4 EXPORT»، مائل بزاوية -14°، من حجم 2.4x في 8 إطارات مع ارتداد صغير جدًا. عند 1.67 ثانية يتقلص مثلث التشغيل إلى نقطة وردية تنمو إلى مسح دائري متمركز عليها، مع حلقتين وردييتين باهتتين تركبان خارج حافته مباشرة. يمر نصف القطر بالقيم 15 و36 و66 و120 و210 و330 و540 و900 و1500 بكسل، بخطوة كل إطارين. تغادر أسطر العنوان إلى الأعلى بالترتيب بينما تكبر الدائرة. 2. 1.9–4.0 ثانية، الوعد، على حقل وردي كامل (شعاعي، أفتح في الوسط). يولد مثلث تشغيل أبيض، أطول قليلًا من عرضه ليشير إلى وجهته، داخل الدائرة. يطير في حلقة واحدة حول الكلمات، مدارًا على امتداد مساره: إلى الأعلى، ثم يسارًا عبر الأعلى، ثم إلى الأسفل على اليسار، ثم على طول الأسفل، ثم إلى الأعلى على الجانب الأيمن وخارجًا من أعلى اليمين. يرسم خلفه مدارًا منقطًا أبيض تتلاشى نقاطه الأقدم إلى خط رفيع باهت. توجد دائرتان كبيرتان باهتتان في الخلفية. تتأرجح «No keyframes.» (نحو 220 بكسل، أبيض) حرفًا بحرف بفارق 0.03 ثانية على قوس من أسفل اليمين، تبدأ بزاوية 38° وتستقيم. عند 2.8 ثانية تطير إلى الأعلى وخارجًا حرفًا بحرف. في الوقت نفسه ترتفع «The agent animates it.» (نحو 157 بكسل) من خطها القاعدي حرفًا بحرف بفارق 16 مللي ثانية. عند 3.03 ثانية تنزلق حبة بيضاء مستديرة من اليسار خلف «animates it.» في 0.18 ثانية، وتتحول تلك الكلمات إلى الوردي داخلها. عند 3.77 ثانية تتضبب الكلمات وتتلاشى. تسقط حقيبة سفر بلون حبر عميق بحزام وردي وبطاقة «MP4» من الأعلى وتهبط عند 4.02 ثانية مع انضغاط صغير. 3. 4.0–8.95 ثانية، الخطوات. تنفتح دائرة فاتحة من حقيبة السفر مع حلقتين وردييتين باهتتين، وتنتشر قطعتان ناقصتان وردييتان موجيتان من قاعدتها. في الأعلى ترتفع «Edit in words.» (خافتة، نحو 56 بكسل). ثم ترتفع «Your idea is ready to move.» (نحو 93 بكسل) كلمة بكلمة، مع «move.» بالوردي وخط تسطير وردي مرسوم باليد يُرسم تحتها. فوق حقيبة السفر تصل ست بطاقات خطوات بيضاء، واحدة كل 0.58 ثانية. كل بطاقة بحجم 900x165 بكسل ومستديرة، مع مربع أيقونة على اليسار وشارة حالة على اليمين. ترتفع كل واحدة من خلف حقيبة السفر (من 100 بكسل أدنى وبحجم 72٪، 0.3 ثانية، power2.inOut) مع شارة لافندر «Animating» ودوّار تحميل. ثم تضيء على مرحلتين: أولًا حد وردي وهالة خارجية ناعمة، وبعد 0.07 ثانية يتحول مربع الأيقونة إلى الوردي وتصبح الشارة «✓ Ready» وردية. عند وصول البطاقة التالية ترتفع القديمة 40 بكسل وتتلاشى في 0.15 ثانية. تقرأ البطاقات: «Kinetic type» و«Shapes» و«3D effects» و«Sound» و«Your own footage» و«Fonts for every script» (استبدلها بما يخصك). تحت حقيبة السفر تتقدم ست نقاط وعداد مع كل بطاقة، من «1 / 6 in motion» إلى «6 / 6 in motion». عند 7.9 ثانية تتبدل البطاقة الأخيرة في مكانها إلى «Ready to move.» مع مربع علامة صح وشارة وردية «6 / 6». يُستبدل العداد بـ «✓ Live preview. MP4 export.» عند 8.4 ثانية يرتفع كل شيء ما عدا حقيبة السفر ويتلاشى بضبابية. عند 8.7 ثانية تغوص الكاميرا في حقيبة السفر حتى يملأ جسمها بلون الحبر العميق الإطار. 4. 8.95–11.4 ثانية، الصيغ. تمسح مجموعة من ثلاثة أشرطة مائلة من اليمين إلى اليسار في 0.2 ثانية وتفتح لوحة بملء الإطار خلف حافتها الخلفية. تميل الأشرطة نحو 18°: شريط رفيع وردي داكن، وشريط عريض وردي، وشريط رفيع وردي فاتح. يتكرر المسح نفسه عند 9.76 و10.5 ثانية. اللوحات الثلاث كتل متدرجة ناعمة بأفق: - من اللافندر إلى البنفسجي، مع ضوء دافئ في النصف السفلي؛ - سماء بنفسجية فوق «بحر» بلون حبر عميق؛ - سماء برتقالية فوق حبر عميق، مع شريط ضباب فيروزي. تتقدم كل لوحة ببطء من 1.07 إلى 1 ولها تدرج بلون حبر عميق في الأسفل. يرتفع اسمها حرفًا بحرف في أسفل اليسار، بنحو 226 بكسل، أبيض: «Vertical» و«Horizontal» و«Square». في أعلى اليسار شاشة عرض صغيرة (HUD) بتباعد بين الأحرف: «01 / 03» بالوردي الفاتح، ثم «9:16»، ثم «MP4 EXPORT» يُكتب تدريجيًا، مع خط تسطير وردي ينمو تحته. تتغير إلى «02 / 03 · 16:9 · LIVE PREVIEW» ثم «03 / 03 · 1:1 · NO KEYFRAMES». 5. 11.4–12.5 ثانية، الشبكة. تتقلص اللوحة الأخيرة إلى البطاقة اليمنى بينما تنزلق اللوحتان الأخريان من اليسار. معًا تشكلان ثلاث بطاقات عمودية (580x780 بكسل، بينها 30 بكسل) على حقل بلون حبر عميق. تتقدم الشبكة بلطف إلى 1.05 وتعود لتستقر في نصف ثانية. ترتفع «Vertical, horizontal or square.» فوقها بالأبيض. بعد أن تستقر الشبكة تظهر أسماء صغيرة تدريجيًا على البطاقات («Vertical» و«Horizontal» و«Square»)، داخل الإطار بوضوح. 6. 12.2–15 ثانية، الشعار. تنمو نقطة وردية من البطاقة الوسطى، مع حلقات هالة باهتة، بينما تتقلص الشبكة إلى 0.9 على صفحة بيضاء. يُضبط نصف قطرها بإطارات مفتاحية كل إطارين من 12 إلى 1150 بكسل. ثم تتقلص النقطة بسرعة وتبطئ (260 و125 و90 و75 بكسل) وهي تنتقل إلى يسار المنتصف. هناك تنفتح مباشرة إلى شكل خلفية شعاري، دون أن تتداخل مع الشعار أبدًا، وتنمو الأجزاء الداخلية للشعار كقطعة واحدة، تمامًا كما الشعار مرسوم. عند 13.03 ثانية ينزلق «[your brand]» من خلف الشعار إلى اليمين (power3.out، 0.32 ثانية)، بينما تنتشر حلقة وردية رفيعة حول الشعار وتتلاشى. الاسم بحجم نحو 150 بكسل، بلون حبر عميق، وحروفه متمركزة على الخط الأوسط للشعار والتركيب كله متمركز في الإطار. ثم ترتفع «Describe the video. The agent animates it.» كلمة بكلمة تحته، مع الجملة الثانية بالوردي. تظهر ثلاث شارات لافندر: «• Vertical» و«• Horizontal» و«• Square». يرتفع «[your website]» بلون رمادي خافت. يبقى الشعار ثابتًا تمامًا من نحو 13.3 ثانية، ويثبت كل شيء حتى النهاية. </structure> <composition> الأساس صفحة فاتحة #FAF9FF مع شبكة نقاط خافتة 40 بكسل #E9E4F2 وتوهجات شعاعية وردية ناعمة. لون الحبر العميق #1C0B5D للنص الداكن والعناصر الداكنة والحقل الداكن. هناك لون مميز واحد، الوردي #FB2D89، للتمييز والحقل المميز والتقدم. اللون الخافت #6B6385 للأسطر الثانوية واللافندر #F0EDFF للشارات الناعمة. البرتقالي #FE9117 والبنفسجي #7C6CF2 والفيروزي #2DD4B0 تظهر فقط في لوحات الصيغ الثلاث (وفي شعاري إن كان يستخدمها). العناوين بخط سانس هندسي ثقيل، Manrope ExtraBold، مع تباعد ضيق بين الأحرف نحو -0.05em. التسميات الصغيرة ونص شاشة HUD والموقع بخط سانس نظيف، Inter SemiBold. التخطيط حسب اللقطة: - اللقطة 1: العنوان على اليسار، والتذكرة المائلة على اليمين. - اللقطة 2: الكلمات في المنتصف على الحقل الوردي. - اللقطة 3: بطاقات الخطوات مكدسة فوق حقيبة السفر، والنقاط والعداد تحتها، والعنوان في الأعلى. - اللقطة 4: أسماء الصيغ في أسفل اليسار، وشاشة HUD في أعلى اليسار. - اللقطة 6: تركيب الشعار الختامي في المنتصف، مع الشعار النصي والشارات والموقع مكدسة تحته. </composition> <techniques> الظهور نظيف. يرتفع النص من خطه القاعدي داخل قص يتحرك معه، وليس أبدًا ضبابية داخل قناع. تتسارع حركات الخروج وتختفي في نحو 0.1 ثانية. - تنمو المسحات الدائرية بأنصاف أقطار متدرجة بإطارات مفتاحية كل إطارين، مع حلقات وردية باهتة خارج الحافة مباشرة. - يقلّب رمز التذكرة الأحرف ويثبت حرفًا بحرف. - يهوي الختم من 2.4x مع ارتداد صغير جدًا. - تدخل الأحرف على قوس دوّار، وتمسح حبة التمييز خلف الكلمات التي تغيّر لونها داخلها. - تضيء بطاقات الخطوات على مرحلتين: الحد والهالة أولًا، ثم المربع والشارة. - تغوص الكاميرا في حقيبة السفر بمقياس 1.5 و3.1 و6.2 و7 خلال ربع ثانية. - تحمل مسحات الأشرطة الثلاثة المائلة الانتقالات بين لوحات الصيغ، وتتقدم كل لوحة ببطء. - تنهار اللوحة الواحدة إلى شبكة من ثلاث بطاقات. - تنتقل نقطة وتنفتح إلى الشعار، الذي يُبنى كقطعة واحدة ولا يتحرك ولا يتشوه أبدًا بعد تشكله. </techniques> <music> استخدم مقطوعة هاوس إلكترونية أصلية مبهجة ومتفائلة بإيقاع 120 نبضة في الدقيقة، بطول 15 ثانية بالضبط. يعمل الإيقاع الكامل من الإطار الأول، مع ضربة كيك على كل نبضة عند نحو x.05 وx.55 ثانية. يبقى ثابتًا تحت البطاقات والصيغ. تختفي الطبول عند 12.55 ثانية عندما تبتلع النقطة الشبكة، تاركة بادًا دافئًا وأربيجيو صاعدًا يتلاشيان بحلول 15 ثانية. تقع القطعات والضربات الرئيسية على شبكة النبضات. </music> <sound> يوضع تصميم الصوت فوق المقطوعة، دون طبول إضافية: - صوت وووش عند طيران التذكرة؛ - نقرات خفيفة عند تثبيت الرمز؛ - ضربة ناعمة عند الختم؛ - أصوات وووش عند كل مسح دائري وعند حبة التمييز؛ - ضربة مكتومة عند هبوط حقيبة السفر؛ - صوت بيب يرتفع في النغمة عند تحول كل بطاقة إلى الوردي؛ - رنين عند هبوط البطاقة الأخيرة؛ - صوت صاعد قبل الغوص وضربة عند فتح اللوحة الأولى؛ - أصوات وووش عند كل مسح للأشرطة وعند اجتماع البطاقات؛ - صوت صاعد قبل الدروب؛ - جرس عند تشكل الشعار؛ - نقرات خفيفة على الشارات. اضبط المزج على نحو -14 LUFS مع ذروة حقيقية أقل من -1 dBTP. </sound> <references> إعلان إطلاق تطبيق عصري بأسلوب متجهي مسطح، مبني على الطباعة الحركية واستعارة السفر: بطاقة صعود الطائرة وحقيبة سفر ولوحات أفق. ينتهي بتركيب شعار نظيف في المنتصف. </references>

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

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

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

<direction> اصنع مقطعًا تعريفيًا أفقيًا بشاشة منقسمة مدته 12 ثانية لتطبيقي، بدقة 1920x1080 وبمعدل 59.94 إطارًا في الثانية. تعرض لوحتان مربعتان جنبًا إلى جنب الرسوم المتحركة الساطعة للواجهة نفسها. تتحرك اللوحة اليسرى بإحساس 29.97 إطارًا في الثانية وتعمل اللوحة اليمنى بمعدل الإطارات الكامل، ليظهر الفرق في السلاسة. تقع سبع لقطات سريعة على الإيقاع: مؤشر ينقر على شعاري في نافذة التطبيق، تنفجر الأيقونة إلى مربعات تدور حولها، نقرة في شريط القوائم تُخرج مربع أوامر زجاجيًا يُكتب فيه نص، تمر صفحة نص مع بطاقة، تطفو بطاقتان متراصتان إلى الأعلى، يبقى شعاري وحده، ويظهر شعار نصي متوهج بقوة على خلفية شبه سوداء. المظهر نظيف وساطع، مع ظلال ناعمة وتمويه حركة على كل حركة. تجنب البدايات الثابتة والتلاشي المتقاطع والحبيبات والتعليق الصوتي. </direction> <structure> 1. من 0.00 إلى 2.39 ث، الترويسة والنقرة. يتبدد ضباب مائل إلى البنفسجي خلال 0.9 ث ليظهر الصفحة البيضاء ويترك وهجًا لافندريًا في الأسفل. ترتفع ترويسة من سطر واحد من نحو y 930 إلى 537 بتخفيف أسي للخروج (نحو 1.2 ث)، وتكون شديدة التمويه في البداية. تحتوي على شعاري في قرص لافندري بقطر 132 px، والاسم «[علامتك التجارية]» بخط Inter Medium بلون الحبر العميق، وكبسولة بلون الحبر العميق «افتح التطبيق». يظهر الاسم فجأة في الإطار الثاني وهو مموه أصلًا. تتبعه الكبسولة بعد إطارين، منزلقة 15 px إلى اليسار بينما تصبح حادة. من 0.45 ث تظهر نافذة تطبيق بيضاء بنصف قطر زاوية 93 px تدريجيًا حول الترويسة (53%، ثم 70%، ثم 100% عند 0.78 ث). في داخلها كبسولة بحث لافندرية «صف الفيديو» وعمود من الأيقونات الخافتة وبطاقة فوق غلاف من الحبر العميق إلى البنفسجي. تقول البطاقة «فكرتك جاهزة للحركة» / «معاينة مباشرة · تصدير MP4» في اللوحة اليسرى و«دردشة بدل الخط الزمني» في اليمنى. يقول الغلاف «من الفكرة إلى الفيديو في دردشة واحدة» أو «صف فكرتك». عند 0.88 ث يظهر مؤشر سهم أسود بحدود بيضاء في أعلى اليمين وينزلق إلى اليسار متباطئًا. يدور -85 درجة ليواجه الأسفل أثناء انقضاضه، ويهبط منتصبًا على الشعار ويكبر 1.55 مرة بينما تضيء حلقة وردية ناعمة حول القرص. تتقدم الكاميرا إلى 1.2 حول المركز (ease-in-out، 0.47 ث) وتثبت إطارًا واحدًا. ثم تتراجع إلى 1.04 بمنحنى متسارع بينما يضغط المؤشر (ينكمش 15%)، مباشرة إلى القطع. 2. من 2.39 إلى 3.35 ث، الأيقونة والمدار. قطع حاد على لحظة الذروة الموسيقية: شعاري كأيقونة للتطبيق يهبط بحجم 276 px ثم ينكمش إلى 178 px (expo out، 0.47 ث). أربعة مربعات مستديرة، مموهة بالحركة ومتقدمة بزاوية 32 درجة، تستقر على شكل صليب حوله بنصف قطر 222 px (expo out، 0.9 ث). هي بنفسجي وفيروزي ووردي وأصفر على اليسار، ووردي وبرتقالي وفيروزي وأبيض على اليمين. ينمو قرص لافندري ثنائي اللون خلف الأيقونة في 0.2 ث. من 3.12 ث تنطوي المربعات نحو صف على اليمين وتنكمش، وتنكمش الأيقونة إلى نحو 70 px تحت تدرج تمويه. 3. من 3.35 إلى 5.29 ث، شريط القوائم والأوامر. قطع إلى الزاوية العلوية اليمنى من شاشة حاسوب تحت صفحة بيضاء. يظهر إطار شبه أسود بسمك 46 px وشريط قوائم داكن شبه شفاف فيه أيقونات الواي فاي والبطارية والتحكم، وشعاري، وثلاث نقاط لونية، و«[علامتك التجارية]» و«افتح التطبيق». تنتقل الخلفية من الحبر العميق إلى البنفسجي، مع خطوط ضوء قطرية على اليسار، وتوهج وردي، وشبكة رفيعة، ولمعة على اليمين. يرتفع المؤشر إلى الشعار وينقر (يتحجم إلى 0.82 لمدة 0.1 ث). يقفز مربع أوامر زجاجي مصنفر من الأيقونة: 740 x 226 px، نصف قطر 56 px، لافندري شبه شفاف بحد أبيض رفيع. يتحجم من 0.18 إلى 1 مع تجاوز في 0.19 ث، ويهبط تمويهه من 9 px إلى 0، بينما تنزاح الكاميرا 115 px إلى اليمين. يُكتب فيه بمعدل 27 حرفًا في الثانية خلف مؤشر كتابة أبيض: «عدّل بالكلمات، بلا إطارات مفتاحية» على اليسار، «أكبر، أبطأ، لون آخر» على اليمين. يوجد زر إرسال وردي دائري وثلاثة رموز صغيرة في صفه السفلي. تطفو اللقطة إلى الأعلى وتغادر بتدرج تمويه عمودي بينما يرتفع غشاء لافندري إلى 75%. 4. من 5.29 إلى 7.16 ث، صفحة الإجابة والبطاقة. خارجة من الوميض اللافندري، تتمرر صفحة نص رمادي بنفسجي بخط Inter بحجم 42–45 px إلى الأعلى من 291 px أسفل. تتحرك بمنحنى أسي (ثابت زمني 0.2 ث)، مع تمويه عمودي مرتبط بسرعتها. توجد عبارة واحدة بلون الحبر العميق SemiBold تحت مؤشر صغير منتصب: «مصمم حركة بالذكاء الاصطناعي» على اليسار، ««أبطأ»، «لون آخر»» على اليمين. أسطر المثال: «من الفكرة إلى الفيديو في دردشة واحدة»، «01 اختر قالبًا»، «02 صف فكرتك»، «03 حسّن بالكلمات ثم صدّر»، «أخبر الدردشة بما تريد عرضه. يبني الوكيل الرسوم المتحركة.»، «طباعة حركية وأشكال وتأثيرات ثلاثية الأبعاد وصوت». عند 6.22 ث تظهر بطاقة قرب الأسفل فجأة وهي مموهة. ترتفع بتخفيف خروج سريع مع انجراف ثابت إلى الأعلى بسرعة 158 px/ث بينما تعتم الصفحة إلى 45% وتتموه 3 px. على اليسار تعرض البطاقة مثلثًا مجردًا بالحبر العميق والبنفسجي والبرتقالي والأصفر، بتعليق «أفكار في حركة» / «[موقعك الإلكتروني]». على اليمين تعرض غلافًا من الحبر العميق إلى البنفسجي مع بطاقة بيضاء «صف فكرتك»، بتعليق «دردشة بدل الخط الزمني» / «معاينة مباشرة · تصدير MP4». من 6.9 ث تتسارع إلى الأعلى وتنكمش إلى 0.9 وتتلاشى بالتمويه. 5. من 7.16 إلى 8.16 ث، البطاقات المتراصة. ذوبان بتمويه على ثلاثة إطارات يُدخل بطاقتين متراصتين (534 x 343 px، نصف قطر 51 px). تصلان أسفل بـ 165 px وأكبر بنسبة 15% ومموهتين، وتستقران في 0.3 ث وتواصلان الانجراف إلى الأعلى، ثم تغادران بحركة متسارعة وتدرج تمويه. تحمل كل منهما عنوانًا أبيض ضخمًا بشفافية 60%، مقطوعًا بحافتها السفلية. على اليسار العنوانان «الخطوط» و«الموسيقى» فوق رسوم مثلثات مع كبسولة «افتح التطبيق». على اليمين «الأشكال» و«الصوت» فوق أغلفة من الحبر العميق إلى البنفسجي مع كبسولتي «02» و«03» وبطاقتين داخليتين بيضاوين «طباعة حركية وأشكال» و«موسيقى ومؤثرات صوتية»؛ وللبطاقة الثانية توهج وردي برتقالي. 6. من 8.16 إلى 10.03 ث، الشعار وحده. قطع بتمويه إلى شعاري في قرص لافندري بقطر 167 px على خلفية بيضاء. يرتفع 115 px إلى مكانه بمنحنى أسي (0.17 ث)، ويثبت، ثم ينكمش نحو القطع. 7. من 10.03 إلى 12.00 ث، بطاقة النهاية. قطع حاد إلى شبه الأسود مع توهج شعاعي بلون الحبر العميق. شعار نصي أبيض بتوهج ناعم بطبقتين يندفع من 3.85x: «[علامتك التجارية]» على اليسار، «[موقعك الإلكتروني]» على اليمين. يزول تمويهه الأفقي في 0.1 ث. يستقر عند 1x في نحو ثانية بمنحنى يزداد بطئًا، ثم يتراجع ببطء ويتسارع إلى 0.72x في الإطار الأخير. </structure> <composition> الخلفية شبه سوداء #0D0B1E. توجد لوحتان مربعتان بحجم 930 x 930 px لكل منهما جنبًا إلى جنب عند y 100 (اليسرى عند x 20 واليمنى عند x 970). فوق كل منهما ملصق صغير بخط Inter SemiBold حجم 28 px بلون لافندري فاتح #E9E4F2: «معاينة مباشرة» فوق اللوحة اليسرى و«[علامتك التجارية] · تصدير MP4» فوق اليمنى. تعرض اللوحتان اللقطات السبع نفسها في الوقت نفسه، بالتوقيت والحركة نفسيهما. تعرض اللوحة اليسرى صورة جديدة كل إطارين وتعرض اليمنى صورة جديدة كل إطار. تختلف بعض الكلمات فقط بين اللوحتين، كما هو مذكور في اللقطات. داخل اللوحة، رتب كل شيء على مسرح 1080 x 1080 يُقاس ليناسبها. لوحة الألوان: صفحة فاتحة #FAF9FF؛ لافندري #F0EDFF للوحات الناعمة والتوهجات؛ الخطوط #E9E4F2؛ رمادي بنفسجي خافت #6B6385 للنص الثانوي؛ الحبر العميق #1C0B5D للنص الداكن والأسطح الداكنة؛ شبه أسود #0D0B1E. الألوان المميزة هي الوردي #FB2D89 (الرئيسي) والبرتقالي #FE9117، مع البنفسجي #7C6CF2 والفيروزي #2DD4B0 والأصفر #FFD23F حيث تلزم أربعة ألوان. استخدم Inter بأوزان 400/500/600/700 في كل مكان. شعاري هو أيقونة التطبيق أينما ظهر شعار. تناسب أيقونة مربعة مستديرة التخطيط أكثر، مثل مربع بلون الحبر العميق بدوامة وردية وبرتقالية وبيضاء ومثلث تشغيل وردي. </composition> <techniques> لا شيء يبدأ من إطار ثابت. يدخل كل عنصر وهو متحرك بالفعل بتخفيف خروج أسي، ويغادر بحركة متسارعة أو بتدرج تمويه. يتبع تمويه الحركة سرعة واتجاه كل حركة. لا توجد تلاشيات متقاطعة: تتغير اللقطات بقطع حاد وقطع بتمويه وذوبان قصير بتمويه، كلها على الإيقاع. تتقدم الكاميرا إلى 1.2 (ease-in-out، 0.47 ث)، وتثبت إطارًا واحدًا وتتراجع إلى 1.04 بمنحنى متسارع في اللقطة 1، وتنزاح 115 px إلى اليمين في اللقطة 3. المؤشر سهم أسود بحدود بيضاء؛ وتجعله نقراته ينكمش (15%، أو إلى 0.82 لمدة 0.1 ث). تجري الكتابة بمعدل 27 حرفًا في الثانية خلف مؤشر كتابة أبيض. تتجاوز العناصر الظاهرة فجأة حجمها قليلًا. تستخدم الخروجات إلى الأعلى تدرجات تمويه عمودية، ويستخدم اندفاع بطاقة النهاية تمويهًا أفقيًا. </techniques> <music> اصنع خلفية موسيقية مرحة من الفانك هاوس بإيقاع 124 BPM، ومدتها 12 ثانية بالضبط. تبدأ بمقدمة مفلترة تحت اللقطة الأولى. يبدأ الإيقاع الكامل (طبلة بأربع ضربات منتظمة، تصفيق، باس سلاب، وتريات منقورة) عند القطع إلى الأيقونة عند 2.39 ث. تُعزف فقرة هادئة مفلترة تحت الشعار وحده، ويتبع ضربة بطاقة النهاية صدى ريفرب متلاشٍ. يقع كل قطع على الإيقاع. اضبط المزج على نحو -14 LUFS مع ذروة حقيقية دون -1 dBTP. </music> <sound> فوق الموسيقى، أضف المؤثرات الصوتية التالية: - صوت صاعد قبل الذروة ودوي عندها - نقرة ناعمة عندما يضغط المؤشر على الشعار، وأخرى على أيقونة شريط القوائم - فرقعة عندما يقفز مربع الأوامر - نقرات كتابة خفيفة - صوت اندفاع عند الانطواء إلى شريط القوائم وعند الانتقال السريع إلى صفحة النص - صوت سريع عندما ترتفع البطاقة وعندما تذوب البطاقات المتراصة - ضربة خفيفة على الشعار وحده - دوي بنغمة هابطة على بطاقة النهاية بلا صوت بشري. </sound> <references> مقطع تعريفي متقن لإطلاق تطبيق بأسلوب حركة واجهات المنتجات الحديثة: نماذج واجهات ساطعة، وحركات كاميرا ديناميكية، وتمويه حركة اتجاهي قوي، وقطع متزامن مع الإيقاع. وهو مصمم كمقارنة بين معدلي إطارات. </references>

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

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