# Anáglifo As the mouse moves over the page, red and blue peel away from the content, like a 3D image seen without the glasses. > Anáglifo is an experimental THM Componentes component that applies chromatic aberration to a block of real HTML: as the cursor moves away from the center, red and blue shift in opposite directions and create colored fringes. At the center the image stays clean. It suits experimental heroes with a glitch look. - Category: Special effects - Origin: Adapted from open source under the MIT license, with a ready THM prompt - Load weight: Experimental: uses a browser API still in testing, with an automatic fallback when it is missing - Technology: Vue 3, TypeScript, Tailwind CSS v4, WebGL - Interaction: Mouse, Touch - URL: https://vibecode.thmtecnologia.com/en/components/anaglifo/ ## What it looks like It recalls an old 3D photo seen without the colored-lens glasses. With the cursor resting in the middle of the surface, the content looks normal. Move the mouse toward an edge and the red channel slides toward the pointer while the blue one slides the opposite way, opening colored fringes along the outlines of text and shapes, and the split grows the farther the pointer is from the center. The motion follows the mouse with a slight, smooth lag. When the cursor leaves, the colors gradually settle back together. The maximum split strength is adjustable. ## You may be looking for this if you asked for something like - “colors that split apart when I hover over the headline” - “text with red and blue edges, like a TV glitch” - “that 3D image without the glasses effect on my website” - “make the hero look like a digital glitch that reacts to the cursor” - “a chromatic aberration effect on HTML” - “a VHS or broken screen look controlled by the mouse” ## Also known as chromatic aberration, RGB split, RGB shift, glitch effect, color channel split, anaglyph effect ## When to use - Experimental heroes for studios, agencies and fashion brands - Prototypes for music, gaming or digital culture sites - Concept demos in design or technology talks ## When to avoid - Client production work: it relies on an experimental browser API, as the prompt itself warns - Text people need to read with the mouse nearby, since the fringes tire the eyes ## How to ask your AI ```text Build a hero prototype with WebGL2 chromatic aberration over live HTML: red and blue split apart as the cursor moves away from the center, paused off screen, with a static version for reduced motion and plain HTML without support. ``` 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 Anáglifo ### Does Anáglifo work on phones? In a limited way. Anáglifo uses pointer events, so touching and holding the surface splits the colors toward your finger, and lifting it lets everything settle back. Without a roaming cursor, though, the effect shows less. It needs WebGL2, and the THM Componentes prompt asks for a mobile test. ### Can I use Anáglifo in production? It is not recommended. Anáglifo relies on an experimental browser API to draw HTML into a canvas, with a capture of the content as an automatic fallback. The THM Componentes prompt says to use it only in prototypes, never in client production, and the effect also needs the base Crisol component in your project. ### Does Anáglifo respect reduced motion settings? Partly, in its own code. The shared renderer behind Anáglifo pauses the animation loop when the system asks for reduced motion and when it is off screen, but a new frame is still drawn when the pointer moves. The THM Componentes prompt asks your AI for a fully static version in that case. ## 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. - [Chuvisco](https://vibecode.thmtecnologia.com/en/components/chuvisco/): The image shakes, breaks into strips and splits its colors like a faulty TV signal. - [Gralha](https://vibecode.thmtecnologia.com/en/components/gralha/): Slices of the headline show up shifted sideways with red and cyan trails, like a screen on the fritz. - [Remanso](https://vibecode.thmtecnologia.com/en/components/remanso/): Your page content looks like it sits under a thin layer of water and ripples wherever the mouse goes. - [Ponto-cruz](https://vibecode.thmtecnologia.com/en/components/ponto-cruz/): The real page content is redrawn live as ASCII art, with characters that mimic light and shadow. --- 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).