Történetek és jegyzetek a FleaWinder építéséről — egy apró animált cirkusz, amit a billentyűzeted és az egered hajt.
A cirkusz kis képernyőkön
A FleaWinder egy széles, vékony sávnak készült a tálca felett — kényelmesen fekvő formátumban. A telefonok álló helyzetűek. A cirkusz működésbe hozása kis képernyőkön az elrendezés újragondolását jelentette anélkül, hogy elveszne az, ami élővé teszi.
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.
A nagyobb kihívás az olvashatóság volt. Telefon képernyőjén az asztali méretben rajzolt bolhák csupán foltok. Hozzáadtunk egy nagyítási lépést, amely felnagyítja a bolhatestet, hogy jelmezük, arckifejezésük és kiegészítőik valóban láthatóak legyenek — Pip fejpántja, Rex sisakja, Blaze apró koronája. A személyiségjegyek, amelyek mindig ott voltak, hirtelen karnyújtásnyira olvashatóvá váltak.
A mobil átalakítás többi része kevésbé volt látványos, de ugyanolyan fontos: érintésbarát gombok, jobb betűméretezés, reszponzív térközök az egész marketing oldalon. Semmi forradalmi — csak annak biztosítása, hogy a cirkusz mindenhol jól nézzen ki, ahol megtalálod.
Jelmezek, évszakok és egy porondmester
Ez a hét a vizuális mélységről szólt. A kolónia minden bolhája egyedi jelmezt visel — Novának napernyője van a kötélen, Rex sisakot hord az ágyúban, Blaze koronát kap a tűznyelő számhoz. Apró részletek, de minden előadónak felismerhető identitást adnak egyetlen pillantásra.
Maga a színpad változik a naptárral. Egy évszakos részecskerendszer havat szór télen, cseresznyevirágot tavasszal, szentjánosbogarakat nyáron és sodródó leveleket ősszel. Van egy finom nappal/éjszaka árnyalat is a valós idejű órádhoz kötve — a sáv felmelegszik aranyórában, és elsötétül sötétedés után, fényesebb csillagokkal az éjszakai égen.
A legnagyobb újdonság a porondmester — egy különleges bolha cilindernben, aki sétálgat a számok között, ellenőrizve az előadást. Nem lép fel; felügyel. A járőrútvonalának helyes beállítása azt jelentette, hogy úgy kellett időzíteni a sétáit, hogy éppen akkor érkezzen, amikor egy számváltás befejeződik, ami az egész cirkusznak olyan koreográfia-érzést ad, amilyen korábban nem volt.
A motorháztető alatt egy teljes témarendszer hajtja mindezt. Nyolc színpaletta és egy automatikus évszakos mód, amely a hónap alapján választja ki a megfelelőt. Minden szín minden számban és felületi elemben az aktív témából származik, így a váltás zökkenőmentesnek hat, nem ráragasztottnak.
v1.1.0: Két új szám
Az 1.1.0-s verzió a Zsonglőr és a Tűznyelő számot hozza, így összesen hét élő cirkuszi szám van. Mindkettő ugyanazon az energiarendszeren fut, ami a show többi részét is hajtja — a billentyűleütéseid, egérmozgásaid és kattintásaid.
A Zsonglőr több labdát követ valódi parabolikus ívben. A darabszám az energiával skálázódik: kettő-három tétlenségben, akár hat teljes teljesítménynél, hátamögötti elkapásokkal, amikor a közönség megőrül. Az időzítés helyes beállításához szét kellett választani az egyes labdák fázisát, hogy ne csomósodjanak össze.
A Tűznyelő a meglévő részecskerendszert használja, de új hőrezgés-effekttel. A lánghossz az energiával nő, és a kattintások bónusz lángrobbanásokat adnak. A legtrükkösebb rész a színkeverés volt — a simán átmenő mélyvöröstől az alapnál a fényes sárgáig a csúcson, csíkosodás nélkül.
Mindkét szám beilleszkedik a meglévő rotációs rendszerbe, így felváltva jelennek meg az eredeti öttel. Ha van kedvenced, a Beállítások panelen mostantól egyenként kapcsolhatod be és ki az egyes számokat.
A történelem a történelem-oldal mögött
A FleaWinder történelem-oldala több mint négyszáz évnyi valódi bolhacirkusz-történelmet dokumentál — Robert Hooke 1665-ös mikroszkópos rajzaitól a ma is fellépő Oktoberfest-előadókig. Megírásához viktoriánus színlapokat, digitalizált újságkivágásokat és meglepően sok entomológiai szórakoztatásról szóló tudományos cikket kellett elolvasnom.
A legnehezebb az volt, hogy eldöntsem, mit hagyjak ki. Csak Louis Bertolotto is megtöltene egy könyvet (és meg is tette — többet is, valójában). A kompromisszum egy időrendi áttekintés lett, amely a legfontosabb eseményeket tartalmazza, és lenyitható szekciók azoknak, akik mélyebbre akarnak ásni.
Az oldal iniciálékat, díszítő elválasztókat és talpas betűtípust használ, hogy a brosúrák és színlapok hangulatát idézze, amelyekről szól. Minden szekció alapértelmezetten összecsukva jelenik meg, hogy az olvasó ne érezze túlzónak, de az első bekezdés mindig látható, iniciáléval a figyelemfelkeltés érdekében.
Minden szöveg elérhető angolul, spanyolul és németül. A fordítási folyamat során érdekes helytörténeti vonatkozások kerültek elő — például a német Flohzirkus-hagyomány az Oktoberfesten saját, a londoni és New York-i vonaltól eltérő fejlődési útvonallal rendelkezik.
Miért építettem a FleaWindert
Olyasmit akartam, amitől a számítógép élőnek érződik — nem zavaró módon, hanem mint egy csendes társaság, ami reagál a jelenlétedre. A legtöbb képernyővédő akkor aktiválódik, amikor elmész; a FleaWinder akkor aktiválódik, amikor megérkezel.
Az ötlet egyszerű volt: vedd az összes tétlen bevitelt, amit az operációs rendszered figyelmen kívül hagy — a gépelés ritmusát, az egér sebességét, a kattintások ütemét — és tápláld velük egy animált bolhacirkusz társulatát. Minél többet dolgozol, annál jobban felélénkül a show.
Átlátszó sávként a tálca fölé építeni végül a megfelelő korlát volt. Mindig látható, de sosem áll útban. Nem léptetesz vele interakcióba közvetlenül; egyszerűen dolgozol, és reagál. A technikai kihívás az volt, hogy valóban átkattinthatóvá tegyem, hogy sosem ragadja el a fókuszt.
A FleaWinder szerelmes levél a viktoriánus bolhacirkusznak — egy valódi, évszázados művészeti formának, ahol órásmesterek valódi bolhákat fogtak be miniatűr kocsik húzására és kötéltáncra. A történelem-oldal ezt a történetet meséli el részletesen.
