Histoires et notes de la création de FleaWinder — un petit cirque animé alimenté par votre clavier et votre souris.
Le cirque sur petit écran
FleaWinder a été conçu pour un bandeau large et fin au-dessus de la barre des tâches — confortablement en paysage. Les téléphones sont en portrait. Adapter le cirque aux petits écrans a demandé de repenser la mise en page sans perdre ce qui lui donne vie.
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.
Le plus grand défi était la lisibilité. Sur un écran de téléphone, les puces dessinées à l'échelle du bureau ne sont que des points. Nous avons ajouté une passe de zoom qui agrandit les corps des puces pour que leurs costumes, expressions et accessoires soient réellement visibles — le bandeau de Pip, le casque de Rex, la petite couronne de Blaze. Les détails de personnalité qui étaient toujours là se lisent soudain à bout de bras.
Le reste de la refonte mobile était moins glamour mais tout aussi important : des zones de toucher adaptées, un meilleur redimensionnement des polices, un espacement réactif sur l'ensemble du site vitrine. Rien de révolutionnaire — juste s'assurer que le cirque est beau partout où on le trouve.
Costumes, saisons et un monsieur Loyal
Cette semaine était consacrée à la profondeur visuelle. Chaque puce de la colonie porte désormais un costume unique — Nova a une ombrelle sur la corde raide, Rex porte un casque dans le canon, Blaze reçoit une couronne pour le numéro de cracheur de feu. De petits détails, mais ils donnent à chaque artiste une identité repérable au premier coup d'œil.
La scène elle-même change avec le calendrier. Un système de particules saisonnier fait tomber de la neige en hiver, des fleurs de cerisier au printemps, des lucioles en été et des feuilles tourbillonnantes en automne. Il y a aussi une teinte jour/nuit subtile liée à votre horloge réelle — le bandeau se réchauffe à l'heure dorée et s'assombrit après la tombée de la nuit, avec des étoiles plus brillantes dans le ciel nocturne.
Le plus grand ajout est le monsieur Loyal — une puce spéciale en haut-de-forme qui déambule entre les numéros en inspectant le spectacle. Il ne se produit pas ; il supervise. Ajuster son parcours de patrouille a demandé d'espacer ses promenades pour qu'il arrive pile à la fin d'une transition de numéro, ce qui donne à l'ensemble du cirque un sens de la chorégraphie qu'il n'avait pas auparavant.
Sous le capot, un système de thèmes complet propulse désormais tout cela. Huit palettes de couleurs plus un mode saisonnier automatique qui choisit la bonne en fonction du mois. Chaque couleur de chaque numéro et élément d'interface est tirée du thème actif, si bien que le changement paraît fluide plutôt que plaqué.
v1.1.0 : deux nouveaux numéros
La version 1.1.0 ajoute le numéro de jonglage et le cracheur de feu à la troupe, portant le total à sept numéros de cirque en direct. Les deux fonctionnent sur le même système d'énergie que le reste du spectacle — vos frappes clavier, mouvements de souris et clics.
Le Jongleur suit plusieurs balles sur de véritables arcs paraboliques. Le nombre évolue avec l'énergie : deux ou trois au repos, jusqu'à six à pleine puissance, avec des rattrapages dans le dos quand la foule s'enflamme. Le plus difficile a été de décaler la phase de chaque balle pour éviter qu'elles ne s'agglutinent.
Le Cracheur de feu utilise le système de particules existant avec un nouvel effet de chaleur miroitante. La longueur de la flamme augmente avec l'énergie, et les clics produisent des souffles bonus. La partie la plus délicate a été le mélange des couleurs — passer en douceur du rouge profond à la base au jaune vif à la pointe sans effet de bandes.
Les deux numéros s'intègrent au système de rotation existant, vous les verrez donc alterner avec les cinq originaux. Si vous voulez épingler un favori, le panneau des paramètres vous permet désormais d'activer ou de désactiver chaque numéro individuellement.
L'histoire derrière la page d'histoire
La page d'histoire de FleaWinder documente plus de quatre cents ans de véritables cirques de puces — des croquis au microscope de Robert Hooke en 1665 aux artistes de l'Oktoberfest encore en activité aujourd'hui. L'écrire a signifié lire des affiches victoriennes, des coupures de journaux numérisées et un nombre surprenant d'articles académiques sur le divertissement entomologique.
Le plus difficile a été de décider quoi laisser de côté. Louis Bertolotto à lui seul pourrait remplir un livre (et il l'a fait — plusieurs, en fait). Le compromis a été une chronologie qui aborde les temps forts et un ensemble de sections dépliables pour ceux qui veulent approfondir.
La page utilise des lettrines, des ornements décoratifs et une police à empattement pour évoquer les affiches et les programmes qu'elle décrit. Chaque section est repliée par défaut pour ne pas submerger le lecteur, mais le premier paragraphe est toujours visible avec une lettrine pour attirer l'attention.
Tout le texte est disponible en anglais, espagnol et allemand. Le processus de traduction a fait émerger des pans fascinants d'histoire locale — les traditions du Flohzirkus allemand à l'Oktoberfest, par exemple, ont leur propre lignée distincte des scènes londoniennes et new-yorkaises.
Pourquoi j'ai créé FleaWinder
Je voulais quelque chose qui donne vie à l'ordinateur — pas de manière distrayante, mais comme un compagnon discret qui réagit à votre présence. La plupart des écrans de veille s'activent quand vous partez ; FleaWinder s'active quand vous arrivez.
L'idée était simple : prendre toutes les entrées inutilisées que votre système d'exploitation ignore — le rythme de votre frappe, la vitesse de votre souris, la cadence de vos clics — et les transmettre à une troupe de puces de cirque animées. Plus vous travaillez, plus le spectacle prend vie.
Le construire comme un bandeau transparent au-dessus de la barre des tâches s'est avéré être la bonne contrainte. Il est toujours visible mais jamais gênant. Vous n'interagissez pas directement avec lui ; vous travaillez, et il réagit. Le défi technique a été de le rendre véritablement transparent aux clics pour qu'il ne vole jamais le focus.
FleaWinder est une lettre d'amour au cirque de puces victorien — un art véritable et séculaire où des horlogers attelaient de vraies puces pour tirer des carrosses miniatures et marcher sur des cordes raides. La page d'histoire raconte cette aventure en détail.
