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.
How the fleas learned to sound more like themselves
This month I spent time on a quieter kind of magic: helping each flea feel more like a tiny performer with a point of view. The goal was not to make the circus louder or more complicated. It was to make the moments between tricks feel warmer, more specific, and less repetitive.
The new voice work gives each flea a clearer rhythm. Pip can be proud without becoming stiff, Nova can notice details without turning into a lecture, and Bugg can keep that bright daredevil spark even when the app is simply idling on a desk.
I also tightened the way seasonal flavor shows up. A spring session should not feel exactly like an autumn one, and a late-night wind should have a slightly different mood than a midday check-in. Those shifts are small on purpose. FleaWinder works best when it feels alive without demanding attention.
The important part is consistency. The same troupe should feel familiar on iPhone, Apple TV, Mac, watch, widgets, and the spatial circus. When a flea becomes more expressive in one place, the rest of the surfaces need to catch up so the project still feels like one world.
That is the thread I keep coming back to: tiny, readable, characterful moments that travel everywhere. The fleas are still small. The circus is still gentle. But they have a little more presence now, and that makes the whole thing feel more cared for.
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.
