# Voragem A ring of orange and blue light spins around a dark center, like a black hole pulling in cosmic dust. > Voragem is a shader background from THM Componentes that draws a black hole: a tilted ring of light, orange on one side and blue on the other, surrounded by smoky streams spiraling around a dark center. It runs on WebGL2 and works well in concept heroes for tech, science and events. - Category: Backgrounds and atmospheres - 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: None: the effect runs on its own - URL: https://vibecode.thmtecnologia.com/en/components/voragem/ ## What it looks like It resembles the black hole images from science fiction films. In the center there is a dark circle outlined by a thin, bright ring tilted diagonally: the upper right side leans toward orange and red, the lower left toward cyan and blue. Smoke-like wisps of light flow into the ring and keep turning slowly. The animation runs on its own and does not react to the mouse. The empty areas and the center are transparent, so the page color shows through: on black the ring glows in space; on white the look turns pale and milky. ## You may be looking for this if you asked for something like - “a spinning black hole backdrop for a tech site” - “that orange and blue ring of light like in a space movie” - “a dark background with a glowing portal in the middle of the screen” - “something cosmic and mysterious for an event hero” - “a singularity effect with swirling smoke behind the headline” - “a space background with a spiral glow for a product launch” ## Also known as black hole shader, singularity shader, accretion disk, cosmic background, black hole animation, space vortex ## When to use - A concept hero for a tech, science or AI product - An opener for a space-themed event, talk or launch - A feature section on a dark backdrop with a short, centered headline - A manifesto page that wants a mysterious, striking look ## When to avoid - Pages with a light background, where the effect looks washed out - Pages that already run another WebGL effect - Areas with long text, since the ring in the center competes for attention ## How to ask your AI ```text Create a GLSL shader background with an animated black hole in the hero: a spinning ring of light in my brand colors over a dark backdrop, pausing when off screen, a static version for reduced motion and a fallback image 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 Voragem ### Does Voragem work on a light page? It works, but the look changes. Voragem leaves the center and the empty areas transparent, so the page color shows through. On black the ring glows like a black hole in space; on white the result looks pale and milky. For the space look, give the parent element a dark background. ### Can I change the colors of Voragem? Yes. Voragem accepts hue, which rotates the color tint in degrees, plus saturation, brightness and speed for how fast it turns. There is also an optional film grain layer through the noise prop. The THM Componentes prompt tells your AI to match everything to your project colors. ### Does Voragem work on phones? It works on devices with WebGL2. Voragem does not react to touch, but its shader layer captures finger drags on the background, which blocks scrolling there; ask your AI to turn off pointer events on it. Rated Heavy, it already pauses off screen and renders at 1x resolution by default. ## Related components - [Abismo](https://vibecode.thmtecnologia.com/en/components/abismo/): Thin rings and lines form a tunnel that narrows to a point, with a column of colored light in the middle. - [Fronteira](https://vibecode.thmtecnologia.com/en/components/fronteira/): A science fiction portal with a core of light, rings, floating crystals and stardust, turning in deep space. - [Gude](https://vibecode.thmtecnologia.com/en/components/gude/): A glass ball with an indigo and cyan ink swirl inside, slowly turning over a light floor. - [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. - [Clarão](https://vibecode.thmtecnologia.com/en/components/clarao/): Dark storm clouds lit from inside by blue, gold and white lightning that comes and goes. --- 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).