saas-motion-kit کے ساتھ منفرد SaaS پرومو ویڈیوز بنائیں

saas-motion-kit کیا ہے؟

saas-motion-kit سافٹ ویئر مصنوعات کے لیے تشہیری اور موشن ویڈیوز بنانے کا ایک تخلیقی پروڈکشن سسٹم ہے، جو HyperFrames اور Claude Code کے ساتھ کام کرتا ہے۔ یہ منصوبہ بندی کی رہنمائی، بصری حوالہ جات، اسٹوری بورڈ ٹیمپلیٹس، آٹومیشن ٹولز اور جائزے کے مراحل کو ایک ہی ریپوزٹری میں یکجا کرتا ہے۔

یہ منصوبہ ایک اصول کے گرد بنایا گیا ہے: کوئی بھی دو فلمیں ایک جیسی محسوس نہیں ہونی چاہییں۔ مانوس انٹریز، ٹرانزیشنز اور لے آؤٹس کو بار بار استعمال کرنے کے بجائے، پہلے پیغام اور انداز کا تعین کیا جاتا ہے، پھر اسی فلم کے لیے موزوں بصری زبان تیار کی جاتی ہے۔

اس کِٹ میں 10 بصری خاندانوں پر مشتمل 100 تھیمز، 24 ٹرانزیشنز کا اٹلس، سات مراحل پر مشتمل پلے بُک، کمپوننٹ حکمتِ عملی، مکمل مثالیں اور ایک ورائٹی آڈٹ شامل ہے جو پروڈکشن شروع ہونے سے پہلے تکرار کا پتا چلاتا ہے۔

اہم خصوصیات

• سات مراحل پر مشتمل پروڈکشن پلے بُک: بریف، کمپوننٹس، تھیم، اسٹوری بورڈ، بلڈ، ساؤنڈ اور ڈیلیوری کے مراحل سے گزریں، جبکہ ہر مرحلے کے بعد انسانی جائزے کا مرحلہ موجود ہو۔
• 100 بصری تھیمز: پروڈکٹ UI، ٹائپوگرافی، 3D مواد، آپٹکس، استعاروں، ڈیٹا اسٹوری ٹیلنگ، کرداروں، فنّی تحریکوں اور کیمرہ گرامر پر مبنی سمتیں دریافت کریں۔
• ٹرانزیشن اٹلس: 24 بیانیہ ٹرانزیشنز کا جائزہ لیں، جن میں میچ کٹس، کیری، کیمرہ موومنٹس، ماسکس، میٹیریل ٹرانزیشنز اور وقت پر مبنی تکنیکیں شامل ہیں۔
• ورائٹی آڈٹ: اسٹوری بورڈز میں دہرائی جانے والی ٹرانزیشنز، انٹریز، ایزنگ کروز، حرکت کی سمتوں، یکساں شاٹ دورانیوں، ایکسنٹ کے حد سے زیادہ استعمال، حیرت کے عناصر کی کمی، انداز کی عدم مطابقت اور اصل کمپوننٹس کی کمی کو جانچیں۔
• تھیم پکَر: حال ہی میں استعمال کیے گئے تھیمز کو خارج کرتے ہوئے، ناظرین اور انداز کے مطابق تھیمز کی مختصر فہرست بنائیں۔
• موشن ہسٹری: فلموں کے دوران تخلیقی فیصلوں کا ریکارڈ رکھیں اور ایسی رپورٹس تیار کریں جو حد سے زیادہ استعمال شدہ اور ابھی نہ آزمائی گئی تکنیکیں دکھائیں۔
• کمپوننٹ حکمتِ عملی: صاف ستھرا پروڈکٹ UI HTML میں دوبارہ بنائیں یا جب اصل انٹرفیس موزوں نہ ہو تو سادہ خیالی کمپوننٹس تیار کریں۔
• Claude Code اسکل: مکمل عمل کو باہمی طور پر مکمل کرنے کے لیے /saas-motion-video کمانڈ استعمال کریں۔
• GitHub Action: push اور pull request پر ہر STORYBOARD.md فائل کا آڈٹ کریں۔
• پروڈکشن یوٹیلیٹیز: ڈیلیوری رینڈرز کا سائز کم کریں، لوپ کے جوڑوں کا معائنہ کریں، گرم لہجے والے UI ساؤنڈ ایفیکٹس تیار کریں اور گیلریز بنائیں۔

