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

AR

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

Simple Motion

عرض رياضي حيّ بقطع غليتش على الإيقاع

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

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

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

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

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

الفكرة

اصنع عرضًا متحركًا (showreel) مدته 20 ثانية مبنيًا بالكامل من الرياضيات: كل إطار يُولَّد من الزمن الجاري t، بلا صور أو لقطات مصوّرة أو رسومات جاهزة. أفقي 1920x1080 بمعدل 60 إطارًا في الثانية. يجب أن يبدو كأداة مخبرية دقيقة تصبح فجأة جميلة: داكنة، متوهجة، دقيقة، مع قطعة غليتش واحدة كل ثانيتين على الإيقاع. تُعرض ثمانية مشاهد رياضية داخل إطار ثابت بأسلوب الأجهزة (أقواس الزوايا، علامة نصية، عدّاد المشهد وعنوانه، نقطة الإيقاع، ساعة جارية، خط التقدم، معادلة حيّة)، ثم بطاقة ختامية بالعلامة التجارية. تجنّب الحبيبات والصور الجاهزة وأي زخرفة لا تنبع من الرياضيات.

البنية

القطعات عند 2 و4 و8 و10 و12 و14 و16 و18 ثانية، كلها على الإيقاع. 1) من 0 إلى 2 ث، نقطة الأصل: حلقة فيروزية خافتة تنمو من المركز حتى r 238 px (من 0 إلى 0.45 ث، ease out)؛ محاور بعلامات كل 60 px تنمو من نقطة مركزية متوهجة؛ وتغادر حلقة موجية النقطة مع كل نبضة. سطر واسع التباعد مثل "YOUR AI MOTION DESIGNER" يتشكّل من أحرف عشوائية (من 0.3 إلى 0.78 ث)؛ وسطر قصير بخط سيريف مثل "Ideas in motion" يُكتب حرفًا بحرف بجانب نقطة الأصل (من 0.5 إلى 1.12 ث). من 1.35 إلى 1.95 ث يلتف قوس فيروزي بنصف قطر 220 مرة واحدة حول نقطة الأصل وعند طرفه نقطة بيضاء، وتتلاشى الكلمات. 2) من 2 إلى 4 ث، دائرة الوحدة: دائرة فيروزية (r 220) على اليسار، والزاوية تنمو بمعدل 4.52 rad/s. نصف قطر أبيض، ضلع جيب التمام فيروزي، ضلع الجيب وردي، قوس زاوية برتقالي بعنوان θ، خط وردي متقطع إلى نقطة وردية عند x 820 حيث يُكتب الجيب؛ ويمتد سجل الزاوية إلى اليمين كمنحنى جيب وردي متوهج (104 px لكل راديان) مع منحنى جيب تمام فيروزي خافت بجانبه وخطوط إرشاد منقطة +1/-1. قراءات حيّة "θ = 4.524 rad" و"sin θ = -0.982". المعادلة: y = sin θ. 3) من 4 إلى 8 ث، دوائر فورييه التدويرية: سلسلة من 180 دائرة دوّارة (مرتبة حسب الحجم، حلقات خزامى خافتة، أنصاف أقطار بيضاء) ترسم حدود حرف π كبير بالبرتقالي المتوهج من 4.3 إلى 7.2 ث (تقدّم sine in-out)، ثم يمتلئ الشكل بتدرج ناعم من الوردي إلى البنفسجي بينما تتلاشى السلسلة. على اليسار طيف |cₙ| لـ n = -24...24 (ارتفاع الأعمدة بالجذر التربيعي للسعة) يضيء من المركز إلى الخارج مع تقدّم الرسم؛ قراءات "K = 180 terms" و"t/2π = 0.527". المعادلة: f(t) = Σ cₙ e^{int}. 4) من 8 إلى 10 ث، عقدة ليساجو ثلاثية الأبعاد (sin 3t, sin 2t, sin 5t) تُرسم في 0.6 ث، ثم تدور بمنظور: شريط يتدرج لونه من الفيروزي إلى البنفسجي إلى الوردي على طول المنحنى ويتبع عرضه وسطوعه العمق. على اليمين شبكة 3x3 من أشكال ليساجو مستوية صغيرة بعناوين 1:1 و2:3 و4:5 و1:2 و3:4 و5:6 و1:3 و3:5 و3:2 تُرسم واحدًا تلو الآخر مع طور منجرف؛ ويصبح الأخير فيروزيًا داخل صندوق رفيع. 5) من 10 إلى 12 ث، سطح موجات سلكي z = cos(kr - ωt)/(1 + r) على شبكة 48x48 يُرى من 67° من الأعلى، يظهر من المركز إلى الخارج في 0.55 ث ويدور ببطء، وتُلوَّن الخطوط حسب الارتفاع من الفيروزي إلى البنفسجي إلى الوردي. نقطة مسبار برتقالية تركب السطح عند r = 3.2 مع خط إرشاد وقراءات حيّة "r = 3.200" و"z = 0.276". 6) من 12 إلى 14 ث، مجموعة جوليا z² + c تملأ الإطار، تُفتح ببوابة دائرية تتوسع من المركز بحافة بيضاء. يتحرك c = 0.7885·e^{iα} على دائرته (sine in-out)، فيتحول الفراكتال من حلزونات منفصلة إلى شكل متصل بداخل أسود؛ تقريب بطيء ودوران. الألوان حسب زمن الهروب: نيلي، بنفسجي، وردي، برتقالي، كريمي فاتح حتى الأبيض. يُظهر إطار صغير حركة c على دائرته مع قراءات "Re c" و"Im c". 7) من 14 إلى 16 ث، ترتيب الأوراق (phyllotaxis): 1500 بذرة عند θₙ = n·137.508°، rₙ = c√n تظهر من المركز إلى الخارج وتدور، بيضاء أولًا ثم وردية وبنفسجية وفيروزية. على اليسار تُكتب φ = 1.6180339887... رقمًا رقمًا، ويكبر صف فيبوناتشي (21 و34 بالفيروزي)، مع "seeds n = 1500" و"spirals 21 ⟲ 34 ⟳". 8) من 16 إلى 18 ث، متطابقة أويلر: تدور البذور في حلقة تصبح دائرة وحدة فيروزية على اليسار؛ تنتقل نقطة من 1 إلى -1 مخلّفة قوسًا برتقاليًا فوقها؛ يظهر e^{iπ} كبيرًا، ثم "+" و"1" و"=" واحدًا تلو الآخر على الإيقاع، وتنبض حلقة عند -1، وتحطّ "0" عند 18 ث داخل حلقة وردية. 9) من 18 إلى 20 ث، البطاقة الختامية: تتقلص المتطابقة نحو الأعلى؛ وتصعد علامة نصية كبيرة واسعة التباعد مثل "YOUR BRAND" (استبدلها بعلامتك) حرفًا بحرف من الأسفل داخل قناع (فارق 0.06 ث)، ويُرسم تحتها خط فيروزي-بنفسجي-وردي، ويتشكّل سطر متباعد مثل "IDEAS IN MOTION × [your web address]" من أحرف عشوائية، ويظهر سطر سيريف مائل "From idea to video in one chat" بتلاشٍ تدريجي. يتلاشى كل شيء إلى الأسود من 19.35 إلى 19.95 ث.

التكوين

الخلفية: وهج شعاعي عميق نيلي-أسود، المركز #10063A يتلاشى إلى #03030A عند الحواف، بلا حبيبات. الألوان المميزة: وردي #FB2D89 (الرئيسي)، برتقالي #FE9117، بنفسجي #7C6CF2، فيروزي #2DD4B0 وأبيض. الخطوط والعناوين بدرجات رمادي خزامي: #9A98A4 للعناوين، #57516F للتسميات الخافتة، #433E53 للمحاور. تتوهج الخطوط بنعومة بضبابية 12-16 px من لونها نفسه. الخطوط: المعادلات بخط سيريف على طراز Computer Modern (Old Standard TT، المتغيرات مائلة والدوال مستقيمة)؛ وكل قراءة وعدّاد وتسمية بخط أحادي المسافة (Liberation Mono أو مشابه)، صغير وواسع التباعد؛ واسم العلامة بخط غروتسك عريض بتباعد واسع جدًا. يبقى إطار ثابت طوال الوقت ويظهر تدريجيًا في 0.15-0.9 ث: أقواس زوايا رفيعة بطول 27 px على بعد 47 px من كل زاوية. أعلى اليسار: علامة نصية مثل "YOUR BRAND" (عريضة، 22 px، تباعد نحو 0.35 em) وتحتها سطر صغير متباعد مثل "IDEAS IN MOTION · [your web address]". أعلى اليمين: عدّاد المشاهد "01 / 08" وتحته عنوان قصير لكل مشهد، مثل "DESCRIBE YOUR IDEA" و"EDIT IN WORDS" و"NO KEYFRAMES" و"3D EFFECTS" و"LIVE PREVIEW" و"SHAPES AND SOUND" و"MUSIC TO THE RHYTHM" و"MP4 EXPORT" (استبدلها بشعاراتك)، مع نقطة وردية صغيرة على يساره. أسفل اليمين: ساعة جارية "t = 03.35 s" (منزلتان عشريتان) وسطر صغير برقم الإطار. في الأسفل: خط تقدم بسمك 1 px من x 80 إلى 1840 يمتلئ بتدرج فيروزي-بنفسجي-وردي مع مرور الوقت، مع علامات صغيرة عند كل حد بين المشاهد. أسفل اليسار: معادلة المشهد الحالي.

