paper-design/shaders

Что это?

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

• 01Компоненты шейдеров для canvas без зависимостей
• 02Доступны npm-пакеты для React и vanilla JavaScript
• 03Визуальная настройка в Paper с экспортом в код
• 04Настройка цветов, искажений, закручивания, скорости и масштаба
• 05Анимация по желанию

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

• Добавление анимированных градиентных фонов на сайт компании
• Маскировка фигур или текста текстурами шейдеров
• Создание прототипов визуальных стилей в Paper и перенос их в код

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

1. 1

   Установите пакет React

   npm i @paper-design/shaders-react
2. 2

   Или установите пакет vanilla JS

   npm i @paper-design/shaders
3. 3

   Зафиксируйте версию зависимости, поскольку при нумерации версий 0.0.x могут выпускаться несовместимые изменения

4. 4

   Импортируйте шейдерный компонент, например MeshGradient, и используйте его с props colors и style

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

• !В проекте используется нумерация версий 0.0.x, поэтому между релизами могут появляться несовместимые изменения. Версию следует зафиксировать.
• !Поддерживаются только React и vanilla JS; поддержка Vue пока не предусмотрена.

Темы

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

Что такое shaders?

Шейдеры для canvas в стиле WebGL без зависимостей — для фонов и текстур сайтов; подключаются через npm к React или vanilla JS либо настраиваются визуально в Paper. Paper Shaders — набор компонентов шейдеров на основе canvas для добавления на сайты анимированных или статичных текстур, например градиентных фонов, а также шейдерных эффектов-масок для фигур и текста. Библиотека распространяется в виде двух npm-пакетов: @paper-design/shaders для vanilla JavaScript и @paper-design/shaders-react для React. Зависимостей во время выполнения у проекта нет.

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

shaders распространяется с открытым исходным кодом под лицензией Apache-2.0. Перед использованием в коммерческих продуктах проверьте условия лицензии.

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

Активно поддерживается. Последний коммит в shaders — 5 нояб. 2026 г..

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

Добавление анимированных градиентных фонов на сайт компании Маскировка фигур или текста текстурами шейдеров Создание прототипов визуальных стилей в Paper и перенос их в код

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

Установите пакет React: npm i @paper-design/shaders-react Или установите пакет vanilla JS: npm i @paper-design/shaders Зафиксируйте версию зависимости, поскольку при нумерации версий 0.0.x могут выпускаться несовместимые изменения Импортируйте шейдерный компонент, например MeshGradient, и используйте его с props colors и style

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

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