Awesome AI Motion কী?
Awesome AI Motion মানুষ এবং AI কোডিং এজেন্ট উভয়ের জন্য তৈরি একটি মোশন-ডিজাইন গাইড। শুধু দেখতে কেমন তার ভিত্তিতে অ্যানিমেশন বেছে নেওয়ার বদলে, একটি দৃশ্য কী বার্তা দেবে তা দিয়ে শুরু করে উপযুক্ত ইফেক্ট, রেসিপি বা ডিজাইন রুট নির্বাচন করা যায়।
রিপোজিটরিটিতে 637টি কৌশল, 128টি রেফারেন্স ক্লিপ, 11টি রেসিপি এবং 7টি ডিজাইন রুট তালিকাভুক্ত রয়েছে। প্রতিটি ইফেক্ট কার্ডে সংজ্ঞা, সমন্বিত প্যারামিটার, উদাহরণ, সোর্স রেফারেন্স এবং Claude Code ও Codex-এর জন্য প্রম্পট থাকতে পারে।
প্রোডাক্ট রিভিল, টাইটেল সিকোয়েন্স, শিক্ষামূলক ওপেনিং, শর্ট-ফর্ম ভিডিও হুক, ডেটা স্টোরি, UI ডেমোনস্ট্রেশন বা অন্যান্য মোশন-নির্ভর দৃশ্য ডিজাইন করার সময় এই গাইডটি কাজে লাগে।
প্রধান বৈশিষ্ট্য
- AI-পাঠযোগ্য ইফেক্ট কার্ড: এজেন্টরা মোশন মানিয়ে নেওয়ার আগে একটি কার্ড পর্যালোচনা করতে পারে।
- রেন্ডার করা রেফারেন্স: রেন্ডার করা ইফেক্টে HTML স্টেজ, MP4 ক্লিপ, অ্যানিমেটেড GIF প্রিভিউ এবং পোস্টার ছবি থাকতে পারে।
- উদ্দেশ্যভিত্তিক খোঁজ: সিদ্ধান্তের টেবিল দৃশ্যের লক্ষ্য বা মাধ্যম অনুযায়ী মোশন বেছে নিতে সাহায্য করে।
- সমন্বিত রেসিপি: রেসিপিগুলো দেখায়, সময়নির্ধারিত একটি দৃশ্যে একাধিক ইফেক্ট কীভাবে একসঙ্গে কাজ করে।
- ডিজাইন রুট: রুট ডকুমেন্ট প্রোমো, শর্টস এবং ডেকের মতো বড় ডেলিভারেবল পরিকল্পনা করতে সাহায্য করে। রুট ডকুমেন্টগুলো কোরিয়ান ভাষায় লেখা।
- ব্রাউজারে তুলনা: প্রজেক্টের ওয়েবসাইটে ফিল্টার করা, ধীর গতিতে প্লেব্যাক এবং সর্বোচ্চ চারটি ক্লিপ তুলনা করার সুবিধা রয়েছে।
- স্থানীয় রেন্ডারিং: দেওয়া রেন্ডারিং স্ক্রিপ্ট রেফারেন্স ইফেক্ট পরিবর্তন না করে কাস্টমাইজড কপি তৈরি করতে পারে।
- গঠিত মেটাডেটা: ক্যানোনিকাল
index.jsonফাইলটি ক্যাটালগকে সরাসরি অনুসন্ধানযোগ্য করে।
উপলভ্য মোশনের উদাহরণ
এই সংগ্রহে ক্যামেরা মুভমেন্ট ও টাইপোগ্রাফি থেকে শুরু করে ট্রানজিশন, রিভিল, প্যারাল্যাক্স, লাইট ইফেক্ট এবং শেপ ট্রান্সফরমেশন পর্যন্ত নানা ধরনের মোশন রয়েছে। উল্লেখযোগ্য উদাহরণগুলোর মধ্যে রয়েছে Infinite Canvas Pan, Camera Fly-through, Infinite Zoom, Kinetic Type Sweep, Giant Mask Reveal, Morph Match Cut, Noise Dissolve, Ken Burns এবং Particle Scatter & Assemble।
Particle Scatter & Assemble রিপোজিটরিটির রেন্ডার করা রেফারেন্স ইফেক্টগুলোর একটি।
সঠিক শুরু বেছে নিন
রিপোজিটরিটিতে শুরু করার জন্য বিভিন্ন পথ রয়েছে। যে কাজটি সম্পন্ন করতে চান, তার ভিত্তিতে একটি বেছে নিন:
- ওয়েবসাইট: ক্লিপগুলো দৃশ্যত ব্রাউজ, চালানো, ফিল্টার, ধীর করা এবং তুলনা করুন।
- ডকুমেন্টেশনের বিষয়বস্তু: প্রতিটি ইফেক্ট কার্ড না খুলেই গাইডে নেভিগেট করুন।
- সম্পূর্ণ ক্যাটালগ: মোশন পরিবারের ভিত্তিতে সাজানো কৌশল পর্যালোচনা করুন এবং ক্লিপের প্রাপ্যতা দেখুন।
- সিদ্ধান্তের টেবিল: উদ্দেশ্য বা মাধ্যম অনুযায়ী একটি ইফেক্ট বেছে নিন।
- রেসিপি: ইফেক্টগুলো একত্র করে একটি সম্পূর্ণ সময়নির্ধারিত দৃশ্য তৈরি করুন।
- ডিজাইন রুট: বড় কোনো মোশন ডেলিভারেবল পরিকল্পনা করুন।
- এজেন্ট ওয়ার্কফ্লো: উদ্দেশ্য, কার্ড, অভিযোজন, রেন্ডারিং এবং যাচাইয়ের প্রক্রিয়া অনুসরণ করুন।
ইনস্টলেশন ও সেটআপ
ধাপ ১: গাইড ক্লোন করুন
রিপোজিটরি ক্লোন করে তার ডিরেক্টরিতে প্রবেশ করুন:
git clone https://github.com/gongnyang/awesome-ai-motion.git
cd awesome-ai-motionশুধু ওয়েবসাইট ব্রাউজ করা, ইফেক্ট কার্ড পড়া বা গাইডটিকে এজেন্ট স্কিল হিসেবে সংযুক্ত করার জন্য ডিপেনডেন্সি ইনস্টল করার প্রয়োজন নেই।
ধাপ ২: ঐচ্ছিক রেন্ডারিং ডিপেনডেন্সি প্রস্তুত করুন
স্থানীয় রেন্ডারিংয়ের জন্য Node.js 20 বা পরবর্তী সংস্করণ, সিস্টেম পাথে ffmpeg এবং Chromium-সহ Playwright প্রয়োজন। ডিপেনডেন্সিগুলো না থাকলেই কেবল নিচের কমান্ডগুলো চালান:
npm install
npx playwright install chromium
ffmpeg -versionPlaywright আগে থেকেই গ্লোবালি উপলভ্য থাকলে প্যাকেজ ইনস্টল করা ঐচ্ছিক। উপযুক্ত Chromium ইনস্টল করা থাকলে Chromium ইনস্টলেশনের কমান্ডটিও এড়িয়ে যেতে পারেন।
ধাপ ৩: Claude Code-এর সঙ্গে গাইড সংযুক্ত করুন
Claude Code স্কিলস ডিরেক্টরি তৈরি করে রিপোজিটরিটিকে সেখানে লিংক করুন:
mkdir -p ~/.claude/skills
ln -s "$PWD" ~/.claude/skills/awesome-ai-motionএই স্কিলটি বর্তমান চেকআউট ব্যবহার করে বলে সিম্বলিক লিংক সুবিধাজনক। আপনার পরিবেশে লিংক উপযুক্ত না হলে ডিরেক্টরিটি কপি করুন:
mkdir -p ~/.claude/skills
cp -R "$PWD" ~/.claude/skills/awesome-ai-motionশুধু একটি পদ্ধতি বেছে নিন এবং নিশ্চিত করুন যে গন্তব্য পথটি ব্যবহৃত নয়। Codex-এর জন্য একই লিংক বা কপি ~/.codex/skills/-এর অধীনে রাখুন।
কপি করা স্কিল পরে রিপোজিটরিতে হওয়া পরিবর্তনগুলো স্বয়ংক্রিয়ভাবে পায় না। গাইড পরিবর্তিত হলে কপিটি আপডেট বা প্রতিস্থাপন করুন।
মৌলিক ব্যবহার
কোনো এজেন্টকে একটি ইফেক্ট বেছে নিতে বলা
আপনার দৃশ্যের যোগাযোগের লক্ষ্য বর্ণনা করুন, তারপর এজেন্টকে প্রাসঙ্গিক ইফেক্ট কার্ড পরামর্শ করে তার নির্ধারিত ডিফল্টগুলো অপরিবর্তিত রাখতে বলুন। উদাহরণ:
একটি পণ্য উন্মোচনের জন্য মোশন বেছে নিন। ইফেক্ট কার্ড পড়ুন এবং এর ডিফল্ট প্যারামিটার ব্যবহার করুন।
এই অনুরোধ এজেন্টকে একটি স্পষ্ট উদ্দেশ্য দেয়, নথিভুক্ত বাস্তবায়নের দিকে নির্দেশ করে এবং ইচ্ছেমতো অ্যানিমেশন মান অনুমান করা এড়ায়।
আগে থেকে কোনো ইফেক্টের নাম না বলেও আপনি অন্য লক্ষ্যকে কেন্দ্র করে অনুরোধ করতে পারেন:
একটি শিক্ষামূলক ওপেনিং হুকের জন্য মোশন বেছে নিন। গাইডটি পর্যালোচনা করুন এবং মানিয়ে নেওয়ার আগে উপযুক্ত কোনো ইফেক্ট বা রেসিপি শনাক্ত করুন।গাইডে Educational Opening Hook, Shorts Hook, Title Opener, Product UI Demo, Data Story, Concept Explainer, Before and After এবং Scroll Deck Scene-এর মতো রেসিপির উদাহরণ রয়েছে।
ম্যানুয়ালি একটি ইফেক্ট কার্ড পড়া
প্রতিটি কার্ড এখানে অবস্থিত:
effects/<slug>/README.mdউদাহরণস্বরূপ, মাস্ক রিভিল কার্ডটি effects/mask-reveal/README.md-এ রয়েছে। ইফেক্ট পরিবর্তন করার আগে কার্ডটির সংজ্ঞা, প্যারামিটার, উদাহরণ, প্রম্পট এবং সোর্স পড়ুন। কোনো ইফেক্টে রেন্ডার করা অ্যাসেট থাকলে তার ডিরেক্টরিতে আরও থাকতে পারে:
- মোশন স্টেজের জন্য
index.html - ভিডিও আউটপুটের জন্য
clip.mp4 - অ্যানিমেটেড প্রিভিউর জন্য
preview.gif - স্থির ছবির জন্য
poster.jpg
আপনার প্রথম কাস্টমাইজড ক্লিপ রেন্ডার করা
মাস্ক রিভিল ইফেক্টের ওপর সরবরাহ করা রেন্ডারার চালান। এই কমান্ড প্রদর্শিত টেক্সট পরিবর্তন করে, একটি এমবেডযোগ্য স্টেজ তৈরি করে এবং ফলাফল আলাদা স্টেজিং ডিরেক্টরিতে লেখে:
node scripts/render.mjs effects/mask-reveal \
--embed --text "Make it move" --out .staging/my-first-motionরেন্ডার করার পর তৈরি হওয়া এই ফাইলগুলো পর্যালোচনা করুন:
.staging/my-first-motion/clip.mp4.staging/my-first-motion/preview.gif.staging/my-first-motion/poster.jpg
আউটপুট .staging/my-first-motion-এ যাওয়ায় মূল ইফেক্টটি অক্ষত ও পুনর্ব্যবহারযোগ্য থাকে।
ব্যবহারিক নির্বাচন কর্মপ্রবাহ
- দৃশ্যের উদ্দেশ্য নির্ধারণ করুন। মোশনটি কোনো পণ্য উন্মোচন করবে, স্তরবিন্যাস স্থাপন করবে, কোনো ধারণা ব্যাখ্যা করবে, রূপান্তর দেখাবে, নাকি মনোযোগ পরিচালনা করবে—তা নির্ধারণ করুন।
- ক্যাটালগ ব্রাউজ বা অনুসন্ধান করুন। ভিজ্যুয়াল অনুসন্ধানের জন্য ওয়েবসাইট, উদ্দেশ্যভিত্তিক নির্বাচনের জন্য সিদ্ধান্তের টেবিল, অথবা কাঠামোবদ্ধ মেটাডেটার জন্য
index.jsonব্যবহার করুন। - ইফেক্ট কার্ড খুলুন। সংজ্ঞা, নির্ধারিত প্যারামিটার, উদাহরণ, প্রম্পট এবং সোর্স রেফারেন্স পর্যালোচনা করুন।
- একটি ইফেক্ট যথেষ্ট না হলে রেসিপি দেখুন। রেসিপিগুলো দেখায় কীভাবে ইফেক্টগুলো সময়নির্ধারিত দৃশ্যে সাজানো যায়।
- একটি কপি মানিয়ে নিন। রেফারেন্স বাস্তবায়ন অপরিবর্তিত রাখুন এবং তৈরি ফাইলগুলো আলাদা আউটপুট ডিরেক্টরিতে পাঠান।
- রেন্ডার ও যাচাই করুন। শুধু সোর্স কোড দেখে আউটপুট সঠিক ধরে না নিয়ে MP4, GIF, পোস্টার এবং স্টেজ পর্যালোচনা করুন।
উন্নত টিপস
চূড়ান্ত করার আগে প্রার্থীদের তুলনা করুন
প্রজেক্ট ওয়েবসাইট ব্যবহার করে সর্বোচ্চ চারটি ক্লিপ তুলনা করুন। ধীর প্লেব্যাক টাইমিং, ইজিং, মাস্কিং এবং ট্রানজিশন মূল্যায়ন সহজ করতে পারে। একই যোগাযোগের লক্ষ্য পূরণ করলেও বিভিন্ন মাত্রার শক্তি বা গুরুত্ব তৈরি করে—এমন একাধিক কৌশল থাকলে এটি বিশেষভাবে উপযোগী।
ডিফল্ট দিয়ে শুরু করে পরে মানিয়ে নিন
ইফেক্ট কার্ডগুলোতে নির্ধারিত প্যারামিটার দেওয়া থাকে। টাইমিং বা উপস্থাপনা পরিবর্তনের আগে এজেন্টকে ওই মানগুলো দিয়ে শুরু করতে বলুন। এতে উদ্দেশ্যপ্রণোদিত আচরণ বজায় থাকে এবং পরবর্তী পরিবর্তন মূল্যায়নের জন্য একটি পরিচিত ভিত্তি পাওয়া যায়।
তৈরি আউটপুট রেফারেন্স ডিরেক্টরির বাইরে রাখুন
কাস্টমাইজড রেন্ডার effects/ বা recipes/-এ লিখবেন না। .staging/-এর মতো কোনো অবস্থান ব্যবহার করুন, যাতে রেফারেন্স ক্লিপ অক্ষত থাকে এবং রিপোজিটরির পরিবর্তন পর্যালোচনা করা সহজ হয়।
সম্পূর্ণ দৃশ্যের জন্য রেসিপি ব্যবহার করুন
একটি পৃথক ইফেক্ট একটি মোশন কৌশল প্রদর্শন করে, আর একটি রেসিপি কৌশলগুলোকে একটি ক্রমে সাজায়। আপনার ডেলিভারেবলে একটি ওপেনিং, ট্রানজিশন, কনটেন্ট সেকশন এবং সমাপ্তি প্রয়োজন হলে একটি বিচ্ছিন্ন অ্যানিমেশনের বদলে রেসিপি দিয়ে শুরু করুন।
অটোমেশনের জন্য কাঠামোবদ্ধ ডেটা ব্যবহার করুন
রুট-লেভেলের index.json হলো ক্যানোনিক্যাল ক্যাটালগ। কার্ডের পেজ স্ক্র্যাপ না করে টুল ও এজেন্টগুলো সরাসরি এটি পরিদর্শন করতে পারে। মানবিক ব্রাউজিংয়ের জন্য সম্পূর্ণ ক্যাটালগ বেশি উপযোগী, কারণ এটি মোশন পরিবারের ভিত্তিতে কৌশলগুলো গোষ্ঠীবদ্ধ করে এবং ক্লিপের অবস্থা জানায়।
লিংক করা ও কপি করা স্কিল আলাদাভাবে রক্ষণাবেক্ষণ করুন
একটি সিম্বলিক লিংক আপনার চেকআউটের দিকে নির্দেশ করতে থাকে, তাই রিপোজিটরি আপডেট টানলে এজেন্ট যে কনটেন্ট পড়ে সেটিও আপডেট হয়। কপি করা স্কিল স্বাধীন এবং সোর্স গাইড পরিবর্তিত হলে তা ম্যানুয়ালি রিফ্রেশ করতে হয়।
ক্যাটালগে অবদান যাচাই করুন
ইফেক্ট যোগ, ডিফল্ট উন্নত বা রেফারেন্স ক্লিপ আপডেট করার সময় রিপোজিটরির অবদান নির্দেশিকা অনুসরণ করুন। তৈরি করা ডকুমেন্টেশনকে সত্যের মূল উৎস হিসেবে বিবেচনা না করে সংশ্লিষ্ট সোর্স বা জেনারেটর আপডেট করুন। এরপর প্রজেক্টটি পুনরায় তৈরি ও পরীক্ষা করুন:
node scripts/build.mjs
node scripts/check.mjsঅবদানগুলোতে গতি যেন সহজে বোঝা যায়, শেয়ার করা স্টেজ ব্যবহার করা হয় এবং রেন্ডার করা ফলাফল যাচাই করা হয়—এগুলো নিশ্চিত করুন।
পুনর্বিতরণের আগে লাইসেন্স পর্যালোচনা করুন
প্রকল্পটির মৌলিক কাজ MIT লাইসেন্সের অধীনে প্রকাশিত। সোর্স রেফারেন্স ও কম্পোনেন্টের লাইসেন্স ATTRIBUTIONS.md এবং পৃথক ইফেক্ট কার্ডে নথিভুক্ত আছে। GSAP এবং বান্ডেল করা ফন্টগুলোর নিজস্ব লাইসেন্স রয়েছে, তাই এসব অ্যাসেট পুনর্বিতরণের আগে অ্যাট্রিবিউশন সংক্রান্ত তথ্য দেখুন।
উপসংহার
Awesome AI Motion একটি বড় মোশন রেফারেন্স লাইব্রেরিকে মানুষ ও কোডিং এজেন্টদের জন্য ব্যবহারিক ওয়ার্কফ্লোতে রূপান্তর করে। দৃশ্যের উদ্দেশ্য দিয়ে শুরু করুন, নথিভুক্ত কোনো ইফেক্ট বা রেসিপি নির্বাচন করুন, পরিমার্জিত ডিফল্টগুলো অপরিবর্তিত রাখুন, আলাদা ডিরেক্টরিতে রেন্ডার করুন এবং তৈরি হওয়া অ্যাসেট যাচাই করুন। এই প্রক্রিয়া গাইডের রেফারেন্স ইমপ্লিমেন্টেশন ওভাররাইট না করেই সৃজনশীল উদ্দেশ্য থেকে পুনর্ব্যবহারযোগ্য মোশন ক্লিপে যেতে সহায়তা করে।