Истории и бележки от изграждането на FleaWinder -- малък анимиран цирк, задвижван от вашата клавиатура и мишка.
Пренасяне на цирка на малки екрани
FleaWinder беше проектиран за широка, тънка лента над лентата със задачи -- удобно пейзажна. Телефоните са портретни. Да накараме цирка да работи на малки екрани означаваше да преосмислим оформлението, без да загубим онова, което го прави жив.
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.
По-голямото предизвикателство беше четливостта. На телефонен екран бълхите, нарисувани в десктоп мащаб, са просто петънца. Добавихме увеличаващ проход, който уголемява телата на бълхите, така че техните костюми, изрази и аксесоари да са наистина видими -- лентата на Пип, каската на Рекс, малката корона на Блейз. Детайлите за личност, които винаги са били там, изведнъж се четат на разстояние ръка.
Останалата част от мобилната преработка беше по-малко ефектна, но също толкова важна: удобни за докосване цели, по-добро мащабиране на шрифтовете, адаптивно разстояние в маркетинговия сайт. Нищо революционно -- просто да се уверим, че циркът изглежда правилно, навсякъде където го намерите.
Костюми, сезони и директор на манежа
Тази седмица беше посветена на визуална дълбочина. Всяка бълха в колонията сега носи уникален костюм -- Нова има чадърче на въжето, Рекс носи каска в оръдието, Блейз получава корона за номера с огън. Малки детайли, но те дават на всеки изпълнител идентичност, която се забелязва с един поглед.
Самата сцена се променя с календара. Сезонна система от частици пуска сняг през зимата, черешови цветове през пролетта, светулки през лятото и падащи листа през есента. Има и фин тон ден/нощ, обвързан с часовника ви от реалния свят -- лентата се затопля в златния час и притъмнява след залез, с по-ярки звезди в нощното небе.
Най-голямото допълнение е Директорът на манежа -- специална бълха с цилиндър, която се разхожда между номерата и инспектира шоуто. Той не изпълнява; той надзирава. Правилното настройване на маршрута му на обхождане означаваше да се разстоят разходките му така, че да пристига точно когато преходът между номерата приключва, което придава на целия цирк усещане за хореография, каквото нямаше преди.
Под капака вече работи пълна система за теми. Осем цветови палитри плюс автоматичен сезонен режим, който избира правилната въз основа на месеца. Всеки цвят във всеки номер и елемент от интерфейса се взема от активната тема, така че превключването се усеща безшевно, а не като нещо добавено отстрани.
v1.1.0: Два нови номера
Версия 1.1.0 добавя номера Жонглиране и Огнеяд към списъка, довеждайки общия брой до седем живи циркови номера. И двата работят на същата енергийна система, която задвижва останалата част от шоуто -- вашите натискания на клавиши, движения на мишката и кликвания.
Жонгльорът проследява множество топки в истински параболични дъги. Броят се мащабира с енергията: две или три при покой, до шест при пълна мощност, с хващания зад гърба, когато публиката полудява. Правилната настройка на времето изискваше разделяне на фазата на всяка топка, за да не се струпват.
Огнеядът използва съществуващата система от частици, но с нов ефект на топлинно трептене. Дължината на пламъка расте с енергията, а кликванията произвеждат допълнителни изблици. Най-трудната част беше смесването на цветовете -- плавен преход от тъмночервено в основата до ярко жълто на върха, без да изглежда набраздено.
И двата номера се вписват в съществуващата система за ротация, така че ще ги виждате да се сменят редом с оригиналните пет. Ако искате да фиксирате любимец, панелът за настройки сега ви позволява да включвате и изключвате отделни номера.
Историята зад страницата за история
Страницата за история на FleaWinder документира повече от четиристотин години истински бълши циркове -- от скиците на микроскопа на Робърт Хук от 1665 г. до изпълнителите на Октоберфест, които работят и днес. Писането й означаваше четене на викториански афиши, дигитализирани вестникарски изрезки и изненадващ брой академични статии за ентомологично забавление.
Най-трудната част беше да решим какво да пропуснем. Само Луи Бертолото може да запълни цяла книга (а той го е направил -- няколко, всъщност). Компромисът беше хронология, която обхваща основните моменти, и набор от разгъващи се раздели за всеки, който иска да копае по-дълбоко.
Страницата използва буквици, орнаментални разделители и серифен шрифт, за да напомня за листовките и афишите, които описва. Всеки раздел е свит по подразбиране, за да не затрупа читателя, но първият параграф винаги е видим с буквица, за да ви привлече.
Целият текст е достъпен на английски, испански и немски. Процесът на превод разкри някои завладяващи местни истории -- немските традиции на бълши циркове на Октоберфест, например, имат собствена линия, различна от лондонската и нюйоркската сцена.
Защо създадох FleaWinder
Исках нещо, което кара компютъра да се чувства жив -- не по разсейващ начин, а като тих спътник, който реагира на присъствието ви. Повечето скрийнсейвъри се активират, когато си тръгнете; FleaWinder се активира, когато пристигнете.
Идеята беше проста: вземете всички входни данни, които операционната ви система игнорира -- ритъма на писането ви, скоростта на мишката, честотата на кликванията -- и ги подайте на трупа от анимирани циркови бълхи. Колкото повече работите, толкова повече шоуто оживява.
Изграждането му като прозрачен слой над лентата със задачи се оказа правилното ограничение. Винаги е видим, но никога не пречи. Не взаимодействате директно с него; просто работите и той реагира. Техническото предизвикателство беше да го направим наистина прозрачен за кликвания, за да не краде фокуса никога.
FleaWinder е любовно писмо към викторианския бълши цирк -- истинска, вековна форма на изкуство, при която часовникари впрягали истински бълхи да теглят миниатюрни карети и да ходят по въже. Страницата за история разказва тази история изцяло.
