ShaderGradient делает настраиваемые живые 3D-градиенты. Он есть в виде пакета для React, пакета для Vue и Nuxt, плагина для Figma и компонента для Framer.
Это библиотека кода, а не навык для агента: код, который её использует, пишет ваш ИИ-агент.
В README указана лицензия MIT, хотя отдельного файла лицензии в репозитории нет. На 28 октября 2026 года у него было около 3000 звёзд на GitHub.
Что он делает
- Рендерит градиент как 3D-форму — плоскость, сферу или водную гладь, — поэтому он движется и ловит свет.
- Вы выбираете три цвета и настраиваете скорость, силу, плотность, зернистость, освещение и угол камеры.
- Градиент можно собрать на сайте ShaderGradient и скопировать его настройки в виде ссылки. Компонент умеет загружать градиент прямо по этой ссылке.
- Можно загружать градиент только тогда, когда он появляется на экране при прокрутке.
Что стоит знать заранее
Версия для React построена на React Three Fiber и Three.js, то есть добавляет на страницу 3D-движок. Страница становится тяжелее, чем с обычным CSS-градиентом, поэтому проверьте скорость загрузки, особенно на телефонах. Важны и версии: для App Router в Next.js 15, по словам README, нужен React Three Fiber 9 с React 19.
Как установить
Для React установите пакет и его peer-зависимости:
npm i @shadergradient/react @react-three/fiber three three-stdlib camera-controls
npm i -D @types/threeЗатем соберите градиент на shadergradient.co, скопируйте ссылку и попросите агента поставить его за первый экран. В Figma и Framer можно вместо этого использовать плагин и компонент, без кода.