التقنيات

كل قطعة هي غليتش مدته 0.2 ث: تُقطَّع الصورة الخارجة إلى أشرطة أفقية مزاحة جانبيًا، وتومض 3-6 خطوط رفيعة بعرض الإطار كاملًا بالفيروزي والوردي والبرتقالي والأبيض، ويومض الإطار كله بالأبيض بنحو 14% ويتلاشى في 0.25 ث، وتتبدل عناوين الإطار بأحرف عشوائية لبضعة إطارات. تومض نقطة الإيقاع الوردية بقوة مع كل نبضة وتتلاشى في نصف نبضة. تظهر معادلة المشهد تدريجيًا بعد 0.1-0.35 ث من كل قطعة. تتحدث القراءات والساعة والعدّادات حيًّا مع الحركة. تتشكّل الأسطر المتباعدة من أحرف عشوائية؛ وتُكتب أسطر السيريف حرفًا بحرف؛ وتصعد العلامة النصية الختامية من الأسفل داخل قناع بفارق 0.06 ث. تستخدم الرسوم والتحولات ease-out أو sine in-out كما هو مذكور لكل مشهد.

الموسيقى

مقطوعة إلكترونية مبهجة بإيقاع 120 BPM (أوتار بيانو، باد دافئ، باص سينث، إيقاع four-on-the-floor)، مدتها 20 ثانية بالضبط، وكل قطعة تقع على نبضة. ناعمة ومفلترة في أول ثانيتين مع riser نحو boom عند 2 ث، وحماس كامل حتى 16 ث، ثم breakdown مفلتر مع riser نحو boom ختامي عند 18 ث، ثم تتلاشى حتى 20 ث. المزج عند نحو -14 LUFS مع ذروة حقيقية أقل من -1 dBTP.

الصوت

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

المراجع

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

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

اسم علامتك التجارية، وشعار قصير لكل عنوان من عناوين المشاهد الثمانية ولبطاقة الختام، وعنوان موقعك الإلكتروني.

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

معاينة تقنية «قطع غليتش: شرائح مقصوصة وخطوط ملوّنة وومضة بيضاء» — عند 0:02 من الفيديو

انتقال

قطع غليتش: شرائح مقصوصة وخطوط ملوّنة وومضة بيضاء

يُرسم المشهدان الخارج والداخل على canvas خارج الشاشة؛ ولمدة 0.13 ث حول القطع يُنسخ مجددًا على شكل شرائح أفقية بارتفاع 18–128 px، ونحو نصفها يُزاح جانبيًا حتى 70 px (البذرة من رقم الإطار وتتقلص إلى الصفر). تومض 3–6 خطوط بعرض كامل وسماكة 1–2 px بالفيروزي والوردي والبرتقالي والأبيض لمدة 0.15 ث، وتتلاشى طبقة بيضاء بنسبة 14% خطيًا خلال 0.25 ث.

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

عرض الكود

<!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>
#root{position:relative;width:100%;height:100%;background:#03030a;overflow:hidden}#c{position:absolute;inset:0;width:100%;height:100%;display:block}
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1920" data-height="1080"><canvas id="c" class="clip" data-start="0" data-duration="4" width="1920" height="1080"></canvas></div>
<script>
const W=1920,H=1080,TAU=Math.PI*2,c=document.getElementById('c'),X=c.getContext('2d');
const clamp=(v,a=0,b=1)=>Math.min(b,Math.max(a,v)),seg=(t,a,b)=>clamp((t-a)/(b-a)),sio=u=>(1-Math.cos(Math.PI*u))/2;
const L=document.createElement('canvas');L.width=W;L.height=H;const S=L.getContext('2d');
const CUT=2.0, SLICE=0.13, LINES=0.15, FLASH=0.25, FLASH_ALPHA=0.137; // cut time and glitch phases (s)
const COLORS=['#2DD4B0','#FB2D89','#FE9117','#FFFFFF'];
function rng(a){return()=>{a=(a+0x6d2b79f5)|0;let t=Math.imul(a^(a>>>15),1|a);t=(t+Math.imul(t^(t>>>7),61|t))^t;return((t^(t>>>14))>>>0)/4294967296;};}
function sceneA(g,t){g.strokeStyle='#2DD4B0';g.lineWidth=4;g.shadowColor='#2DD4B0';g.shadowBlur=16;g.beginPath();g.arc(960,540,220,0,-Math.min(1,t/1.8)*TAU,true);g.stroke();}
function sceneB(g,t){g.strokeStyle='#FB2D89';g.lineWidth=5;g.shadowColor='#FB2D89';g.shadowBlur=16;g.beginPath();for(let x=200;x<=1720;x+=4){const y=540-220*Math.sin((x-200)/104-(t-CUT)*4.5);x===200?g.moveTo(x,y):g.lineTo(x,y);}g.stroke();}
function draw(t){const fr=Math.round(t*60),u=t-CUT;X.fillStyle='#03030a';X.fillRect(0,0,W,H);S.clearRect(0,0,W,H);S.save();(t<CUT?sceneA:sceneB)(S,t);S.restore();
 if(u>-0.04&&u<SLICE){const amp=u<0?0.6:1-u/SLICE,r=rng(fr*13+1);let y=0;while(y<H){const h=18+(r()*110|0),dx=r()<0.55?(r()*2-1)*70*amp:0;X.drawImage(L,0,y,W,h,dx,y,W,h);y+=h;}}else X.drawImage(L,0,0);
 if(u>=0&&u<FLASH){X.fillStyle=`rgba(255,255,255,${FLASH_ALPHA*(1-u/FLASH)})`;X.fillRect(0,0,W,H);}
 if(u>-0.04&&u<LINES){const r=rng(fr*7+3),n=3+(r()*4|0);for(let i=0;i<n;i++){X.globalAlpha=0.35+0.5*r();X.fillStyle=COLORS[r()*4|0];X.fillRect(0,r()*H|0,W,r()<0.7?1:2);}X.globalAlpha=1;}}
const tl=gsap.timeline({paused:true});const st={t:0};tl.to(st,{t:4,duration:4,ease:'none'},0);
tl.eventCallback('onUpdate',()=>draw(tl.time()));draw(0);
window.__timelines=window.__timelines||{};window.__timelines["main"]=tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

معاينة تقنية «دوائر فورييه الفلكية ترسم مخططًا مغلقًا» — عند 0:05 من الفيديو

أشكال

دوائر فورييه الفلكية ترسم مخططًا مغلقًا

يُعاد أخذ عينات من مخطط مغلق إلى 180 نقطة ويُحوَّل إلى 180 حدًّا من حدود فورييه؛ تُسلسل الدوائر من المركز الهندسي بدءًا بالأكبر، وتدور كل دائرة n مرة في اللفة، ويترك الطرف أثرًا متوهجًا. يسير التقدم بـ sine in-out خلال نحو 3 ث، وتُظهر حلقات خافتة وأنصاف أقطار بيضاء الآلة، ويمتلئ المخطط بتدرج ناعم عند انغلاقه بينما تتلاشى السلسلة.

متى تُستخدم لرسم أي شعار أو حرف أو مسار كأن آلة من الدوائر ترسمه.

