# Caleidoscópio Uma tela que roda efeitos visuais escritos em GLSL, como campos de estrelas e vórtices, e reage ao mouse. > Caleidoscópio é um componente do THM Componentes que roda shaders GLSL no formato do ShaderToy direto na página, em WebGL2. Você cola o código do efeito, e o componente cuida de tempo, resolução, mouse e toque, além de ajustes de matiz, saturação, brilho e velocidade. Serve para fundos e efeitos sob medida a partir de shaders prontos. - Categoria: Efeitos especiais - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Pesado: WebGL ou simulação; um por página, carregado sob demanda - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4, WebGL, OGL - Interação: Mouse, Toque - URL: https://vibecode.thmtecnologia.com/componentes/caleidoscopio/ ## 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 ```text 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. ## Componentes relacionados - [Crisol](https://vibecode.thmtecnologia.com/componentes/crisol/): Seu HTML de verdade passa por um efeito gráfico da placa de vídeo, como ondas de água, e segue clicável. - [Micélio](https://vibecode.thmtecnologia.com/componentes/micelio/): Fios finos de luz azul se ramificam a partir de nós brilhantes sobre fundo preto, como neurônios acesos no escuro. - [Arenito](https://vibecode.thmtecnologia.com/componentes/arenito/): Uma escultura abstrata de camadas finas flutua e se retorce num céu claro, iluminada por um sol. - [Fliperama](https://vibecode.thmtecnologia.com/componentes/fliperama/): Transforma uma foto em padrão de pontinhos de poucas cores, com cara de jogo antigo ou de impressão retrô. - [Claquete](https://vibecode.thmtecnologia.com/componentes/claquete/): Sequência de fotos que troca de imagem com ondas, pixels, redemoinho, queima, glitch ou círculo. --- 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.