shader-effects-inc/shaders

Что это?

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

• 01Более 200 компонентов с эффектами WebGPU, включая градиенты, шум, стекло и переходы
• 02Одинаковые props и API для React, Vue, Svelte, Solid и JavaScript
• 03Визуальный редактор дизайна с экспортом кода компонентов для фреймворков
• 04CLI для синхронизации выбранных компонентов с кодовой базой с использованием lock-файла
• 05MCP-сервер и agent skill для AI-помощников по написанию кода
• 06Пользовательские компоненты с пиксельным кодом на WGSL

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

• Добавление анимированных градиентных или стеклянных фонов на маркетинговый сайт или лендинг
• Создание прототипов визуальных эффектов в браузерном редакторе и экспорт в приложение на React или Vue
• Поиск и установка эффектов шейдеров AI-агентом для написания кода в существующий проект
• Создание интерактивных эффектов курсора или наведения во фронтенде на Svelte или Solid

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

1. 1

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

   npm install shaders
2. 2

   Импортируйте Shader и компоненты в свой фреймворк (например, React) и отобразите их

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

• !Для использования пресетов Pro, разделов и некоторых функций редактора требуется платный тариф Pro.
• !Редактор дизайна и экспорт связаны с учетной записью shaders.com, которая не относится к пакету с лицензией MIT.
• !Эффекты используют WebGPU, поэтому браузер должен его поддерживать.

Темы

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

Что такое shaders?

Эффекты шейдеров WebGPU в виде готовых компонентов для React, Vue, Svelte, Solid и обычного JavaScript. Shaders — библиотека компонентов, которая превращает визуальные эффекты WebGPU — градиенты, шум, стекло, искажения, переходы, размытие и эффекты курсора — в компоненты для фреймворков. Элемент Shader отображает canvas, а его дочерние компоненты накладываются сверху вниз и смешиваются на GPU. Одни и те же props доступны в версиях для React, Vue, Svelte, Solid и обычного JavaScript.

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

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

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

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

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

Добавление анимированных градиентных или стеклянных фонов на маркетинговый сайт или лендинг Создание прототипов визуальных эффектов в браузерном редакторе и экспорт в приложение на React или Vue Поиск и установка эффектов шейдеров AI-агентом для написания кода в существующий проект Создание интерактивных эффектов курсора или наведения во фронтенде на Svelte или Solid

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

Установите пакет: npm install shaders Импортируйте Shader и компоненты в свой фреймворк (например, React) и отобразите их

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

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