Repolode
Предложить
DavidHDev

DavidHDev/canvas-ui

Библиотека из 35 эффектов для canvas, которые можно скопировать в проект: жидкость, стекло, огонь и другие эффекты поверх живого HTML.

Открыть на GitHubСайт
Звёзды
5,346
Форки
273
Открытые issues
4
Последний коммит
в прошлом месяце

Что это?

Canvas UI — коллекция креативных визуальных компонентов, отрисовываемых на canvas. Эффекты вроде симуляции жидкости, искажений стекла, огня, глитча и 3D-сцен работают поверх живого интерактивного HTML страницы: текст остаётся выделяемым, а по ссылкам можно переходить. Компоненты доступны для React, Solid, Preact, Vue, Svelte и ванильного JavaScript.

Каждый компонент устанавливается через shadcn CLI, который копирует его исходный код в папку компонентов самого проекта, чтобы его можно было редактировать, вместо добавления зависимости-пакета. Для каждого эффекта есть сборка на WebGL (чистый WebGL2 с GLSL, а для 3D-эффектов — ещё и three.js) и сборка на WebGPU с использованием vgpu и WGSL. Там, где HTML-in-canvas недоступен, HTML-эффекты переключаются на GPU-оверлеи, а обёрнутый контент продолжает отображаться.

В проект также входят реестр MCP, через который AI-ассистенты могут просматривать и устанавливать компоненты, и сайт документации с интерактивной песочницей.

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

  • 0135 эффектов: жидкость, огонь, стекло, ретро-глитч, частицы и 3D-объекты
  • 02Компоненты для React, Solid, Preact, Vue, Svelte и ванильного JavaScript
  • 03Сборки рендереров на WebGL (GLSL) и WebGPU (WGSL через vgpu)
  • 04Исходный код копируется в проект через реестр, совместимый с shadcn
  • 05Обёрнутый контент остаётся живым и интерактивным под эффектом
  • 06Поддержка MCP: AI-ассистенты могут находить и устанавливать компоненты

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

  • Добавить эффект жидкости или стекла в hero-блок маркетинговой посадочной страницы
  • Придать портфолио или сайту с акцентом на дизайн интерактивную визуальную выразительность
  • Добавить ретро-глитч или ASCII-линзу в креативный веб-проект
  • Отобразить модель GLB или SVG как 3D-сцену в приложении на React или Vue

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

  1. 1

    Если вы ещё не настроили shadcn, выполните команду shadcn init

    npx shadcn@latest init
  2. 2

    Добавьте компонент, например Liquid for React

    npx shadcn@latest add @canvas-ui/liquid-react
  3. 3

    Оберните страницу этим компонентом в коде

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

  • В README указано, что лицензия — MIT с Commons Clause, которая ограничивает продажу программного обеспечения, тогда как в метаданных не указана обнаруженная лицензия.
  • Большинство эффектов зависят от экспериментального API HTML-in-canvas; в остальных случаях используются альтернативы с наложением через GPU.
  • Для сборок WebGPU нужны современные браузеры, например Chrome или Edge 113 и новее, Safari 26 и новее либо Firefox 141 и новее.

В подборках

Фронтенд-фреймворки и UI-компоненты

Темы

#canvas#webgl#webgpu#shaders#ui-components#creative-coding#animation#react#component-library#components

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

Что такое canvas-ui?
Библиотека из 35 эффектов для canvas, которые можно скопировать в проект: жидкость, стекло, огонь и другие эффекты поверх живого HTML. Canvas UI — коллекция креативных визуальных компонентов, отрисовываемых на canvas. Эффекты вроде симуляции жидкости, искажений стекла, огня, глитча и 3D-сцен работают поверх живого интерактивного HTML страницы: текст остаётся выделяемым, а по ссылкам можно переходить. Компоненты доступны для React, Solid, Preact, Vue, Svelte и ванильного JavaScript.
canvas-ui можно использовать бесплатно? Какая у него лицензия?
canvas-ui распространяется с открытым исходным кодом под лицензией Other. Перед использованием в коммерческих продуктах проверьте условия лицензии.
canvas-ui всё ещё поддерживается?
Обновлялся за последние 6 месяцев. Последний коммит в canvas-ui — 3 окт. 2026 г..
Для чего можно использовать canvas-ui?
Добавить эффект жидкости или стекла в hero-блок маркетинговой посадочной страницы Придать портфолио или сайту с акцентом на дизайн интерактивную визуальную выразительность Добавить ретро-глитч или ASCII-линзу в креативный веб-проект Отобразить модель GLB или SVG как 3D-сцену в приложении на React или Vue
Как установить canvas-ui?
Если вы ещё не настроили shadcn, выполните команду shadcn init: npx shadcn@latest init Добавьте компонент, например Liquid for React: npx shadcn@latest add @canvas-ui/liquid-react Оберните страницу этим компонентом в коде
Где скачать canvas-ui?
Исходный код и инструкции по установке — на GitHub: https://github.com/DavidHDev/canvas-ui

Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.

Похожие проекты

MengTo / threeui

Открытый каталог интерактивных UI-компонентов на Three.js/WebGL без входа в систему, с интерактивными превью и полным исходным кодом на React.

Фронтенд и UI#threejs#webgl#react
7,1 тыс.+174 за неделю670HTMLMITАктивно поддерживаетсяОбновлён 2 месяца назад

paper-design / shaders

Шейдеры для canvas в стиле WebGL без зависимостей — для фонов и текстур сайтов; подключаются через npm к React или vanilla JS либо настраиваются визуально в Paper.

Фронтенд и UI#webgl#shaders#react
3,9 тыс.+54 за неделю174TypeScriptApache-2.0Активно поддерживаетсяОбновлён вчера