Verhalen en notities over het bouwen van FleaWinder — een piepklein geanimeerd circus aangedreven door je toetsenbord en muis.
Het circus op kleine schermen
FleaWinder is ontworpen voor een brede, dunne strook boven de taakbalk — comfortabel liggend. Telefoons zijn staand. Het circus laten werken op kleine schermen betekende de indeling heroverwegen zonder te verliezen wat het levendig maakt.
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.
De grotere uitdaging was leesbaarheid. Op een telefoonscherm zijn vlooien op desktopschaal getekend slechts stippen. We voegden een zoomstap toe die de vlooienlichamen opschaalt zodat hun kostuums, gezichtsuitdrukkingen en accessoires echt zichtbaar zijn — Pips hoofdband, Rex' helm, Blazes kroontje. De persoonlijkheidsdetails die er altijd waren, zijn ineens op armlengte te lezen.
De rest van de mobiele verbouwing was minder glamoureus maar net zo belangrijk: aanraakvriendelijke tikdoelen, betere lettertypeschaling, responsieve tussenruimte over de hele marketingsite. Niets revolutionairs — gewoon zorgen dat het circus er overal goed uitziet waar je het ook vindt.
Kostuums, seizoenen en een circusdirecteur
Deze week draaide alles om visuele diepte. Elke vlo in de kolonie draagt nu een uniek kostuum — Nova heeft een parasol op het koord, Rex draagt een helm in het kanon, Blaze krijgt een kroon voor de vuurspuwact. Kleine details, maar ze geven elke artiest een identiteit die je in één oogopslag herkent.
Het podium zelf verandert met de kalender. Een seizoensgebonden deeltjessysteem laat sneeuw vallen in de winter, kersenbloesem in de lente, vuurvliegjes in de zomer en dwarrelende bladeren in de herfst. Er is ook een subtiele dag/nacht-tint gekoppeld aan je echte klok — de strook wordt warmer tijdens het gouden uur en dimt na zonsondergang, met helderder sterren aan de nachtelijke hemel.
De grootste toevoeging is de circusdirecteur — een speciale vlo met hoge hoed die tussen de acts rondwandelt en de show inspecteert. Hij treedt niet op; hij houdt toezicht. Zijn patrouilleroute goed krijgen betekende zijn wandelingen zo timen dat hij precies aankomt als een actwisseling klaar is, wat het hele circus een gevoel van choreografie geeft dat het eerder niet had.
Onder de motorkap drijft nu een compleet themasysteem dit alles aan. Acht kleurpaletten plus een automatische seizoensmodus die de juiste kiest op basis van de maand. Elke kleur in elke act en elk UI-element komt uit het actieve thema, waardoor wisselen naadloos aanvoelt in plaats van opgeplakt.
v1.1.0: Twee nieuwe acts
Versie 1.1.0 voegt de Jongleeract en Vuurspuwer toe aan het programma, waarmee het totaal op zeven live circusacts komt. Beide draaien op hetzelfde energiesysteem dat de rest van de show aandrijft — je toetsaanslagen, muisbewegingen en klikken.
De Jongleur volgt meerdere ballen in echte parabolische bogen. Het aantal schaalt met energie: twee of drie in rust, tot zes op vol vermogen, met achter-de-rug-vangsten wanneer het publiek losgaat. Om de timing goed te krijgen moest de fase van elke bal ontkoppeld worden zodat ze niet samenklonteren.
De Vuurspuwer maakt gebruik van het bestaande deeltjessysteem maar met een nieuw hitteshimmer-effect. De vlamlengte groeit met energie, en klikken produceren bonusstoten. Het lastigste onderdeel was het kleurgradient — een vloeiende overgang van diep rood aan de basis naar heldergeel aan de punt zonder er geband uit te zien.
Beide acts passen in het bestaande rotatiesysteem, dus je ziet ze in- en uitwisselen naast de oorspronkelijke vijf. Als je een favoriet wilt vastzetten, kun je in het Instellingenpaneel individuele acts aan- en uitzetten.
De geschiedenis achter de geschiedenispagina
FleaWinders geschiedenispagina documenteert meer dan vierhonderd jaar echte vlooiencircussen — van Robert Hookes microscooptekeningen in 1665 tot de Oktoberfest-performers die vandaag de dag nog steeds optreden. Het schrijven ervan betekende het lezen van Victoriaanse aanplakbiljetten, gedigitaliseerde krantenknipsels en een verrassend aantal academische papers over entomologisch vermaak.
Het moeilijkste was beslissen wat weg te laten. Louis Bertolotto alleen al zou een boek kunnen vullen (en dat deed hij ook — meerdere zelfs). Het compromis werd een tijdlijn die de belangrijkste punten raakt en een set uitklapbare secties voor iedereen die dieper wil graven.
De pagina maakt gebruik van initialen, sierlijnen en een schreeflettertype om de pamfletten en aanplakbiljetten die het beschrijft na te bootsen. Elke sectie is standaard ingeklapt zodat de lezer niet overweldigd raakt, maar de eerste alinea is altijd zichtbaar met een initiaal om je erin te trekken.
Alle tekst is beschikbaar in het Engels, Spaans en Duits. Het vertaalproces bracht fascinerende lokale geschiedenis aan het licht — Duitse Flohzirkus-tradities op het Oktoberfest hebben bijvoorbeeld hun eigen lijn, los van de Londense en New Yorkse scènes.
Waarom ik FleaWinder heb gebouwd
Ik wilde iets dat de computer levend liet voelen — niet op een afleidende manier, maar als een stille metgezel die reageert op je aanwezigheid. De meeste screensavers activeren wanneer je weggaat; FleaWinder activeert wanneer je er bent.
Het idee was simpel: neem alle invoer die je besturingssysteem negeert — het ritme van je typen, de snelheid van je muis, de cadans van je klikken — en voer het aan een troep geanimeerde circusvlooien. Hoe meer je werkt, hoe levendiger de show wordt.
Het bouwen als transparante overlay boven de taakbalk bleek de juiste beperking. Het is altijd zichtbaar maar nooit in de weg. Je interacteert er niet direct mee; je werkt gewoon, en het reageert. De technische uitdaging was het echt doorklikbaar maken zodat het nooit de focus steelt.
FleaWinder is een liefdesbrief aan het Victoriaanse vlooiencircus — een echte, eeuwenoude kunstvorm waarbij horlogemakers daadwerkelijke vlooien inspanden om miniatuurkoetsen te trekken en over koorden te lopen. De geschiedenispagina vertelt dat verhaal in zijn geheel.
