Приказни и белешки од градењето на 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.
Поголемиот предизвик беше читливоста. На екранот на телефон, болвите нацртани во десктоп размер се само дамки. Додадовме пас за зумирање кој ги зголемува телата на болвите за нивните костими, изрази и додатоци навистина да бидат видливи — лентата на Пип, шлемот на Рекс, малата круна на Блејз. Деталите на личноста кои секогаш биле таму одеднаш се читаат на должина на рака.
Остатокот од мобилната преработка беше помалку гламурозен но исто толку важен: цели пријатни за допир, подобро скалирање на фонтови, респонсивни размаци низ маркетинг сајтот. Ништо револуционерно — само обезбедување дека циркусот изгледа правилно каде и да го најдете.
Костими, сезони и водител на циркус
Оваа недела беше целосно за визуелна длабочина. Секоја болва во колонијата сега носи единствен костим — Нова има чадор на жицата, Рекс носи шлем во топот, Блејз добива круна за голтачката точка. Мали детали, но тие му даваат на секој изведувач идентитет кој може да се забележи на прв поглед.
Самата сцена се менува со календарот. Сезонски систем на честички фрла снег зиме, цреши цветови напролет, светулки лете и паѓачки лисја наесен. Има и суптилен дневен/ноќен тон врзан за вашиот реален часовник — лентата се затоплува во златниот час и затемнува по мрак, со посветли ѕвезди на ноќното небо.
Најголемиот додаток е Водителот на циркусот — специјална болва со цилиндар која шета меѓу точките, инспектирајќи го шоуто. Тој не настапува; тој надгледува. Правилното поставување на неговата патрола бараше растојанија за да пристигне токму кога преминот на точката завршува, што му дава на целиот циркус чувство на кореографија што претходно го немал.
Под хаубата, целосен систем на теми сега го движи сето ова. Осум палети на бои плус автоматски сезонски режим кој ја избира правилната според месецот. Секоја боја во секоја точка и UI елемент се влече од активната тема, така што преминувањето е глатко а не закачено.
v1.1.0: Две нови точки
Верзија 1.1.0 ги додава жонглерската точка и голтачот на оган во составот, доведувајќи го вкупниот број на седум живи циркуски точки. И двете работат на истиот енергетски систем кој го движи остатокот од шоуто — вашите притискања на копчиња, движења на глушецот и кликнувања.
Жонглерот следи повеќе топчиња во вистински параболични лакови. Бројот расте со енергијата: две или три во мирување, до шест на полна сила, со фаќања зад грб кога публиката полудува. Правилното тајмирање бараше одделување на фазата на секое топче за да не се натрупуваат.
Голтачот на оган го користи постоечкиот систем на честички но со нов ефект на треперење на топлина. Должината на пламенот расте со енергијата, а кликнувањата произведуваат бонус налети. Најтешкиот дел беше мешањето на боите — глатко преминување од темно црвена на основата до светло жолта на врвот без лентест изглед.
И двете точки се вклопуваат во постоечкиот систем на ротација, така што ќе ги видите како се менуваат заедно со оригиналните пет. Ако сакате да закачите омилена, панелот Поставки сега ви дозволува да вклучувате и исклучувате поединечни точки.
Историјата зад страницата за историја
Страницата за историја на FleaWinder документира повеќе од четиристотини години вистински болвени циркуси — од скиците под микроскоп на Роберт Хук во 1665 до изведувачите на Октоберфест кои сè уште работат денес. Пишувањето бараше читање на викторијански плакати, дигитализирани новински исечоци и изненадувачки голем број академски трудови за ентомолошка забава.
Најтешкиот дел беше да се одлучи што да се испушти. Самиот Луи Бертолото можеше да наполни книга (и навистина наполнил — неколку). Компромисот беше временска линија која ги погодува главните точки и сет на проширливи секции за секој кој сака подлабоко да копа.
Страницата користи украсни иницијали, орнаментални разделувачи и сериф фонт кој ги рефлектира плакатите и огласите што ги опишува. Секоја секција е стандардно собрана за да не го преоптовари читателот, но првиот параграф е секогаш видлив со украсен иницијал кој ве влече внатре.
Целиот текст е достапен на англиски, шпански и германски. Процесот на преведување откри фасцинантна локална историја — германските Flohzirkus традиции на Октоберфест, на пример, имаат своја посебна лоза различна од лондонската и њујоршката сцена.
Зошто го изградив FleaWinder
Сакав нешто што ќе го направи компјутерот да се чувствува жив — не на одвлекувачки начин, туку како тивок придружник кој реагира на вашето присуство. Повеќето заштитници на екранот се активираат кога заминувате; FleaWinder се активира кога пристигнувате.
Идејата беше едноставна: земете го целиот неискористен влез што вашиот оперативен систем го игнорира — ритамот на вашето пишување, брзината на глушецот, каденцата на кликнувањата — и напојте ја трупата на анимирани циркуски болви. Колку повеќе работите, толку повеќе шоуто оживува.
Градењето како проѕирен слој над лентата со задачи се покажа како вистинско ограничување. Секогаш е видлив но никогаш не пречи. Не комуницирате со него директно; едноставно работите, а тој реагира. Техничкиот предизвик беше да се направи навистина проѕирен за кликнувања за никогаш да не го грабне фокусот.
FleaWinder е љубовно писмо до викторијанскиот болвен циркус — вистинска, вековна уметничка форма каде часовничари впрегнувале вистински болви за влечење минијатурни кочии и одење по жици. Страницата за историја ја раскажува таа приказна целосно.
