# Respingo A button that releases a circle of color from the exact click point, growing and fading in under a second. > Respingo is a THM Componentes component that confirms every click with a ripple: a circle of color starts at the exact point pressed, grows and fades in 0.6 seconds. Color and duration are adjustable, rapid clicks create several ripples and the native button still fires its click event. It suits forms and app actions. - Category: Buttons and cursors - 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: Mouse, Touch, Keyboard - URL: https://vibecode.thmtecnologia.com/en/components/respingo/ ## What it looks like It recalls a stone dropped into a pond, only inside the button. At rest it is a simple button with rounded corners, a 2 pixel border, the theme background color and text in the primary color. With every click or tap, a light blue circle appears exactly where the finger or mouse landed, grows past the edges and fades out, slowing down at the end, over 0.6 seconds. The button edges clip the ripple, and quick clicks create overlapping ripples. ## You may be looking for this if you asked for something like - “a button that ripples when I click it” - “a tap effect on buttons like a phone app” - “a button with a circle spreading out from the click” - “visual feedback when someone presses the submit button” - “that Android-style click effect on my website” - “a form button that shows the click went through” ## Also known as click wave effect, ripple effect, click ripple, button ripple animation, tap ripple effect, ink ripple ## When to use - Submit, save and confirm buttons in forms - Apps and dashboards where people need to feel the click registered - Touch-first interfaces such as PWAs and mobile views - Repeated actions like add to cart or like ## When to avoid - Highlight buttons that must draw attention before the click, since the ripple only shows after it - Brands with their own palette, unless you replace the default light blue ripple ## How to ask your AI ```text Create a button with a ripple effect: on every click or tap, a circle starts at the exact point and spreads out until it fades. Use my brand color for the ripple, center it when the click comes from the keyboard and turn the animation off for people who prefer reduced motion. ``` 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 Respingo ### Can I change the color and speed of Respingo? Yes. Respingo has two props: rippleColor sets the ripple color, light blue by default, and duration sets the length in milliseconds, 600 by default. The background and text use your project theme colors, so the button follows light and dark mode. ### Does Respingo work with the keyboard? It works as a button: Respingo uses the native button element, takes focus and fires the click with Enter or Space. The ripple, however, starts at the pointer coordinates, which do not point at the button on a keyboard press, so it may not show. Ask your AI to center the ripple in that case. ### Will Respingo slow down my site? No. Respingo creates a small circle per click, animates it with CSS and removes it when the duration ends, with no animation loop running all the time. It is rated Light in THM Componentes. For reduced motion, the THM Componentes prompt asks for a static version; here, it can be a slight color change on click. ## Related components - [Adiante](https://vibecode.thmtecnologia.com/en/components/adiante/): A pill button with a dot that grows to fill it on hover, while the text slides away and returns with an arrow. - [Lampejo](https://vibecode.thmtecnologia.com/en/components/lampejo/): A black pill button with a beam of light running along its edge and an inner glow that grows on hover. - [Cata-vento](https://vibecode.thmtecnologia.com/en/components/cata-vento/): A button with a thin rainbow border that keeps spinning around the text, softened by a slight blur. - [Gongo](https://vibecode.thmtecnologia.com/en/components/gongo/): Concentric rings that pulse from the inside out behind a logo, icon or button, like ripples on a pond. - [Folia](https://vibecode.thmtecnologia.com/en/components/folia/): A burst of colorful paper bits shoots up and falls across the screen when someone completes a purchase or a goal. --- 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).