سات مراحل کے ورک فلو کو سمجھیں

یہ ورک فلو پروڈکشن کے کام کو تخلیقی منظوری سے الگ رکھتا ہے:

1 Brief → 2 Components → 3 Theme → 4 Storyboard → 5 Build → 6 Sound → 7 Deliver
   gate       gate          gate         gate           gate      gate       gate

ایجنٹ پروڈکشن کا بڑا حصہ انجام دے سکتا ہے، لیکن ہر مرحلہ انسانی فیصلے پر ختم ہوتا ہے۔ انہی مراحل میں آپ پیغام کی تصدیق کرتے ہیں، جانچتے ہیں کہ بصری سمت موزوں ہے یا نہیں، اور عام یا دہرائے گئے انتخاب کو مسترد کرتے ہیں۔

1. بریف: ناظرین، پیغام، پلیٹ فارم، دورانیہ، انداز اور ڈیلیوری کی ضروریات متعین کریں۔
2. کمپوننٹس: فیصلہ کریں کہ صاف ستھرے پروڈکٹ UI کو متحرک کرنا ہے یا حقیقت پر مبنی خیالی کمپوننٹس ڈیزائن کرنے ہیں۔
3. تھیم: ایسی بصری زبان منتخب کریں جو مطلوبہ انداز کو تقویت دے۔
4. اسٹوری بورڈ: ہر شاٹ کی منصوبہ بندی کریں، تخلیقی لیجر مکمل کریں اور ورائٹی آڈٹ چلائیں۔
5. بلڈ: فلم کو متعین اور seek-safe اینیمیشن کے طور پر نافذ کریں۔
6. ساؤنڈ: ضرورت کے مطابق موزوں موسیقی اور ساؤنڈ ڈیزائن شامل کریں۔
7. ڈیلیور: ہائی ریزولوشن میں رینڈر کریں، حتمی آؤٹ پٹ سائز بنائیں اور لوپ کے جوڑوں جیسی تکنیکی تفصیلات کی تصدیق کریں۔

انسٹالیشن اور سیٹ اپ

ضروریات

کِٹ انسٹال کرنے سے پہلے یقینی بنائیں کہ آپ کے ماحول میں یہ چیزیں شامل ہیں:

• Node.js 22 یا اس کے بعد کا ورژن
• ffmpeg
• Claude Code

HyperFrames اپنا headless Chrome ڈاؤن لوڈ کرتا ہے، اس لیے رینڈرنگ کے لیے یہ براؤزر الگ سے انسٹال کرنے کی ضرورت نہیں۔

آپشن 1: ریپوزٹری ٹیمپلیٹ استعمال کریں

saas-motion-kit ریپوزٹری کھولیں اور Use this template منتخب کریں۔ اس سے ایک فلم ریپوزٹری بنے گی جس میں تخلیقی اصول، ٹولز، ٹیمپلیٹس اور پہلے سے تشکیل شدہ ورائٹی آڈٹ GitHub Action شامل ہوگا۔

آپشن 2: ریپوزٹری کلون کریں

git clone https://github.com/tugrawork-creator/saas-motion-kit
cd saas-motion-kit

Claude Code کے لیے HyperFrames اسکلز انسٹال کریں۔ یہ کِٹ کے اندر شامل نہیں ہیں:

npx skills add heygen-com/hyperframes

شامل مثال کا پیش منظر دیکھیں

ریپوزٹری میں ایک خاموش، ہموار 40 سیکنڈ کے 3D بوتھ لوپ کے لیے مکمل HyperFrames پروجیکٹ شامل ہے۔ اس کی ڈائریکٹری کھولیں اور Studio پیش منظر شروع کریں:

cd examples/acme-suite-loop
npx hyperframes preview

