Жидкое полотно

Приветик! В общем, ловите апдейт: я тут на финишной прямой со своим портфолио. Осталось дописать буквально одну страницу, но то, что уже готово — это просто какой-то запредельный космос по технологиям.

Серьезно, если бы кто-то заказывал такую интерактивную красоту у топовой креативной digital-студии, ребятам выкатили бы ценник минимум баксов в пять тысяч (без шуток, эксклюзивный фронтенд нынче стоит как крыло самолета). А тут — всё сама, ручками.

Помните, я как-то заикалась, что планирую закодить нечто подобное? Так вот, это оно и есть. Главный вывод: я последовательный человек и слов на ветер не бросаю. Сказала — заделиверила.

Короче, зацените сами:
https://stephaniia-bubnova.web.app/

только дисклеймер: заходите лучше с компа, ниже объясню почему.

Что там под капотом (разжевываю на пальцах)
Обычно для интерактивных 3D-сайтов все тащат тяжелые готовые движки типа Three.js. Но это путь для слабаков, сайт начинает весить тонну и лагать. Я пошла по хардкору и написала всё на чистом, голом JavaScript и сыром WebGL, вообще без сторонних библиотек.

Вся магия тут работает на низком уровне. Я сама написала кастомные микропрограммы — шейдеры на языке GLSL (он похож на Си). Фишка в том, что этот код минует обычный процессор компа и компилируется напрямую в вашем GPU (видеокарте). Из-за этого миллиарды математических расчетов щелкаются как орешки, выдавая железные 60 кадров в секунду без единого фриза.

Как затестить интерактив (инструкция по залипанию):

   1. Просто поводите мышкой по экрану. Мой код разбивает фоновое фото на невидимую сетку из сотен полигонов. Вертексный шейдер на лету считает расстояние от курсора до пикселей. Картинка под курсором начинает тянуться и деформироваться, как жидкое стекло или жидкий кристалл.

   2. Наведите курсор на имя. Фрагментный шейдер тут же врубает кастомный 3D-эффект хроматической аберрации. Шрифты красиво расслаиваются на циановый и маджентовый каналы — получается тот самый неоновый анаглиф-эффект. На десктопе с кастомным курсором это выглядит максимально залипательно.

   3. Попробуйте сделать скролл (или свайп). В этот момент включается рассчитанная мной хаотическая волновая функция. Картинку буквально разрывает на куски по векторам синуса и косинуса, а потом эта куча фрагментов элегантно и плавно собирается обратно в идеальный портрет. Вся цветовая гамма при этом пересчитывается попиксельно, превращаясь в благородный кинематографичный монохром.

А теперь почему лучше смотреть с десктопа: мобильные браузеры — те еще капризные создания, их видеочипы жестко зажимают частоту обновления WebGL, чтобы телефон не превратился в обогреватель, поэтому на смартфоне вы просто физически не прочувствуете всю эту плавность «живого полотна».

В общем, кликайте, водите мышкой, тестите скролл. Как вам такой уровень чистого креативного кода?

Стефания

Моя нейросеть:
https://stephqnn-6f23f.web.app/

Мои официальные ресурсы:
https://t.me/stefanias_world
https://stephaniia-bubnova.web.app/
yandex.ru/rythm/profile/@019d3b535e807367b553f01d479beaef
https://t.me/+xGPeaaQyGIJjZGUy