মোশন স্কিল দিয়ে প্রাণবন্ত অনুভূতির আঁকা ছবি অ্যানিমেট করুন

Motion Skill কী করে

Motion For Anything You Draw skill ডিজাইনার ও ইঞ্জিনিয়ারদের কোড দিয়ে আঁকা artwork অ্যানিমেট করতে সাহায্য করে, যাতে তা বদলে যাওয়া illustration-এর ধারাবাহিকতার মতো না লেগে জীবন্ত মনে হয়। এটি character, creature, plant, cloth, fire, smoke, water, weather, light, machine, icon, logo, chart এবং সম্পূর্ণ scene-এর ক্ষেত্রে প্রয়োগ করা যায়।

প্রকল্পটি অ্যানিমেশনকে বিশ্বাসযোগ্য করে তোলা সূক্ষ্ম বিষয়গুলোর ওপর গুরুত্ব দেয়: পুরো scene-এর জন্য একটি clock, প্রকৃত pivot ঘিরে movement, এক beat পরে অনুসরণ করা trailing অংশ, অবিচ্ছিন্ন idle life, key pose-এর মধ্য দিয়ে মসৃণ path, সংযত amplitude এবং শক্তিশালী timing curve।

এটি agent-generated animation-এর সাধারণ সমস্যাগুলিও সমাধান করে। প্রতিটি pose-কে আলাদা eased tween ব্যবহার করতে দেওয়ার পরিবর্তে, skill-টি সমন্বিত motion, স্বাভাবিক transition, স্পষ্ট blink, স্থিতিশীল contact এবং সূক্ষ্ম secondary movement উৎসাহিত করে।

Skill ইনস্টল করুন

skills command দিয়ে skill ইনস্টল করুন:

npx skills@latest add rossark0/rossark-motion-skill

ইনস্টলেশনের পর skill-টি reference material, পুনর্ব্যবহারযোগ্য template, analysis tool এবং example scene সরবরাহ করে। অন্তর্ভুক্ত engine React Native ও SwiftUI উভয় template সমর্থন করে।

Repository বুঝুন

প্রধান skill guide পড়ুন

SKILL.md দিয়ে শুরু করুন। এতে core principle, বিভিন্ন subject-এর recipe, live face, full-body acting, scene-based action, interface motion, সাধারণ ভুল, reference-video analysis এবং প্রস্তাবিত workflow বর্ণনা করা হয়েছে।

প্রকল্প-নির্দিষ্ট motion note তৈরি করুন

আপনার artwork-এর পাশে MOTION.md কপি করুন এবং কাজের সময় Part 2 পূরণ করুন। Animation code কোথায় আছে, আপনার project কোন নিয়ম অনুসরণ করে, artwork কী করতে পারে না এবং পরিবর্তন কীভাবে যাচাই করেন, তা লিখে রাখুন। Skill প্রথমে এই file পড়ে, তাই motion পরিবর্তন বা তৈরি করার আগে এটি agent-কে গুরুত্বপূর্ণ project context দেয়।

একটি animation engine বেছে নিন

Repository-তে সমর্থিত প্রতিটি UI framework-এর জন্য একটি করে engine রয়েছে:

• React Native-এর জন্য motion.ts।
• SwiftUI-এর জন্য Motion.swift।

Engine-এ loop ও one-shot clock, track, flow, seg, wave, loop, bell, seeded এবং motion curve রয়েছে। আপনার drawing-এ animated eye ও mouth প্রয়োজন হলে সঙ্গে থাকা live-face template ব্যবহার করুন।

ধাপে ধাপে একটি Animation তৈরি করুন

1. Artwork ও তার সীমা বর্ণনা করুন। বিদ্যমান drawing structure, উপলভ্য geometry এবং constraint নথিবদ্ধ করতে MOTION.md ব্যবহার করুন।
2. Scene-কে অংশে ভাগ করুন। Body, head, limb, prop, shadow, facial feature এবং secondary element শনাক্ত করুন। কোন অংশ প্রকৃত pivot ঘিরে ঘুরবে এবং কোন অংশ trail করবে তা ঠিক করুন।
3. একটি shared clock বেছে নিন। প্রতিটি element-কে আলাদা, সম্পর্কহীন tween দেওয়ার বদলে একটি timeline থেকে scene সমন্বয় করুন। এতে contact ও reaction সমন্বিত থাকে।
4. মূল action নির্ধারণ করুন। Entering, landing, kicking, blinking, looking, waving, growing বা settling-এর মতো event পরিকল্পনা করুন। উপলভ্য engine helper ব্যবহার করে smooth motion দিয়ে এই pose-গুলো যুক্ত করুন, যার মধ্যে key pose-এর মধ্য দিয়ে movement-এর জন্য flow রয়েছে।
5. Secondary motion যোগ করুন। Head, forearm, pigtail, hat, can, shadow বা অন্য loose part-কে primary action-এর সামান্য বিলম্বে অনুসরণ করতে দিন।
6. Contact পরীক্ষা করুন। Feet যেন মাটিতে ঠিকভাবে লাগে, hand যেন handle-এ যুক্ত থাকে, ছোড়া object যেন সঠিক position-এ শুরু ও শেষ হয় এবং impact যেন drawing-এর volume বজায় রাখে, তা নিশ্চিত করুন।
7. Frame ধরে ফলাফল পর্যালোচনা করুন। Motion খুব ছোট, খুব আকস্মিক বা ভুল timing-এর কি না খুঁজে বের করতে repository-এর analysis tool ও rendered output ব্যবহার করুন।

Live-Face Template ব্যবহার করুন

liveFace.tsx এবং LiveFace.swift glide, blink ও smile করতে পারে এমন live eye ও mouth সরবরাহ করে। আপনি geometry ও color দেবেন, আর template প্রতিটি expression-এর জন্য আলাদা drawing প্রয়োজন ছাড়াই facial movement যোগ করবে।

Facial change যেন স্পষ্ট ও অবিচ্ছিন্ন থাকে। অত্যন্ত ছোট blink এড়িয়ে চলুন, কারণ তা flicker-এর মতো দেখায়; এক expression থেকে অন্য expression-এ সরাসরি switching-ও এড়ান। সামান্য eye movement এবং head ও gaze-এর মধ্যে অল্প বিলম্ব character-কে আরও মনোযোগী মনে করাতে পারে।

অন্তর্ভুক্ত Example অধ্যয়ন করুন

Reveal

Reveal scene একটি phone frame-এ full-body acting দেখায়। একটি silhouette ঝুলন্ত পা নিয়ে ভেসে আসে, একটি শিশু gravity-র প্রভাবে পড়ে landing-এর সময় squash করে, একটি ball গড়িয়ে আসে, চোখ সেটিকে অনুসরণ করে এবং character kick, turn ও wave করার পরও idle চলতে থাকে। Sequence-টি 60 frames per second-এ নয়-সেকেন্ডের loop এবং এতে একটি scene clock ব্যবহার করা হয়েছে।

Garden

Garden scene character acting-এর সঙ্গে environmental change মিলিয়ে দেখায়। Water drop seeded arc অনুসরণ করে, soil গাঢ় হয়, stem দুই ধাপে বাড়ে, leaf ধারাবাহিকভাবে মেলে, petal twist সহ খুলে যায় এবং একটি butterfly stem-এর ওপর বসলে stem তার ওজনের প্রতিক্রিয়া জানায়। Character-এর head ও eye butterfly-কে অনুসরণ করে, আর pigtail, hat ও watering can movement-এর পরে trail করে।

Chef

Chef scene timing, gravity, anticipation, surprise ও contact দেখায়। একটি pancake flip হয়ে squash সহ নামে, তারপর দ্বিতীয় চেষ্টায় অতিরিক্ত উঁচুতে উঠে chef-এর hat-এ আঘাত করে, দুলতে দুলতে পিছলে পড়ে এবং pan-এ ধরা পড়ে। Steam ও flame movement-এ অতিরিক্ত wave ব্যবহার করা হয়েছে, আর hand-কে handle-এর ওপর সঠিকভাবে বসানো হয়েছে।

Orbit

Orbit scene গভীরতার ক্রম প্রদর্শন করে। কার্ডগুলো একটি পাখিকে ঘিরে কক্ষপথে ঘোরে এবং অবস্থান অনুযায়ী সামনে, পেছনে বা ধার বরাবর দেখা যায়। পাখিটি ভাসে ও হেলে থাকে, তার ডানা ঝাপটায়, পা ও পালকের গুচ্ছগুলো পরবর্তী গতির অনুসরণ করে, আর লুপ চলাকালীন নির্ধারিত সময়ে ঝিলিক দেখা যায়।

SwiftUI ডেমো রেন্ডার করুন

macOS 14 বা পরবর্তী সংস্করণে, নিচের কমান্ড দিয়ে SwiftUI টেমপ্লেট ও ডেমো দৃশ্যগুলো কম্পাইল করুন:

swiftc -parse-as-library -target arm64-apple-macos14 templates/swiftui/Motion.swift templates/swiftui/LiveFace.swift demo/*.swift -o /tmp/render-demo

Reveal দৃশ্যটি প্রতি সেকেন্ডে 60 ফ্রেম হিসেবে একটি frames ডিরেক্টরিতে রেন্ডার করুন:

/tmp/render-demo reveal /tmp/frames phone fps=60

অন্য দৃশ্যগুলো রেন্ডার করতে reveal-এর বদলে garden, chef বা orbit ব্যবহার করুন। FFmpeg দিয়ে রেন্ডার করা ফ্রেমের ক্রমকে MP4-তে রূপান্তর করুন:

ffmpeg -framerate 60 -i /tmp/frames/%04d.png -c:v libx264 -pix_fmt yuv420p -crf 20 demo/reveal.mp4

রেন্ডার করলে সম্পূর্ণ টাইমলাইন পরিদর্শন, সংস্করণগুলোর তুলনা এবং লক্ষ্যমাত্রার ফ্রেম রেটে অ্যানিমেশন স্থিতিশীল আছে কি না যাচাই করার একটি নির্ভরযোগ্য পদ্ধতি পাওয়া যায়।

রেফারেন্স গতিবিধি বিশ্লেষণ করুন

আপনার কাছে কোনো রেফারেন্স ভিডিও থাকলে, তৈরি শুরু করার আগে সেটি অধ্যয়ন করুন। বাস্তব সময়ে দেখা কঠিন এমন ছোট ছোট নড়াচড়া নির্ধারণ করতে পারে ফলাফলটি স্বাভাবিক নাকি যান্ত্রিক মনে হবে।

• sheet.sh ভিডিওর পূর্ণ ফ্রেম রেটে কনট্যাক্ট শিট তৈরি করে, ফলে সময় নির্ধারণ ও ফ্রেমে-ফ্রেমে পরিবর্তন পরিদর্শন করা সহজ হয়।
• track_edges.py প্রতি ফ্রেমে কোনো বিষয়ের প্রান্ত মাপে, যা সূক্ষ্ম কাঁপুনি, ভাসা ও দোলন শনাক্ত করতে সাহায্য করে।
• sample_colors.py একটি ভিডিও ফ্রেম থেকে সঠিক রং পড়ে।

কোডে রূপান্তরের আগে গতির সময়, বিস্তার ও ব্যবধান শনাক্ত করতে এই পরিমাপগুলো ব্যবহার করুন। সামান্য ভারসাম্য পরিবর্তন, বিলম্বিত পরবর্তী গতি বা সিলুয়েটে প্রায় অদৃশ্য পরিবর্তনের কারণে কোনো রেফারেন্স জীবন্ত মনে হতে পারে।

উন্নত গতির পরামর্শ

সমন্বিত সময়কে অগ্রাধিকার দিন

দৃশ্যের জন্য একটি ঘড়ি ব্যবহার করুন এবং সম্পর্কিত ক্রিয়াগুলোকে সময়ের পারস্পরিক সম্পর্ক ভাগ করতে দিন। কিক, চোখের নড়াচড়া, মাথা ঘোরানো এবং বলের গতিপথ যেন একই ঘটনা প্রকাশ করে, স্বাধীন অ্যানিমেশন হিসেবে আলাদা আলাদা না দেখা যায়।

পরবর্তী গতি ও আগাম প্রস্তুতি ব্যবহার করুন

মূল শরীর থামলেই গৌণ অংশগুলোকে সবসময় থামতে হবে না। আলগা উপাদানগুলোকে অল্প সময় চলতে, স্থির হতে বা ত্বরণের প্রতিক্রিয়া জানাতে দিন। চুল, ঝুঁটি, টুপি, পোশাক, অঙ্গ, ছায়া ও বহন করা বস্তুর ক্ষেত্রে এটি বিশেষভাবে কার্যকর।

স্থির অবস্থাতেও প্রাণবন্ততা বজায় রাখুন

প্রধান ক্রিয়াগুলোর মাঝখানে চরিত্র ও দৃশ্য যেন স্থির হয়ে না যায়। সূক্ষ্ম শ্বাস, চোখের পলক, ভাসা, দোলা বা কম-বিস্তারের অন্য কোনো গতি মূল ক্রিয়া থেকে মনোযোগ না সরিয়ে লুপকে প্রাণবন্ত রাখতে পারে।

আঘাতের সময় আয়তন বজায় রাখুন

স্কোয়াশ ও স্ট্রেচ যেন আঁকাকে সহায়তা করে, ইচ্ছেমতো বিকৃত না করে। Reveal ও Chef উদাহরণগুলো অবতরণের সময় স্কোয়াশ ব্যবহার করে, তবে চরিত্র বা বস্তুকে চেনা যায় এবং দৃশ্যের সঙ্গে সংযুক্ত থাকে।

পুনরাবৃত্তি গুরুত্বপূর্ণ হলে নির্ধারিত বৈচিত্র্য ব্যবহার করুন

ঝিলিক বা পানির ফোঁটার মতো পুনরাবৃত্ত বিবরণের জন্য, গতি পরিবর্তনশীল হলেও পুনরুৎপাদনযোগ্য থাকা দরকার হলে নির্ধারিত আচরণ ব্যবহার করুন। পুনরুৎপাদনযোগ্য সময় নির্ধারণ ডিবাগিং ও রেন্ডার তুলনা সহজ করে।

ইন্টারফেসের গতির নির্দেশনা প্রয়োগ করুন

ইন্টারফেসের গতির ক্ষেত্রে প্রকল্পে উল্লেখিত নীতিগুলো দেখুন, যার মধ্যে রয়েছে Emil Kowalski’s skills এবং Benji Taylor-এর Family values। ইন্টারফেসের গতি উদ্দেশ্যপূর্ণ এবং আশপাশের নকশার সঙ্গে সামঞ্জস্যপূর্ণ রাখুন।

উপসংহার

Motion স্কিল কোড দিয়ে আঁকা শিল্পকর্মকে প্রকাশধর্মী অ্যানিমেশনে রূপ দেওয়ার জন্য একটি ব্যবহারিক ভিত্তি প্রদান করে। npx দিয়ে এটি ইনস্টল করুন, MOTION.md-তে আপনার প্রকল্পের নথি লিখুন, একটি যৌথ ঘড়িকে কেন্দ্র করে তৈরি করুন, React Native বা SwiftUI টেমপ্লেট ব্যবহার করুন এবং রেন্ডার করা ফ্রেম ও বিশ্লেষণ সরঞ্জাম দিয়ে ফলাফল পরিদর্শন করুন। মূল লক্ষ্য সহজ: পোজগুলো মসৃণভাবে যুক্ত করা, পুরো দৃশ্যের সমন্বয় করা এবং প্রতিটি অংশকে প্রাণবন্ত মনে হওয়ার মতো প্রয়োজনীয় সময় ও পরবর্তী গতি দেওয়া।