Cyberpunk режим: анатомия на един творчески изблик

01

Натиснете жълтия бутон

Най-горе на всяка страница в сайта има малък жълт етикет, който от време на време примигва: Пробвай Cyberpunk режим. Натиснете го и сайтът се включва в мрежата. Пуска се кратка стартова секвенция, стъклото изчезва и в страницата се променя всичко, освен мястото на нещата.

Шрифтовете стават тесни и технични. Заглавията светват в електрическо жълто и се декодират от бъркотия от символи, преди да застанат на място. По кадрите пробягват сканиращи линии и зърно. HUD рамкира екрана с индикатор за запис, течащ таймкод и координатите на София, а тънки скали следят къде се намирате в страницата. Сменят се и видеата, и то всичките тринадесет — с неонови градове, дъжд и хром. Сайтът запомня избора ви, така че следващата страница се отваря по същия начин.

Това е същият уебсайт. Всяка дума, всеки линк и всяко оформление са същите. Променила се е само душата.

02

Откъде тръгна

Голям фен съм на жанра: Cyberpunk 2077, Edgerunners, целият неон-ноар свят. Вече бях флиртувал с него в собствената си работа.

Behub е проектиран като хартиен терминал. Стартира като машина, изписва хеш на билда, води лог на собствения си процес и отбелязва всяка стъпка с [ ok ], а фонът на behub.dev е жив от падащ код.

World Wide Stunts е изграден като снимачна площадка. Отваря се с проверка на системите — изправност на такелажа, натоварване на колана, медик в готовност — и рамкира всяка секция с графики като във визьор на камера, таймкод и UTC часовник в реално време.

Така че когато една вечер попитах дали можем да постигнем „готиния, завладяващ и много фънки ефект на Cyberpunk“ върху самия MP13, вече знаех какво обичам: HUD-а на единия сайт, дъжда от код на другия, гличове, сканиращи линии и шрифт с характер. Не знаех само дали може да стане, без да съборя сайта и да започна отначало.

03

Същата подредба, друга душа

Това стана първото правило. Скин, а не редизайн. Началната страница запазва тринадесетте си сцени, портфолиото — редовете си, страниците на проектите — секциите си. Променя се само повърхността.

Технически целият Cyberpunk облик живее зад един превключвател и един CSS файл, който се прилага само докато превключвателят е включен. При завръщащ се посетител той се зарежда още преди първото изрисуване на страницата, така че спокойната версия никога не проблясва първа. Изключването премахва всяка следа: всеки ефект, всеки слушател на събития, всяко подменено видео. Системата е мислена и за надграждане. Cyberpunk е първият скин. Не е задължително да е последният.

Палитрата дойде със собствени правила. Жълтото е подписът, цианът — вторият глас, за уредите и надписите, а червеното се появява само в гличовете и никога като цвят, на който можете да разчитате. Всеки панел и бутон губи заоблените си ъгли и получава един ъгъл, отрязан по диагонал — езикът на формите в жанра. Заглавията са с тесен техничен шрифт; всеки надпис, показание и число е с моноширинен шрифт, като на табло с уреди.

04

HUD

Обичам HUD елементите. Направо ги обожавам. Те правят всичко по-завладяващо, затова HUD-ът получи най-много внимание.

По краищата на екрана стоят ъглови скоби, мигащ индикатор за запис, номерът на сцената, течащ таймкод и координатите на София с малък сигнал за връзка. По левия край се спуска скала с маркер, който следва скрола ви. Вдясно стандартният скролбар на браузъра е заменен с такъв, който прилича на уред, с процентно показание до него. На телефон скалите се свиват до тънки като косъм линии по краищата, а процентът стои под хедъра.

Менюто се превърна в меню за пауза на цял екран, сякаш сте натиснали пауза в игра. Огромни номерирани линкове изпълват лявата страна; вдясно статус панел показва локацията на студиото, часовник с точното време в София, връзката, броя на пуснатите проекти и годината, в която излязохме онлайн. Включва се и се изключва като стар кинескопен екран.

