Уеб, който се усеща скъп: дванайсет уеб ефекта за агенции

01

Първата секунда

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

После идва реалността. Бюджетът стига за красив дизайн. Не стига за три седмици програмиране на анимации. Така сайтът излиза с един учтив fade-in и обещание готините неща да влязат във втория етап. Вторият етап така и не идва.

Другият път е плъгин за анимации или панелът с ефекти на някой page builder. Бързи са и всички изглеждат еднакво. Освен това обикновено влачат тежък скрипт на всяка страница, независимо дали на нея нещо се движи. Резултатът е сайт, който се зарежда по-бавно и пак се усеща като шаблон.

Години наред стоях в тази ножица. Направих SiteFX, за да я затворя.

02

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

Изработил съм над 300 сайта от 2018 г. насам и все правех едни и същи неща. Падащият код зад behub.dev. HUD-ът в стил снимачна площадка на World Wide Stunts, с таймкод и наслагвания като от камера. Заглавията, които се декодират от шума в Cyberpunk режима на този сайт. Курсори със захващане, кинетични заглавия, плавен скрол, който не се бори с всичко останало на страницата.

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

Това е правилото зад SiteFX. Всеки модул е започнал живота си на истински клиентски сайт. Нито един не е демо, което работи само в демо. И всеки ефект идва като един файл с писмен договор: какво му трябва, какво струва и какво оставя след себе си.

03

Един атрибут, един script таг

Тук няма React и няма build стъпка. Добавяте един script таг към страницата, после data-fx атрибут на елемента, който искате да раздвижите. Сложете data-fx="split flex" на заглавие и то изплува на мястото си, а после набъбва към курсора по осите за ширина и тежест на вариативен шрифт.

Runtime-ът е чист JavaScript, 8,1 KB след gzip, без зависимости в ядрото. Зарежда всеки ефект само когато страницата го използва, а всеки от тях тежи от 1 до 5 KB. GSAP и Lenis се включват само ако даден ефект наистина има нужда от тях. Работи в чист HTML, Laravel и WordPress и следи промените в DOM, направени от Livewire, Inertia или Turbo, така че ефектите не спират да работят и в сайтове, които сменят страниците си без презареждане.

За една агенция това означава нещо просто. Разработчиците ви не учат фреймуърк. Добавят атрибут.

04

Стелажът

Дванайсет модула, всеки от тях малко, завършено нещо:

• Smooth Scroll. Lenis върху ticker-а на GSAP, така че изглаждането и сцените при скрол никога не се разминават. Отдолу остава нативният скрол.
• Kinetic Split. Кинетична типография: редове, думи или букви изплуват от собствения си ред и могат да се разгъват по ширината на вариативен шрифт.
• Variable Flex. Буквите набъбват към курсора и дишат, когато той е далеч.
• Decode. Надписите се избистрят от шума, списъците с думи се сменят в цикъл, а истинският текст остава четим за машините.
• Code Rain. Дъжд от истински код вали зад страницата със стъпаловидно прерисуване, а курсорът го сканира, докато минава.
• Particle Field. Ускорител на частици. Курсорът е магнит, кликът е ударна вълна, а скролът вдига оборотите.
• HUD Frame. Таймкод, часовник, координати, телеметрия на живо и самият runtime, който разказва собствените си събития.
• Lock-on Cursor. Персонализиран курсор със захващане: скобите му се затварят около всичко, което може да се използва, и изписват какво е то. Бутоните се накланят към вас.
• Scroll Rail. Скролбарът се превръща във времева линия с маркери за сцените, по която се движите с плъзгане.
• Horizontal Track. Хоризонтален скрол, който можете и да хванете и да хвърлите, а всичко вътре се преизгражда, за да го следва.
• Velocity Marquee. Безкраен текст, който ускорява, обръща посоката и се накланя заедно със скрола.
• Scroll Scenes. Интеракции в стил Webflow като атрибути: разкриващи се елементи, паралакс, броячи и изчертаване на линии.

05

Сайтът е демото

Не исках да правя страница с GIF-ове. Библиотека с анимации, на която ѝ трябва видео, за да се докаже, вече е загубила спора, затова sitefx.app изпълнява всичко, което продава, на живо, на страницата, която четете.

