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 background 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 background
- 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
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 Singularity Background
Does Singularity Background work on a light page?
It works, but the look changes. Singularity Background 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 Singularity Background colors?
Yes. Singularity Background 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 Singularity Background work on phones?
It works on devices with WebGL2. Singularity Background 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.
