ruucm/shadergradient

Что это?

Ключевые возможности

• 01Создаёт анимированные 3D-градиенты с мешами plane, sphere и waterPlane.
• 02Позволяет настраивать через props цвета, скорость анимации, силу и частоту искажения.
• 03Загружает настройки из URL, скопированного из онлайн-конфигуратора.
• 04Поддерживает Vue 3 и Nuxt через @shadergradient/vue с canvas, совместимым с SSR.
• 05Предлагает плагин для Figma и компонент для Framer, которые можно использовать в инструментах дизайна.

Сценарии использования

• Добавить анимированный градиентный фон в hero-блок лендинга на React или Next.js.
• Повторно использовать градиент, созданный на сайте, в приложении на Vue или Nuxt.
• Создавать градиентную графику в макетах Figma или Framer.

Быстрый старт

1. 1

   Установите React renderer и его peer dependencies

   npm i @shadergradient/react @react-three/fiber three three-stdlib camera-controls
2. 2

   Установите определения типов Three.js

   npm i -D @types/three
3. 3

   Отобразите ShaderGradient внутри ShaderGradientCanvas в приложении, как показано в примере использования в README

Что важно знать

• !В проекте не указана лицензия, поэтому права на повторное использование неясны.
• !Для Next.js 15 App Router требуются React 19 и @react-three/fiber v9, поскольку v8 несовместима.

Темы

Частые вопросы

Что такое shadergradient?

Настраиваемый рендерер анимированных 3D-градиентов для React на Three.js и React Three Fiber; доступны версии для Vue, Framer и Figma. Shader Gradient — набор компонентов для создания анимированных 3D-фонов с градиентами. В основной пакет @shadergradient/react входят рендерер ShaderGradient и обёртка ShaderGradientCanvas на базе React Three Fiber и Three.js. Внешний вид градиента настраивается через props: можно выбрать тип меша (plane, sphere, waterPlane), цвета, скорость анимации, силу и частоту искажения, освещение и параметры камеры.

shadergradient можно использовать бесплатно? Какая у него лицензия?

У shadergradient не указана лицензия. Код открыт, но без лицензии нет явного разрешения на его использование — уточните у автора, прежде чем на него полагаться.

shadergradient всё ещё поддерживается?

Обновлялся за последние 6 месяцев. Последний коммит в shadergradient — 23 сент. 2026 г..

Для чего можно использовать shadergradient?

Добавить анимированный градиентный фон в hero-блок лендинга на React или Next.js. Повторно использовать градиент, созданный на сайте, в приложении на Vue или Nuxt. Создавать градиентную графику в макетах Figma или Framer.

Как установить shadergradient?

Установите React renderer и его peer dependencies: npm i @shadergradient/react @react-three/fiber three three-stdlib camera-controls Установите определения типов Three.js: npm i -D @types/three Отобразите ShaderGradient внутри ShaderGradientCanvas в приложении, как показано в примере использования в README

Где скачать shadergradient?

Исходный код и инструкции по установке — на GitHub: https://github.com/ruucm/shadergradient