عرض الكود

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>دوائر فورييه الفلكية ترسم مخططًا مغلقًا</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
#root{position:relative;width:100%;height:100%;background:#03030a;overflow:hidden}#c{position:absolute;inset:0;width:100%;height:100%;display:block}
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1920" data-height="1080"><canvas id="c" class="clip" data-start="0" data-duration="4" width="1920" height="1080"></canvas></div>
<script>
const W=1920,H=1080,TAU=Math.PI*2,c=document.getElementById('c'),X=c.getContext('2d');
const clamp=(v,a=0,b=1)=>Math.min(b,Math.max(a,v)),seg=(t,a,b)=>clamp((t-a)/(b-a)),sio=u=>(1-Math.cos(Math.PI*u))/2;
const POLY=[[700,300],[1500,300],[1500,400],[1320,400],[1320,820],[1440,780],[1460,860],[1300,920],[1220,880],[1220,400],[960,400],[900,820],[780,920],[700,880],[800,760],[860,400],[700,400]]; // any closed outline
const N=180, DRAW=[0.3,3.2]; // terms, drawing window (s)
function resample(p,n){const seg=[];let L=0;for(let i=0;i<p.length;i++){const a=p[i],b=p[(i+1)%p.length],l=Math.hypot(b[0]-a[0],b[1]-a[1]);seg.push([a,b,l]);L+=l;}const out=[];for(let k=0;k<n;k++){let d=k*L/n;for(const[a,b,l]of seg){if(d<=l){out.push([a[0]+(b[0]-a[0])*d/l,a[1]+(b[1]-a[1])*d/l]);break;}d-=l;}}return out;}
const S=resample(POLY,N),CO=[];for(let n=-N/2;n<N/2;n++){let re=0,im=0;S.forEach(([x,y],k)=>{const a=-TAU*n*k/N;re+=x*Math.cos(a)-y*Math.sin(a);im+=x*Math.sin(a)+y*Math.cos(a);});CO.push({n,re:re/N,im:im/N,a:Math.hypot(re,im)/N});}
const C0=CO.find(c=>c.n===0),CH=CO.filter(c=>c.n!==0).sort((a,b)=>b.a-a.a);
const at=u=>{let x=C0.re,y=C0.im;for(const c of CH){const a=TAU*c.n*u;x+=c.re*Math.cos(a)-c.im*Math.sin(a);y+=c.re*Math.sin(a)+c.im*Math.cos(a);}return[x,y];};
const PATH=[];for(let i=0;i<=600;i++)PATH.push(at(i/600));
function draw(t){const u=sio(seg(t,DRAW[0],DRAW[1])),fill=seg(t,3.2,3.6),chain=1-seg(t,3.25,3.8);X.fillStyle='#03030a';X.fillRect(0,0,W,H);
 if(fill>0){X.beginPath();PATH.forEach(([x,y],i)=>i?X.lineTo(x,y):X.moveTo(x,y));const g=X.createLinearGradient(700,300,1460,920);g.addColorStop(0,'rgba(251,45,137,.3)');g.addColorStop(1,'rgba(124,108,242,.3)');X.globalAlpha=fill;X.fillStyle=g;X.fill();X.globalAlpha=1;}
 if(chain>0){let x=C0.re,y=C0.im;X.lineWidth=1;for(const c of CH.slice(0,48)){const a=TAU*c.n*u,nx=x+c.re*Math.cos(a)-c.im*Math.sin(a),ny=y+c.re*Math.sin(a)+c.im*Math.cos(a);X.strokeStyle=`rgba(150,140,210,${0.22*chain})`;X.beginPath();X.arc(x,y,c.a,0,TAU);X.stroke();X.strokeStyle=`rgba(255,255,255,${0.75*chain})`;X.beginPath();X.moveTo(x,y);X.lineTo(nx,ny);X.stroke();x=nx;y=ny;}}
 const n=Math.floor(u*600);if(n>0){X.beginPath();for(let i=0;i<=n;i++){const[x,y]=PATH[i];i?X.lineTo(x,y):X.moveTo(x,y);}X.strokeStyle='#FE9117';X.lineWidth=4.5;X.lineJoin='round';X.shadowColor='#FE9117';X.shadowBlur=16;X.stroke();X.shadowBlur=0;}}
const tl=gsap.timeline({paused:true});const st={t:0};tl.to(st,{t:4,duration:4,ease:'none'},0);
tl.eventCallback('onUpdate',()=>draw(tl.time()));draw(0);
window.__timelines=window.__timelines||{};window.__timelines["main"]=tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

معاينة تقنية «دائرة الوحدة تغذّي منحنى جيب متحركًا» — عند 0:03 من الفيديو

بيانات

دائرة الوحدة تغذّي منحنى جيب متحركًا

تدور نقطة على دائرة متوهجة بسرعة زاوية ثابتة؛ وتُرسم ضلعا جيب التمام والجيب كقطع ملوّنة، ويحمل خط متقطع ارتفاعها إلى نقطة في بداية الرسم البياني. يمتد سجل الزاوية كاملًا نحو اليمين بمعدل نحو 104 px لكل راديان، فينمو منحنى الجيب من الدائرة في الزمن الحقيقي، ويظهر بجانبه منحنى جيب تمام خافت وقراءات حية.

متى تُستخدم لشرح إشارة دورية أو إيقاع أو أي قيمة تتكرر دوريًا.

عرض الكود

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>دائرة الوحدة تغذّي منحنى جيب متحركًا</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
#root{position:relative;width:100%;height:100%;background:#03030a;overflow:hidden}#c{position:absolute;inset:0;width:100%;height:100%;display:block}
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1920" data-height="1080"><canvas id="c" class="clip" data-start="0" data-duration="4" width="1920" height="1080"></canvas></div>
<script>
const W=1920,H=1080,TAU=Math.PI*2,c=document.getElementById('c'),X=c.getContext('2d');
const clamp=(v,a=0,b=1)=>Math.min(b,Math.max(a,v)),seg=(t,a,b)=>clamp((t-a)/(b-a)),sio=u=>(1-Math.cos(Math.PI*u))/2;
const CX=500,CY=540,R=220,X0=820,K=103.8,OMEGA=4.524; // circle, graph start, px per radian, rad/s
function draw(t){const th=OMEGA*t,px=CX+R*Math.cos(th),py=CY-R*Math.sin(th);X.fillStyle='#03030a';X.fillRect(0,0,W,H);X.lineCap='round';
 X.fillStyle='#433E53';X.fillRect(180,539,1640,2);X.fillRect(499,230,2,620);
 const glow=(col,w,b)=>{X.strokeStyle=col;X.lineWidth=w;X.shadowColor=col;X.shadowBlur=b;X.stroke();X.shadowBlur=0;};
 X.beginPath();X.arc(CX,CY,R,0,TAU);glow('#2DD4B0',3,16);
 X.beginPath();X.arc(CX,CY,52,0,-Math.min(th,TAU),true);glow('#FE9117',2.2,6);
 X.beginPath();X.moveTo(CX,CY);X.lineTo(px,CY);glow('#2DD4B0',4,8);X.beginPath();X.moveTo(px,CY);X.lineTo(px,py);glow('#FB2D89',4,8);
 X.beginPath();X.moveTo(CX,CY);X.lineTo(px,py);glow('#FFFFFF',2,0);
 X.setLineDash([5,6]);X.beginPath();X.moveTo(px,py);X.lineTo(X0,py);glow('rgba(251,45,137,.7)',1.5,0);X.setLineDash([]);
 const span=Math.min(th,(1820-X0)/K);
 for(const[fn,col,w,b]of[[Math.cos,'rgba(45,212,176,.45)',1.6,0],[Math.sin,'#FB2D89',4,14]]){X.beginPath();for(let d=0;d<=span;d+=0.02){const x=X0+K*d,y=CY-R*fn(th-d);d===0?X.moveTo(x,y):X.lineTo(x,y);}glow(col,w,b);}
 X.fillStyle='#FFFFFF';X.beginPath();X.arc(px,py,7,0,TAU);X.fill();X.fillStyle='#FB2D89';X.beginPath();X.arc(X0,py,7,0,TAU);X.fill();
 X.font='18px monospace';X.fillStyle='#ABA6BB';X.fillText('θ = '+th.toFixed(3)+' rad',281,839);X.fillText('sin θ = '+Math.sin(th).toFixed(3),281,869);}
const tl=gsap.timeline({paused:true});const st={t:0};tl.to(st,{t:4,duration:4,ease:'none'},0);
tl.eventCallback('onUpdate',()=>draw(tl.time()));draw(0);
window.__timelines=window.__timelines||{};window.__timelines["main"]=tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

معاينة تقنية «حقل بذور فيلوتاكسيس يدور ليصير حلقة» — عند 0:16 من الفيديو

جسيمات

حقل بذور فيلوتاكسيس يدور ليصير حلقة

