# Crisol

Seu HTML de verdade passa por um efeito gráfico da placa de vídeo, como ondas de água, e segue clicável.

> Crisol é um componente do THM Componentes que passa HTML ao vivo por um shader GLSL no estilo ShaderToy, em WebGL2. Usa a API experimental HTML-in-Canvas quando o navegador a oferece e, sem ela, uma cópia do conteúdo. O HTML original segue clicável por baixo. É a base para criar efeitos próprios em protótipos.

- Categoria: Efeitos especiais
- Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM
- Peso no carregamento: Experimental: usa uma API de navegador ainda em teste, com alternativa automática quando ela não existe
- Tecnologia: Vue 3, TypeScript, Tailwind CSS v4, WebGL
- Interação: Mouse, Toque
- URL: https://vibecode.thmtecnologia.com/componentes/crisol/

## 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

```text
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.

## Componentes relacionados

- [Remanso](https://vibecode.thmtecnologia.com/componentes/remanso/): O conteúdo da página parece estar sob uma lâmina d'água e solta ondas por onde o mouse passa.
- [Varal](https://vibecode.thmtecnologia.com/componentes/varal/): O conteúdo da página se dobra e ondula devagar, como um pano leve balançando com a brisa.
- [Taquara](https://vibecode.thmtecnologia.com/componentes/taquara/): Ao girar a roda do mouse sobre o bloco, o conteúdo se curva como uma folha de papel e depois volta ao lugar.
- [Anáglifo](https://vibecode.thmtecnologia.com/componentes/anaglifo/): Ao mover o mouse sobre a página, o vermelho e o azul se descolam do conteúdo, como uma imagem 3D vista sem os óculos.
- [Ponto-cruz](https://vibecode.thmtecnologia.com/componentes/ponto-cruz/): O conteúdo real da página é redesenhado ao vivo como arte ASCII, com caracteres que imitam luz e sombra.
- [Caleidoscópio](https://vibecode.thmtecnologia.com/componentes/caleidoscopio/): Uma tela que roda efeitos visuais escritos em GLSL, como campos de estrelas e vórtices, e reage ao mouse.

---
THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.