Започва с boot секвенция, после ви пуска на хоризонтална писта от десет сцени. Можете да скролвате през нея или да хванете страницата и да я хвърлите. На началния екран задръжте върху колайдера, за да го заредите, после го пуснете. Менюто е терминална команда. Всеки екран стои в HUD, който показва кадрите в секунда, колко ефекта работят и как runtime-ът записва собствените си събития, докато се случват.

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

06

Не оставя следа

Небрежното движение е по-лошо от липсата на движение. Забавя сайтовете, завива свят на хората и се пречка на клавиатурата. Затова скучните части получиха толкова внимание, колкото и красивите.

Всеки ефект уважава настройката за намалено движение на устройството на посетителя. Всеки ефект пази истинския текст в страницата, така че екранните четци и търсачките четат нормално изречение, докато човекът гледа как буквите долитат. Canvas елементите заспиват, когато са извън екрана. За посетителите, поискали по-малко движение, не се изпълнява нищо, а изключването на движението превръща страницата в спокойна, статична версия на самата нея.

Сайтът има цяла сцена за това, Конзолата: показва на живо всеки работещ екземпляр, а един превключвател премахва всичко пред очите ви. „Не оставя следа“ не е слоган. Можете да го проверите сами.

За агенциите това е по-важно, отколкото изглежда. Когато един ефект може да се махне чисто, спокойно можете да го пробвате. Можете да го добавите за питч и да го извадите на другия ден, без да остане нищо в кода на клиента.

07

Безплатен AI промпт за всеки ефект

Най-любопитно ми е да видя как хората ще използват точно това.

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

Така работя и аз. Всеки сайт, който правя днес, е кодиран с AI, с човешко докосване и човешки дизайн, и се убедих, че стойността на добрия промпт е в опита, вложен в него. AI пише кода. Да знаеш какво се чупи на истински сайт на истински телефон — това е частта, която отне години.

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

08

Ясни цени

На стелажа няма „свържете се с нас за оферта“. Цените са в евро, без ДДС:

• Безплатно. Демо на живо и AI промпт за всеки ефект, за питчове и лична работа.
• Отделен ефект, €39 еднократно. Един ефект, ваш завинаги, за един разработчик, с 12 месеца обновявания.
• Studio, €249 на година. Всичките дванайсет ефекта и всеки нов, за екип до 5 разработчици.
• Agency, €690 на година. Всичко от Studio за екип до 15 разработчици, с white-label права и ранен достъп до скинове.

Всеки платен лиценз покрива неограничен брой клиентски проекти. Един лиценз Studio се изплаща още първия път, когато спести на разработчик един следобед.

09

Когато ви трябва нещо по поръчка

Стелажът покрива повечето проекти. Някои брандове обаче заслужават собствен свят и тук идва ред на работата по поръчка.

Ефект по поръчка започва от €1500 и отнема два-три дни. Пълен скин за сайт започва от €4500 и отнема седем до десет дни: boot секвенция, HUD, курсор и сцени, проектирани по собствената история на клиента, независимо дали това е снимачна площадка, летище или терминал. Включва се без преизграждане, точно както работи Cyberpunk режимът на този сайт. А ако просто ви трябват опитни ръце за онези части на сайта, които се движат, white-label дните са €640 на ден, във вашия стек и под вашето име.

10

Какво бих пробвал първо

Ако имате агенция, вземете следващия питч на бюрото си и пробвайте следното. Добавете Smooth Scroll, Kinetic Split на главното заглавие и Lock-on Cursor. Това са три атрибута. Покажете на клиента тази версия до плоската и вижте за коя от двете ще задава въпроси.

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

Добрият дизайн, който се движи добре, се усеща като друг продукт.

11

Отворете стелажа

Всичко е на живо на sitefx.app. Отворете стелажа, включвайте и изключвайте модулите, мятайте страницата насам-натам и заредете колайдера. После вижте колко струва всеки ефект.

Студиата и агенциите получават ранен достъп първи, така че ако правите сайтове за клиенти, сега е добър момент да погледнете. А ако предпочитате първо да разгледате всичко, казусът SiteFX съдържа пълна видео обиколка.

Давайте. Направете нещо, което се усеща скъпо.