تقع 1500 بذرة عند الزاوية n·137.508° ونصف القطر c·√n؛ تظهر من المركز إلى الخارج بعدٍّ ease-out، وتدور، وتتحول من الأبيض إلى دورة وردي-بنفسجي-فيروزي. عند الإشارة تتحرك كل بذرة بالإحداثيات القطبية (المركز ونصف القطر والزاوية بتقريب تكعيبي in-out مع تأخير صغير حسب n) نحو دائرة أصغر في مكان آخر، ثم تفسح النقاط المجال لخط متصل.

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

عرض الكود

<!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>
#root{position:relative;width:100%;height:100%;background:#03030a;overflow:hidden}#c{position:absolute;inset:0;width:100%;height:100%;display:block}
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1920" data-height="1080"><canvas id="c" class="clip" data-start="0" data-duration="4" width="1920" height="1080"></canvas></div>
<script>
const W=1920,H=1080,TAU=Math.PI*2,c=document.getElementById('c'),X=c.getContext('2d');
const clamp=(v,a=0,b=1)=>Math.min(b,Math.max(a,v)),seg=(t,a,b)=>clamp((t-a)/(b-a)),sio=u=>(1-Math.cos(Math.PI*u))/2;
const GA=137.508*Math.PI/180,N=1500,C=10.6,COLS=['#FB2D89','#7C6CF2','#5A4CE0','#2DD4B0','#7C6CF2']; // golden angle, count, spacing
const io=u=>u<.5?4*u*u*u:1-Math.pow(-2*u+2,3)/2;
function draw(t){X.fillStyle='#03030a';X.fillRect(0,0,W,H);const count=Math.floor(N*(1-Math.pow(1-seg(t,0,1.4),2))),spin=0.9*t,col=seg(t,1.3,1.6);
 for(let n=1;n<=count;n++){const r=C*Math.sqrt(n),a0=n*GA+spin;let x=960+r*Math.cos(a0),y=540+r*Math.sin(a0);
  const u=io(seg(t,2.1+n/N*0.2,2.5+n/N*0.2));if(u>0){const a1=n/N*TAU*3+Math.PI,cx=960-400*u,cy=540-60*u,rr=r+(191-r)*u,aa=a0+(a1-a0)*u+1.2*u;x=cx+rr*Math.cos(aa);y=cy+rr*Math.sin(aa);}
  const al=1-seg(t,2.75,2.9);if(al<=0)continue;X.globalAlpha=al;X.fillStyle=col>0.5?COLS[n%5]:'#E1DEEB';X.beginPath();X.arc(x,y,2+2*Math.sqrt(n/N),0,TAU);X.fill();}
 X.globalAlpha=seg(t,2.7,2.9);X.strokeStyle='#2DD4B0';X.lineWidth=2.6;X.shadowColor='#2DD4B0';X.shadowBlur=12;X.beginPath();X.arc(560,480,191,0,TAU);X.stroke();X.shadowBlur=0;X.globalAlpha=1;}
const tl=gsap.timeline({paused:true});const st={t:0};tl.to(st,{t:4,duration:4,ease:'none'},0);
tl.eventCallback('onUpdate',()=>draw(tl.time()));draw(0);
window.__timelines=window.__timelines||{};window.__timelines["main"]=tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

معاينة تقنية «حروف شعار نصي ترتفع عبر قناع قص مع خط متدرج مرسوم» — عند 0:18 من الفيديو

الطباعة

حروف شعار نصي ترتفع عبر قناع قص مع خط متدرج مرسوم

يقع كل حرف من شعار نصي عريض متباعد الأحرف في صندوق قص خاص به ويرتفع من الأسفل بمقدار ارتفاع حرف كبير (0.36 ث، power3.out، تأخير 0.06 ث)؛ ويُرسم تحته خط بسماكة 3 px بتدرج فيروزي-بنفسجي-وردي (0.4 ث، power3.inOut)، وتتشكل عبارة بخط أحادي المسافة متباعدة من أحرف عشوائية، ويظهر سطر مائل بخط serif أخيرًا.

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

عرض الكود

<!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@700&family=JetBrains+Mono&family=Old+Standard+TT:ital@1&display=swap");#root{position:relative;width:100%;height:100%;background:radial-gradient(circle at 50% 50%,#10063a 0,#03030a 800px);overflow:hidden}#card{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#eae7f9}#word{font:700 170px/1 Inter,sans-serif;letter-spacing:.16em;margin:0 0 30px .16em;display:flex}#word span{display:inline-block;clip-path:inset(0 -0.2em 0 -0.2em)}#word i{display:inline-block;font-style:normal}#rule{width:1200px;height:3px;background:linear-gradient(90deg,#2DD4B0,#7C6CF2,#FB2D89);transform-origin:0 50%}#tag{font:400 17px "JetBrains Mono",monospace;letter-spacing:.55em;white-space:pre;margin:40px 0 0}#motto{font:italic 400 34px "Old Standard TT",serif;color:#bdb6d6;margin:26px 0 0}
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080"><div id="card" class="clip" data-start="0" data-duration="3"><h1 id="word"></h1><div id="rule"></div><p id="tag">IDEAS IN MOTION   ×   STUDIO.APP</p><p id="motto">From idea to video in one chat</p></div></div>
<script>
const WORD='STUDIO NAME', TAG=document.getElementById('tag').textContent, G='ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#%&*+=';
const word=document.getElementById('word');[...WORD].forEach(ch=>{const s=document.createElement('span');const i=document.createElement('i');i.textContent=ch===' '?'\u00a0':ch;s.appendChild(i);word.appendChild(s);});
const tl=gsap.timeline({paused:true});
tl.fromTo('#word i',{yPercent:110},{yPercent:0,duration:0.36,ease:'power3.out',stagger:0.06},0.05); // rise per letter
tl.fromTo('#rule',{scaleX:0},{scaleX:1,duration:0.4,ease:'power3.inOut'},0.55);
const sc={p:0};tl.fromTo(sc,{p:0},{p:1,duration:0.4,ease:'power2.out',onUpdate:()=>{const k=Math.floor(sc.p*TAG.length);let o='';for(let i=0;i<TAG.length;i++){const c=TAG[i];o+=i<k||c===' '?c:G[(i*7+Math.round(tl.time()*60)*13)%G.length];}document.getElementById('tag').textContent=o;}},0.5);
tl.fromTo('#tag',{opacity:0},{opacity:1,duration:0.1},0.45);
tl.fromTo('#motto',{opacity:0},{opacity:1,duration:0.28,ease:'none'},0.72);
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> اصنع كشف شعار أفقي مدته 21 ثانية بدقة 1920x1080 وبمعدل 60 إطارًا في الثانية. يجمّع شعاري ببطء من أوجه low-poly وينتهي بتصميم أفقي (lockup) يُكتب فيه اسم علامتي التجارية وتحته شعار نصي. الفكرة: بناء طويل وهادئ بلا أي قطع لمدة أربع عشرة ثانية، ثم انطلاق عند ذروة الموسيقى (drop) خلال ثانيتين، ثم نهاية هادئة بالكتابة. المظهر: خلفية شبه سوداء مع تعتيم دائري ناعم عند الحواف، وألوان العلامة مسطحة، وخط غروتيسك نظيف. تجنّب التدرجات على الشعار، والخطوط المرئية بين المثلثات، والقطع أثناء البناء، وأي شيء مزدحم خلف الشعار. </direction> <structure> 1. من 0 إلى 2.6 ث، الهيكل السلكي: يرسم هيكل سلكي low-poly لمحيط شعاري نفسه بدءًا من أسفل الشعار نحو الخارج. فيه نحو 35–45 رأسًا و90 خطًا رفيعًا. 2. من 1.9 إلى 13.3 ث، التجميع: يُقطَّع الشعار إلى نحو 55 مثلثًا على امتداد ذلك الهيكل، وتطير إلى الداخل قطعة بعد قطعة من خارج الإطار. تبدأ الهبوطات بطيئة عند أسفل الشعار وتزداد كثافة نحو الأعلى. تهبط القطعة الأخيرة عند 13.3 ث، ويصبح الشعار كاملًا ودقيقًا. أبقِ الشعار المكتمل نحو ثانية واحدة. 3. عند 14.38 ث، الوميض، تمامًا على ذروة الموسيقى. ينطلق انفجار ضوئي وحلقة برتقالية متوسعة ووميض ساطع على الشعار معًا. بعد 0.1 ث من الضربة، تنمو لوحة بلون حبر داكن خلف الشعار وتتحول إلى مربع بزوايا مدورة كأيقونة تطبيق. أبقِ الأيقونة في المنتصف لمدة ثانية. 4. من 15.74 إلى 16.15 ث، الانزلاق: تتقلص الأيقونة إلى نحو 42% وتنتقل إلى الثلث الأيسر لتفسح مجالًا للاسم. 5. من 16.1 إلى 21 ث، الاسم: يظهر مؤشر وردي إلى يمين الأيقونة ويُكتب الاسم، مثلًا "Brand Name" (استبدله بعلامتك). عند 18.15 ث يمرّ الشعار النصي تحته، مثلًا "Your tagline here" (استبدله بشعارك). يومض المؤشر ثلاث مرات مع الإيقاع ويختفي عند 19.9 ث. أبقِ التصميم الأفقي حتى النهاية. </structure> <composition> الخلفية: تعتيم شعاعي شبه أسود، #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 بكسل مع توهج وردي ناعم. التصميم الأفقي النهائي (الأيقونة على اليسار والاسم والشعار النصي على اليمين) متمركز في الإطار ككل. </composition> <techniques> التقريب: تبدأ اللقطة بتقريب بطيء جدًا نحو مركز الإطار، من مقياس 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 ث، حرفًا بحرف. </techniques> <music> مقطوعة موسيقية آلية بإيقاع 96 BPM، متفائلة وعصرية، مدتها 21 ثانية بالضبط. - البداية: غلوكنشبيل ناعم بأسلوب صندوق الموسيقى فوق أصوات pads دافئة. - عند نحو 4.4 ث: يدخل توزيع كامل مفعم بالحيوية (طبول وباس وآلات وترية وخط غلوكنشبيل ساطع). يُفتح فلتر على مدى مازورتين ويتصاعد نحو الوميض. - عند 14.38 ث: ضربة صنج وآكورد كبير يقعان تمامًا على الوميض. - بعد الذروة: يعود صندوق الموسيقى فوق pads ممتدة تحت التصميم الأفقي ويتلاشى إلى الصمت عند 21 ث. أبقِ كل شيء على شبكة الإيقاع بحيث تقع الكتابة ووميض المؤشر على النوتات السادسة عشرة والنبضات. </music> <sound> مؤثرات صوتية فوق الموسيقى: - صوت riser ناعم نحو هبوط المثلث الأول. - riser نحو الوميض، ثم دويّ عميق وصدمة زجاجية خفيفة عليه. - صوت whoosh قصير حين تنطلق الحلقة، وآخر حين تنزلق الأيقونة. - نقرة مفتاح ناعمة لكل حرف يُكتب، ونقرة خافتة عند ظهور الشعار النصي. بلا تعليق صوتي. مستوى الصوت العام نحو -14 LUFS، وذروة حقيقية أقل من -1 dBTP. </sound> <references> مقدمة شعار راقية لتقنية أو لإطلاق تطبيق: تجميع من هيكل سلكي low-poly إلى شكل صلب بأسلوب بناء أوجه ثلاثي الأبعاد، يتحرر عند الذروة إلى كشف أيقونة تطبيق، مع تصميم أفقي لاسم يُكتب بأسلوب الطرفية. </references>

