Historias e notas sobre a creacion de FleaWinder: un pequeno circo animado impulsado polo teu teclado e rato.
Levando o circo a pantallas pequenas
FleaWinder foi desinado para unha franxa ancha e delgada enriba da barra de tarefas: comodamente en horizontal. Os telefonos son verticais. Facer que o circo funcione en pantallas pequenas significou repensar o deseno sen perder o que o fai sentir 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 reto maior foi a lexibilidade. Nunha pantalla de telefono, as pulgas debuxadas a escala de escritorio son simples manchinas. Engadimos un paso de zoom que amplifica os corpos das pulgas para que os seus disfraces, expresions e accesorios sexan realmente visibes: a cinta de Pip, o casco de Rex, a pequena coroa de Blaze. Os detalles de personalidade que sempre estiveron ai de repente lense a distancia de brazo.
O resto da adaptacion movil foi menos glamuroso pero igual de importante: areas de toque accesibes, mellor escalado de fontes, espazado responsive en todo o sitio de marketing. Nada revolucionario: so asegurarse de que o circo se vexa ben onde queira que o atopes.
Disfraces, estacions e un mestre de cerimonias
Esta semana foi toda sobre a profundidade visual. Cada pulga da colonia leva agora un disfraz unico: Nova ten un parasol no arame, Rex leva un casco no canon, Blaze ten unha coroa para o acto de lanzachamas. Pequenos detalles, pero dan a cada artista unha identidade que reconeces dun vistazo.
O escenario en si cambia co calendario. Un sistema de particulas estacionais deixa caer neve no inverno, flores de cereixa na primavera, vagalumes no veran e follas a deriva no outono. Tamen hai un sutil tinte dia/noite ligado ao teu reloxo do mundo real: a franxa quentase na hora dourada e escurece despois do anoitecer, con estrelas mais brillantes no ceo nocturno.
A maior adicion e o mestre de cerimonias: unha pulga especial cun sombreiro de copa que pasea entre as actuacions, inspeccionando o espectaculo. Non actua; supervisa. Axustar a sua ruta de patrulla significou espazar as suas caminadas para que chegue xusto cando unha transicion de acto remata, o que lle da a todo o circo unha sensacion de coreografia que non tina antes.
Por debaixo, un sistema completo de temas impulsa agora todo isto. Oito paletas de cores mais un modo estacional automatico que escolle a axeitada segundo o mes. Cada cor en cada acto e elemento da interface tira do tema activo, polo que cambiar resulta fluido en vez de engadido.
v1.1.0: Duas actuacions novas
A version 1.1.0 engade o acto de malabarismo e o lanzachamas ao elenco, elevando o total a sete actuacions de circo en directo. Ambas funcionan co mesmo sistema de enerxia que impulsa o resto do espectaculo: as tuas teclas, movementos do rato e clics.
O malabarista rastrexa multiples bolas en verdadeiros arcos parabolicos. A cantidade escala coa enerxia: dous ou tres en reposo, ata seis a plena potencia, con recepcions por detras das costas cando o publico enlouquece. Axustar o tempo requiriu desacoplar a fase de cada bola para que non se agrupen.
O lanzachamas usa o sistema de particulas existente pero cun novo efecto de calor vibrante. A lonxitude da chama crece coa enerxia, e os clics producen estoupidos extra. A parte mais complicada foi a mestura de cores: transicionar suavemente do vermello escuro na base ao amarelo brillante na punta sen que se vexa bandexado.
Ambas actuacions encaixan no sistema de rotacion existente, asi que veralas entrar e sair xunto coas cinco orixinais. Se queres fixar unha favorita, o panel de Axustes agora permite activar e desactivar actuacions individuais.
A historia detras da paxina de historia
A paxina de historia de FleaWinder documenta mais de catrocentos anos de circos de pulgas reais, desde os debuxos ao microscopio de Robert Hooke en 1665 ata os artistas da Oktoberfest que seguen a traballar hoxe. Escribila significou ler programas de man vitorianos, recortes de xornais dixitalizados e un numero sorprendente de artigos academicos sobre entretemento entomoloxido.
A parte mais dificil foi decidir que deixar fora. So Louis Bertolotto poderia encher un libro (e fixoo: varios, de feito). O compromiso foi unha cronoloxia que toca os momentos clave e un conxunto de seccions despregables para quen queira afondar.
A paxina usa capitulares, divisores ornamentais e unha tipografia serif para evocar os folletins e carteis que describe. Cada seccion colapsase por defecto para que o lector non se sinta abrumado, pero o primeiro paragrafo e sempre visible cunha capitular para atraerche.
Todo o texto esta disponibre en ingles, espanol e aleman. O proceso de traducion sacou a luz unha fascinante historia local: as tradicions alemanas de Flohzirkus na Oktoberfest, por exemplo, tinen a sua propia linaxe distinta das escenas de Londres e Nova York.
Por que construin FleaWinder
Queria algo que fixese que o ordenador se sentise vivo, non dunha forma que distraia, senon como un companeiro silencioso que responde a tua presenza. A maioria dos salvapantallas activanse cando te vas; FleaWinder activase cando chegas.
A idea era simple: coller toda a entrada ociosa que o teu sistema operativo ignora, o ritmo da tua escrita, a velocidade do teu rato, a cadencia dos teus clics, e alimentar con ela a unha troupe de pulgas de circo animadas. Canto mais traballas, mais cobra vida o espectaculo.
Construilo como unha superposicion transparente enriba da barra de tarefas resultou ser a restricion axeitada. Sempre e visible pero nunca estorba. Non interactuas directamente con el; simplemente traballas, e el reacciona. O reto tecnico foi facelo verdadeiramente transparente aos clics para que nunca robe o foco.
FleaWinder e unha carta de amor ao circo de pulgas vitoriano: unha forma de arte real, con seculos de antiguidade, na que reloxeiros arnesaban pulgas reais para tirar de carrozas en miniatura e caminar por arames. A paxina de historia conta esa historia completa.
