Berättelser och anteckningar från bygget av FleaWinder — en liten animerad cirkus driven av ditt tangentbord och din mus.
Cirkusen på små skärmar
FleaWinder designades för en bred, tunn remsa ovanför aktivitetsfältet — bekvämt i liggande format. Telefoner är i stående format. Att få cirkusen att fungera på små skärmar innebar att tänka om layouten utan att förlora det som gör den levande.
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.
Den större utmaningen var läsbarhet. På en telefonskärm är loppor ritade i skrivbordsskala bara prickar. Vi lade till ett zoomsteg som skalar upp loppkropparna så att deras kostymer, uttryck och accessoarer faktiskt syns — Pips pannband, Rex hjälm, Blazes lilla krona. Personlighetsdetaljerna som alltid funnits där kan plötsligt avläsas på en armlängds avstånd.
Resten av mobilombyggnaden var mindre glamorös men lika viktig: beröringsvänliga tryckområden, bättre teckenstorlek-skalning, responsiva avstånd genom hela marknadsföringssidan. Inget revolutionerande — bara att se till att cirkusen ser rätt ut oavsett var man hittar den.
Kostymer, årstider och en cirkusdirektör
Den här veckan handlade om visuellt djup. Varje loppa i kolonin bär nu en unik kostym — Nova har ett parasoll på linan, Rex bär hjälm i kanonen, Blaze får en krona till eldslukarnumret. Små detaljer, men de ger varje artist en identitet som du kan se direkt.
Själva scenen förändras med kalendern. Ett säsongsbaserat partikelsystem fäller snö på vintern, körsbärsblommor på våren, eldflugor på sommaren och virvlande löv på hösten. Det finns också en subtil dag/natt-nyans kopplad till din riktiga klocka — remsan värms upp under gyllene timmen och tonas ner efter mörkrets inbrott, med ljusare stjärnor på natthimlen.
Det största tillskottet är cirkusdirektören — en speciell loppa med hög hatt som vandrar mellan numren och inspekterar showen. Han uppträder inte; han övervakar. Att få hans patrullväg rätt innebar att tidsbestämma hans promenader så att han anländer precis när ett nummerbyte är klart, vilket ger hela cirkusen en känsla av koreografi den inte hade förut.
Under huven driver nu ett komplett temasystem allt detta. Åtta färgpaletter plus ett auto-säsongsläge som väljer rätt baserat på månaden. Varje färg i varje nummer och gränssnittselement hämtas från det aktiva temat, så bytet känns sömlöst snarare än påklistrat.
v1.1.0: Två nya nummer
Version 1.1.0 lägger till jongleringsnumret och eldslukaren i uppställningen, och höjer totalen till sju levande cirkusnummer. Båda körs på samma energisystem som driver resten av showen — dina tangenttryckningar, musrörelser och klick.
Jonglören följer flera bollar i äkta paraboliska bågar. Antalet skalas med energi: två eller tre i viloläge, upp till sex vid full effekt, med fångster bakom ryggen när publiken går vild. Att få timingen rätt krävde att varje bolls fas frikopplades så de inte klumpar ihop sig.
Eldslukaren använder det befintliga partikelsystemet men med en ny värmeskimmereffekt. Flammlängden växer med energi, och klick ger bonusutbrott. Det knepigaste var färgblandningen — att smidigt övergå från djuprött vid basen till klargult vid toppen utan att det ser randigt ut.
Båda numren passar in i det befintliga rotationssystemet, så du ser dem växla in och ut vid sidan av de ursprungliga fem. Om du vill fästa en favorit låter inställningspanelen dig nu slå av och på enskilda nummer.
Historien bakom historiesidan
FleaWinders historiesida dokumenterar över fyrahundra år av riktiga loppcirkusar — från Robert Hookes mikroskopskisser 1665 till Oktoberfest-artisterna som fortfarande arbetar idag. Att skriva den innebar att läsa viktorianska affischer, digitaliserade tidningsurklipp och ett förvånande antal akademiska artiklar om entomologisk underhållning.
Det svåraste var att bestämma vad som skulle utelämnas. Enbart Louis Bertolotto skulle kunna fylla en bok (och det gjorde han — flera, faktiskt). Kompromissen blev en tidslinje som träffar de stora höjdpunkterna och en uppsättning expanderbara sektioner för alla som vill gräva djupare.
Sidan använder anfanger, ornamentala avdelare och en seriftypsnitt för att återspegla de broschyrer och affischer den beskriver. Varje sektion är ihopfälld som standard så läsaren inte överväldigas, men den första paragrafen är alltid synlig med en anfang för att locka in dig.
All text finns på engelska, spanska och tyska. Översättningsprocessen avslöjade fascinerande lokal historia — tyska Flohzirkus-traditioner på Oktoberfest, till exempel, har sin egen historia skild från Londons och New Yorks scener.
Varför jag byggde FleaWinder
Jag ville ha något som fick datorn att kännas levande — inte på ett distraherande sätt, utan som en tyst följeslagare som reagerar på din närvaro. De flesta skärmsläckare aktiveras när du går; FleaWinder aktiveras när du kommer.
Idén var enkel: ta all den passiva indata som ditt operativsystem ignorerar — rytmen i ditt skrivande, hastigheten på din mus, takten i dina klick — och mata den till en trupp animerade cirkusloppor. Ju mer du arbetar, desto mer vaknar showen till liv.
Att bygga det som ett transparent överlägg ovanför aktivitetsfältet visade sig vara rätt begränsning. Det är alltid synligt men aldrig i vägen. Du interagerar inte med det direkt; du bara arbetar, och det reagerar. Den tekniska utmaningen var att göra det helt klickgenomskinligt så det aldrig stjäl fokus.
FleaWinder är ett kärleksbrev till den viktorianska loppcirkusen — en riktig, århundradesold konstform där urmakare selade riktiga loppor för att dra miniatyrvagnar och gå på lina. Historiesidan berättar den historien i sin helhet.