ڈیلیوری معیار کا 4K لینڈ اسکیپ ورژن رینڈر کرنے کے لیے چلائیں:

npx hyperframes render --quality delivery --resolution landscape-4k --output renders/loop-2160.mp4

اپنی پہلی سافٹ ویئر پرومو بنائیں

مرحلہ 1: مرکوز بریف لکھیں

templates/BRIEF.md میں موجود ٹیمپلیٹ سے آغاز کریں۔ متعین کریں کہ ناظر کو کیا سمجھ آنا چاہیے، فلم کن لوگوں کے لیے ہے، یہ کہاں دکھائی جائے گی اور اس کا احساس کیسا ہونا چاہیے۔

ایک مفید تخلیقی جملہ اس نمونے کی پیروی کرتا ہے:

میں [پیغام] کو [انداز] لہجے میں بیان کرنا چاہتا ہوں۔

یہ فیصلہ اثرات یا ٹرانزیشنز سے پہلے ہونا چاہیے۔ creative/tone-matrix.md میں موجود ٹون میٹرکس، ٹون کو رفتار، ایزنگ، کیمرہ رویے، رنگ، ٹائپوگرافی، ٹرانزیشنز اور آواز سے مربوط کرتا ہے۔

مرحلہ 2: کمپوننٹ حکمتِ عملی منتخب کریں

سافٹ ویئر فلمیں قابلِ اعتماد UI پر منحصر ہوتی ہیں۔ کِٹ کا صاف یا تخیلاتی اصول استعمال کریں:

1. اگر پروڈکٹ کا UI یکساں، بےترتیب عناصر سے پاک اور جدید ہے، تو اسے بطور حوالہ محفوظ کریں اور پروڈکٹ کے ڈیزائن ٹوکنز استعمال کرتے ہوئے ضروری کارڈز، ٹیبلز، چارٹس اور نوٹیفکیشنز HTML میں دوبارہ بنائیں۔
2. اگر انٹرفیس پرانا، حد سے زیادہ گنجان یا ابھی ڈیزائن نہیں ہوا، تو برانڈ کی بصری زبان میں سادہ تخیلاتی کمپوننٹس بنائیں۔
3. ہر کمپوننٹ کو حقیقت پر مبنی رکھیں۔ یہ کسی حقیقی صلاحیت کو سادہ بنا سکتا ہے، لیکن صلاحیتیں، صارفین یا کارکردگی کے اعداد و شمار ایجاد نہیں کرنے چاہییں۔

پروجیکٹ یہ بھی تقاضا کرتا ہے کہ ہر فلم کم از کم ایک اصل کمپوننٹ ایجاد کرے۔ creative/component-forge.md میں موجود کمپوننٹ فورج، اسے تیزی سے تیار کرنے کا طریقہ فراہم کرتا ہے۔

مرحلہ 3: بصری تھیم منتخب کریں

100 تھیمز کی گیلری دیکھیں اور بریف کے لیے دو یا تین آپشنز منتخب کریں۔ ہر تھیم شیٹ میں چار اہم لمحات، یعنی ہُک، ریویل، پروف اور CTA، کے ساتھ تجویز کردہ کمپوننٹس، وقت کے مطابق موشن تکنیکیں، خطرات، موافقت کی رہنمائی اور حوالہ جات شامل ہیں۔

آپ کمانڈ لائن سے بھی تھیمز کی مختصر فہرست بنا سکتے ہیں۔ مثال کے طور پر، یہ کمانڈ ڈویلپرز کے لیے بنائے گئے پُرلطف تھیمز تلاش کرتی ہے اور حالیہ تاریخ میں درج تھیمز کو خارج کرتی ہے:

python tools/pick_themes.py --tone playful --audience "developers" --history ~/.motion-ledger.json

تھیمز کو 10 خاندانوں میں منظم کیا گیا ہے:

• اسٹیج کے طور پر پروڈکٹ UI
• ٹائپوگرافی اور گرافک سسٹمز
• مادّہ اور 3D
• روشنی، بصریات اور ٹیکسچر
• استعارہ جاتی تصورات
• امتیازی سمتیں
• ڈیٹا اسٹوری ٹیلنگ
• کردار اور میسکاٹس
• آرٹ کی تحریکیں اور ادوار
• کیمرہ اور ایڈیٹنگ کی گرامر

