Historie i notatki z budowania FleaWinder — małego animowanego cyrku napędzanego Twoją klawiaturą i myszą.
Nakręcanie pcheł z dowolnego miejsca na iOS
FleaWinder ma teraz własną klawiaturę iOS. Zainstaluj ją raz, a każda aplikacja, w której piszesz — Wiadomości, Notatki, Safari, gdziekolwiek — cicho nakręca cyrk w tle. Co dziesięć naciśnięć klawiszy wysyła impuls energii z powrotem do głównej aplikacji. Pchły nie przejmują się, skąd pochodzi wejście; chcą po prostu być nakręcane.
Sama klawiatura jest w cyrkowym stylu: ciemne ciepłobrązowe klawisze, złote akcenty na klawiszach specjalnych i mały pasek energii u góry, który zapełnia się podczas pisania. Zmienia kolor z czerwonego na złoty i zielony w miarę wzrostu licznika naciśnięć. Obok jest mały emoji pchły i licznik na żywo, dzięki któremu widzisz dokładnie, ile nakręciłeś w tej sesji.
Najtrudniejszą częścią było udostępnianie danych. Rozszerzenia klawiatury iOS działają w swoim własnym izolowanym procesie — nie mogą komunikować się bezpośrednio z główną aplikacją. Rozwiązaniem są App Groups: współdzielony kontener UserDefaults, do którego zarówno klawiatura, jak i aplikacja mogą czytać i pisać. Klawiatura gromadzi punkty nakręcania i umieszcza je we współdzielonym kontenerze; aplikacja odbiera je przy wznowieniu. Przy okazji migrowaliśmy istniejące Siri Shortcuts i intenty widgetów do tego samego współdzielonego kontenera, więc teraz wszystko przepływa jednym rurociągiem.
Aby włączyć: Ustawienia, Ogólne, Klawiatura, Klawiatury, Dodaj nową klawiaturę, FleaWinder Circus. Nie prosi o Otwarty dostęp — żadnej sieci, żadne dane nie opuszczają Twojego urządzenia. Tylko naciśnięcia klawiszy napędzające pchły.
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.
