# Folia A burst of colorful paper bits shoots up and falls across the screen when someone completes a purchase or a goal. > Folia is a THM Componentes component that fires a burst of colorful confetti across the screen, drawn on canvas. It triggers on mount, from your code or from the button that ships with it, and lets you tune particle count, angle, spread, speed and colors. It fits completed purchases, finished sign-ups and achievements. - Category: Special effects - 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-confetti - Interaction: Mouse, Touch, Keyboard - URL: https://vibecode.thmtecnologia.com/en/components/folia/ ## What it looks like It is the moment at a party when someone pops a confetti popper. Small squares and circles in blue, purple, pink, green, yellow, orange and magenta shoot out from one point, rise in a fan, flutter in the air and fall with gravity until they fade. In the demo, a button in the middle of a card fires 120 pieces at once from the center. The button that comes with the component makes the confetti burst from the button itself. Count, direction, fan width, speed, gravity, sideways drift, size and shapes are all adjustable. ## You may be looking for this if you asked for something like - “confetti raining down when someone completes a purchase” - “celebrate when a customer finishes signing up” - “a party effect when I click a button” - “paper confetti falling on screen when a goal is reached” - “a celebration animation for my thank you page” - “a button that shoots confetti when clicked” - “something like fireworks when the user wins a prize” ## Also known as confetti animation, confetti burst, celebration effect, confetti cannon, party popper effect, success animation ## When to use - Thank you page after a purchase or subscription - End of sign-up, onboarding or a long form - Achievements, goals reached and levels in gamified apps - A button to redeem a coupon or a prize ## When to avoid - Frequent, routine actions, where the party becomes noise - Sensitive moments, such as cancellations, billing or errors - Automatic bursts on page load, which can startle people sensitive to motion ## How to ask your AI ```text Add a confetti burst to the thank you page after checkout, coming from the center in my brand colors, loaded only in the browser and turned 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 Folia ### Does Folia respect reduced motion settings? Not by default. Folia is built on a library with an option to skip the burst for people who turn on reduced motion, but it ships turned off. The THM Componentes prompt asks your AI for a static version in that case, and switching that option on in the burst settings covers it. ### How do I use Folia in Nuxt with SSR? Folia only creates the burst in the browser, after the component mounts. The THM Componentes prompt asks you to install the canvas-confetti dependency, load the component on demand and, in Nuxt, wrap it in ClientOnly with a static fallback. ### Can the confetti come out of the clicked button? Yes. Folia ships with its own button that reads its position on the screen and starts the burst from there, useful for redeem coupon or place order buttons. As a native button, it also works with the keyboard. You can also fire it from code with a different count, angle and colors each time. ## Related components - [Garimpo](https://vibecode.thmtecnologia.com/en/components/garimpo/): A card covered by a colorful layer that people scratch off with the mouse or a finger to find the prize. - [Chispa](https://vibecode.thmtecnologia.com/en/components/chispa/): Tiny points of light that twinkle and drift slowly upward, like glitter in the air, behind a headline or whole section. - [Bólido](https://vibecode.thmtecnologia.com/en/components/bolido/): Small streaks with tails cross the card diagonally, like shooting stars, each one at its own pace. - [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. - [Baralho](https://vibecode.thmtecnologia.com/en/components/baralho/): Notifications that pop up in a corner, stacked like cards, and go away on their own or with a sideways swipe. --- 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).