Ефектът на декодиране се роди в това меню. Всеки линк изплува от бъркотия от символи, преди да се подреди в дума. Толкова ми хареса, че се разпростря върху всяко жълто заглавие в сайта: голямото MP13 на началната страница, заглавията на секциите, имената на проектите, бягащите редове текст. Всяко се декодира първия път, когато се появи на екрана. Остана да се изпипа още един детайл: пропорционалните букви сменят ширината си, докато се разбъркват, затова всяко заглавие пази крайния си размер по време на декодирането и оформлението никога не подскача.

05

Възпитани гличове

Един глич е забавен веднъж. Глич на всеки две секунди е главоболие. Затова гличовете тук са възпитани.

Пристъпите идват от време на време, а не постоянно. Всеки пристъп разкъсва няколко хоризонтални ивици от екрана настрани, разцепва заглавията на призрачни копия в циан и червено и изчезва за около четвърт секунда. Логото стана жълта табелка с отрязан ъгъл, циан рамка и малък баркод и вместо да се полюшва леко като в спокойната версия, от време на време се разпада в глич.

Иконата на менюто ме научи на нещо. В първата ми версия трите ѝ линии се движеха механично, на стъпки, като машина — и усещането беше грешно. В спокойната версия иконата диша: линиите плавно растат и се свиват. Затова се върнахме към дишането и добавихме отгоре по някой глич. Плавно почти през цялото време, счупено за миг. Точно този контраст прави глича жив.

Бутоните се изпълват с жълто отляво надясно и в момента, в който запълването легне, ги разтърсва кратко RGB разцепване. А каруселът с избрани проекти вече не се върти като стъклен пръстен. Този плавен пръстен принадлежи на спокойния облик. В Cyberpunk режим проектите се появяват и изчезват един по един с накъсани глич преходи, като канал, който превключва на повреден екран.

06

Тринадесет видеа и саундтрак

Всяка сцена на началната страница получи ново видео, както и фонът на всяка вътрешна страница. Всички са клипове със свободен лиценз от Pexels и Pixabay, прекодирани, за да се зареждат бързо, и всеки има собствена версия за телефон.

Изборът им беше най-личната част. С CGI нямах проблем. С косплея — да: всичко, което приличаше на хора в костюми, правеше цялото нещо евтино. В една сцена имаше група хора, които просто не ми харесаха, и те отпаднаха. За телефон два клипа бяха изрязани наново на ръка: единият, за да не излиза лицето на една жена от кадър, другият — за да отмести фокуса от билборд, който доминираше цялата картина. Точно такива решения трябва да взема човек. Никой алгоритъм не би ги засякъл.

Музиката отне два опита. Първият беше вграден саундтрак от YouTube, но вграденият плейър изглеждаше ужасно на телефон. Вторият, който остана, е трак, хостван на самия сайт: „Hard Cyberpunk“ на Kulakovka, под лиценза на Pixabay. В Cyberpunk режим малкият радио плейър в ъгъла пуска него вместо обичайния поток на Vanilla Radio. Ако излезете от режима по средата на песента, спокойната станция поема щафетата.

07

Какво се обърка

Много неща, и то бързо. Точно в това е смисълът да работиш по този начин.

Колелцето на мишката спря да работи. В първата версия скролът вече не превърташе между сцените на началната страница. Причината беше невидима: слоят на цял екран, който носи сканиращите линии и зърното, тихомълком се беше превърнал в нещо, което браузърът смята за скролируемо, и прихващаше колелцето. Едно променено свойство — и колелцето отново проработи.

Каруселът засичаше. Отрязаните ъгли и допълнителното размиване по 3D картите на карусела се оказаха твърде много, за да ги преизрисува браузърът на всеки кадър. Махнахме ги от движещите се части, а по-късно пръстенът така или иначе беше заменен с глич преходи.

Вътрешните страници почерняха. Фонов цвят, предназначен за страницата, се рисуваше върху фоновото видео. Преместихме го едно ниво нагоре и видеото се върна.

