Оживить первый экран лендинга, добавить переливающийся металл в портфолио или сделать фон, который реагирует на движение мыши. Для таких задач есть Shaders — библиотека готовых визуальных эффектов для сайтов. Теперь её исходный код открыт, а больше 200 компонентов доступны под лицензией MIT.

Внутри — стекло, жидкие градиенты, свет, искажения, переходы и следы за курсором. В видео хорошо видно, что из этого можно собрать.

Эффекты работают на WebGPU: изображение рисует графический процессор. Каждый эффект оформлен как компонент. Их можно накладывать друг на друга, смешивать, добавлять маски и менять параметры.

Писать всё вручную необязательно. У Shaders есть бесплатный визуальный редактор: собираете композицию, настраиваете движение и экспортируете код для своего проекта. Поддерживаются React, Vue, Svelte, Solid и обычный JavaScript. Для редактора и экспорта нужен аккаунт.

Для тех, кто делает сайты с ИИ, предусмотрены отдельный скилл и MCP-сервер. Их можно подключить к Codex, Claude Code и другим помощникам, чтобы агент находил, устанавливал и редактировал эффекты.

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

Главное — вовремя остановиться: один хороший эффект обычно убедительнее десяти, которые одновременно требуют внимания.

Посмотреть эффекты · Исходники и условия использования

Следующий шаг

Как на самом деле проектировать дизайн с ИИ — как связать визуальные решения с задачей сайта и работой над интерфейсом.

Если делаете сайт с ИИ, можно обсудить, где движение помогает вашему интерфейсу и как встроить его в работу над проектом.

Если захотите обсудить, как это применить у себя или в команде — пишите в Telegram @pimenov