# Caleidoscópio

A canvas that runs visual effects written in GLSL, such as star fields and vortexes, and reacts to the mouse.

> Caleidoscópio is a THM Componentes component that runs ShaderToy-format GLSL shaders right on the page, in WebGL2. You paste the effect code, and it handles time, resolution, mouse and touch input, plus hue, saturation, brightness and speed controls. It suits custom backgrounds and effects built from ready-made shaders.

- Category: Special effects
- Origin: Adapted from open source under the MIT license, with a ready THM prompt
- Load weight: Heavy: WebGL or simulation; one per page, loaded on demand
- Technology: Vue 3, TypeScript, Tailwind CSS v4, WebGL, OGL
- Interaction: Mouse, Touch
- URL: https://vibecode.thmtecnologia.com/en/components/caleidoscopio/

## What it looks like

It is a rectangular window where the shader code itself paints every pixel on every frame. What you see depends on the shader you paste: in the demo, you can switch between a star field traveling through space, a vortex and a black hole. By default, the effect responds to mouse clicks and drags; in hover mode, it follows the cursor all the time. Hue, saturation and brightness adjust the colors of any effect, and an optional grain layer adds a film texture. When it is off screen or the tab is hidden, the animation pauses by itself.

## You may be looking for this if you asked for something like

- “use a ShaderToy effect as my website background”
- “an animated galaxy background that turns when I drag the mouse”
- “paste some GLSL code and see the effect running on the page”
- “a heavy demoscene-style visual at the top of the site”
- “a trippy animated background where I can change the colors”
- “run a fragment shader in Vue without building everything from scratch”

## Also known as

GLSL shader player, GLSL shader, fragment shader, WebGL shader, shader background, shader canvas

## When to use

- A hero background with a hand-picked shader effect
- Launch, event or music pages that call for visual impact
- Prototypes to test shaders before turning them into a custom component
- Portfolios of creatives and studios working with generative art

## When to avoid

- Pages that already run another WebGL effect, since the prompt allows at most one per page
- Audiences on basic devices, unless you lower resolution and frame rate
- Shaders that depend on textures or extra buffers, which this viewer does not provide

## How to ask your AI

```text
I want to run a ShaderToy-format GLSL shader as the hero background in WebGL2, with a hue shift toward my brand colors, lower resolution and frame rate on mobile, a pause when off screen, a still image for reduced motion and a fallback for browsers without WebGL2.
```

With THM Componentes, you paste the full prompt from the catalog together with this component's code, and the AI reproduces this exact effect instead of improvising.

## Questions about Caleidoscópio

### Does every ShaderToy shader work in Caleidoscópio?

Single-pass shaders that define the mainImage function and use the standard time, resolution, frame, date and mouse inputs work. Caleidoscópio does not declare texture inputs or extra buffers, so effects that depend on them need adapting. Custom uniforms can be passed through the uniforms prop.

### Will Caleidoscópio slow down my site?

It can, which is why it is rated Heavy in THM Componentes: the cost depends on the shader, since it runs for every pixel on every frame. Caleidoscópio pauses by itself off screen and when the tab is hidden, and offers props to cap the frame rate and lower the resolution. The prompt asks for on-demand loading and only one such effect per page.

### Does Caleidoscópio work on phones?

It works on devices with WebGL2. Caleidoscópio understands taps and finger drags, but it blocks page scrolling while the finger is on it; for a background, turn off the interactive prop so touches pass through. Without WebGL2, it emits an error event, and your code should show an image instead.

## Related components

- [Crisol](https://vibecode.thmtecnologia.com/en/components/crisol/): Your real HTML runs through a graphics card effect, like ripples on water, and stays clickable.
- [Micélio](https://vibecode.thmtecnologia.com/en/components/micelio/): Thin threads of blue light branch out of bright nodes on a black backdrop, like neurons glowing in the dark.
- [Arenito](https://vibecode.thmtecnologia.com/en/components/arenito/): An abstract sculpture of thin layers floats and twists in a bright sky, lit by a sun.
- [Fliperama](https://vibecode.thmtecnologia.com/en/components/fliperama/): Turns a photo into a pattern of dots in a few colors, like an old video game or a retro print.
- [Claquete](https://vibecode.thmtecnologia.com/en/components/claquete/): A photo sequence that changes images with ripples, pixels, a swirl, a burn, a glitch or a circle.

---
THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).