Shaders
3,4kПереливающиеся градиенты, стекло, металл и шлейф за курсором для сайта, собранные из готовых кусочков, как из конструктора. Эффект можно настроить мышкой в редакторе или попросить Claude Code, Cursor или Codex вставить его самим. Бесплатно, MIT.
Сами не запускали: описание по документации и репозиторию.
В цифрах
Что это
Красивый живой фон на сайте обычно рисует видеокарта по маленькой программе, шейдеру, и писать такие программы умеют немногие. Shaders прячет эту часть: больше 200 эффектов (градиенты, шум, стекло, свет, искажения, переходы, шлейф за курсором) подключаются как обычные компоненты страницы и складываются слоями друг на друга. Один пакет работает с React, Vue, Svelte, Solid и чистым JavaScript, а в бесплатном редакторе на shaders.com эффект можно собрать на холсте, как макет в Figma, и выгрузить готовый код.
От React Bits по соседству в каталоге он отличается тем, что это не набор отдельных готовых блоков, а конструктор: слои смешиваются, маскируются и вкладываются друг в друга. И он сразу рассчитан на работу с агентом: в репозитории лежит скилл, который объясняет агенту библиотеку, и MCP-сервер, через который Claude Code, Cursor или Codex сами найдут, поставят и поправят нужный эффект.
Как устроено
<Shader> рисует холст, а эффекты внутри него становятся слоями: читаются сверху вниз и смешиваются на видеокарте.connect, install, search по описанию, update подтягивает то, что ты поменял в редакторе.npx shaders skill ставит агенту скилл с описанием библиотеки, npx shaders@latest install-mcp настраивает Claude Code, Cursor, Codex, Windsurf и Copilot. Работает и на бесплатном аккаунте.<CustomShader> рядом с остальными.Знать до установки
onUnavailable.disableTelemetry.
Комментарии