طراحی ۳۵ انیمیشن Lottie برای فروشگاه اینترنتی کاراگاه‌گجت

توضیحات کامل: لطفا لینک زیر رو بخونید که توضیحات کامل هست. https://docs.google.com/document/d/1EFkmKuE1uHNuGAjurOj_0QsIj-VU0riKfWklWY-ycVs/edit?usp=sharing

کاراگاه‌گجت یک فروشگاه اینترنتی پریمیوم گجت (وب + اپلیکیشن iOS و اندروید) است. در هر مناسبت خاص (مثل شب یلدا یا نوروز)، کل ظاهر فروشگاه با رنگ‌بندی همان مناسبت هماهنگ می‌شود. این پروژه شامل طراحی انیمیشن‌های کوچک، شیک و مینیمال Lottie است که در پنج موقعیت مشخص از سایت/اپ، هنگام فعال بودن هر تم مناسبتی نمایش داده می‌شوند.

حس و حال مورد نظر: ظرافت و کلاس در حد اپل، نه شلوغی و کانفتی مارکت‌پلیسی.

خلاصه پروژه:

• ۳۵ انیمیشن
• ۷ تم مناسبتی
• هر تم شامل ۵ موقعیت (اسلات) نمایش
• تحویل: فایل Lottie JSON برای هر انیمیشن

۱. الزامات کلی — برای همه‌ی ۳۵ فایل

این الزامات از محدودیت‌های دو پلیر واقعی پروژه می‌آید (dotlottie-web در وب و پکیج lottie فلاتر در اپ). فایلی که این موارد را رعایت نکند برگشت داده می‌شود.

فرمت: Lottie JSON استاندارد (خروجی After Effects + Bodymovin/LottieFiles). برای هر انیمیشن یک فایل json. تبدیل به فرمت .lottie برای وب توسط خودمان انجام می‌شود.

نام‌گذاری فایل‌ها: به فرمت theme-slot.json مثلاً yalda-tap.json یا nowruz-empty.json کد تم‌ها: yalda · nowruz · christmas · mothers-day · sepandarmazgan · daughters-day · valentine

فقط وکتور: فقط لایه‌های shape — بدون تصویر رستر امبد شده، بدون لایه ویدیو. بدون expression افترافکت، بدون افکت لایه (بلور، گلو از طریق افکت)، بدون merge path — رندرر فلاتر این‌ها را پشتیبانی نمی‌کند.

کانواس: مربع، پس‌زمینه شفاف، سوژه در مرکز با حاشیه امن حدود ۸ تا ۱۰ درصد. فریم‌ریت ۳۰.

هر دو حالت روشن و تیره: هر انیمیشن باید هم روی پس‌زمینه روشن (نزدیک به #FFFFFF) و هم روی پس‌زمینه تیره (#0B0F1A، نیلی تیره) درست دیده شود. بدون فیل سفید خالص یا مشکی خالص به عنوان رنگ اصلی — مثلاً برف باید ته‌رنگ سرد یا سایه‌ی نرم داشته باشد تا روی پس‌زمینه سفید هم خوانا باشد.

راست‌به‌چپ (RTL): محصول فارسی و راست‌به‌چپ است. از حرکاتی که القای خوانش چپ‌به‌راست دارند (مثل ریول از چپ به راست) پرهیز شود؛ حرکت از مرکز به بیرون یا از بالا به پایین همیشه امن است.

استایل: وکتور فلت مدرن و پریمیوم با گرادیان‌های ظریف. شیک و مختص همان مناسبت. نه کارتونی، نه استیکر خط‌دار، بدون چهره یا کاراکتر، بدون متن داخل انیمیشن.

اسلات‌های تک‌پخش باید در پایان «آرام بگیرند»: اسلات‌های tap، success، hero و intro دقیقاً یک‌بار پخش می‌شوند — بدون لوپ. فریم آخرشان باید تمیز باشد (کاملاً محو شده یا در حالت پایانی ترکیب‌بندی‌شده). فایل hero عملاً روی فریم آخرش فریز می‌شود و همان‌جا روی صفحه می‌ماند، پس آن فریم باید به‌تنهایی هم به‌عنوان یک ایلاستریشن ثابت زیبا کار کند.

۲. پنج اسلات — هر انیمیشن کجا نمایش داده می‌شود

سایزها، سایز واقعی رندر در محصول هستند (پیکسل وب / پیکسل منطقی موبایل). طراحی و پیش‌نمایش باید دقیقاً در همین سایزها انجام شود؛ جزئیاتی که فقط در ۵۰۰ پیکسل دیده می‌شود، هدر رفته است.

تاپ‌برست (tap) لحظه‌ی لمس دکمه «افزودن به سبد خرید»، وسط دکمه، شناور روی محتوای زنده صفحه. این یک فیدبک است، نه نمایش — کاربر وسط کار است. سایز نمایش: ۱۱۲ پیکسل وب / ۱۱۰ موبایل کانواس: ۲۵۶×۲۵۶ مدت: ۰.۵ تا ۰.۸ ثانیه، حداکثر مطلق ۱.۲ ثانیه پخش: یک‌بار، پایان کاملاً خالی (محو کامل) یک پاپ شعاعی پراکنده از مرکز — تقریباً ۶ تا ۱۲ المان که به بیرون منفجر می‌شوند با کمی گرایش به بالا، ایز-اوت سریع، محو شدن قبل از لبه‌ی کانواس. فریم پایانی باید کاملاً خالی باشد. سبک نگه‌دارید چون روی UI محصول overlay می‌شود.

جشن تسویه حساب (success) صفحه‌ی «سفارش ثبت شد» — اوج احساسی خرید. یک‌بار بالای متن تأیید، وسط یک کارت پخش می‌شود. غنی‌ترین اسلات؛ می‌تواند روایت کوچکی داشته باشد (باز شدن → جشن → آرام گرفتن). سایز نمایش: ۱۲۰ پیکسل وب / ۱۶۰ موبایل کانواس: ۵۱۲×۵۱۲ مدت: ۱.۵ تا ۲.۵ ثانیه پخش: یک‌بار، در یک ژست ترکیب‌بندی‌شده آرام می‌گیرد انتظار → انفجار → آرام گرفتن. ژست پایانی باید به‌عنوان یک قاب ثابت دلپذیر بماند (چون تا وقتی کاربر شماره سفارش را می‌خواند، روی صفحه باقی می‌ماند).