Como ele é
Na demo, uma página de revista, branca com um painel preto, parece vista através de uma lâmina d'água: textos e linhas ondulam devagar, e cada movimento do mouse solta pequenas ondas que saem do cursor e se acalmam em instantes. O visual final depende do shader que você escrever. O resultado aparece num canvas por cima, enquanto o HTML original fica no lugar, com links, botões e seleção de texto funcionando. A animação pausa quando a área sai da tela ou a aba fica oculta, e congela num quadro quando o sistema pede menos movimento.
Você pode estar procurando isto se pediu algo assim
- aplicar um shader em cima do site inteiro, não só numa imagem
- deixar o texto e os botões da página ondulando como água
- efeito de distorção sobre o HTML de verdade, e não sobre um print
- rodar código do ShaderToy em cima do conteúdo da página
- um jeito de criar meus próprios efeitos de GPU na interface
- página que deforma quando passo o mouse e continua clicável
- experimento visual para mostrar num protótipo ou numa palestra
Também chamado de
- HTML como textura
- HTML-in-Canvas API
- shader sobre HTML
- DOM shader
- efeito WebGL na página
- pós-processamento de HTML
- drawElementImage
Quando usar
- Protótipos e provas de conceito de efeitos visuais sobre a interface
- Criar um efeito de shader próprio sobre um bloco de conteúdo real
- Demos técnicas, palestras e laboratórios de front-end
- Explorar a API experimental HTML-in-Canvas do navegador
Quando evitar
- Sites de cliente em produção: o prompt restringe o uso a protótipos
- Quando um efeito pronto, como Remanso ou Varal, já resolve
- Páginas que já rodam outros efeitos em WebGL
Como pedir para a sua IA
Quero aplicar um shader GLSL estilo ShaderToy sobre um bloco de HTML real do meu protótipo, em WebGL2, com o HTML clicável e acessível por baixo, cópia de reserva quando faltar a API HTML-in-Canvas, pausa fora da tela e quadro parado para movimento reduzido.
Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Crisol
Crisol funciona em qualquer navegador?
A API HTML-in-Canvas ainda é experimental. Quando o navegador não a oferece, Crisol tira uma cópia do conteúdo com os estilos aplicados, passa essa cópia pelo mesmo shader e a refaz quando o HTML muda. Nesse modo, sem WebGL2 o conteúdo aparece normal, sem efeito. O prompt do THM Componentes restringe o uso a protótipos.
Como escrever meu próprio efeito em Crisol?
O shader precisa definir a função mainImage, como no ShaderToy, e recebe o HTML como textura em iChannel0. Crisol também entrega tempo, resolução, posição e velocidade do ponteiro e velocidade da roda do mouse, aceita uniforms próprios e um vertex shader opcional, que deforma a superfície dividida em faixas.
Os links e o texto continuam acessíveis com Crisol?
Sim. Crisol desenha o efeito num canvas oculto para leitores de tela, que não captura cliques, e mantém o HTML original no lugar. Links e botões funcionam no conteúdo real, a seleção de texto aparece destacada por cima do efeito e leitores de tela leem o HTML normalmente.
