داستانها و یادداشتهایی از ساخت FleaWinder — یک سیرک متحرک کوچک که توسط صفحهکلید و موس شما تغذیه میشود.
بردن سیرک به صفحههای کوچک
FleaWinder برای نوار عریض و باریکی بالای نوار وظیفه طراحی شده بود — راحت افقی. تلفنها عمودی هستند. کارکرد سیرک روی صفحههای کوچک به معنای بازاندیشی چیدمان بدون از دست دادن آنچه آن را زنده میکند بود.
The embeddable widget flips to a tall canvas on mobile, stacking the acts vertically instead of spreading them across a ribbon. Anyone dropping FleaWinder into their own site gets a layout that adapts automatically. Four theme presets (dark, light, warm, cool) and a scale parameter let it blend with whatever surrounds it.
چالش بزرگتر خوانایی بود. روی صفحه تلفن، ککهایی که در مقیاس دسکتاپ کشیده شدهاند فقط نقطه هستند. ما یک مرحله بزرگنمایی اضافه کردیم که بدن ککها را بزرگتر میکند تا لباسها، حالات و اکسسوریهایشان واقعاً قابل مشاهده باشند — سربند پیپ، کلاهخود رکس، تاج کوچک بلیز. جزئیات شخصیتی که همیشه آنجا بودند ناگهان در فاصله دست خوانا شدند.
بقیه بازسازی موبایل کمتر پرزرقوبرق بود اما به همان اندازه مهم: اهداف لمسی مناسب، مقیاسبندی بهتر فونت، فاصلهگذاری واکنشگرا در سراسر سایت بازاریابی. چیز انقلابی نیست — فقط اطمینان از اینکه سیرک در هر جایی که پیدایش میکنید خوب به نظر میرسد.
لباسها، فصلها و مدیر سیرک
این هفته کاملاً درباره عمق بصری بود. هر کک در مستعمره حالا لباس منحصربهفردی میپوشد — نوا چتر آفتابی روی طناب دارد، رکس کلاهخود در توپ میپوشد، بلیز تاج برای نمایش آتشنفس میگیرد. جزئیات کوچک، اما به هر اجراکننده هویتی میدهند که با یک نگاه تشخیص داده میشود.
صحنه خودش با تقویم تغییر میکند. سیستم ذرات فصلی در زمستان برف، در بهار شکوفه گیلاس، در تابستان کرم شبتاب و در پاییز برگهای ریزان میریزد. یک رنگ لطیف روز/شب هم هست که به ساعت واقعی شما متصل است — نوار در ساعت طلایی گرمتر میشود و پس از غروب تیرهتر، با ستارههای درخشانتر در آسمان شب.
بزرگترین اضافه شده مدیر سیرک است — کک ویژهای با کلاه بلند که بین نمایشها قدم میزند و شو را بازرسی میکند. او اجرا نمیکند؛ نظارت میکند. درست کردن مسیر گشتزنی او به معنای فاصلهگذاری راهرفتنهایش بود تا درست وقتی برسد که انتقال نمایش تمام شده، که به کل سیرک حس کوریوگرافی میدهد که قبلاً نداشت.
زیر کاپوت، یک سیستم تم کامل حالا همه اینها را تغذیه میکند. هشت پالت رنگی به علاوه یک حالت فصلی خودکار که بر اساس ماه درست را انتخاب میکند. هر رنگ در هر نمایش و عنصر رابط کاربری از تم فعال تغذیه میکند، بنابراین تغییر روان به نظر میرسد نه چسبانده شده.
v1.1.0: دو نمایش جدید
نسخه 1.1.0 نمایشهای شعبدهبازی و آتشنفس را به فهرست اضافه میکند و مجموع را به هفت نمایش زنده سیرکی میرساند. هر دو با همان سیستم انرژی که بقیه شو را هدایت میکند کار میکنند — فشار کلیدها، حرکات موس و کلیکهای شما.
شعبدهباز چندین توپ را در قوسهای سهمی واقعی ردیابی میکند. تعداد با انرژی مقیاس میشود: دو یا سه در حالت استراحت، تا شش در حداکثر قدرت، با گرفتن از پشت وقتی تماشاگران هیجانزده میشوند. درست کردن زمانبندی نیازمند جداسازی فاز هر توپ بود تا تجمع نکنند.
آتشنفس از سیستم ذرات موجود استفاده میکند اما با افکت لرزش حرارتی جدید. طول شعله با انرژی رشد میکند و کلیکها انفجارهای اضافی تولید میکنند. سختترین بخش ترکیب رنگ بود — انتقال نرم از قرمز تیره در پایه به زرد روشن در نوک بدون اینکه نواری به نظر برسد.
هر دو نمایش در سیستم چرخش موجود جا میگیرند، بنابراین آنها را در کنار پنج نمایش اصلی خواهید دید. اگر میخواهید مورد علاقهتان را پین کنید، پنل تنظیمات حالا به شما اجازه میدهد نمایشهای فردی را روشن و خاموش کنید.
تاریخچه پشت صفحه تاریخچه
صفحه تاریخچه FleaWinder بیش از چهارصد سال سیرکهای کک واقعی را مستند میکند — از طرحهای میکروسکوپی رابرت هوک در ۱۶۶۵ تا اجراکنندگان اکتبرفست که هنوز امروز فعالند. نوشتن آن به معنای خواندن بروشورهای ویکتوریایی، بریدههای روزنامه دیجیتالیشده و تعداد شگفتآوری مقالات دانشگاهی درباره سرگرمی حشرهشناسی بود.
سختترین بخش تصمیمگیری درباره حذف چه چیزی بود. فقط لویی برتولوتو میتوانست یک کتاب پر کند (و این کار را کرد — چند تا، در واقع). سازش یک خط زمانی بود که نقاط اصلی را میزد و مجموعهای از بخشهای باز شونده برای هرکسی که میخواهد عمیقتر برود.
صفحه از حروف بزرگ اول، جداکنندههای تزئینی و فونت سریف استفاده میکند تا بروشورها و آگهینامههایی که توصیف میکند را تداعی کند. هر بخش به طور پیشفرض جمع شده تا خواننده غرق نشود، اما اولین پاراگراف همیشه با حرف بزرگ اول قابل مشاهده است تا شما را جذب کند.
تمام متن به انگلیسی، اسپانیایی و آلمانی موجود است. فرآیند ترجمه برخی تاریخهای محلی جذاب را آشکار کرد — سنتهای آلمانی Flohzirkus در اکتبرفست، برای مثال، نسب جداگانهای از صحنههای لندن و نیویورک دارند.
چرا FleaWinder را ساختم
چیزی میخواستم که رایانه را زنده به نظر برساند — نه به شکل حواسپرتی، بلکه به عنوان همراه ساکتی که به حضور شما واکنش نشان میدهد. بیشتر محافظهای صفحه وقتی میروید فعال میشوند؛ FleaWinder وقتی میآیید فعال میشود.
ایده ساده بود: تمام ورودی بیکار را که سیستمعامل شما نادیده میگیرد — ریتم تایپ، سرعت موس، آهنگ کلیکها — بگیرید و به گروهی از ککهای سیرکی متحرک بدهید. هرچه بیشتر کار کنید، نمایش زندهتر میشود.
ساختن آن به عنوان لایه شفاف بالای نوار وظیفه محدودیت درستی بود. همیشه قابل مشاهده است اما هرگز مزاحم نیست. مستقیماً با آن تعامل ندارید؛ فقط کار میکنید و آن واکنش نشان میدهد. چالش فنی شفاف کردن آن برای کلیک بود تا هرگز تمرکز را نرباید.
FleaWinder نامه عاشقانهای به سیرک کک ویکتوریایی است — یک شکل هنری واقعی و چندصدساله که در آن ساعتسازان ککهای واقعی را برای کشیدن کالسکههای مینیاتوری و راه رفتن روی طناب به کار میگرفتند. صفحه تاریخچه آن داستان را به طور کامل بازگو میکند.