مرحلہ 4: اسٹوری بورڈ بنائیں اور آڈٹ کریں

فراہم کردہ ٹیمپلیٹ سے STORYBOARD.md بنائیں۔ پیغام اور ٹون کے جملے سے آغاز کریں، پھر ہر شاٹ کے لیے ایک قطار پر مشتمل تخلیقی لیجر مکمل کریں۔ ٹرانزیشنز، انٹریز، ایزنگ، موشن کی سمت، ٹائمنگ، ایکسنٹس، حیرت انگیز عناصر اور اصل کمپوننٹس جیسے انتخاب درج کریں۔

تعمیر شروع کرنے سے پہلے لازمی تخلیقی آڈٹ چلائیں:

python tools/variety_audit.py STORYBOARD.md

آڈٹ میں نشان زدہ دہرائے گئے انتخاب درست کریں۔ اگر تکرار جان بوجھ کر اور بیانیے کے لحاظ سے معنی خیز ہے، تو اسے بغیر وضاحت کے چھوڑنے کے بجائے ایک دانستہ motif: کے طور پر نشان زد کریں۔

آڈٹ موشن ہسٹری کے ساتھ بھی کام کر سکتا ہے، جس سے آپ حالیہ فلموں میں استعمال کی گئی تکنیکوں سے بچ سکتے ہیں۔ نتیجہ شامل کرتے وقت --theme NNN آپشن منتخب تھیم کو اس ہسٹری کا حصہ بنا دیتا ہے۔

مرحلہ 5: Claude Code کے ساتھ پروڈکشن شروع کریں

ریپوزٹری کے روٹ پر Claude Code کھولیں اور شامل کردہ اسکل کو ایک مخصوص درخواست کے ساتھ چلائیں۔ مثال کے طور پر:

/saas-motion-video  Make a 45 s LinkedIn promo for https://your-product.com — theme 055 (Bento Grid), music-driven, no voiceover.

یہ اسکل تمام سات مراحل میں آپ کی رہنمائی کرتا ہے اور ہر جائزہ گیٹ پر رک جاتا ہے۔ ان توقفات کو رسمی کارروائی نہ سمجھیں: انہیں یہ جانچنے کے لیے استعمال کریں کہ آیا کام بریف کو مؤثر انداز میں پہنچاتا ہے اور آیا اس کے بصری انتخاب عام کے بجائے مخصوص محسوس ہوتے ہیں۔

مرحلہ 6: پیش منظر دیکھیں اور رینڈر کریں

تعمیر کے دوران HyperFrames Studio استعمال کریں:

npx hyperframes preview

حتمی ڈیلیوری کے لیے 4K میں رینڈر کریں، چاہے ہدف 1080p یا 2K ہی کیوں نہ ہو:

npx hyperframes render --quality delivery --resolution landscape-4k --output renders/final-2160.mp4

پھر Lanczos کے ذریعے سائز کم کرنے کے لیے tools/deliver.sh استعمال کریں۔ پروجیکٹ کی رہنمائی کے مطابق، اس سے 1080p پر مقامی طور پر رینڈر کرنے کے مقابلے میں متن، کنارے اور 3D تصاویر زیادہ صاف بنتی ہیں۔

متعدد فلموں میں ورائٹی سسٹم استعمال کریں

اپنی تخلیقی ہسٹری درج کریں

ایک فلم اندرونی تکرار سے بچ سکتی ہے اور پھر بھی آپ کے پچھلے کام سے مشابہ لگ سکتی ہے۔ ہسٹری ٹولز تھیمز اور موشن کے فیصلوں کو مختلف پروجیکٹس میں درج کرکے اس وسیع تر مسئلے کو حل کرتے ہیں۔

tools/history_report.py سے ایک صفحے کی رپورٹ تیار کریں۔ یہ وہ ٹرانزیشنز، انٹریز اور ایزنگ اسٹائلز دکھاتی ہے جنہیں آپ اکثر استعمال کرتے ہیں، ساتھ ہی اٹلس ٹرانزیشنز اور وہ تھیمز بھی دکھاتی ہے جنہیں آپ نے ابھی دریافت نہیں کیا۔

