# Abismo Thin rings and lines form a tunnel that narrows to a point, with a column of colored light in the middle. > Abismo is a THM Componentes component that draws a black hole tunnel in Canvas: concentric rings shrink toward a point, radial lines converge and small light particles rise from the depth, under a column of cyan, yellow and pink light. It works in light and dark mode and suits launches and events. - Category: Backgrounds and atmospheres - Origin: Adapted from open source under the MIT license, with a ready THM prompt - Load weight: Medium: canvas or continuous animation; fine for one section - Technology: Vue 3, TypeScript, Tailwind CSS v4, Canvas 2D, Motion for Vue - Interaction: None: the effect runs on its own - URL: https://vibecode.thmtecnologia.com/en/components/abismo/ ## What it looks like It looks like the classic drawing of a gravity well, sketched in fine pencil. A series of concentric oval rings keeps shrinking toward a point near the bottom, crossed by lines that converge like spokes, forming a tunnel. Small light particles rise from the throat and fan out. In the center, a blurred vertical band of light cycles through cyan, yellow and pink every five seconds, and a purple glow tints the lower part. The edges fade to white in light mode and to black in dark mode, which also adds thin scan lines like an old monitor. ## You may be looking for this if you asked for something like - “a black hole backdrop for an event website hero” - “a tunnel that pulls everything to the center, sci-fi style” - “a background with rings and lines heading into one point, like a vortex” - “a launch hero with a space feel and colorful light” - “an animated science and innovation background without heavy 3D” - “that tunnel effect with a beam of light in the middle” - “a dark background with old monitor scan lines and a neon glow” ## Also known as black hole tunnel, tunnel effect, warp tunnel, gravity well animation, wormhole background, canvas vortex ## When to use - A product or new version launch hero - An event, hackathon or tech conference page - Sections about science, astronomy, research or innovation - Opening screens with a short headline and a single call to action ## When to avoid - Long pages where it scrolls out of view: the animation does not pause off screen - Calm brands, where the colorful beam and the tunnel feel too loud - Weak phones, since the canvas uses the screen's full pixel density ## How to ask your AI ```text Create an animated Canvas backdrop for the launch hero that looks like a black hole: rings and lines narrowing into a tunnel, rising particles and a light beam in my brand colors, with a static version for reduced motion, pausing off screen and a dark mode. ``` 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 Abismo ### Does Abismo respect reduced motion settings? The original component always animates: the rings, particles and light beam never stop. The THM Componentes prompt asks your AI for a static version for people who turn on reduced motion, which for Abismo can be the tunnel drawn once, without the beam cycle. ### Can I change the colors of Abismo? Yes. Abismo has props for the ring and line color and for the RGB color of the particles. The central beam and the purple glow use colors fixed in the code, and the THM Componentes prompt tells your AI to replace them with your project tokens. ### Does Abismo work in dark mode? Yes. Abismo uses Tailwind dark variants: in dark mode the edges fade to black, the tunnel lines become a little more visible and thin scan lines appear on top. In light mode the edges fade to white. The prompt asks your AI to confirm the project uses Tailwind CSS v4. ## Related components - [Vaga-lume](https://vibecode.thmtecnologia.com/en/components/vaga-lume/): Hundreds of neon dots in blue, violet and magenta flowing along curving currents over a dark background. - [Disparada](https://vibecode.thmtecnologia.com/en/components/disparada/): A card at the center of a 3D grid tunnel, with colored light streaks racing along the walls toward the edges. - [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. - [Voragem](https://vibecode.thmtecnologia.com/en/components/voragem/): A ring of orange and blue light spins around a dark center, like a black hole pulling in cosmic dust. - [Firmamento](https://vibecode.thmtecnologia.com/en/components/firmamento/): A night sky with stars in three sizes drifting slowly upward and shifting gently when the mouse moves. --- 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).