Repolode
Enviar
DavidHDev

DavidHDev/canvas-ui

Biblioteca para copiar para o projeto, com 35 efeitos de UI em canvas independentes de framework, como líquido, vidro e fogo, que funcionam sobre conteúdo HTML ao vivo.

Ver no GitHubSite
Estrelas
5,346
Forks
273
Issues abertas
4
Último commit
mês passado

O que é?

Canvas UI é uma coleção de componentes visuais criativos desenhados em canvas. Efeitos como simulação de fluidos, distorção de vidro, fogo, glitch e cenas 3D são aplicados sobre o HTML ao vivo e interativo da página, mantendo o texto selecionável e os links clicáveis. Há componentes para React, Solid, Preact, Vue, Svelte e JavaScript puro.

Cada componente é instalado com o shadcn CLI, que copia seu código-fonte para a pasta de componentes do próprio projeto, permitindo editá-lo em vez de adicioná-lo como dependência de pacote. Cada efeito é fornecido em uma versão WebGL (WebGL2 puro com GLSL, além de three.js para os efeitos 3D) e em uma versão WebGPU que usa vgpu e WGSL. Onde não há suporte a HTML-in-canvas, os efeitos HTML usam overlays de GPU como alternativa, e o conteúdo envolvido continua sendo renderizado.

O projeto também inclui um registro MCP para que assistentes de IA possam encontrar e instalar componentes, além de um site de documentação com um playground interativo.

Recursos principais

  • 0135 efeitos que incluem fluidos, fogo, vidro, glitch retrô, partículas e objetos 3D
  • 02Componentes para React, Solid, Preact, Vue, Svelte e JavaScript puro
  • 03Versões de renderização WebGL (GLSL) e WebGPU (WGSL via vgpu)
  • 04Código-fonte copiado para o projeto por meio de um registro compatível com shadcn
  • 05O conteúdo envolvido continua ativo e interativo sob o efeito
  • 06Suporte a MCP para que assistentes de IA encontrem e instalem componentes

Casos de uso

  • Adicionar um efeito de destaque líquido ou de vidro à página inicial de uma landing page de marketing
  • Dar um acabamento visual interativo a um portfólio ou site voltado a design
  • Aplicar um efeito glitch retrô ou uma lente ASCII a um projeto web criativo
  • Renderizar um modelo GLB ou SVG como uma cena 3D em um app React ou Vue

Início rápido

  1. 1

    Execute shadcn init se ainda não tiver configurado o shadcn

    npx shadcn@latest init
  2. 2

    Adicione um componente, como Liquid for React

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

    Envolva sua página com o componente no código

Antes de usar

  • O README informa que a licença é MIT mais Commons Clause, o que restringe a venda do software, enquanto os metadados não mostram nenhuma licença detectada.
  • A maioria dos efeitos depende da API experimental HTML-in-canvas, com alternativas de sobreposição por GPU em outros casos.
  • As compilações de WebGPU exigem navegadores recentes, como Chrome ou Edge 113 ou posterior, Safari 26 ou posterior, ou Firefox 141 ou posterior.

Em coleções

Frameworks frontend e componentes de interface

Tópicos

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

Perguntas frequentes

O que é canvas-ui?
Biblioteca para copiar para o projeto, com 35 efeitos de UI em canvas independentes de framework, como líquido, vidro e fogo, que funcionam sobre conteúdo HTML ao vivo. Canvas UI é uma coleção de componentes visuais criativos desenhados em canvas. Efeitos como simulação de fluidos, distorção de vidro, fogo, glitch e cenas 3D são aplicados sobre o HTML ao vivo e interativo da página, mantendo o texto selecionável e os links clicáveis. Há componentes para React, Solid, Preact, Vue, Svelte e JavaScript puro.
canvas-ui é gratuito? Qual é a licença?
canvas-ui é open source sob a licença Other. Confira os termos da licença antes de usá-lo em produtos comerciais.
canvas-ui ainda é mantido?
Atualizado nos últimos 6 meses. O último commit de canvas-ui foi em 3 de out. de 2026.
Para que posso usar canvas-ui?
Adicionar um efeito de destaque líquido ou de vidro à página inicial de uma landing page de marketing Dar um acabamento visual interativo a um portfólio ou site voltado a design Aplicar um efeito glitch retrô ou uma lente ASCII a um projeto web criativo Renderizar um modelo GLB ou SVG como uma cena 3D em um app React ou Vue
Como instalar canvas-ui?
Execute shadcn init se ainda não tiver configurado o shadcn: npx shadcn@latest init Adicione um componente, como Liquid for React: npx shadcn@latest add @canvas-ui/liquid-react Envolva sua página com o componente no código
Onde consigo canvas-ui?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/DavidHDev/canvas-ui

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados