وقتی صحبت از ساخت ویدیو با هوش مصنوعی میشود، معمولاً اولین چیزی که به ذهنمان میرسد مدلهای مولد ویدیو هستند؛ مدلهایی که مستقیماً Pixelهای یک ویدیو را تولید میکنند.
اما Claude Opus 5.5 مسیر کاملاً متفاوت و جالبی را نشان داده است.
این مدل میتواند بدون استفاده از یک Video Generation Model، یک انیمیشن کامل را با JavaScript، HTML Canvas و تکنولوژیهای استاندارد وب بسازد؛ یعنی تکتک فریمها بهوسیله کدی که Claude نوشته رسم میشوند.
جذابتر اینکه موسیقی و Sound Effectها هم میتوانند با کد و استفاده از Web Audio API ساخته شوند.
در این مقاله از معین گیفت بررسی میکنیم این روش دقیقاً چگونه کار میکند، چه تفاوتی با مدلهای تولید ویدیو دارد و چطور میتوان از Claude Opus 5.5 برای ساخت انیمیشن و Motion Graphic کدنویسیشده استفاده کرد.
Claude Opus 5.5 واقعاً ویدیو تولید میکند؟
از نظر فنی، نه به معنایی که درباره مدلهای Generative Video میشناسیم.
Claude Opus 5.5 خودش یک مدل اختصاصی تولید ویدیو نیست.
کاری که انجام میدهد بسیار جالبتر است:
Claude کدی مینویسد که خودش تمام فریمهای انیمیشن را رسم میکند.
یعنی بهجای اینکه یک مدل Video Generation مستقیماً Pixelهای ویدیو را حدس بزند، Claude میتواند برنامهای بسازد که مشخص کند در هر لحظه چه چیزی روی صفحه رسم شود.
هر فریم با JavaScript ساخته میشود
هسته اصلی این روش معمولاً یک HTML Canvas است.
Claude میتواند تابعی شبیه این بسازد:
function draw(ctx, t) {
// Draw background
// Draw characters
// Animate objects
// Move camera
// Render text
// Add visual effects
}پارامتر t مشخص میکند ویدیو در چه لحظهای قرار دارد.
برای مثال:
- t = 0 ثانیه → اولین فریم
- t = 5 ثانیه → صحنه دوم
- t = 20 ثانیه → بخش پایانی انیمیشن
در نتیجه اگر سیستم بتواند این تابع را در زمانهای مختلف اجرا کند، میتواند تمام فریمهای موردنیاز یک ویدیو را تولید کند.
پس Pixelهای تصویر از کجا میآیند؟
از خود کد.
در این روش میتوان بدون استفاده از Image Generator، شکلهایی مانند:
- کاراکتر
- پسزمینه
- آیکون
- نمودار
- متن
- نور
- ذرات
- سایه
- ترنزیشن
را با Canvas API رسم کرد.
Claude کدی مینویسد که در هر فریم، موقعیت، رنگ، Scale، Rotation و سایر ویژگیهای این عناصر را تغییر میدهد.
تفاوت این روش با مدلهای AI Video چیست؟
روش Code-Generated Animation تفاوت بنیادی با مدلهایی دارد که مستقیماً ویدیو تولید میکنند.
| ویژگی | Code Animation | AI Video Model |
|---|---|---|
| تولید فریم | با JavaScript | توسط مدل مولد |
| قابل ویرایش بودن | بسیار بالا | محدودتر |
| متن داخل تصویر | دقیق | ممکن است خطا داشته باشد |
| تکرارپذیری | کاملاً قابل تکرار | ممکن است هر Generation متفاوت باشد |
| کنترل Timing | فریمبهفریم | وابسته به مدل |
| ویرایش یک بخش | تغییر کد | معمولاً Generation مجدد |
مزیت بزرگ؛ متن دقیق داخل Motion Graphic
یکی از مشکلات معروف Video Generatorها، نمایش متن است.
ممکن است نام محصول، قیمت یا عدد داخل ویدیو اشتباه شود.
اما در انیمیشن مبتنی بر JavaScript، متن واقعاً داخل کد نوشته میشود.
برای مثال:
ctx.fillText("GPT-6 Sol", 400, 300);بنابراین متن دقیقاً همان چیزی خواهد بود که مشخص کردهاید.
این ویژگی برای ساخت:
- Motion Graphic تبلیغاتی
- ویدیوی معرفی محصول
- Infographic متحرک
- ویدیوی آموزشی
- مقایسه قیمت
- نمودارهای متحرک
بسیار ارزشمند است.
جالبتر اینکه موسیقی هم میتواند با کد ساخته شود
یکی از جذابترین بخشهای این روش مربوط به Audio است.
Claude میتواند با استفاده از Web Audio API موسیقی و Sound Effect ایجاد کند.
در این حالت حتی لازم نیست یک فایل MP3 آماده داخل پروژه قرار دهید.
کد میتواند مواردی مثل:
- Drum
- Bass
- Pad
- Melody
- Click
- Impact
- Whoosh
را بهصورت مصنوعی تولید کند.
Web Audio API چیست؟
Web Audio API یکی از قابلیتهای استاندارد مرورگر است که به JavaScript اجازه میدهد صدا تولید و پردازش کند.
برای مثال حتی یک Tone ساده را میتوان با کد ایجاد کرد:
const ctx = new AudioContext();
const oscillator = ctx.createOscillator();
oscillator.frequency.value = 440;
oscillator.connect(ctx.destination);
oscillator.start();Claude میتواند همین مفهوم را بسیار پیشرفتهتر کند و چندین Instrument، Rhythm و Sound Effect را کنار هم قرار دهد.
تصویر و موسیقی از یک Timeline استفاده میکنند
قسمت جالبتر زمانی است که Animation و Audio از Timeline مشترک استفاده کنند.
فرض کنید در ثانیه ۱۰ یک المان روی صفحه ظاهر میشود.
Claude میتواند همزمان:
- Animation را اجرا کند
- یک Sound Effect ایجاد کند
- ضرب موسیقی را با Transition هماهنگ کند
بنابراین Audio و Video از ابتدا Synchronize طراحی میشوند.
Claude حتی Storyboard هم میسازد
Workflow میتواند قبل از نوشتن کد با طراحی ساختار ویدیو شروع شود.
مثلاً Claude ابتدا چنین برنامهای ایجاد میکند:
00:00 - 00:03
Intro
00:03 - 00:08
Show problem
00:08 - 00:15
Explain process
00:15 - 00:22
Show solution
00:22 - 00:30
Final messageبعد برای هر بخش:
- Scene
- Camera
- Animation
- Text
- Music
- Sound Effect
را طراحی میکند.
ویدیو در نهایت چگونه ساخته میشود؟
بعد از آمادهشدن فایل HTML و JavaScript، مرحله Render انجام میشود.
یک Headless Browser میتواند صفحه را برای هر Frame در زمان مشخص اجرا کند.
مثلاً اگر ویدیو:
30 FPS
باشد، برای هر ثانیه ۳۰ تصویر ایجاد میشود.
یک ویدیوی ۳۰ ثانیهای در نتیجه حدود:
۹۰۰ فریم
خواهد داشت.
بعد ابزارهایی مانند FFmpeg میتوانند فریمها و Audio را به یک فایل MP4 تبدیل کنند.
چرا این قابلیت بعد از Opus 5.5 وایرال شد؟
نوشتن چند Animation ساده با JavaScript چیز جدیدی نیست.
تفاوت مهم اینجاست که مدلهای جدید Agentic میتوانند کل Workflow را تقریباً خودشان مدیریت کنند.
Claude Opus 5.5 میتواند:
- Prompt کاربر را تحلیل کند.
- سناریو بنویسد.
- Storyboard طراحی کند.
- Style بصری انتخاب کند.
- کد Animation بنویسد.
- موسیقی ایجاد کند.
- ویدیو را Render کند.
- فریمهای خروجی را بررسی کند.
- مشکلات را پیدا کند.
- کد را اصلاح کند.
همین توانایی انجام یک Workflow کامل است که این روش را جذاب کرده است.
Claude میتواند خروجی خودش را هم بررسی کند
یکی از تکنیکهای جالب استفادهشده در این Workflowها، ساخت Contact Sheet است.
بهجای تماشای کامل ویدیو، سیستم از هر Scene یک فریم نمونه استخراج میکند.
Claude سپس تصاویر را بررسی میکند و مشکلاتی مثل:
- روی هم افتادن متنها
- خارج شدن عناصر از Frame
- Composition ضعیف
- Transition نامناسب
- Scene بیش از حد ثابت
را شناسایی میکند.
بعد میتواند کد را تغییر دهد و دوباره Render انجام دهد.
بدون Image Asset هم میشود
در بعضی از Demoهای منتشرشده، هیچ Image Asset، Stock Footage یا فایل صوتی خارجی استفاده نشده است.
یعنی تمام عناصر تصویر از:
Shapes + Text + JavaScript + Canvas
تشکیل شدهاند.
این سبک مخصوصاً برای:
- Explainer Video
- Motion Graphic
- Animated Infographic
- Product Demo
- Data Visualization
بسیار مناسب است.
اما میتوان عکس واقعی هم اضافه کرد
لازم نیست همیشه پروژه کاملاً Zero Asset باشد.
میتوان تصاویر محصول، Logo، Screenshot یا عکسهای واقعی را نیز وارد Animation کرد و با JavaScript روی آنها:
- Zoom
- Pan
- Mask
- Transition
- Glow
- Camera Movement
ایجاد کرد.
یک Skill متنباز هم برای این کار ساخته شده است
بعد از وایرال شدن این سبک، یک پروژه متنباز با عنوان JavaScript Animation Skills منتشر شده که Workflow ساخت این نوع Animation را به Agentها آموزش میدهد.
این مجموعه شامل دو Skill اصلی است:
- javascript-animation: برای طراحی و Render تصویر
- soundtrack: برای ساخت موسیقی و Sound Effect با Web Audio
این Skillها برای Claude Code ساخته و با Claude Opus 5.5 آزمایش شدهاند.
راهاندازی نمونه در Claude Code
اگر با Terminal کار میکنید، Workflowهای متنباز ساختهشده برای این روش را میتوان داخل Coding Agent نصب کرد.
بعد از نصب Skill، کافی است Prompt سادهای شبیه این بدهید:
Make a 30-second hand-drawn animated explainer about how AI agents work.
Draw every frame in JavaScript.
Do not use image assets.
Create the soundtrack in code.
Use a modern minimal visual style.
Render the final result as MP4.در این سناریو Agent میتواند خودش مراحل برنامهریزی، کدنویسی و Render را انجام دهد.
یک Prompt حرفهایتر برای ساخت Motion Graphic
Create a 30–45 second animated explainer.
Topic:
[موضوع ویدیو]
Requirements:
- Build the animation with JavaScript and HTML Canvas.
- Do not use a generative video model.
- Draw all visual elements programmatically.
- Create a clear storyboard before coding.
- Use smooth camera movements and transitions.
- Keep typography clean and accurate.
- Create background music and sound effects using Web Audio API.
- Synchronize important animations with the music beats.
- Render at 1920x1080, 16:9.
- Use 30 FPS.
- Review key frames before final export.
- Fix visual overlaps, timing problems and text collisions.
- Export the final video as MP4.برای ساخت ویدیو تبلیغاتی هم کاربرد دارد
فرض کنید یک SaaS یا فروشگاه اینترنتی دارید.
میتوانید Screenshot محصول را به Claude بدهید و بگویید:
یک ویدیوی معرفی ۳۰ ثانیهای بساز که ابتدا مشکل کاربر را نشان دهد، سپس Dashboard محصول را معرفی کند و سه قابلیت اصلی را با Motion Graphic نمایش دهد.
Claude میتواند Timeline، Animation، Typography و Audio را براساس همان سناریو طراحی کند.
برای شبکههای اجتماعی هم میتوان خروجی گرفت
چون Animation با Code ساخته شده، تغییر Aspect Ratio نسبتاً ساده است.
برای مثال:
- 16:9 برای YouTube و سایت
- 9:16 برای Instagram Story و Reels
- 1:1 برای پست شبکه اجتماعی
در بسیاری از موارد فقط لازم است Layout و Canvas Size تغییر کند و پروژه دوباره Render شود.
مزیت عجیب Code Animation؛ ویرایش با یک جمله
فرض کنید ویدیو آماده شده ولی Logo بیش از حد کوچک است.
در یک Video Generator ممکن است مجبور شوید بخشی از ویدیو را دوباره Generate کنید.
اما در این روش میتوانید به Agent بگویید:
لوگو را در Scene آخر ۳۰ درصد بزرگتر کن و Transition آن را نیم ثانیه طولانیتر کن.
Agent فقط کد مربوط به همان بخش را تغییر میدهد و دوباره Render میکند.
این ویژگی برای Workflowهای تجاری اهمیت زیادی دارد.
اعداد و نمودارها هم دقیق باقی میمانند
یکی از بهترین کاربردهای این روش ساخت Data-Driven Motion Graphics است.
برای مثال اگر بخواهید نموداری شامل:
- قیمت
- درصد رشد
- مقایسه محصول
- Benchmark
- آمار فروش
بسازید، دادهها مستقیماً در کد قرار میگیرند.
در نتیجه خطر اینکه مدل ویدیویی عدد یا متن را به شکل اشتباه Render کند بسیار کمتر میشود.
آیا این روش جای مدلهای تولید ویدیو را میگیرد؟
نه.
هرکدام کاربرد متفاوتی دارند.
مدلهای Generative Video برای چیزهایی مثل:
- صحنههای واقعگرایانه
- حرکت انسان
- Cinematic Footage
- فضاهای طبیعی پیچیده
مناسبتر هستند.
اما Code Animation برای:
- Motion Design
- Explainer
- Infographic
- Product Video
- Tech Animation
- Animated Charts
مزایای بسیار زیادی دارد.
مهمترین محدودیت چیست؟
نباید انتظار داشته باشید JavaScript Canvas بهتنهایی یک فیلم سینمایی فوتورئال بسازد.
این روش بیشتر برای طراحیهای:
- Illustrative
- Minimal
- Geometric
- Hand-drawn
- Motion Graphic
مناسب است.
هرچه Scene پیچیدهتر و نزدیکتر به فیلم واقعی شود، استفاده از Asset یا مدلهای Image/Video منطقیتر خواهد بود.
نکته مهم؛ این قابلیت رسمی «Video Generation» در Claude نیست
این تفاوت را نباید فراموش کرد.
Anthropic هنگام معرفی Claude Opus 5.5 قابلیت مستقلی با عنوان Video Generator معرفی نکرده است.
چیزی که این امکان را فراهم کرده، ترکیب چند توانایی قدرتمند مدل است:
- کدنویسی پیشرفته
- Spatial Reasoning
- Vision
- Agentic Tool Use
- توانایی کار روی Taskهای طولانی
توسعهدهندگان با ترکیب این قابلیتها با تکنولوژیهای استاندارد وب، Workflow جدیدی برای ساخت Animation ایجاد کردهاند.
بنابراین عبارت دقیقتر این است:
Claude Opus 5.5 میتواند بهعنوان Coding Agent یک سیستم تولید انیمیشن مبتنی بر JavaScript بسازد؛ بدون اینکه خودش یک مدل مولد ویدیو باشد.
چرا این موضوع مهم است؟
این Demo فقط درباره ساخت Animation نیست.
موضوع بزرگتر این است که مرز بین «برنامهنویسی» و «تولید محتوای بصری» در حال کمرنگ شدن است.
قبلاً ساخت یک Motion Graphic نیازمند ابزارهایی مثل After Effects و تخصص طراحی Motion بود.
حالا یک Agent میتواند از یک درخواست متنی:
Prompt → Storyboard → Code → Animation → Music → QA → MP4
را تقریباً به یک Workflow خودکار تبدیل کند.
این یعنی در آینده بخش زیادی از محتوای دیجیتال شاید نه مستقیماً توسط مدلهای مولد، بلکه توسط کدی که هوش مصنوعی تولید میکند ساخته شود.
جمعبندی
Claude Opus 5.5 یک مدل Video Generation نیست، اما قدرت Coding و Agentic آن امکان بسیار جالبی ایجاد کرده است:
ساخت ویدیو بدون مدل ویدیویی.
Claude میتواند سناریو طراحی کند، JavaScript بنویسد، هر Frame را روی Canvas رسم کند، Animation و Camera Movement بسازد، موسیقی را با Web Audio تولید کند و در نهایت خروجی را به MP4 تبدیل کند.
مزیت اصلی این روش در کنترل، دقت متن و عدد، قابلیت ویرایش و تکرارپذیری است.
برای Motion Graphic، Explainer Video، نمودارهای متحرک و معرفی محصول، این روش میتواند یکی از جالبترین کاربردهای جدید Coding Agentها باشد.
شاید نسل بعدی ابزارهای تولید محتوا فقط Pixel تولید نکنند؛ بلکه کدی بنویسند که خودش محتوا را بسازد.
آموزش هوش مصنوعی در معین گیفت
در معین گیفت کاربردهای جدید Claude، ChatGPT، Codex، Grok و سایر Agentهای هوش مصنوعی را بررسی میکنیم و روشهایی را معرفی میکنیم که بتوانید از AI در برنامهنویسی، تولید محتوا، طراحی و اتوماسیون استفاده کنید.