Příběhy a poznámky ze stavby FleaWinderu — maličkého animovaného cirkusu poháněného tvou klávesnicí a myší.
Cirkus na malých obrazovkách
FleaWinder byl navržen pro široký, tenký pásek nad hlavním panelem — pohodlně na šířku. Telefony jsou na výšku. Aby cirkus fungoval na malých obrazovkách, bylo třeba přehodnotit rozložení, aniž by se ztratilo to, co mu dává život.
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.
Větší výzva byla čitelnost. Na displeji telefonu jsou blechy vykreslené v desktopovém měřítku jen tečky. Přidali jsme přiblížení, které zvětší těla blech, aby jejich kostýmy, výrazy a doplňky byly skutečně viditelné — Pip čelenka, Rex helma, Blaze koruna. Detaily osobnosti, které tam vždy byly, najednou rozpoznáte na délku paže.
Zbytek mobilní přestavby byl méně okázalý, ale stejně důležitý: dotykově přívětivé cíle, lepší škálování písma, responzivní rozestupy napříč marketingovým webem. Nic revolučního — prostě zajistit, aby cirkus vypadal správně, ať ho najdete kdekoli.
Kostýmy, roční období a šéf manéže
Tento týden byl celý o vizuální hloubce. Každá blecha v kolonii teď nosí jedinečný kostým — Nova má slunečník na laně, Rex nosí helmu v kanónu, Blaze dostává korunu pro číslo s ohněm. Drobné detaily, ale dávají každému umělci identitu, kterou rozpoznáte na první pohled.
Samotné jeviště se mění s kalendářem. Sezónní částicový systém sype sníh v zimě, třešňové květy na jaře, světlušky v létě a poletující listí na podzim. Je tu i jemný denní/noční nádech navázaný na vaše reálné hodiny — pásek se oteplí za zlaté hodinky a ztmavne po setmění, s jasnějšími hvězdami na noční obloze.
Největší novinkou je šéf manéže — speciální blecha v cylindru, která se prochází mezi čísly a kontroluje představení. Nevystupuje; dohlíží. Správné nastavení jeho pochůzky znamenalo načasovat jeho chůzi tak, aby dorazil právě v okamžiku, kdy skončí přechod mezi čísly, což dává celému cirkusu pocit choreografie, který dříve chyběl.
Pod kapotou to celé pohání kompletní systém motivů. Osm barevných palet plus automatický sezónní režim, který vybere tu správnou podle měsíce. Každá barva v každém čísle i prvku rozhraní čerpá z aktivního motivu, takže přepnutí působí plynule, ne přilepené.
v1.1.0: Dvě nová čísla
Verze 1.1.0 přidává žonglérské číslo a polykače ohně do sestavy, čímž celkový počet stoupá na sedm živých cirkusových čísel. Obě běží na stejném energetickém systému, který pohání zbytek show — tvé stisky kláves, pohyby myší a klikání.
Žonglér sleduje několik míčků ve skutečných parabolických obloucích. Počet se mění s energií: dva nebo tři při nečinnosti, až šest na plný výkon, s chytáním za zády, když publikum šílí. Správné načasování vyžadovalo oddělit fázi každého míčku, aby se neshlukly.
Polykač ohně využívá stávající částicový systém, ale s novým efektem tepelného mihotání. Délka plamene roste s energií a kliknutí produkují bonusové výbuchy. Nejtěžší část bylo míchání barev — plynulý přechod od tmavě červené u základny po jasně žlutou na špičce, aniž by to vypadalo pruhovaně.
Obě čísla zapadají do stávajícího rotačního systému, takže je uvidíš střídat se spolu s původní pětkou. Pokud si chceš připnout oblíbené, panel Nastavení ti teď umožňuje jednotlivá čísla zapínat a vypínat.
Historie za stránkou Historie
Stránka historie FleaWinderu dokumentuje přes čtyři sta let skutečných bleších cirkusů — od mikroskopických náčrtů Roberta Hooka z roku 1665 po umělce na Oktoberfestu, kteří vystupují dodnes. Její psaní znamenalo číst viktoriánské plakáty, digitalizované novinové výstřižky a překvapivé množství akademických prací o entomologické zábavě.
Nejtěžší bylo rozhodnout, co vynechat. Samotný Louis Bertolotto by zaplnil celou knihu (a on to také udělal — dokonce několik). Kompromisem byla časová osa zachycující hlavní momenty a sada rozbalovacích sekcí pro ty, kdo se chtějí ponořit hlouběji.
Stránka používá ozdobné iniciály, ornamentální oddělovače a patkové písmo, které evokuje letáky a plakáty, jež popisuje. Každá sekce je ve výchozím stavu sbalená, aby čtenáře nezahlcovala, ale první odstavec je vždy viditelný s ozdobnou iniciálou, která tě vtáhne dovnitř.
Veškerý text je dostupný v angličtině, španělštině a němčině. Proces překladu odkryl fascinující místní historii — německé tradice Flohzirkus na Oktoberfestu mají například vlastní linii odlišnou od londýnské a newyorské scény.
Proč jsem postavil FleaWinder
Chtěl jsem něco, co počítač oživí — ne rušivým způsobem, ale jako tichý společník, který reaguje na tvou přítomnost. Většina spořičů obrazovky se aktivuje, když odejdeš; FleaWinder se aktivuje, když přijdeš.
Nápad byl jednoduchý: vzít veškerý vstup, který tvůj operační systém ignoruje — rytmus tvého psaní, rychlost myši, kadenci tvých kliknutí — a nakrmit tím družinu animovaných cirkusových blech. Čím víc pracuješ, tím víc show ožívá.
Postavit to jako průhledný překryv nad hlavním panelem se ukázalo jako správné omezení. Je vždy viditelný, ale nikdy nepřekáží. Nekomunikuješ s ním přímo; prostě pracuješ a on reaguje. Technická výzva spočívala v tom, aby byl skutečně proklikávací a nikdy neukradl fokus.
FleaWinder je milostný dopis viktoriánskému bleššímu cirkusu — skutečné, staletí staré umělecké formě, kde hodináři zapřahali skutečné blechy, aby tahaly miniaturní kočáry a chodily po laně. Stránka historie vypráví celý ten příběh.
