یک هیرو تعاملی برای وب‌سایت در Figma ساختم که به کرسر واکنش نشان می‌دهد. این است فرآیند کار.

بیشتر دموهای «هوش مصنوعی در گردش‌کار طراحی» روی یک تصویر ثابت متوقف می‌شوند. این یکی حرکت می‌کند. یک هیرو تعاملی برای وب‌سایت، یک منظره علمی‌تخیلی سینمایی که به سمت کرسر شما متمایل می‌شود، درون Figma ساخته شده است، بدون یک فایل سه‌بعدی یا یک خط کد شیدر. همه چیز از پلاگین Higgsfield به وجود آمد، درون همان بومی که هر روز در آن کار می‌کنم.

اینجا هیرو تمام‌شده است. لودر کالیبره می‌شود، صحنه آشکار می‌شود، سپس در هر جهت به کرسر واکنش نشان می‌دهد.

کل کار چهار حرکت است و هر پرامپت پایین است، آماده کپی:

1. صحنه را به‌عنوان یک شات سینمایی establishing تولید کن.
2. همان صحنه را از چهار زاویه دوربین کمی جابجاشده تولید کن.
3. آن کلیپ‌های زاویه را به یک دنباله تصویر مسطح تبدیل کن.
4. دنباله را به کرسر وصل کن و به‌عنوان یک صفحه واقعی آراسته‌اش کن.

هیچ‌کدام از اینها به After Effects، یک اپلیکیشن سه‌بعدی، یا یک مهندس نیاز ندارد. یک پلاگین است و یک پرامپت ساخت.

مرحله ۱: صحنه را تولید کن

پلاگین Higgsfield را درون Figma باز کن و یک شات سینمایی establishing تولید کن. ترفند این است که بخواهی عمق واضح، پیش‌زمینه، میان‌زمینه، و پس‌زمینه به‌عنوان صفحات مجزا داشته باشی، چون همین جداسازی است که parallax را بعداً قابل خواندن می‌کند. نقاشی، نه عکس.

Soft hand-painted sci-fi concept art, cinematic and atmospheric. A lone armored hero on a dark rocky cliff in the near foreground, gazing out over a vast misty valley of floating islands and tall glowing spires fading into an aurora sky. Strong depth built from clearly separated planes: dark foreground cliff and hero, floating rocks in the midground, distant spires far behind, soft atmospheric haze between each layer. Moody purples and teals with warm light. Simple and clean, not busy, painterly brushwork, epic scale.

Copy

مرحله ۲: زوایای دوربین را تولید کن

حالا همان صحنه را از چهار موقعیت دوربین کمی جابجاشده تولید کن: بالا، پایین، چپ، راست. کلمه‌ای که اینجا مهم است orbit است، نه tilt.

tilt دوربین را در جای خود می‌چرخاند و تقریباً هیچ parallaxی نمی‌دهد. orbit دوربین را در فضا حرکت می‌دهد، پس صخره نزدیک زیاد جابجا می‌شود در حالی که برج‌های دور تقریباً حرکت نمی‌کنند. همین تفاوت کل توهم است. زاویه را کوچک نگه‌دار، حدود ۱۲ درجه، و شات را قفل کن تا هیچ‌چیز بین فریم‌ها لرزش نداشته باشد.

Single-axis camera ORBIT UP only, about 12 degrees, locked-off and gimbal-smooth, no handheld, no camera shake, no wobble. Vertical axis only, no horizontal drift, no diagonal. The scene is completely frozen, nothing in it moves, only the camera. Slow, subtle, seamless. Strong parallax: near foreground shifts more than the distant background.

Copy

مرحله ۳: کلیپ‌ها را به یک دنباله تصویر تبدیل کن

هر کلیپ orbit را به‌عنوان فریم خروجی بگیر. اینجا یک ویدیو پخش نمی‌کنی، داری یک flipbook می‌سازی که کرسر می‌تواند از میانش رد شود. قانون واحدی که آن را می‌سازد یا می‌شکند: آن فریمی را نشان بده که نزدیک‌ترین به محل کرسر است، و هیچ‌وقت دو فریم را با هم ترکیب نکن.

این قانون از سه حالت شکست که به آنها برخوردم و رفع کردم، به ترتیب، می‌آید:

• ترکیب دو فریم مجاور برای «صاف کردن» حرکت دقیقاً همان چیزی است که ghosting تولید می‌کند، همان لکه دیدن مضاعف.
• Seek کردن یک فایل ویدیو به صورت زنده، پریدن به playhead آن روی mousemove، همان چیزی است که stutter تولید می‌کند، چون video seeking frame-accurate نیست.
• تعداد کمی فریم پله‌پله و ارزان به نظر می‌رسد، مثل یک slideshow.

راه‌حل هر سه یکی است: فریم‌های زیاد، نشان داده‌شده یکی‌یکی، نزدیک‌ترین به کرسر، بدون هیچ ترکیبی. فریم‌های کافی در هر جهت صادر کن و حرکت به‌عنوان عمق واقعی خوانده می‌شود.

مرحله ۴: دنباله را به کرسر وصل کن

آخرین حرکت تعامل است. پنج فریم مسطح خود را به Figma Make بده، بالا، پایین، چپ، راست، و مرکز، و پرامپت زیر را. کرسر را به فریم درست نگاشت می‌کند، حرکت را ease می‌کند تا بلغزد، لودر کالیبراسیون را اضافه می‌کند، و رابط کامل را روی آن می‌گذارد تا لوگو، منو، تیتر، و دکمه‌ها همه در همان دنیای صحنه زندگی کنند.

Build a full-screen interactive hero. I provided the flat frames of a scene captured from up, down, left and right camera angles, plus a center frame. Stack them on a canvas. On mousemove, show the single frame nearest to the cursor's dominant axis (horizontal vs vertical, whichever is larger), eased so it glides. No blending between frames except a brief 100ms dissolve when the axis switches. Start with a calibration loader: a centered crosshair that draws in, counts up, then locks and becomes the live cursor as the scene reveals. Over the scene, lay a full interface in the same minimal monospace HUD style: a wordmark logo top-left, a horizontal nav menu top-right, a centered headline with one line of subtext, and a primary plus a secondary button. Thin rules, small uppercase labels, so the chrome and the scene read as one system. Dark and minimal. Respect prefers-reduced-motion.

Copy

چرا این مهم است

نکته فضاپیما نیست. نکته این است که یک طراح حالا می‌تواند یک قطعه موشن که قبلاً به یک هنرمند سه‌بعدی، یک مزرعه رندر، و یک مهندس WebGL نیاز داشت، از درون ابزاری که هر روز در آن زندگی می‌کند، منتشر کند.

نگاه کن چه چیزی واقعاً تولید شد در مقابل آنچه خریداری شد. صحنه، چهار زاویه دوربین، و کل دنباله فریم همه تولید شدند. مونتاژ، نگاشت فریم‌ها به کرسر و آراستن صفحه، یک پرامپت ساخت بود. هزینه کل یک بعدازظهر و یک پلاگین بود، نه یک بودجه تولید و سه پیمانکار.

این همان تغییری است که ارزش توجه دارد. سقف «سینمایی و تعاملی» قبلاً یک تیم بود. حالا یک پرامپت است و تمایل به دقت در جزئیات، که همان بخشی است که طراحان همیشه در آن خوب بودند.

اگر یکی ساختی، Brainy را تگ کن. می‌خواهیم ببینیمش.