معاينة الموجّه «ريل موشن ديزاين متزامن مع الإيقاع»

ريل موشن ديزاين متزامن مع الإيقاع

<direction> اصنع ريل موشن ديزاين مدته 15 ثانية لـ [your brand]، بقياس 1920x1080 أفقي وبمعدل 60 إطارًا في الثانية، مرسومًا بالكامل: نصوص متحركة وأشكال وجسيمات وسحابة نقاط ثلاثية الأبعاد ولوحة معلومات، دون أي لقطات مصورة. الفكرة: ريل منتج سريع تقع فيه كل نقلة مشهد على إيقاع هاوس بسرعة 128.57 نبضة في الدقيقة. النبضة الواحدة تساوي 28 إطارًا بالضبط (0.4667 ثانية)، وكل قطع يقع على هذه الشبكة، وتقع الضربة الكبيرة الأولى عند 1.867 ثانية (النبضة 4). يتناوب المظهر بين مشاهد شبه سوداء ومشاهد فاتحة بلون أبيض لافندري، مع الوردي الزاهي كلون مميز رئيسي بالإضافة إلى البنفسجي والبرتقالي. تستخدم العناوين خطًا غروتسك ثقيلًا، والتعليقات خطًا أحادي المسافات، والعبارة الرئيسية خطًا سيريف مائلًا. يغطي إطار بأسلوب البث التلفزيوني الريل كله حتى الخلل الأخير. استخدم رمز شعاري في البطاقة الختامية واستبدل كل نص بين علامات الاقتباس بكلماتي، مع إبقاء كل منها بطول مماثل تقريبًا ليثبت التخطيط. تجنب الصور وللقطات الأرشيفية والتلاشيات الناعمة العامة وكل ما ينحرف عن شبكة الإيقاع. </direction> <structure> 1. 0–1.85 ثانية، مقدمة على شبه أسود. ينمو خط مسطرة رفيع (بعرض 1440 بكسل، فاتح بشفافية 22 %) من مركزه عند 0.34 ثانية (expo.out، 0.65 ثانية)، ثم تظهر 13 علامة من اليسار إلى اليمين، بفارق إطار واحد. تسقط كرة وردية قطرها 80 بكسل من أعلى اليسار وتنجرف نحو المركز (power2.out، 1.25 ثانية). ترتد ثلاث مرات على المسطرة، وتنضغط عند كل ارتطام وتتمدد في كل سقوط، مع قليل من تمويه الحركة عند السرعة. يُكتب سطر أحادي المسافات تحت المسطرة، حرفًا واحدًا كل 1.56 إطار، يتبعه مؤشر كتلة وامض (مثال "no keyframes."، استبدله بنصك). عند 1.28 ثانية تنضغط الكرة إلى 0.8x، ثم تنتفخ على منحنى expo-in حتى تملأ الإطار بالوردي عند 1.82 ثانية. 2. 1.82–3.70 ثانية، أربع كلمات، كلمة لكل نبضة. تستقر كل كلمة ثقيلة بحجم 300 بكسل على خلفيتها الخاصة مع سطر تعليق أحادي المسافات تحتها (أمثلة "// describe your idea"، "// live preview"، "// refine in words"، "// mp4 export"). خلفها، يتحرك صفان من نسخ الكلمات الأربع المحددة بحجم 205 بكسل في الأعلى والأسفل بسرعة 760 بكسل/ث في اتجاهين متعاكسين. تُرسم الحدود بلون نص المشهد بشفافية 7–14 %. - الكلمة 1 (مثال "DESCRIBE")، نيلي داكن على وردي: تهبط الكلمة من مقياس 1.39x بمنحنى expo.out (0.33 ثانية) بينما تظهر حروفها بفارق 0.03 ثانية مع إزالة سريعة للتمويه. - الكلمة 2 (مثال "PREVIEW")، فاتحة على شبه أسود عند 2.333 ثانية: تنغلق المسافة بين الحروف من 150 بكسل إلى ضيقة بمنحنى expo.out (0.45 ثانية)، مع ظهور تدريجي خلال 3 إطارات. - الكلمة 3 (مثال "REFINE")، بنفسجية على الصفحة الفاتحة عند 2.8 ثانية: ترتفع الحروف 340 بكسل من خلف خط قناع يقع 40 بكسل تحت خط الأساس بمنحنى back.out(2.2)، 0.3 ثانية لكل حرف، بفارق 0.035 ثانية. - الكلمة 4 (مثال "EXPORT")، فاتحة على بنفسجي عند 3.267 ثانية: تظهر الحروف فجأة على نوتات 1/32 (بفارق 3.5 إطار)، كل حرف من 0.6x إلى قفزة 1.13x بارتفاع 50 بكسل، ثم يستقر. 3. 3.46–4.02 ثانية، مسح بالأشرطة. ثمانية أشرطة عمودية بعرض 240 بكسل، متناوبة بين الوردي والصفحة الفاتحة، ترتفع من الأسفل (power2.inOut، 0.18 ثانية، بفارق 0.7 إطار، الأيسر أولًا). تثبت، ثم تواصل الصعود وتخرج، كاشفة المشهد التالي من الأسفل. 4. 3.70–5.60 ثانية، أشكال على شبه أسود. شبكة 120 بكسل من مربعات صغيرة مستديرة باهتة (خُمسها محدد بخطوط) مع علامات زائد صغيرة بينها. تنطلق موجة من المركز عند كل نبضة (3.73 و4.2 و4.67 و5.13 ثانية) بسرعة 2000 بكسل/ث. حيثما تمر جبهتها، تكبر كل خلية من 42 إلى 74 بكسل، وتستدير نحو دائرة، وتدور 38 درجة وتتحول إلى الوردي. تكشف الموجة الأولى الشبكة، وتدور الشبكة ببطء عكس عقارب الساعة، بسرعة متزايدة. بعد الموجة الأخيرة تفرغ الخلايا وتتلاشى عند 5.47 ثانية. 5. 5.55–7.42 ثانية، جسيمات. تظهر نقطة وميض بيضاء مع حلقة صدمة رفيعة عند 5.62 ثانية، ثم تنفجر 7000 مربع صغير من المركز. تتجمع في كلمة ضخمة واحدة بحجم 590 بكسل (مثال "IDEA") ملونة على عرضها من البرتقالي إلى اللافندر إلى البنفسجي، وتتلألأ بمقدار بكسل. من 7.0 ثانية تنساب نحو اليمين مع خطوط أثر، يسار الكلمة أولًا. يوجد خلفها توهج شعاعي وردي ناعم. 6. 7.42–9.45 ثانية، ثلاثي الأبعاد على خلفية شعاعية نيلية داكنة. كرة فيبوناتشي من 1700 نقطة (نصف قطر 362 بكسل) تدور ببطء فوق أرضية منظورية من خطوط بنفسجية رفيعة تزحف صفوفها نحو المشاهد. النقاط وردية أو بنفسجية، أكبر وأسطع في المقدمة. من 8.12 ثانية تنتقل كل نقطة إلى مكانها على عقدة طورس (2,3) (cubic in-out، تأخيرات عشوائية حتى 0.16 ثانية)، وتواصل العقدة الدوران. 7. 9.08–9.65 ثانية، مسح ثانٍ بالأشرطة مثل المشهد 3، بالبنفسجي والوردي والصفحة الفاتحة. 8. 9.27–11.1 ثانية، لوحة معلومات على الصفحة الفاتحة مع خطوط إرشاد عمودية باهتة. - الخطوات: ثلاثة صفوف من أرقام الخطوات الثقيلة بحجم 180 بكسل تعد تصاعديًا بمنحنى expo.out ("01" و"02" و"03"، والثالث وردي) مع تعليقات أحادية المسافات (مثال "PICK A TEMPLATE"). يرتفع كل صف داخل صندوقه المقصوص، بفارق 0.08 ثانية. - البطاقة: بطاقة بيضاء (880x740، زوايا 26 بكسل، ظل نيلي ناعم) ترتفع 90 بكسل (power3.out، 0.45 ثانية). تحمل عنوانًا غامقًا بحروف صغيرة، وحبة صغيرة "LIVE"، وحلقة تمتلئ بمنحنى power3.out مع تسمية قصيرة بداخلها. - المخطط: أربعة عشر عمودًا برتقاليًا تنمو من القاعدة بفارق 0.031 ثانية، والأخير وردي صلب. يرسم خط بنفسجي نفسه فوقها بمنحنى sine.inOut (0.72 ثانية)، مع نقطة وهالة وعلامة داكنة تركب على رأسه (مثال "No keyframes"). 9. 10.96–11.45 ثانية، مسح بالأشرطة الأفقية. ثمانية أشرطة أفقية، متناوبة بين شبه الأسود والوردي، تجتاح من اليسار (power3.inOut، 0.2 ثانية، بفارق إطار واحد، العلوي أولًا) وتواصل الخروج نحو اليمين. 10. 11.07–13.07 ثانية، عبارة رئيسية على شبه أسود. أربع حزم من 28 خطًا بحجم الشعرة تتدفق عبر الإطار كأشرطة، ممزوجة بشكل تجميعي: وردي إلى برتقالي في الأعلى، ثم وردي إلى بنفسجي، وبنفسجي، وبنفسجي إلى وردي في الأسفل. تدخل عبارة من سطرين بخط سيريف مائل بحجم 290 بكسل حرفًا بحرف. يتحرك كل حرف 36 بكسل إلى الأعلى ويزول عنه التمويه خلال 0.16 ثانية، بفارق 0.02 ثانية في السطر الأول و0.035 ثانية في السطر الثاني. السطر الأول فاتح ويبدأ عند x 334 (مثال "Ideas in")؛ والسطر الثاني وردي وينتهي عند x 1438 (مثال "motion."). 11. 12.73–13.07 ثانية، خلل. تقفز شرائح من النص جانبيًا، ينعكس الإطار مرتين، تومض كتل صغيرة بنفسجية وصفراء ووردية، وينقسم النص إلى وردي وتركوازي. يختفي إطار البث وعداداته. 12. 13.07–15.0 ثانية، بطاقة ختامية على شبه أسود. - وميض باهت يتلاشى (0.26 ثانية). - شعار نصي ثقيل بحجم 260 بكسل ("[your brand]") يرتفع حرفًا بحرف من خلف خط أساسه (back.out(1.6)، 0.32 ثانية، بفارق 0.05 ثانية). - يسقط رمزي الشعاري من الأعلى مثل كرة المقدمة، وينضغط عند الهبوط عند 13.51 ثانية ويستقر كنقطة نهاية للشعار النصي. - يُرسم خط رفيع تحت المجموعة (power3.out، 0.3 ثانية). - يُفكّ ترميز سطر أحادي المسافات واسع التباعد تحته، من أحرف وردية مبعثرة إلى أحرف فاتحة (13.76–14.6 ثانية). - تظهر دعوة إلى اتخاذ إجراء بخط سيريف مائل وردي بتلاشٍ عند 14.33 ثانية (مثال "try it free."). - يظهر صف خافت من أربع ميزات قصيرة بتلاشٍ في الأسفل. أبقِ البطاقة الختامية حتى 15 ثانية. </structure> <composition> - لوحة الألوان: - شبه الأسود #0D0B1E للخلفيات الداكنة. - النيلي العميق #1C0B5D للنص الداكن والمشهد ثلاثي الأبعاد. - الصفحة الفاتحة #FAF9FF للخلفيات الفاتحة والنص الفاتح. - اللافندر #F0EDFF للوحات الناعمة. - الباهت #6B6385 للتعليقات و#E9E4F2 للخطوط. - الألوان المميزة: الوردي الرئيسي #FB2D89، والبنفسجي الثاني #7C6CF2، والبرتقالي الدافئ #FE9117، بالإضافة إلى الأبيض. - الأصفر #FFD23F والتركوازي #2DD4B0 فقط كبقع للخلل. - إذا أعطيتك ألوان علامتي التجارية، فاستبدلها بحسب الدور. - الخطوط: Roboto Flex بوزن 900 مع تباعد ضيق (-0.035 em) لكل العناوين. JetBrains Mono للإطار والتعليقات وأسطر الملاحظات. Instrument Serif Italic للعبارة ذات السطرين والدعوة إلى اتخاذ إجراء. - تظليل جانبي ناعم، أغمق فقط عند الحافتين اليسرى واليمنى: نحو -8 % عند منتصف الحافة و-12 % في الزوايا. - إطار بأسلوب البث التلفزيوني فوق كل شيء حتى الخلل: - أقواس زوايا بحجم 26 بكسل. - عنوان في أعلى اليسار (مثال "[YOUR BRAND] / YOUR TAGLINE"). - رمز زمني جارٍ في أعلى اليمين (00:00:SS:FF بمعدل 60 إطارًا في الثانية). - اسم الفصل الحالي في أسفل اليسار. - عداد إطارات "NNN / 900" مع شريط تقدم بعرض 300 بكسل في أسفل اليمين. - كل جزء فاتح بشفافية 0.9 في وضع المزج exclusion، فيصبح داكنًا على المشاهد الفاتحة وملونًا على الوردي أو البنفسجي. يظهر الإطار بتلاشٍ عند 0.3 ثانية. </composition> <techniques> - كل نقلة مشهد تقع على شبكة الإيقاع ذات 28 إطارًا. تتداخل المشاهد والمسحات بضعة إطارات، فلا يكون أي إطار فارغًا. - نوّع الانتقالات: الكرة المنتفخة إلى الخلفية التالية، قطع لوني حاد بين الكلمات الأربع، مسحات أشرطة عمودية، مسح أشرطة أفقي، وميض مع حلقة صدمة، وخلل بفصل RGB إلى البطاقة الختامية. - امنح الكرة والرمز الشعاري حركة فيزيائية: انضغاط عند الارتطام، وتمدد أثناء السقوط، وتمويه حركة خفيف عند السرعة. - استخدم دخولًا حرفًا بحرف في كل مكان، لكل كلمة منحناها الخاص (هبوط expo.out، وارتفاع back.out من قناع، وظهور فجائي على نوتات 1/32)، مع زوال التمويه عند وصول الحروف. - أبقِ كل شيء حادًا وبصيغة متجهية: الجسيمات والنقاط والخطوط صغيرة جدًا وحادة، وتبقى التوهجات ناعمة وخلف النص. </techniques> <music> اصنع خلفية هاوس أصلية بسرعة 128.57 نبضة في الدقيقة، مدتها 15 ثانية بالضبط، موضوعة على شبكة الإيقاع. - المقدمة: باد هوائي مع نقرات فقاعية. - من الضربة عند 1.867 ثانية: الإيقاع الكامل، مع طبلة أربع على الأرض وتصفيق وهايهات وباس بسايدتشين. - النهاية: رايزر وخلل نحو ضربة نهائية كبيرة واحدة عند 13.07 ثانية، ثم يرن وتر الختام حتى 15 ثانية. </music> <sound> فوق الخلفية، أضف ضربات مؤلفة للقطع: - رايزر نحو بوم عند الفيل في 1.867 ثانية - ووشات قصيرة تبلغ ذروتها عند كل قطع كلمة وكل مسح - نقرات ناعمة على موجات الأشكال - بوم صغير وتكة زجاجية عند وميض الجسيمات - ووش أثر عند مغادرة الجسيمات - سقوط ساب نحو المشهد ثلاثي الأبعاد - رايزر وتكات خلل رقمية نحو البوم النهائي عند 13.07 ثانية - جرس عند هبوط الرمز الشعاري عند 13.51 ثانية بدون تعليق صوتي. اضبط المزج على نحو -14 LUFS، وذروة حقيقية أقل من -1 dBTP. </sound> <references> ريل إطلاق منتج تقني على غرار ريلات العلامات التجارية المتحركة الأنيقة: طبقة HUD بأسلوب البث التلفزيوني، وطباعة حركية، وجسيمات توليدية، وسحابة نقاط ثلاثية الأبعاد دوارة، ولوحة معلومات واجهة نظيفة. </references>

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