HUD-ът се сблъска с бутоните. На страниците на проекти с дълги имена показанието се врязваше в хедъра. Скъсихме го, дадохме му максимална ширина, а името на мрежата вече се показва само на началната страница, където има място за него.

Нищо от това не отне много време. Всеки проблем излезе наяве, защото ползвах сайта на реални устройства, докато се изграждаше, казвах какво ми се струва грешно и минути по-късно имах поправка. Този цикъл — изграждаш, усещаш, реагираш, поправяш — е целият метод.

08

Защо изобщо

Резонен въпрос. Никой клиент не го е поискал и то не продава никакъв продукт.

За мен прави три неща. Държи ме във форма: скинът те принуждава да разбереш всеки компонент на собствения си сайт, защото трябва да преоформиш всеки един от тях. Показва диапазона ми: посетител, който е видял спокойната страна и после натисне жълтия бутон, разбира, че тихите сайтове, които правя, са избор, а не ограничение. И е забавно. Творческата работа има нужда от такива изблици — неща, които правиш, защото искаш да ги видиш да съществуват.

Доказва и нещо за работата с AI. Два дни, един дизайнер и един AI сътрудник — и резултатът е втора, цялостна визуална идентичност на всяка страница на работещ сайт, на десктоп и на телефон. Преди няколко години това би било проект за цял екип, с бюджет и срокове, мерени в месеци. Сега може да започне като идея една вечер и да е онлайн до следващата. Повече за това как работи партньорството ни писах в Не заместител. Партньор.

Кодиран с AI, проектиран от човек. Машината написа всеки ред. Всяко решение за това какво усещане да носи беше мое.

09

Какво бих казал на колега

Ако се изкушавате да направите нещо подобно, ето няколко неща, които научих по забавния начин:

1. Първо правилата, после ефектите. Кой цвят какво означава, каква форма има всеки панел, къде е позволено червеното. Ефектите без правила много бързо се превръщат в шум.
2. Гличовете имат нужда от ритъм. Гличът работи, защото през повечето време нищо не е счупено. Оставете спокойните части спокойни и рядкото прекъсване ще наелектризира.
3. Тествайте с палеца си. Половината поправки по-горе открих на телефона, на дивана, а не на голям монитор. Именно на телефона един ефект се превръща от впечатляващ в дразнещ.
4. Подбирайте безмилостно. Един евтино изглеждащ клип дърпа надолу цялото нещо. Изтриването е част от дизайна.
5. Направете изхода перфектен. Скин, от който хората не могат да излязат чисто, е капан, а не функция. Изключването на Cyberpunk режима връща сайта точно такъв, какъвто беше, без да остави и следа.
6. Пазете подредбата свещена. Когато всичко останало се променя, хората се ориентират по мястото на нещата. Именно това позволява на един скин да е див, без да обърква.

10

Фънки — и за клиенти

Дръзката страна не е само за собствения ми сайт. Някои брандове имат нужда от нея.

World Wide Stunts говори на езика на снимачния ден: проверка на системите, преди да тръгне hero кадърът, графики като във визьор на камера, часовник в реално време и сигнално оранжево за всичко, с което можете да взаимодействате. Rogue Supplements крещи там, където продава: тъмни фонове от край до край, неоновозелено и магента и заглавие, толкова голямо, колкото позволява екранът. Фен сайтът на Карлос Алкарас сменя настилката на корта, докато скролвате: от твърдите кортове на Мелбърн към клея на Париж и тревата на Лондон. До вас през цялото време пътува тенис топка, а табло в хедъра брои сетовете и геймовете.

Хипер фънки или тихо и елегантно — всичко започва от едно и също място: какво трябва да е усещането? После го изграждаме. Тихата страна има своя история в Тъмно стъкло и тих лукс.

11

Пробвайте

Ако четете това в спокойния облик, натиснете Пробвай Cyberpunk режим най-горе на страницата. Ако вече сте вътре — добре дошли, choom. Изход от Cyberpunk режим ви връща обратно.

А ако вашият бранд заслужава нещо по-смело от шаблон, да поговорим.