Historie i notatki z budowania FleaWinder — małego animowanego cyrku napędzanego Twoją klawiaturą i myszą.
Cyrk na małych ekranach
FleaWinder został zaprojektowany jako szeroki, cienki pasek nad paskiem zadań — wygodnie w orientacji poziomej. Telefony działają w pionie. Sprawienie, by cyrk działał na małych ekranach, oznaczało przemyślenie układu na nowo bez utraty tego, co czyni go żywym.
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.
Większym wyzwaniem była czytelność. Na ekranie telefonu pchły narysowane w skali pulpitu to zaledwie kropki. Dodaliśmy przejście powiększenia, które skaluje ciała pcheł tak, aby ich kostiumy, miny i akcesoria były naprawdę widoczne — opaska Pip, kask Rex, korona Blaze. Detale osobowości, które zawsze tam były, nagle dają się odczytać na wyciągnięcie ręki.
Reszta mobilnej przebudowy była mniej efektowna, ale równie ważna: przyjazne dotykowo cele kliknięć, lepsza skalowalność czcionek, responsywne odstępy na całej stronie marketingowej. Nic rewolucyjnego — po prostu upewnienie się, że cyrk wygląda dobrze, gdziekolwiek go znajdziesz.
Kostiumy, pory roku i konferansjer
W tym tygodniu chodziło wyłącznie o głębię wizualną. Każda pchła w kolonii nosi teraz unikalny kostium — Nova ma parasolkę na linie, Rex nosi kask w armacie, Blaze dostaje koronę do numeru z ogniem. Drobne detale, ale dają każdemu artyście tożsamość rozpoznawalną na pierwszy rzut oka.
Sama scena zmienia się wraz z kalendarzem. Sezonowy system cząsteczkowy sypie śnieg zimą, płatki kwiatów wiśni wiosną, świetliki latem i dryftujące liście jesienią. Jest też subtelny odcień dzień/noc powiązany z Twoim prawdziwym zegarem — pasek ociepla się o złotej godzinie i przyciemnia po zmroku, z jaśniejszymi gwiazdami na nocnym niebie.
Największym dodatkiem jest konferansjer — specjalna pchła w cylindrze, która spaceruje między numerami, kontrolując występ. Nie występuje; nadzoruje. Prawidłowe ustawienie trasy jego patrolu oznaczało rozplanowanie spacerów tak, by docierał dokładnie w momencie zakończenia przejścia między numerami, co daje całemu cyrkowi poczucie choreografii, którego wcześniej nie miał.
Pod maską pełny system motywów napędza teraz to wszystko. Osiem palet kolorów plus automatyczny tryb sezonowy, który wybiera odpowiedni na podstawie miesiąca. Każdy kolor w każdym numerze i elemencie interfejsu czerpie z aktywnego motywu, więc zmiana wydaje się płynna, a nie naklejona.
v1.1.0: Dwa nowe numery
Wersja 1.1.0 dodaje Żonglerkę i Połykacza ognia do składu, łącznie siedem występów cyrkowych na żywo. Oba działają na tym samym systemie energii, który napędza resztę widowiska — Twoje naciśnięcia klawiszy, ruchy myszy i kliknięcia.
Żongler śledzi wiele piłek w prawdziwych łukach parabolicznych. Ich liczba skaluje się z energią: dwie lub trzy w stanie spoczynku, do sześciu na pełnej mocy, z rzutami za plecami, gdy publiczność szaleje. Dopracowanie synchronizacji wymagało rozdzielenia fazy każdej piłki, żeby się nie zbijały w grupę.
Połykacz ognia korzysta z istniejącego systemu cząsteczkowego, ale z nowym efektem falowania ciepła. Długość płomienia rośnie z energią, a kliknięcia generują dodatkowe wybuchy. Najtrudniejszą częścią było mieszanie kolorów — płynne przejście od głębokiej czerwieni u podstawy do jasnego żółtego na końcu bez widocznych pasów.
Oba numery wchodzą do istniejącego systemu rotacji, więc będziesz je widzieć, jak pojawiają się i znikają obok oryginalnej piątki. Jeśli chcesz przypiąć ulubiony numer, panel Ustawień pozwala teraz włączać i wyłączać poszczególne występy.
Historia stojąca za stroną historii
Strona historii FleaWinder dokumentuje ponad czterysta lat prawdziwych cyrków pcheł — od szkiców mikroskopowych Roberta Hooke’a z 1665 roku po występujących na Oktoberfeście działających do dziś. Jej napisanie oznaczało czytanie wiktoriańskich afiszów, zdigitalizowanych wycinków gazetowych i zaskakująco wielu prac naukowych o entomologicznej rozrywce.
Najtrudniejszą częścią było zdecydowanie, co pominąć. Sam Louis Bertolotto mógłby wypełnić książkę (i faktycznie wypełnił — kilka). Kompromisem stała się oś czasu obejmująca najważniejsze momenty i zestaw rozwijanych sekcji dla tych, którzy chcą zagłębić się dalej.
Strona używa inicjałów ozdobnych, ornamentalnych separatorów i czcionki szeryfowej, nawiązując do afiszów i broszur, które opisuje. Każda sekcja jest domyślnie zwinięta, żeby czytelnik nie był przytłoczony, ale pierwszy akapit jest zawsze widoczny z inicjałem ozdobnym, który wciąga.
Cały tekst jest dostępny po angielsku, hiszpańsku i niemiecku. Proces tłumaczenia odsłonił fascynującą lokalną historię — na przykład niemieckie tradycje Flohzirkus na Oktoberfeście mają własny rodowód, odmienny od scen londyńskich i nowojorskich.
Dlaczego stworzyłem FleaWinder
Chciałem czegoś, co sprawi, że komputer wyda się żywy — nie w rozpraszający sposób, ale jako cichy towarzysz reagujący na Twoją obecność. Większość wygaszaczy ekranu aktywuje się, gdy odchodzisz; FleaWinder aktywuje się, gdy przychodzisz.
Pomysł był prosty: wziąć całe bezczynne dane wejściowe, które Twój system operacyjny ignoruje — rytm pisania, prędkość myszy, kadencję kliknięć — i nakarmić nimi trupe animowanych cyrkowych pcheł. Im więcej pracujesz, tym bardziej widowisko ożywa.
Zbudowanie tego jako przezroczystej nakładki nad paskiem zadań okazało się właściwym ograniczeniem. Jest zawsze widoczny, ale nigdy nie przeszkadza. Nie wchodzisz z nim w bezpośrednią interakcję; po prostu pracujesz, a on reaguje. Wyzwaniem technicznym było uczynienie go naprawdę przezroczystym dla kliknięć, żeby nigdy nie przejmował fokusu.
FleaWinder to list miłosny do wiktoriańskiego cyrku pcheł — prawdziwej, wielowiekowej formy sztuki, w której zegarmistrze zaprzęgali żywe pchły do ciągnięcia miniaturowych karet i chodzenia po linach. Strona historii opowiada tę historię w całości.
