Priče i bilješke iz izgradnje FleaWindera — malenog animiranog cirkusa pokretanog vašom tipkovnicom i mišem.
Odvođenje cirkusa na male ekrane
FleaWinder je dizajniran za široku, tanku traku iznad programske trake — udobno pejzažno. Telefoni su portretni. Da cirkus proradi na malim ekranima, trebalo je preispitati raspored bez gubitka onoga što ga čini živim.
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.
Veći izazov bila je čitljivost. Na zaslonu telefona, buhe nacrtane u stolnoj skali samo su mrlje. Dodali smo prolaz zumiranja koji povećava tijela buha tako da su njihove kostime, izraze i dodatke zapravo vidljivi — Pipova traka za glavu, Rexova kaciga, Blazeova sićušna kruna. Detalji osobnosti koji su oduvijek bili tu odjednom se čitaju na duljinu ruke.
Ostatak mobilne preobrazbe bio je manje glamurozan ali jednako važan: dodirne mete prilagođene prstima, bolje skaliranje fontova, responzivni razmaci po cijeloj marketinškoj stranici. Ništa revolucionarno — samo osiguravajući da cirkus izgleda ispravno gdje god ga pronađete.
Kostimi, godišnja doba i voditelj cirkusa
Ovaj tjedan bio je sav o vizualnoj dubini. Svaka buha u koloniji sada nosi jedinstveni kostim — Nova ima suncobran na žici, Rex nosi kacigu u topu, Blaze dobiva krunu za vatrogutačku točku. Mali detalji, ali daju svakom izvođaču identitet koji se može uočiti na prvi pogled.
Sama pozornica mijenja se s kalendarom. Sezonski sustav čestica baca snijeg zimi, cvjetove trešnje u proljeće, krijesnice ljeti i lebdeće lišće u jesen. Tu je i suptilan dnevni/noćni ton vezan za vaš sat u stvarnom svijetu — traka se zagrijava u zlatnom satu i zatamnjuje nakon mraka, sa sjajnijim zvijezdama na noćnom nebu.
Najveći dodatak je Voditelj cirkusa — posebna buha s cilindrom koji šeće između točaka, nadgledajući predstavu. Ne nastupa; nadgleda. Ispravno podešavanje njegove patrolne rute zahtijevalo je razmake tako da stigne točno kad prijelaz točke završi, što daje cijelom cirkusu osjećaj koreografije koji prije nije imao.
Ispod haube, potpuni sustav tema sada pokreće sve ovo. Osam paleta boja plus automatski sezonski način koji bira pravu prema mjesecu. Svaka boja u svakoj točki i UI elementu povlači se iz aktivne teme, tako da se prebacivanje osjeća glatkim, a ne naknadno dodanim.
v1.1.0: Dvije nove točke
Verzija 1.1.0 dodaje žonglersku točku i vatrogutača u postavu, dovodeći ukupan broj na sedam živih cirkuskih točaka. Obje rade na istom energetskom sustavu koji pokreće ostatak predstave — vaši pritisci tipki, pokreti miša i klikovi.
Žongler prati više loptica u pravim paraboličnim lukovima. Broj raste s energijom: dvije ili tri u mirovanju, do šest na punoj snazi, s hvatanjima iza leđa kad publika poludi. Ispravno tempiranje zahtijevalo je razdvajanje faze svake loptice da se ne grupiraju.
Vatrogutač koristi postojeći sustav čestica ali s novim efektom treperenja topline. Dužina plamena raste s energijom, a klikovi proizvode bonus nalete. Najzahtjevniji dio bio je miješanje boja — glatki prijelaz od tamnocrvene na bazi do svijetložute na vrhu bez prugastog izgleda.
Obje točke uklapaju se u postojeći sustav rotacije, tako da ćete ih vidjeti kako se izmjenjuju zajedno s originalnih pet. Ako želite prikvačiti omiljenu, ploča postavki sada vam omogućuje uključivanje i isključivanje pojedinačnih točaka.
Povijest iza stranice povijesti
Stranica povijesti FleaWindera dokumentira više od četiri stotine godina pravih buhinih cirkusa — od skica Roberta Hookea pod mikroskopom 1665. do izvođača na Oktoberfestu koji još danas rade. Pisanje je zahtijevalo čitanje viktorijanskih plakata, digitaliziranih novinskih isječaka i iznenađujućeg broja akademskih radova o entomološkoj zabavi.
Najteži dio bio je odlučiti što izostaviti. Sam Louis Bertolotto mogao bi napuniti knjigu (i napunio je — nekoliko, zapravo). Kompromis je bila vremenska crta koja pogađa glavne točke i skup proširivnih odjeljaka za sve koji žele dublje kopati.
Stranica koristi ukrasna početna slova, ornamentalne razdjelnice i serifni font koji odjekuje plakatima i oglasima koje opisuje. Svaki odjeljak je prema zadanome skupljen tako da čitatelja ne preplave, ali je prvi odlomak uvijek vidljiv s ukrasnim početnim slovom koje vas uvlači.
Sav tekst dostupan je na engleskom, španjolskom i njemačkom. Proces prevođenja otkrio je fascinantnu lokalnu povijest — njemačke Flohzirkus tradicije na Oktoberfestu, primjerice, imaju vlastitu lozinku različitu od londonske i njujorške scene.
Zašto sam napravio FleaWinder
Želio sam nešto što bi računalo učinilo živim — ne na ometajući način, već kao tihi pratilac koji reagira na vašu prisutnost. Većina čuvara zaslona aktivira se kad odete; FleaWinder se aktivira kad dođete.
Ideja je bila jednostavna: uzeti sav neiskorišteni unos koji vaš operativni sustav ignorira — ritam vašeg tipkanja, brzinu miša, kadenciju klikova — i usmjeriti ga prema trupi animiranih cirkuskih buha. Što više radite, više predstava oživljava.
Izgradnja kao prozirni sloj iznad programske trake pokazala se kao pravo ograničenje. Uvijek je vidljiv ali nikad ne smeta. Ne komunicirate s njim izravno; jednostavno radite, a on reagira. Tehnički izazov bio je učiniti ga istinski prozirnim za klikove tako da nikada ne ukrade fokus.
FleaWinder je ljubavno pismo viktorijanskom buhinom cirkusu — pravom, stoljetnom obliku umjetnosti u kojem su urari upregnuli stvarne buhe da vuku minijaturne kočije i hodaju po žicama. Stranica povijesti priča tu priču u cijelosti.
