Como ele é
É uma janela retangular em que o próprio código do shader pinta cada pixel a cada quadro. O que aparece depende do shader que você colar: na demo, dá para alternar entre um campo de estrelas viajando pelo espaço, um vórtice e um buraco negro. Por padrão, o efeito responde ao clique e ao arraste do mouse; no modo hover, ele acompanha o cursor o tempo todo. Matiz, saturação e brilho ajustam as cores de qualquer efeito, e uma camada opcional de granulado dá textura de filme. Fora da tela ou com a aba oculta, a animação pausa sozinha.
Você pode estar procurando isto se pediu algo assim
- usar um efeito do ShaderToy como fundo do meu site
- fundo de galáxia animada que gira quando arrasto o mouse
- colar um código GLSL e ver o efeito rodando na página
- efeito visual pesado tipo demoscene no topo do site
- fundo psicodélico animado em que eu possa trocar as cores
- rodar shader de fragmento no Vue sem montar tudo do zero
Também chamado de
- shader de fragmento
- GLSL shader
- fragment shader
- shader WebGL
- fundo em shader
- shader background
- visualizador de shader
Quando usar
- Fundo de hero com um efeito de shader escolhido a dedo
- Páginas de lançamento, eventos ou música que pedem impacto visual
- Protótipos para testar shaders antes de transformar em componente próprio
- Portfólio de criativos e estúdios que trabalham com arte generativa
Quando evitar
- Páginas que já têm outro efeito em WebGL, já que o prompt pede no máximo um por página
- Público com aparelhos simples, sem reduzir a resolução e a taxa de quadros
- Shaders que dependem de texturas ou de buffers extras, que este visualizador não fornece
Como pedir para a sua IA
Quero rodar um shader GLSL no formato ShaderToy como fundo do hero em WebGL2, com ajuste de matiz para as cores da marca, resolução e taxa de quadros reduzidas no celular, pausa fora da tela, imagem estática para movimento reduzido e fallback para navegadores sem WebGL2.
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 Caleidoscópio
Qualquer shader do ShaderToy funciona em Caleidoscópio?
Funcionam os shaders de passada única que definem a função mainImage e usam as variáveis padrão de tempo, resolução, quadro, data e mouse. Caleidoscópio não declara as entradas de textura nem os buffers extras, então efeitos que dependem deles precisam de adaptação. Uniforms próprios podem ser passados pela prop uniforms.
Caleidoscópio deixa o site lento?
Pode deixar, e por isso tem classificação Pesado no THM Componentes: o custo depende do shader, que roda para cada pixel a cada quadro. Caleidoscópio pausa por conta própria fora da tela e com a aba oculta, e tem props para limitar a taxa de quadros e reduzir a resolução. O prompt pede carregamento sob demanda e um único efeito desses por página.
Caleidoscópio funciona no celular?
Funciona em aparelhos com WebGL2. Caleidoscópio entende toque e arraste do dedo, mas bloqueia a rolagem da página enquanto o dedo está sobre a área do efeito; para um fundo, desligue a prop interactive, que deixa o toque passar. Sem WebGL2, o componente emite um evento de erro, e cabe ao seu código mostrar uma imagem no lugar.
