Historier og notater fra byggingen av FleaWinder — et lite animert sirkus drevet av tastaturet og musen din.
Sirkuset på små skjermer
FleaWinder ble designet for en bred, tynn stripe over oppgavelinjen — komfortabelt i liggende format. Telefoner er i stående format. Å få sirkuset til å fungere på små skjermer betydde å tenke nytt om oppsettet uten å miste det som gjør det levende.
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 utfordringen var lesbarhet. På en telefonskjerm er lopper tegnet i skrivebordsstørrelse bare prikker. Vi la til et zoom-trinn som skalerer opp loppekroppene slik at kostymene, uttrykkene og tilbehøret deres faktisk er synlig — Pips pannebånd, Rex' hjelm, Blazes lille krone. Personlighetsdetaljene som alltid var der, kan plutselig leses på en armlengdes avstand.
Resten av mobilombyggingen var mindre glamorøst men like viktig: berøringsvennlige trykkmål, bedre skriftstørrelse-skalering, responsiv avstand gjennom hele markedsføringssiden. Ingenting revolusjonerende — bare å sørge for at sirkuset ser riktig ut uansett hvor du finner det.
Kostymer, årstider og en sirkusdirektør
Denne uken handlet om visuell dybde. Hver loppe i kolonien bærer nå et unikt kostyme — Nova har en parasoll på stramme linen, Rex bærer hjelm i kanonen, Blaze får en krone til ildspruternummeret. Små detaljer, men de gir hver artist en identitet du kan se med det samme.
Selve scenen endrer seg med kalenderen. Et sesongbasert partikkelsystem drysser snø om vinteren, kirsebærblomster om våren, ildfluer om sommeren og flagrende blader om høsten. Det finnes også en subtil dag/natt-fargetone knyttet til klokken din i den virkelige verden — stripen varmes opp i den gylne timen og dimmes etter mørkets frembrudd, med klarere stjerner på nattehimmelen.
Det største tilskuddet er sirkusdirektøren — en spesiell loppe med flosshatt som vandrer mellom numrene og inspiserer showet. Han opptrer ikke; han overvåker. Å få patruljeruten hans riktig betydde å time turene hans slik at han ankommer akkurat idet en nummerovergang er ferdig, noe som gir hele sirkuset en følelse av koreografi det ikke hadde før.
Under panseret driver et komplett temasystem nå alt dette. Åtte fargepaletter pluss en auto-sesongmodus som velger den riktige basert på måneden. Hver farge i hvert nummer og UI-element henter fra det aktive temaet, slik at byttet føles sømløst i stedet for påklistret.
v1.1.0: To nye nummer
Versjon 1.1.0 legger til sjonglernummeret og ildspruteren i programmet, og bringer totalen til syv live sirkusnummer. Begge kjører på det samme energisystemet som driver resten av showet — tastetrykkene, musebevegelsene og klikkene dine.
Sjongløren følger flere baller i ekte parabolske buer. Antallet skalerer med energi: to eller tre ved tomgang, opptil seks ved full effekt, med bak-ryggen-fangster når publikum går av skaftet. Å få timingen riktig krevde at vi frikoblet fasene til hver ball slik at de ikke klumper seg sammen.
Ildspruteren bruker det eksisterende partikkelsystemet, men med en ny varmeskimmer-effekt. Flammelengden vokser med energi, og klikk produserer bonusutbrudd. Den vanskeligste delen var fargeblanding — en jevn overgang fra dyp rød ved basen til lys gul ved tuppen uten at det ser stripete ut.
Begge numrene passer inn i det eksisterende rotasjonssystemet, så du vil se dem byttes inn og ut sammen med de opprinnelige fem. Hvis du vil feste en favoritt, lar Innstillinger-panelet deg nå slå individuelle nummer av og på.
Historien bak historiesiden
FleaWinders historieside dokumenterer over fire hundre år med ekte loppesirkus — fra Robert Hookes mikroskoptegninger i 1665 til Oktoberfest-utøverne som fortsatt jobber i dag. Å skrive den innebar å lese viktorianske plakater, digitaliserte avisutklipp og et overraskende antall akademiske artikler om entomologisk underholdning.
Den vanskeligste delen var å bestemme hva som skulle utelates. Louis Bertolotto alene kunne fylt en bok (og det gjorde han — flere, faktisk). Kompromisset ble en tidslinje som treffer de viktigste punktene og et sett med utvidbare seksjoner for alle som vil grave dypere.
Siden bruker store forbokstaver, dekorative skillelinjer og en seriff-skrifttype for å gjenspeile avisene og plakatene den beskriver. Hver seksjon er kollapset som standard så leseren ikke overveldes, men det første avsnittet er alltid synlig med en stor forbokstav for å trekke deg inn.
All tekst er tilgjengelig på engelsk, spansk og tysk. Oversettelsesprosessen avdekket noe fascinerende lokal historie — tyske Flohzirkus-tradisjoner på Oktoberfest, for eksempel, har sin egen linje adskilt fra London- og New York-scenene.
Hvorfor jeg bygde FleaWinder
Jeg ville ha noe som fikk datamaskinen til å føles levende — ikke på en distraherende måte, men som en stille følgesvenn som reagerer på tilstedeværelsen din. De fleste skjermsparere aktiveres når du går; FleaWinder aktiveres når du kommer.
Ideen var enkel: ta all den ubrukte inndataen operativsystemet ignorerer — rytmen i tastingen din, hastigheten på musen, kadensen i klikkene dine — og mat den til en tropp av animerte sirkuslopper. Jo mer du jobber, desto mer lever showet opp.
Å bygge det som et gjennomsiktig overlegg over oppgavelinjen viste seg å være den rette begrensningen. Det er alltid synlig, men aldri i veien. Du samhandler ikke med det direkte; du bare jobber, og det reagerer. Den tekniske utfordringen var å gjøre det virkelig gjennomklikkbart slik at det aldri stjeler fokus.
FleaWinder er et kjærlighetsbrev til det viktorianske loppesirkuset — en ekte, århundregammel kunstform der urmakere temmet ekte lopper til å trekke miniatyrvogner og gå på line. Historiesiden forteller hele den historien.
