PLUSH — beauty-лендинг с кастомным WebGL-интерактивом

PLUSH — авторский concept project вымышленного beauty-бренда. Задача — с нуля создать бренд и его digital-язык: визуальную концепцию, структуру и лендинг, в котором характер бренда раскрывается не только через дизайн, но и через поведение интерфейса. Главная идея — сделать сайт тактильным: чтобы «плюшевость» PLUSH ощущалась прямо через экран, а ключевой визуальный образ бренда стал интерактивным.

Сайт разработан с нуля без CMS, конструкторов и готовых UI-шаблонов. Я собрала визуальную систему бренда, адаптивный интерфейс и motion-сценарии на HTML, CSS и JavaScript.

Центральная механика проекта — интерактивный wordmark PLUSH с собственным WebGL-мехом. По силуэту логотипа генерируется до ~160 000 отдельных «волосков», которые рассчитываются на GPU и реагируют на движение курсора и touch. Для эффекта написаны собственные vertex- и fragment-шейдеры — без Three.js и готовых WebGL-библиотек.

Дополнительно реализованы плавный скролл на Lenis, parallax, reveal-анимации, динамический marquee, pointer glow и интерактивное поведение карточек. Для мобильных устройств отдельно настроены touch-механика и нагрузка WebGL; предусмотрены Save Data и prefers-reduced-motion.

В результате получился не просто визуальный beauty-лендинг, а цельный digital-концепт, где айдентика бренда продолжается в самом поведении интерфейса.

Создан полностью рабочий интерактивный лендинг PLUSH, в котором визуальная идея бренда стала частью самого интерфейса.

Ключевой результат проекта — собственная WebGL-механика интерактивного wordmark: до ~160 000 отдельных элементов рендерятся на GPU, реагируют на курсор и touch и формируют эффект живого плюшевого меха. Механика работает без Three.js и готовых графических движков, на собственных GLSL-шейдерах.

Сайт адаптирован под desktop и mobile, для мобильных устройств оптимизирована нагрузка и реализовано отдельное touch-взаимодействие. Помимо WebGL-графики собрана цельная motion-система: плавный скролл, parallax, reveal-анимации, marquee и интерактивные состояния элементов.

В итоге PLUSH стал полноценным proof of concept того, как айдентику бренда можно продолжить в коде: не просто оформить интерфейс в заданной стилистике, а превратить сам характер бренда в пользовательский опыт.