Històries i notes sobre la creació de FleaWinder — un petit circ animat impulsat pel teu teclat i ratolí.
Portant el circ a pantalles petites
FleaWinder va ser dissenyat per a una franja ampla i prima sobre la barra de tasques — còmodament apaïsat. Els telèfons són verticals. Fer que el circ funcionés en pantalles petites va significar repensar la disposició sense perdre allò que el fa sentir viu.
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.
El desafiament més gran va ser la llegibilitat. En una pantalla de telèfon, les puces dibuixades a escala d'escriptori són simples puntets. Vam afegir una passada de zoom que escala els cossos de les puces perquè els seus vestits, expressions i accessoris siguin visibles — la cinta del cap de Pip, el casc de Rex, la petita corona de Blaze. Els detalls de personalitat que sempre hi eren de sobte es llegien a distància de braç.
La resta de la renovació mòbil va ser menys glamurosa però igual d'important: objectius tàctils amigables, millor escalat de fonts, espaiat adaptatiu a tot el lloc de màrqueting. Res revolucionari — simplement assegurar-nos que el circ es veu bé allà on el trobis.
Vestits, estacions i un director de pista
Aquesta setmana ha estat tota sobre profunditat visual. Cada puça de la colònia ara porta un vestit únic — Nova té un para-sol a la corda fluixa, Rex porta un casc al canó, Blaze obté una corona per al número de llançaflames. Petits detalls, però donen a cada artista una identitat que pots reconèixer d'un cop d'ull.
L'escenari mateix canvia amb el calendari. Un sistema de partícules estacional deixa caure neu a l'hivern, flors de cirerer a la primavera, lluernes a l'estiu i fulles a la tardor. També hi ha un to subtil de dia/nit lligat al teu rellotge real — la franja s'escalfa a l'hora daurada i s'enfosqueix després de la posta de sol, amb estrelles més brillants al cel nocturn.
L'addició més gran és el Director de pista — una puça especial amb barret de copa que passeja entre els números, inspeccionant l'espectacle. No actua; supervisa. Aconseguir el seu recorregut de patrulla correcte va significar espaijar les seves caminades perquè arribi just quan una transició de número acaba, cosa que dóna a tot el circ una sensació de coreografia que no tenia abans.
Sota el capó, un sistema de temes complet ara impulsa tot això. Vuit paletes de color més un mode estacional automàtic que tria la correcta segons el mes. Cada color a cada número i element d'interfície s'alimenta del tema actiu, de manera que canviar se sent fluid en lloc d'afegit.
v1.1.0: Dos nous números
La versió 1.1.0 afegeix els números del Malabarista i el Llançaflames al repertori, portant el total a set números de circ en directe. Tots dos funcionen amb el mateix sistema d'energia que impulsa la resta de l'espectacle — les teves pulsacions de tecles, moviments del ratolí i clics.
El Malabarista segueix múltiples pilotes en arcs parabòlics reals. El nombre escala amb l'energia: dues o tres en repòs, fins a sis a plena potència, amb recepcions per darrere l'esquena quan el públic s'entusiasma. Aconseguir el temps correcte va requerir desacoblar la fase de cada pilota perquè no s'agrupin.
El Llançaflames utilitza el sistema de partícules existent però amb un nou efecte de brillantor de calor. La llargada de la flama creix amb l'energia, i els clics produeixen esclats extra. La part més difícil va ser el mescla de colors — transicionar suaument del vermell fosc a la base al groc brillant a la punta sense que es veiés a bandes.
Tots dos números s'integren al sistema de rotació existent, de manera que els veuràs entrar i sortir juntament amb els cinc originals. Si vols fixar un favorit, el panell de Configuració ara et permet activar i desactivar números individuals.
La història darrere la pàgina d'història
La pàgina d'història de FleaWinder documenta més de quatre-cents anys de circs de puces reals — des dels esbossos al microscopi de Robert Hooke el 1665 fins als artistes de l'Oktoberfest que continuen treballant avui. Escriure-la va significar llegir cartells victorians, retalls de diaris digitalitzats i un nombre sorprenent d'articles acadèmics sobre entreteniment entomològic.
La part més difícil va ser decidir què deixar fora. Només Louis Bertolotto podria omplir un llibre (i ho va fer — diversos, de fet). El compromís va ser una cronologia que toca els moments principals i un conjunt de seccions desplegables per a qui vulgui aprofundir.
La pàgina utilitza lletres capitals, separadors ornamentals i un tipus de lletra serif per fer eco dels fullets i cartells que descriu. Cada secció es col·lapsa per defecte perquè el lector no se senti aclaparat, però el primer paràgraf és sempre visible amb una lletra capital per enganxar-te.
Tot el text està disponible en anglès, castellà i alemany. El procés de traducció va revelar alguna història local fascinant — les tradicions alemanyes del Flohzirkus a l'Oktoberfest, per exemple, tenen el seu propi llinatge diferent de les escenes de Londres i Nova York.
Per què vaig crear FleaWinder
Volia alguna cosa que fes que l'ordinador semblés viu — no d'una manera que distregui, sinó com un company silenciós que respon a la teva presència. La majoria de protectors de pantalla s'activen quan marxes; FleaWinder s'activa quan arribes.
La idea era senzilla: agafa tota l'entrada ociosa que el teu sistema operatiu ignora — el ritme d'escriptura, la velocitat del ratolí, la cadència dels clics — i alimenta una troupe de puces de circ animades. Com més treballes, més viu es fa l'espectacle.
Construir-lo com una capa transparent sobre la barra de tasques va resultar ser la restricció correcta. Sempre és visible però mai molesta. No hi interactues directament; simplement treballes, i ell reacciona. El repte tècnic va ser fer-lo veritablement transparent als clics perquè mai no robi el focus.
FleaWinder és una carta d'amor al circ de puces victorià — una forma d'art real, centenària, on rellotgers enganxaven puces reals per arrossegar carruatges en miniatura i caminar per cordes fluixes. La pàgina d'història explica tota aquesta història.
