راهنمای فارسی ساخت موشن‌گرافیک کدنویسی‌شده
از Prompt تا Render، Sound، Critique و خروجی چندفرمتی
مقدمه: چرا «یک پرامپت» تمام داستان نیست؟
بخش زیادی از موشن‌های ساخته‌شده با Opus 5.5 در نگاه اول شبیه هم می‌شوند: متن وسط صفحه، بک‌گراند گرادیانی، Fade و یک لوگو در پایان. تفاوت خروجی‌های حرفه‌ای در خود جمله‌ی پرامپت خلاصه نمی‌شود؛ تفاوت اصلی در Pipeline است.
• Reference مشخص برای زبان بصری، ریتم و Transitionها.
• Render engine قطعی و قابل تکرار که بتواند هر فریم را در زمان دلخواه بسازد.
• Beat grid و صداگذاری هماهنگ با تصویر.
• Critique loop؛ مدل باید فریم‌های خودش را ببیند و اصلاح کند.
• خروجی‌های 9:16، 1:1 و 16:9 از یک Timeline، نه Crop کردن خروجی نهایی.
در عمل Prompt شاید ۱۰٪ پروژه باشد؛ ۹۰٪ باقی‌مانده همان Harness، ابزارها، قواعد، رندر و چرخه‌ی بازبینی است.
- Pixels — مدل ویدیو تولید نمی‌کند؛ برنامه می‌نویسد
ایده‌ی اصلی این Workflow این است که مدل به‌جای «خروجی MP4»، کدی تولید کند که بتواند فریم دقیق هر لحظه را بسازد. تابعی مثل draw(t) یا seek(t) برای هر زمان t یک تصویر قطعی می‌سازد.
مرورگر Headless این تابع را فریم‌به‌فریم اجرا می‌کند؛ مثلاً برای ۱۵ ثانیه در 60fps حدود ۹۰۰ فریم. سپس ffmpeg فریم‌ها را به ویدیو تبدیل می‌کند. چون نتیجه به timer و وضعیت قبلی وابسته نیست، رندر deterministic است و هر بار همان خروجی را می‌دهد.
• A — Code-drawn: Canvas / SVG / p5 / browser rendering. مناسب Showreel، UI Motion، Logo و Pixel Art.
• B — Framework: Remotion یا HyperFrames. مناسب ویدیوهای محصول، سری‌های تکرارشونده و Templateها.
• C — Mixed pipeline: تصویر/ویدیو از مدل‌ها + Composition کدنویسی‌شده.
• D — Footage edit: ویدیوی واقعی، Caption، B-roll و تدوین.
اگر Framework مشخصی می‌خواهید، صریحاً در Prompt بنویسید؛ در غیر این صورت مدل ممکن است مسیر ساده‌ترِ بدون Dependency را انتخاب کند.
- Setup — استودیو را در ۱۰ دقیقه آماده کن
Chat می‌تواند کد انیمیشن بنویسد، اما Agentی که Shell دارد می‌تواند آن را اجرا کند، رندر بگیرد، صدا را تحلیل کند و فریم‌های خودش را ببیند. این Feedback loop تفاوت اصلی خروجی خام و خروجی حرفه‌ای است.
# Runtime
brew install node ffmpeg python
pip install numpy librosa soundfile
# Project + headless browser
mkdir motion-studio && cd motion-studio && npm init -y
npm i -D playwright
npx playwright install chromium
# Optional framework skills
npx skills add remotion-dev/skills
npx skills add heygen-com/hyperframes
# Start Claude Code / Opus 5.5
claude --model claude-opus-5-5
ریشه‌ی پروژه یک CLAUDE.md یا فایل House Rules قرار دهید تا قواعد رندر، کیفیت، نام‌گذاری، فرمت خروجی و محدودیت‌های بصری در هر اجرا تکرار نشوند.
- One-liner — پرامپت کوتاه Showreel و دلیل کارکردش
Make a dynamic 15-second motion graphics video that shows what an
incredible motion designer you are, like it's your showreel for a résumé.
Go all out.
• عبارت showreel for a résumé ژانر را مشخص می‌کند: Cut سریع، تکنیک جدید در هر Shot و بهترین کار در ابتدا.
• به‌جای توضیح محصول، خود Motion Design موضوع می‌شود؛ بنابراین مدل تکنیک نشان می‌دهد.
• ۱۵ ثانیه برای ۶ تا ۸ Shot کافی است و هنوز آن‌قدر کوتاه است که یک Pass کامل عملی باشد.
• Go all out نقش Effort Multiplier دارد.
- Brand — موشن را مستقیماً به محصول وصل کن
برای ویدیوی محصول، سه چیز کیفیت را جهشی بالا می‌برد: URL واقعی محصول، دستور استفاده از Screenshot/Logo/Asset واقعی، و الزام موسیقی. Agent می‌تواند سایت را باز کند و Assetها را جمع کند.
Make a dynamic 20-second motion graphics video for [PRODUCT] ([URL]),
like a motion designer's showreel. Go all out.
Assets
- Visit the site. Use real screenshots (Playwright), the real logo and assets.
- Save everything to ./assets and list what you found before building.
- Never redraw the product UI from imagination. Crop and animate real UI.
Story — one beat each, 2–4 seconds
1. Hook: the problem in 5 words of huge kinetic type.
2. The product appears; the UI assembles itself piece by piece.
3. Three features, each as a real UI moment with cursor interaction.
4. One number that proves it works: [METRIC].
5. Logo lockup + [CTA].
Sound
- Original music around 120 BPM, synthesized in code.
- Add UI clicks, whooshes and impact sounds.
Format
- 1080x1920 (9:16) first, then 1:1 and 16:9 from the same timeline.
- Before full render, show a contact sheet of representative frames.
برای یک برند، Session را حفظ کنید. Renderer، Audio synth و Export pipeline بعد از پروژه‌ی اول آماده‌اند و ویدیوهای بعدی سریع‌تر می‌شوند.
- Reference — ظاهر را نام ببر، یک Frame یا Video بده
بدون Reference، مدل به Defaultهای خودش برمی‌گردد. Reference به مدل Grammar می‌دهد: Palette، Typography، Grain، Pacing، Shot length، Transition و Camera language.
• Frame: یک فریم از ویدیوی مورد علاقه؛ دقیقاً بگویید چه چیزهایی مثل Palette و Type را بردارد و Subject را کپی نکند.
• Video: فایل یا لینک؛ ابتدا فریم‌ها با ffmpeg استخراج و Shot-by-shot تحلیل شوند.
• Library: پوشه‌ی تصاویر و پروژه‌های قبلی؛ ابتدا style_guide.md ساخته شود.
Reference: ./refs/launch.mp4 (and ./refs/frames/*.png)
1. Extract one frame every 0.5s with ffmpeg. Study them.
2. Write ./docs/style_guide.md: palette, type, shot lengths, transitions, camera, grain.
3. Write ./docs/shotlist.md for a [DURATION] video about [SUBJECT].
Take the grammar of the reference, never its content, logos or characters.
4. Show me both files before implementation.
- Spec — به‌جای «Vibe»، State List بنویس
برای UI Motion، به‌جای توصیف مبهم حس و حال، حالت‌های دقیق UI را مشخص کنید. یک Container می‌تواند بدون Cut از Button به Loader، Success، Player، Chart، Command Palette و دوباره حالت اول Morph شود.
<inputs>
Ask me for: product + URL, 8–12 UI states, brand colors + fonts, one accent, reference.
</inputs>
<direction>
Product-film UI motion. One container, never cuts. Every state morphs size, radius and fill.
Banned: bouncy easing, glows, gradients on UI chrome, particles.
</direction>
<structure>
120 BPM, 8 bars, something happens on every beat.
logo -> CTA -> email -> loader -> success -> chart -> tooltip -> command palette -> toast -> logo
</structure>
<build>
1. One deterministic timeline with window.seek(t).
2. Closed-form springs.
3. Text swaps only after the morph begins.
4. Derive the beat grid from the soundtrack.
5. Render at 60fps with subframes.
</build>
<gotchas>
The last frame must equal the first for a seamless loop.
Avoid blurry scaled text and state-dependent randomness.
</gotchas>
- Engine — Renderer مبتنی بر seek(t)
هسته‌ی Route A معمولاً دو فایل است: صفحه‌ای که هر لحظه را روی Canvas/SVG می‌کشد و Rendererای که زمان را جلو می‌برد و فریم‌ها را به ffmpeg می‌دهد.
const W = 1080, H = 1920, DUR = 15;
function draw(t) {
// draw the exact frame for time t
}
window.seek = (t) => {
draw(t);
return true;
};
در Renderer، Playwright صفحه را باز می‌کند، برای هر Subframe تابع seek(t) را فراخوانی می‌کند، Screenshot می‌گیرد و آن را از طریق Pipe به ffmpeg می‌دهد. برای خروجی حرفه‌ای، 60fps و چند Subframe برای Motion averaging مفید است.
node render.mjs --fps 60 --dur 15 --sub 4
ffmpeg ... -c:v libx264 -crf 16 -pix_fmt yuv420p out/final.mp4
Route B: اگر پروژه سریالی، Template-driven یا Data-driven است، Remotion مناسب‌تر است. HyperFrames نیز برای Workflowهایی که شبیه ساخت صفحات وب و GSAP هستند گزینه‌ی مناسبی است.
- Springs — Motion را گران‌قیمت حس‌پذیر کن
حرکت حرفه‌ای حس جرم دارد: شتاب می‌گیرد، کمی Overshoot می‌کند و Settling دارد. Closed-form spring مهم است چون مقدار هر لحظه مستقیماً از t محاسبه می‌شود و برای seek(t) نیاز به شبیه‌سازی فریم‌های قبلی نیست.
export function track(t, keys, k = 170, d = 26) {
let v = keys[0][1];
for (let i = 1; i < keys.length; i++)
v += (keys[i][1] - keys[i - 1][1]) * spring(t - keys[i][0], k, d);
return v;
}
export const loopT = (t, dur) => ((t % dur) + dur) % dur;
• Snappy UI: stiffness بالاتر برای Button و Toggle.
• Default: تنظیم متعادل برای Card، Container و Camera.
• Heavy: Overshoot کمتر برای Type بزرگ، 3D object و Logo lockup.
• Playful: Overshoot واضح‌تر برای Mascot و Sticker.
- Sound — تصویر را روی Beat طراحی کن
صدا نباید در انتها صرفاً روی ویدیو چسبانده شود. Timeline تصویر و صدا باید یک سیستم مشترک داشته باشند. اگر Track دارید، Beatها و Onsetها را اندازه‌گیری کنید؛ اگر ندارید، موسیقی و SFX را روی همان Timeline بسازید.
import librosa, numpy as np
y, sr = librosa.load("song.wav", sr=None, mono=True)
tempo, frames = librosa.beat.beat_track(y=y, sr=sr)
beats = librosa.frames_to_time(frames, sr=sr)
onset = librosa.onset.onset_strength(y=y, sr=sr)
یک الگوی ساده: 120 BPM، تغییرات بزرگ روی Downbeatها، SFX روی Click/Pop/Thump/Whoosh و Visual payoffهای اصلی روی Accentها. همین Sync است که خروجی را از AI clip به چیزی شبیه Film نزدیک می‌کند.
- Overnight — به‌جای Prompt، Director’s Brief بنویس
برای پروژه‌های بزرگ، پرامپت یک جمله‌ای کافی نیست. Brief حرفه‌ای باید مثل استخدام یک Crew نوشته شود: هدف فیلم، Referenceها، ابزارها، قواعد شخصیت/برند، Beat sheet، Workflow gate، Critique loop و Deliverableها.
• Film in one line: Logline و حس نهایی مخاطب.
• References: ویدیو، موسیقی، Image library و Repoهای قبلی.
• Tools & keys: Skillها، APIها، Budget و Documentation.
• Character / Brand bible: نسبت‌ها، Palette و Identity lock.
• Beat sheet: Hook در ۲ ثانیه‌ی اول و Visual payoff هر ۳ تا ۵ ثانیه.
• Workflow gates: Plan → Rig → Stills → Animatic → Full pass → Polish → Audio → Render.
• Critique loop: Stills را رندر کن، ایرادها را پیدا کن، اصلاح کن و دوباره امتیاز بده.
• Deliverables: Final MP4، Loop check، Poster frame، Contact sheet، Source و README.
You are the director, animator, sound designer and render engineer.
Treat this as a multi-session production.
## The film in one line
[LOGLINE + intended viewer feeling]
## References and inputs
- ./refs/ : [video / frames / image library]
- ./audio/track.wav : measure beats and preserve the track
- Skills available: [skills]
- APIs in .env: [keys]
- Budget: [$X]
## Look
[palette, type, texture, camera language, banned looks]
## Beat sheet
0:00-0:02 Hook
0:02-0:10 Act 1
...
[END] Last frame sets up the first frame
## Workflow with gates
1. Write docs/style_guide.md and docs/shotlist.md
2. Build stills and a contact sheet
3. Build animatic with placeholder audio
4. Full animation -> polish -> sound -> final render
5. Keep an ANIMATION_GUIDE.md for consistency
## Critique loop
Render 3-5 stills per shot. Score hook, readability, motion, variety, composition, depth, sound sync and polish.
Fix the 3 biggest problems and repeat.
## Deliverables
out/final.mp4
out/loop_check.mp4
out/poster.png
out/contact.png
README.md
- Critique — مدل باید فریم‌های خودش را تماشا کند
Iteration شکست نیست؛ خود روش کار است. خروجی خوب معمولاً نتیجه‌ی چند دور Render → Inspect → Fix است. برای ارزیابی، Contact sheet، Strip از یک Action سریع، نسخه‌ی کوچک موبایل و Loop check بسازید.
# Contact sheet
ffmpeg -i out/final.mp4 -vf "fps=2,scale=270:-1,tile=6x5" out/contact.png
# Phone readability test
ffmpeg -i out/final.mp4 -vf "fps=1,scale=360:-1,tile=5x3" out/phone.png
# Seamless loop check
ffmpeg -stream_loop 1 -i out/final.mp4 -c copy out/loop_check.mp4
برای هر Pass، سه ایراد بزرگ را با Timestamp فهرست کنید: خوانایی در اندازه‌ی موبایل، Dead frame، Transition بد، Blurry scaled text، UI swap ناگهانی، Composition ضعیف یا Beat بدون اتفاق. فقط ثانیه‌های درگیر را دوباره رندر کنید.
- Ship — چند فرمت، Skill قابل‌تکرار و سرویس
مرحله‌ی آخر این است که Pipeline به یک سیستم قابل‌تکرار تبدیل شود. Sceneها باید نسبت به layout(w,h) تعریف شوند، نه Pixel ثابت؛ در نتیجه همان Timeline می‌تواند 9:16، 1:1 و 16:9 را واقعاً Reframe کند. خروجی 16:9 را برای عمودی Crop نکنید.
---
name: motion-reel
description: Make a product or showreel motion video rendered from code.
---
# Inputs to collect first
Product + URL
Duration
Formats: 9:16 / 1:1 / 16:9
Brand colors + fonts
Reference: frame / video / image folder
Music: file or synthesize
# Pipeline
1. Gather real assets from the URL with Playwright into ./assets.
2. If a reference exists, write docs/style_guide.md.
3. Measure or synthesize music -> beats.json.
4. Write docs/shotlist.md on the beat grid.
5. Build deterministic seek(t) motion.
6. Contact sheet -> critique pass.
7. Render -> SFX -> mix -> final outputs.
8. Deliver final.mp4, contact.png, poster.png and README.
# Hard rules
- Real product UI only. Never invent screens.
- No Math.random in render mode.
- No timer-dependent animation.
- Avoid generic centered-title-on-gradient visuals.
چک‌لیست اجرایی نهایی
• قبل از کدنویسی: Asset واقعی + Reference + Style guide + Shot list.
• Timeline: deterministic و مبتنی بر seek(t).
• Motion: closed-form springs؛ Overshoot کنترل‌شده.
• Audio: Beat grid و SFX از ابتدا در طراحی لحاظ شوند.
• Preview: Contact sheet و Phone test قبل از Full render.
• Critique: حداقل سه مشکل اصلی هر Pass ثبت و اصلاح شوند.
• Loop: آخرین فریم با شروع سازگار باشد اگر خروجی Loop است.
• Formats: 9:16 / 1:1 / 16:9 با Re-layout واقعی.
• Product video: فقط Screenshot و UI واقعی محصول؛ Screen خیالی ممنوع.
• Delivery: MP4 + Poster + Contact sheet + Source + README.
کانال تلگراممون هم از دست ندید 🙏🏻🔥 : https://t.me/codecloude