مسلسل انٹیگریشن میں اسٹوری بورڈز کا آڈٹ کریں

ریپوزٹری میں .github/workflows/variety-audit.yml شامل ہے۔ ہر push اور pull request پر یہ ورک فلو ہر STORYBOARD.md کا آڈٹ کرتا ہے۔ جو اسٹوری بورڈ خود کو دہراتا ہے، وہ چیک میں ناکام ہو جاتا ہے، جس سے تخلیقی جائزہ پروڈکشن کے عمل میں پہلے آ جاتا ہے۔

GitHub ٹیمپلیٹ سے آغاز کرنا اس ورک فلو کو شامل کرنے کا آسان ترین طریقہ ہے۔ اگر آپ کِٹ کو کسی موجودہ پروجیکٹ میں کلون کرتے ہیں، تو ورک فلو برقرار رکھیں اور یقینی بنائیں کہ آپ کا اسٹوری بورڈ متوقع لیجر ساخت کی پیروی کرتا ہے۔

چھ فلموں کے موازنے سے سیکھیں

examples/six-films ڈائریکٹری ایک ہی 12 سیکنڈ کے اسکرپٹ کو چھ تھیمز میں استعمال کرتی ہے۔ ہر ورژن وہی کہانی برقرار رکھتے ہوئے اپنی بصری زبان تبدیل کرتا ہے اور ایک منفرد کمپوننٹ متعارف کراتا ہے۔ ڈائریکٹری میں مشترکہ بریف بھی شامل ہے، جس سے آپ کسی ایجنٹ کو وہی پابندیاں دے کر ساتویں تشریح آزما سکتے ہیں۔

examples/acme-suite-loop پروجیکٹ ایک اور مفید سبق فراہم کرتا ہے۔ اس کے پہلے اسٹوری بورڈ میں ایک ہی موڑ، ٹائٹل انٹری، ایزنگ اور شاٹ کا دورانیہ دہرایا گیا تھا۔ نظرثانی شدہ ورژن انٹریز، موڑ، رفتار اور کیمرہ رویے میں تنوع لاتا ہے، جبکہ ایک دانستہ بصری حیرت بھی شامل کرتا ہے۔

اعلیٰ درجے کی پروڈکشن تجاویز

ہر فریم کو seek-safe بنائیں

HyperFrames کو ہر مطلوبہ فریم مستقل انداز میں رینڈر کرنے کے قابل ہونا چاہیے۔ ہر فریم کو وقت کا ایک خالص فنکشن سمجھیں۔ README ایک رکی ہوئی GSAP ٹائم لائن استعمال کرنے اور hf-seek سے Three.js چلانے کی تجویز دیتی ہے۔

Date.now() اور بغیر seed والی randomness سے گریز کریں۔ جب رینڈرر براہِ راست کسی فریم پر جائے تو یہ inputs مختلف نتائج پیدا کر سکتے ہیں۔

لُوپس کو ریاضیاتی طور پر seamless بنائیں

لوپ ہونے والی فلم کے لیے ہر ambient movement کو لوپ کے دورانیے میں مکمل cycles کی ایک صحیح عددی تعداد دیں۔ پروجیکٹ اس اصول کو یوں ظاہر کرتا ہے:

sin(2π·n·t/LOOP)

رینڈرنگ کے بعد صرف بصری معائنے پر انحصار کرنے کے بجائے tools/loop_check.py سے seam کی تصدیق کریں۔

کثیر لسانی typography احتیاط سے سنبھالیں

جب فلم میں غیر لاطینی حروف شامل ہوں تو مقامی latin-ext فونٹ subsets پیکیج کریں۔ built-in fallback فونٹس خاموشی سے ş، ğ اور İ جیسے glyphs چھوڑ سکتے ہیں۔

