Historier og noter fra bygningen af FleaWinder — et lille animeret cirkus drevet af dit tastatur og din mus.
Cirkus på små skærme
FleaWinder er designet til en bred, tynd stribe over proceslinjen — behageligt landskabsformat. Telefoner er portræt. At få cirkusset til at fungere på små skærme betød, at layoutet måtte gentænkes uden at miste det, der giver det liv.
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 udfordring var læsbarhed. På en telefonskærm er lopper tegnet i skrivebordsstørrelse bare prikker. Vi tilføjede et zoom-trin der skalerer loppekroppene op, så deres kostumer, udtryk og tilbehør faktisk er synlige — Pips pandebånd, Rex' hjelm, Blazes lille krone. Personlighedsdetaljerne der altid var der, kan pludselig aflæses på en arms længde.
Resten af mobilombygningen var mindre glamourøs men lige så vigtig: berøringsvenlige trykområder, bedre skriftstørrelsesskalering, responsiv afstand overalt på marketingsiden. Intet revolutionerende — bare sikre at cirkusset ser rigtigt ud, uanset hvor man finder det.
Kostumer, årstider og en cirkusdirektør
Denne uge handlede om visuel dybde. Hver loppe i kolonien bærer nu et unikt kostume — Nova har en parasol på line, Rex bærer hjelm i kanonen, Blaze får en krone til ildsluger-nummeret. Små detaljer, men de giver hver artist en identitet man kan se med det samme.
Selve scenen ændrer sig med kalenderen. Et sæsonbestemt partikelsystem drypper sne om vinteren, kirsebærblomster om foråret, ildfluer om sommeren og flagrende blade om efteråret. Der er også en diskret dag/nat-farvetone bundet til dit virkelige ur — striben bliver varmere i den gyldne time og dæmpes efter mørkets frembrud, med klarere stjerner på nattehimlen.
Den største tilføjelse er cirkusdirektøren — en speciel loppe i høj hat der vandrer mellem numrene og inspicerer showet. Han optræder ikke; han overvåger. At få hans patruljesti rigtigt betød at time hans gåture, så han ankommer lige når en nummerovergang er færdig, hvilket giver hele cirkusset en følelse af koreografi det ikke havde før.
Under motorhjelmen driver et komplet temasystem nu alt dette. Otte farvepaletter plus en auto-sæsonbetonet tilstand der vælger den rette baseret på måneden. Hver farve i hvert nummer og UI-element trækker fra det aktive tema, så skift føles sømløst i stedet for påklistret.
v1.1.0: To nye numre
Version 1.1.0 tilføjer jonglørnummeret og ildslugeren til holdet, så der nu er syv livecirkusnumre i alt. Begge kører på det samme energisystem, der driver resten af showet — dine tastetryk, musebevægelser og klik.
Jongløren følger flere bolde i ægte parabolske buer. Antallet skalerer med energi: to eller tre i tomgang, op til seks ved fuld kraft, med bag-om-ryggen-fangster, når publikum går amok. At få timingen til at passe krævede afkobling af hver bolds fase, så de ikke klumper sammen.
Ildslugeren bruger det eksisterende partikelsystem, men med en ny varmedis-effekt. Flammelængden vokser med energi, og klik producerer bonusudbrud. Den sværeste del var farveblanding — at få en glidende overgang fra dyb rød ved bunden til klar gul i toppen uden at det ser stribet ud.
Begge numre placeres i det eksisterende rotationssystem, så du ser dem skifte ind og ud sammen med de oprindelige fem. Hvis du vil fastgøre en favorit, lader indstillingspanelet dig nu slå individuelle numre til og fra.
Historien bag historiesiden
FleaWinders historieside dokumenterer over fire hundrede års rigtige loppecirkus — fra Robert Hookes mikroskoptegninger i 1665 til de optrædende på Oktoberfest, der stadig arbejder i dag. At skrive den krævede læsning af viktorianske plakater, digitaliserede avisudklip og et overraskende antal akademiske artikler om entomologisk underholdning.
Det sværeste var at beslutte, hvad der skulle udelades. Louis Bertolotto alene kunne fylde en bog (og det gjorde han — flere, faktisk). Kompromiset blev en tidslinje, der rammer de store begivenheder, og et sæt udvidbare afsnit til dem, der vil dykke dybere.
Siden bruger forbogstaver, dekorative skillelinjer og en serif-skrifttype for at give genklang af de opslag og plakater, den beskriver. Hvert afsnit er foldet sammen som standard, så læseren ikke overvældes, men det første afsnit er altid synligt med et forbogstav, der trækker dig ind.
Al tekst er tilgængelig på engelsk, spansk og tysk. Oversættelsesprocessen afdækkede fascinerende lokalhistorie — tyske Flohzirkus-traditioner ved Oktoberfest har for eksempel deres egen linje, der adskiller sig fra London- og New York-scenerne.
Hvorfor jeg byggede FleaWinder
Jeg ville have noget, der fik computeren til at føles levende — ikke på en forstyrrende måde, men som en stille ledsager, der reagerer på din tilstedeværelse. De fleste pauseskærme aktiveres, når du går; FleaWinder aktiveres, når du ankommer.
Idéen var simpel: tag alt det tomgangs-input dit styresystem ignorerer — rytmen i din tastning, hastigheden af din mus, kadencen i dine klik — og giv det til en trup af animerede cirkuslopper. Jo mere du arbejder, jo mere kommer showet til live.
At bygge det som et gennemsigtigt overlæg over proceslinjen viste sig at være den rigtige begrænsning. Det er altid synligt, men aldrig i vejen. Du interagerer ikke direkte med det; du arbejder bare, og det reagerer. Den tekniske udfordring var at gøre det virkelig klikgennemsigtigt, så det aldrig stjæler fokus.
FleaWinder er et kærlighedsbrev til det viktorianske loppecirkus — en ægte, århundredgammel kunstform, hvor urmakere spændte rigtige lopper til at trække miniatuevogne og gå på line. Historiesiden fortæller den historie i sin helhed.
