Histórias e notas sobre a criação do FleaWinder — um pequeno circo animado movido pelo seu teclado e mouse.
Levando o circo para telas pequenas
O FleaWinder foi projetado para uma faixa larga e fina acima da barra de tarefas — confortavelmente em paisagem. Celulares são retrato. Fazer o circo funcionar em telas pequenas significou repensar o layout sem perder o que o torna vivo.
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.
O maior desafio foi a legibilidade. Na tela de um celular, pulgas desenhadas em escala de desktop são apenas pontos. Adicionamos uma passagem de zoom que amplia os corpos das pulgas para que seus trajes, expressões e acessórios sejam realmente visíveis — a faixa do Pip, o capacete do Rex, a pequena coroa do Blaze. Os detalhes de personalidade que sempre estiveram lá de repente se leem à distância de um braço.
O resto da reformulação mobile foi menos glamuroso, mas igualmente importante: alvos de toque acessíveis, melhor escalonamento de fontes, espaçamento responsivo em todo o site de marketing. Nada revolucionário — apenas garantir que o circo fique bem onde quer que você o encontre.
Fantasias, estações e um mestre de cerimônias
Esta semana foi toda sobre profundidade visual. Cada pulga na colônia agora usa uma fantasia única — Nova tem uma sombrinha na corda bamba, Rex usa um capacete no canhão, Blaze ganha uma coroa para o número de cuspidor de fogo. Pequenos detalhes, mas dão a cada artista uma identidade que você reconhece num relance.
O palco em si muda com o calendário. Um sistema de partículas sazonais solta neve no inverno, flores de cerejeira na primavera, vagalumes no verão e folhas flutuando no outono. Há também uma sutil tonalidade dia/noite ligada ao seu relógio real — a faixa esquenta na hora dourada e escurece após o anoitecer, com estrelas mais brilhantes no céu noturno.
A maior adição é o mestre de cerimônias — uma pulga especial de cartola que passeia entre as atrações, inspecionando o show. Ele não se apresenta; ele supervisiona. Acertar sua rota de patrulha significou espaçar suas caminhadas para que ele chegue exatamente quando uma transição de atração termina, o que dá a todo o circo uma sensação de coreografia que não tinha antes.
Por baixo do capô, um sistema completo de temas agora alimenta tudo isso. Oito paletas de cores mais um modo sazonal automático que escolhe a certa com base no mês. Cada cor em cada atração e elemento de interface vem do tema ativo, então a troca parece suave em vez de colada.
v1.1.0: Duas Novas Atrações
A versão 1.1.0 adiciona o Malabarismo e o Cuspidor de Fogo ao elenco, totalizando sete atrações circenses ao vivo. Ambas funcionam com o mesmo sistema de energia que move o restante do show — suas teclas, movimentos do mouse e cliques.
O Malabarista acompanha múltiplas bolas em arcos parabólicos reais. A contagem escala com a energia: duas ou três em repouso, até seis na potência máxima, com pegadas por trás das costas quando a plateia vai à loucura. Acertar o tempo exigiu desacoplar a fase de cada bola para que não se acumulem.
O Cuspidor de Fogo usa o sistema de partículas existente, mas com um novo efeito de ondulação de calor. O comprimento da chama cresce com a energia, e cliques produzem explosões extras. A parte mais complicada foi a mistura de cores — fazer a transição suave do vermelho profundo na base ao amarelo vivo na ponta sem parecer faixa.
Ambas as atrações se encaixam no sistema de rotação existente, então você vai vê-las alternando com as cinco originais. Se quiser fixar uma favorita, o painel de Configurações agora permite ativar e desativar atrações individualmente.
A História por Trás da Página de História
A página de história do FleaWinder documenta mais de quatrocentos anos de circos de pulgas reais — desde os esboços ao microscópio de Robert Hooke em 1665 até os artistas da Oktoberfest que ainda se apresentam hoje. Escrevê-la significou ler cartazes vitorianos, recortes de jornais digitalizados e um número surpreendente de artigos acadêmicos sobre entretenimento entomológico.
A parte mais difícil foi decidir o que deixar de fora. Louis Bertolotto sozinho poderia preencher um livro (e de fato preencheu — vários). O compromisso foi uma linha do tempo que acerta os pontos principais e um conjunto de seções expansíveis para quem quiser se aprofundar.
A página usa capitulares, divisores ornamentais e uma fonte serifada para ecoar os folhetos e cartazes que descreve. Cada seção começa recolhida por padrão para não sobrecarregar o leitor, mas o primeiro parágrafo está sempre visível com uma capitular para puxar a atenção.
Todo o texto está disponível em inglês, espanhol e alemão. O processo de tradução revelou algumas histórias locais fascinantes — as tradições alemãs de Flohzirkus na Oktoberfest, por exemplo, têm sua própria linhagem distinta das cenas de Londres e Nova York.
Por que Eu Criei o FleaWinder
Eu queria algo que fizesse o computador parecer vivo — não de um jeito que distraia, mas como um companheiro silencioso que responde à sua presença. A maioria dos protetores de tela ativa quando você sai; o FleaWinder ativa quando você chega.
A ideia era simples: pegar toda a atividade que seu sistema operacional ignora — o ritmo da sua digitação, a velocidade do seu mouse, a cadência dos seus cliques — e alimentar uma trupe de pulgas circenses animadas. Quanto mais você trabalha, mais o show ganha vida.
Construí-lo como uma sobreposição transparente acima da barra de tarefas acabou sendo a restrição certa. Está sempre visível, mas nunca atrapalha. Você não interage diretamente com ele; apenas trabalha, e ele reage. O desafio técnico foi torná-lo verdadeiramente transparente aos cliques para nunca roubar o foco.
FleaWinder é uma carta de amor ao circo de pulgas vitoriano — uma forma de arte real, com séculos de história, onde relojoeiros usavam pulgas reais para puxar carruagens em miniatura e andar em cordas bambas. A página de história conta essa história completa.