یہ فرض نہ کریں کہ CSS uppercase conversion تمام زبانوں میں یکساں کام کرے گی۔ مثال کے طور پر ترکی میں lowercase i کو تبدیل کرنے سے İ بنتا ہے۔ display copy کو اس کی مطلوبہ uppercase شکل میں درج کریں اور ہر لفظ کے لیے مناسب lang value مقرر کریں۔

آواز کو گرم اور بامقصد رکھیں

خالص sine-wave interface sounds پھیکی یا بے آرام محسوس ہو سکتی ہیں۔ کِٹ میں tools/warm_sfx.py شامل ہے، جو ایک ہی key میں marimba یا wood block جیسے مختصر room reverb والے زیادہ گرم tuned timbres تیار کرتا ہے۔

اگر آپ Meta کے MusicGen سے موسیقی تیار کرتے ہیں تو یاد رکھیں کہ اس کے weights CC-BY-NC 4.0 کے تحت licensed ہیں اور تجارتی استعمال کے لیے موزوں نہیں۔ تجارتی فلموں کے لیے مناسب طور پر licensed موسیقی منتخب کریں۔

آن اسکرین متن کم کریں

کہانی کو motion اور composition کے ذریعے آگے بڑھنے دیں۔ متن کو labels اور تقریباً ہر beat کے لیے ایک سطر تک محدود رکھیں۔ اگر فلم سمجھنے کے لیے ناظرین کو پیراگراف پڑھنے پڑیں تو visuals کافی narrative work نہیں کر رہے۔

نیچے progress bar شامل کرنے سے گریز کریں۔ پروجیکٹ خبردار کرتا ہے کہ یہ انداز brand film کو screen recording جیسا بنا دیتا ہے۔

transitions کو بیانیہ انداز میں استعمال کریں

transitions کو محض decoration کے طور پر منتخب کرنے کے بجائے transition atlas سے رجوع کریں۔ اس کی 24 entries میں سے ہر ایک اس tone کی وضاحت کرتی ہے جسے وہ support کرتی ہے اور کن combinations سے گریز کرنا چاہیے۔ ایسی transitions منتخب کریں جو خیالات کے درمیان تعلق واضح کریں، کسی object کو shots کے درمیان منتقل کریں، یا فلم کی material اور camera language کو مضبوط بنائیں۔

پہلے پروجیکٹ کی تجویز کردہ checklist

1. Node.js 22+، ffmpeg، Claude Code اور HyperFrames skills انسٹال کریں۔
2. rendering environment کی تصدیق کے لیے Acme example کا preview دیکھیں۔
3. ایک واضح message-and-tone sentence کے ساتھ brief لکھیں۔
4. طے کریں کہ real UI دوبارہ بنانی ہے یا حقیقت پسندانہ imaginary components تخلیق کرنے ہیں۔
5. دو یا تین gallery themes مختصر فہرست میں شامل کریں، پھر theme gate پر ایک کی منظوری لیں۔
6. storyboard لکھیں اور اس کا creative ledger مکمل کریں۔
7. tools/variety_audit.py چلائیں اور دہرائے گئے choices حل کریں۔
8. deterministic اور seek-safe animation کے ساتھ build کریں۔
9. محدود اور مناسب طور پر licensed sound شامل کریں۔
10. 4K پر render کریں، delivery کے لیے downscale کریں، اور جہاں قابلِ اطلاق ہو loop seams کا معائنہ کریں۔
11. فلم کے choices کو motion history میں شامل کریں تاکہ اگلا پروجیکٹ مختلف ideas سے شروع ہو۔

نتیجہ

saas-motion-kit محض ایسے effects کا مجموعہ نہیں جنہیں mechanically apply کیا جائے۔ یہ software films بنانے کا ایک structured method ہے جو بصری طور پر منفرد رہتے ہوئے واضح ابلاغ کرتی ہیں۔ technique سے پہلے tone متعین کر کے، پروجیکٹ کے لیے مخصوص components ایجاد کر کے، ہر gate پر decisions کا جائزہ لے کر، اور production سے پہلے repetition کا audit کر کے آپ ایک repeatable workflow بنا سکتے ہیں، بغیر repetitive work پیدا کیے۔