# Gongo Concentric rings that pulse from the inside out behind a logo, icon or button, like ripples on a pond. > Gongo is a THM Componentes effect that places concentric rings behind an element: seven rings, each more transparent than the last, shrink and return to size in sequence, in a pulse that travels from the inside out. Built with CSS only, it is light and works well to highlight logos, app icons and main buttons. - Category: Backgrounds and atmospheres - Origin: Adapted from open source under the MIT license, with a ready THM prompt - Load weight: Light: CSS or light JavaScript, no noticeable cost - Technology: Vue 3, TypeScript, Tailwind CSS v4 - Interaction: None: the effect runs on its own - URL: https://vibecode.thmtecnologia.com/en/components/gongo/ ## What it looks like It looks like the rings that spread when a stone drops into a pond, or the pulse on a sonar screen. Seven concentric rings, from smallest to largest, surround the element in the center and shrink and return to size in a two-second cycle, each a moment after the previous one, so the pulse runs from the inside out. Each ring is more transparent than the one before, so the effect fades toward the edges. In the demo the rings are circles with a translucent fill that fades downward; they can also be squares or organic blobs. Your content sits in the center, on top. ## You may be looking for this if you asked for something like - “circles pulsing behind the logo, like ripples in water” - “a sonar effect around my app icon” - “waves coming out of the main button to grab attention” - “rings pulsing behind the app download section” - “highlight the logo in the middle of the page with something subtle” - “an animated concentric circles background that stays lightweight” - “that radar pulse effect behind an icon” ## Also known as ripple effect, concentric circles, pulse effect, sonar effect, radar pulse, pulsing rings ## When to use - Highlighting a logo or app icon in the center of a section - Drawing attention to the main download or sign-up button - An integrations or connection section with a central icon - Waiting, searching or connecting screens ## When to avoid - Small elements inside cards, since the default rings reach 700 pixels - Pages with several pulsing spots, where attention gets split ## How to ask your AI ```text Add a CSS concentric ripple effect behind the logo in the center of the section: rings in my brand colors pulsing from the inside out and fading toward the edges, still for people who prefer reduced motion, with sizes adjusted for mobile. ``` 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 Gongo ### Does Gongo slow down the page? No. Gongo uses only HTML elements with borders and a CSS scale animation, with no canvas, WebGL or animation JavaScript, and it is rated Light in THM Componentes. It keeps pulsing for people who prefer reduced motion, so the THM Componentes prompt asks your AI for a static version with the rings standing still. ### How do I make Gongo's rings round and in my brand color? Use the circleClass prop, which takes CSS classes applied to each ring in Gongo. Without it, the rings come out square with a thin border in the text color; the demo adds rounded-full to make circles and sets a border color and a translucent fill. The THM Componentes prompt asks your AI to use your project color tokens. ### Does Gongo work on phones? Yes, since Gongo is plain CSS. By default its rings reach 700 pixels and stay centered, so on narrow screens they spill past the edges; the demo container uses overflow hidden to clip them. Adjust baseCircleSize and spaceBetweenCircle for small screens and test on a phone, as the THM Componentes prompt recommends. ## Related components - [Respingo](https://vibecode.thmtecnologia.com/en/components/respingo/): A button that releases a circle of color from the exact click point, growing and fading in under a second. - [Planetário](https://vibecode.thmtecnologia.com/en/components/planetario/): Icons or small elements circling around a center point, like planets around the sun. - [Ribalta](https://vibecode.thmtecnologia.com/en/components/ribalta/): A cyan line of light switches on at the top of a dark section and spreads a glow over the headline below. - [Teleférico](https://vibecode.thmtecnologia.com/en/components/teleferico/): Thin lines connect icons and cards while a colored pulse of light runs along them, showing data on the move. - [Treliça](https://vibecode.thmtecnologia.com/en/components/trelica/): A fine grid or dotted backdrop that fades at the edges and can slowly slide in one direction. --- 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).