عرض تعريفي سلس للتطبيق مدته 15 ثانية بموشن غرافيك خالص

<direction> اصنع عرضًا تعريفيًا أفقيًا بالموشن غرافيك مدته 15 ثانية لتطبيقي، بدقة 1920x1080 و60 إطارًا في الثانية. كل شيء رسومات مرسومة بلا لقطات مصوّرة. الشيء الوحيد الذي أقدّمه هو شعار تطبيقي (أيقونة تطبيق مربعة بزوايا مستديرة). الفكرة حركة واحدة متواصلة يسلّم فيها كل قسم آخر عنصر فيه إلى القسم التالي. نقطة تصبح الشعار، والشعار يصبح الاسم، والحروف تصبح نقاطًا، والنقاط تصبح كرات سباق، وكرة تغمر الإطار، وشكل ينكسر إلى بلاطات، والبلاطات تصبح سحابة نقاط ثلاثية الأبعاد، ثم تأتي كلمات حركية وبطاقة ختامية. كل قسم يعرض مهارة حركة واحدة. استخدم ألوانًا مسطحة وأشكال متجهة حادة وواجهة HUD لمنظار كاميرا فوق كل شيء، مع قطعات مثبّتة على مقطوعة بإيقاع 128 BPM. تجنّب اللقطات المصوّرة والتدرجات والخامات والتعليق الصوتي وأي قسم يبدأ من العدم بدل أن ينمو من القسم السابق. </direction> <structure> 1. 0–1.9 ث، قريب من الأسود: نقطة وردية تجلس داخل حلقة رمادية رفيعة، وتنفتح الحلقة بـ expo.out. تنفرد حلقة ثانية حتى تصبح دائرة كبيرة باهتة (0.45 ث، expo.out). عند 0.5 ث ينمو شعاري من النقطة، وتظهر طبقاته واحدة تلو الأخرى بـ back.out. يستقر أكبر عند 0.92 ث وهو يدور برفق. تظهر حولها حلقة وردية رفيعة من نص mono دائري ("APP NAME · IDEAS IN MOTION · APPNAME.APP ·"، استبدله بنصك) وتدور ببطء. عند 1.7 ث تتقلص العلامة مع قليل من التمويه عائدة إلى نقطة صغيرة فاتحة. 2. 1.9–3.5 ث: عند الدروب في 1.93 ث ينفجر قرصان من النقطة، الفاتح أولًا والوردي بعده بـ 30 م ث (expo.out، 0.3 ث)، فتركب حلقة فاتحة رفيعة على الحافة الوردية. يصعد اسم تطبيقي بالخط العريض (grotesque) حرفًا بحرف من خط الأساس: كل حرف مقصوص داخل صندوقه الخاص، بفارق 30 م ث و0.26 ث expo.out. يملأ الاسم دائمًا العرض نفسه 1640 بكسل. يُرسم خط داكن رفيع من المركز فوقه، مع كتابة "01" على اليسار وعنوان موقعي على اليمين. من 2.55 ث تمر موجة عرض عبر الحروف: يضيق كل حرف من 150% إلى نحو 55% من العرض ثم يعود خلال 0.6 ث، بعد 0.1 ث من الذي قبله. تُعاد مواءمة الكلمة إلى 1640 بكسل في كل إطار، فتزداد الحروف الضيقة ارتفاعًا. عند 2.84 ث يصعد شعار فاتح بخط serif مائل ("ideas in motion") كلمة بكلمة تحته. عند 3.3 ث تنهار الحروف إلى نقاط داكنة ويسقط الشعار. 3. 3.5–5.6 ث: يأتي مسح قطري فاتح من أسفل اليمين (0.16 ث). تنطلق ست نقاط داكنة في منحنى إلى بداية ستة صفوف (power2.inOut، متعاقبة) وتأخذ ألوان الصفوف. يُكتب عنوان بخط serif مائل من اليسار ("Chat instead of a timeline.")، مع ملاحظة mono على اليمين ("NO KEYFRAMES · LIVE PREVIEW") وتسميتا المسار "IDEA" و"MP4" عند الطرفين. - لكل صف رقم وردي، واسم mono ("animated type"، "shapes"، "transitions"، "3D effects"، "sound"، "live preview")، وأيقونة منحنى صغيرة ترسم نفسها، وخط مسار يُرسم من اليسار إلى اليمين. - عند 4.215 ث تتسابق ست كرات (داكنة، بنفسجية، وردية، بالتكرار) مسافة 1040 بكسل في 0.94 ث بالضبط، لكل منها منحناها الخاص: linear وpower2.inOut وexpo.out وback.out(1.7) وelastic.out(1, 0.3) وbounce.out. - علامات فوق كل مسار تحدد موضع الكرة عند كل 1/16 من السباق. ثلاث حلقات شبحية تتلاشى تتبع كل كرة، وتتمدد الكرات على امتداد سرعتها، وتركب نقطة على كل أيقونة منحنى بتزامن، وتحصل كل كرة على هالة محيطية عند وصولها. - عند 5.3 ث تتلاشى الصفوف، وتطير الكرات إلى المركز وتندمج، وتنتفخ البنفسجية حتى تملأ الإطار. 4. 5.6–7.5 ث، بنفسجي: تقفز دائرة فاتحة من نقطة (elastic.out، 0.45 ث). تنطلق اثنتا عشرة نقطة تابعة إلى مدار (expo.out، بفارق 12 م ث). - خلفها خطوط إرشاد رفيعة متقاطعة، ودائرة مدار منقطة مع علامات تدريج والتسميتان "270°" و"90°". - قراءات mono على الجانبين: "SHAPES NO KEYFRAMES" على اليسار، وطلبات تعديل بين علامات اقتباس على اليمين ("“BIGGER” “SLOWER”"، "“ANOTHER COLOUR”"). - حلقات تموج وردية تنبض حول الدائرة. - ثم يتحول الشكل: دائرة ← مثلث ← نجمة ← مربع. يستغرق كل تحول 0.26–0.3 ث بـ back.out(2.2) مع دوران 120°، وتتبع الشكلَ خطوطٌ محيطية وردية صدوية فقط أثناء دورانه. - تتحول التوابع بعده بلحظة، واحدًا تلو الآخر، وتختفي عند 7.22 ث. يستقر كمربع قائم بحجم 360 بكسل. 5. 7.5–9.75 ث، قريب من الأسود: ينقسم المربع إلى تسع بلاطات بحجم 120 بكسل. تنمو متاهة truchet حلقة بحلقة حتى تملأ الإطار (back.out، نحو 30 م ث لكل حلقة)؛ تحمل كل بلاطة قوسين ربع دائريين في ركنين متقابلين، مرسومين كخطوط فاتحة بسماكة 20 بكسل. تعبرها موجات وردية: أولًا شريطان يمسحان من اليسار إلى اليمين، ثم حلقة تنغلق نحو المركز. تدور البلاطات داخل الموجة 90 أو 180 درجة، وتنكمش إلى 80% وتتحول إلى الوردي، فتنكسر الخطوط إلى شرطات، ثم تعود بعد مرور الشريط. تُكتب تسمية mono صغيرة في الأسفل ("SHAPES · TRANSITIONS · NO KEYFRAMES"). من 9.45 ث تنهار البلاطات من المركز إلى الخارج. 6. 9.5–11.25 ث: تظهر شبكة نقاط 24 × 24 حيث كانت البلاطات، منظورة من الأعلى. تميل إلى مستوى منظوري وتنطوي إلى كرة، ثم مزهرية، ثم كتلة مضغوطة، ثم torus وهي تدور حول محورها الرأسي. بين الأشكال تتحرك بـ power2.inOut، مع خطوط باهتة بين الجيران، ونقطة وردية تقريبًا من كل تسع، وتزداد النقاط خفوتًا مع العمق. تسمية mono أسفلها ("3D EFFECTS · LIVE PREVIEW · MP4 EXPORT"). تقترب عبر الكاميرا وتتلاشى عند 11 ث. 7. 11.25–13.0 ث، كلمات حركية: كلمة كل 0.23 ث، لكل منها خلفية مسطحة خاصة وتملأ العرض بعرض مختلف من الخط نفسه. استبدل الكلمات الست بعبارتك. - "IDEA": داكنة على وردي، تنزلق من اليسار، تدرج من 1.3 إلى 1، ويزول التمويه خلال 0.14 ث. - "IN.": فاتحة على قريب من الأسود مع نقطة ختام وردية، تدخل من اليمين مع تمويه، وملاحظة mono صغيرة في أعلى اليسار ("EDIT IN WORDS ↗"). - "VIDEO": مضغوطة جدًا بنفسجية على الصفحة الفاتحة، وتصعد الحروف من الأسفل بفارق 25 م ث. - "OUT.": فاتحة على بنفسجي، تدخل من اليسار مع تمويه، مع ملاحظة في أعلى اليمين ("↘ MP4 EXPORT"). - "NO": داكنة على أصفر. تسقط الحروف بزوايا مع back.out، ثم تملأ نسخ محددة الحواف من الكلمة صفوفًا أعلى وأسفل وتتحرك في اتجاهات متبادلة بينما ينجرف الصف الرئيسي إلى اليسار. - "KEYFRAMES.": فاتحة على قريب من الأسود، تنزلق إلى اليسار بسرعة ثابتة مع خط قطري رفيع، ثم تغادر بسرعة مع تمويه. 8. 13.0–15 ث، البطاقة الختامية: يغمر الوردي من اليمين وتنفرد حلقة فاتحة من المركز (0.42 ث). يدور شعاري إلى المركز (back.out) مع انفجار صغير من القصاصات من نقاط وحلقات ومثلثات بالداكن والفاتح والبنفسجي، ثم ينتقل إلى يسار التشكيل. يسقط اسم تطبيقي حرفًا بحرف بجانبه، من الضبابي إلى الحاد، 0.22 ث لكل حرف. يصعد تحته شعار بخط serif مائل ("your AI motion designer"). يُرسم خط، ويُكتب تحته سطر mono: "PICK A TEMPLATE · DESCRIBE YOUR IDEA · MP4 EXPORT"، ثم نقطة تسجيل صغيرة، ثم عنوان موقعي على اليمين. ثبّت اللقطة في الثانية الأخيرة. </structure> <composition> لوحة الألوان، كلها مسطحة: - أسود داكن عميق #0d0b1e - وردي ساطع #fb2d89 (اللون المميز الرئيسي) - صفحة فاتحة #faf9ff - بنفسجي ناعم #7c6cf2 - أصفر دافئ #ffd23f، لقطعة حركية واحدة فقط الخطوط: - خط grotesque عريض متغير بمحور عرض (Anybody، وزن 900، عرض 50–150%) للاسم والكلمات الحركية. - خط serif مائل تحريري مضغوط (Instrument Serif Italic) للعناوين والشعارات. - خط mono (JetBrains Mono) لتسميات الواجهة، 14 بكسل، تباعد الأحرف 0.16em. تغطي واجهة HUD لمنظار كاميرا الفيديو كله: - أقواس زوايا رفيعة بسماكة 2 بكسل، على بعد 44 بكسل من كل زاوية. - أعلى اليسار: اسم تطبيقي بأحرف mono كبيرة عريضة يليه شعار أخفت ("APP NAME IDEAS IN MOTION"). - أعلى اليمين: تسمية القسم الحالي ("01 — APP NAME"، "02 — NO KEYFRAMES"، "03 — SHAPES"، "04 — EDIT IN WORDS"، "05 — 3D EFFECTS"، "06 — KINETIC TYPE"، "07 — TRY IT FREE"). - أسفل اليسار: رمز زمني جارٍ مع الإطارات ("00:00:03:09") وشعار قصير ("LIVE PREVIEW"). - أسفل اليمين: شعار آخر ("NO KEYFRAMES")، وأربعة مربعات صغيرة يضيء واحد منها مع كل نبضة، و"MP4". - على امتداد الحافة السفلية: خط تقدم بسماكة 2 بكسل ينمو مع الزمن. يتبدل الـ HUD بين حبر داكن وفاتح عند كل قطع ليبقى مقروءًا على أي خلفية. كل الكلمات على الشاشة أمثلة استبدلها بكلماتك. </composition> <techniques> - ينتهي كل قسم بعنصر ينمو منه القسم التالي: نقطة إلى شعار، شعار عائد إلى نقطة، أقراص إلى اسم، حروف إلى نقاط، نقاط إلى كرات، كرة إلى فيضان بنفسجي، مربع إلى بلاطات، بلاطات إلى شبكة نقاط، سحابة نقاط تقترب عبر الكاميرا إلى الكلمات الحركية. - تُكتب كل تسمية قسم جديدة في الـ HUD خلال 0.3 ث، مع رموز عشوائية تسبق المؤشر. وتُكتب سطور mono الأخرى أيضًا. - خط بعرض متغير: حرّك محور عرض كل حرف وأعد مواءمة الكلمة كلها إلى عرض ثابت في كل إطار. - تُقص كشوف الحروف داخل صندوق كل حرف. - استخدم تمويه حركة خفيفًا في الحركات السريعة فقط، وحافة لونية بنفسجية باهتة على مسح القزحية الكبير. - الخطوط الصدوية والحلقات الشبحية والهالات خطوط رفيعة وردية أو بلون مطابق وتتلاشى بسرعة. </techniques> <music> سينث بوب إلكتروني حيوي بإيقاع 128 BPM، النبضة الأولى عند 0.06 ث، بطول 15 ث بالضبط: - أوتار باد ناعمة تشبه الأجراس في الميزان الأول. - بعد الدروب عند 1.93 ث، طبلة كيك four-on-the-floor مع تصفيق على 2 و4، وهاي-هات على النبضات الضعيفة، وباص سينث قوي، وضربات أوتار قصيرة تحت الأقسام. - بريك من نحو 10 ث يتصاعد نحو القسم الحركي. - وتر باد ختامي رنّان على البطاقة الختامية. تتغير الأقسام عند خطوط الموازين، ويحط الاسم على الدروب عند 1.93 ث، وتقع قطعات الكلمات الحركية على الأنصاف المضاعفة (ثُمنيات النوتة). </music> <sound> بلا صوت بشري. ضربات فوق الموسيقى: - رايزر خلال الميزان الأول - بوم على الدروب عند 1.93 ث - رايزر من نحو 10 ث إلى ضربة punch عند 11.25 ث - كيك وووش قصير عند كل قطع كلمة حركية - ضربة صنج crash عند 12.71 ث - بوم مع وتر الباد الرنّان عند هبوط البطاقة الختامية - blip صغير عند 14.1 ث تحمل الموسيقى المقطوعة وتهبط الضربات بوضوح فوقها. </sound> <references> عرض تعريفي لمصمم موشن مدمج مع فيديو إطلاق منتج تقني. يجمع بين طبقة منظار كاميرا، وطباعة حركية جريئة بالطراز السويسري، وعروض لمنحنيات التسهيل، وأنماط بلاطات truchet توليدية، وسحابة نقاط ثلاثية الأبعاد تدور. </references>

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

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

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

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

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