# Flâmula Five colored ribbons stacked in layers, with soft shadows, slowly waving from one side of the screen to the other. > Flâmula is an animated background from THM Componentes where five colored ribbons, stacked with soft shadows, wave slowly from side to side like layered paper cutouts. It runs on a WebGL2 shader, pauses by itself off screen and takes colors, angle and speed as props. It works well in heroes for brands with a colorful identity. - 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, WebGL, OGL - Interaction: None: the effect runs on its own - URL: https://vibecode.thmtecnologia.com/en/components/flamula/ ## What it looks like It looks like strips of colored paper cut out and stacked like a layered collage, waving slowly like a flag in the wind. Five wide ribbons cross the area from edge to edge: slate blue, plum, dusty rose, coral and peach, over a charcoal background. Soft shadows between the layers add depth, and the width and spacing of the ribbons keep changing. You can rotate the whole set, shift it, speed it up or make the background transparent. The component fills its whole parent container, and your content sits on top. ## You may be looking for this if you asked for something like - “a background with colorful ribbons waving behind the headline” - “layered paper cut waves, like a collage” - “wavy stripes with shadows slowly moving in the hero” - “a colorful, modern background for the top of my brand page” - “that overlapping waves background in sunset colors” - “satin ribbons swaying on a dark website background” - “give the hero more visual identity without using a photo” ## Also known as flowing ribbons, layered waves, paper cut waves, animated ribbons, wave shader background, stacked wave layers ## When to use - A brand hero with a strong, colorful identity - A launch page for a creative product, music release or event - A portfolio or agency cover on a dark background - A call to action section that needs visual presence ## When to avoid - Pages that already run another WebGL effect - Conservative brands such as law or finance firms, where the ribbons feel too casual - Areas with long text, where the stripes behind the lines get in the way of reading ## How to ask your AI ```text Create a background of layered wavy ribbons with a WebGL2 shader in my brand hero: five bands in my palette colors with soft shadows, paused off screen, still for reduced motion and with a static fallback while it loads in Nuxt. ``` 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 Flâmula ### How do I change Flâmula's colors? The colors prop of Flâmula takes five hex colors, one per ribbon, and backgroundColor sets the backdrop. With transparent turned on, the backdrop disappears and the ribbons sit over your page color. The THM Componentes prompt asks your AI to replace the default palette, from blue to peach, with your project color tokens. ### Does Flâmula work on phones? It works in browsers with WebGL2, which includes most current phones. Flâmula does not react to touch and does not block scrolling, and it pauses by itself when it leaves the screen or the tab goes to the background. Without WebGL2 the shader does not start and only the container background shows, so the prompt asks for a static fallback. ### Does Flâmula respect reduced motion settings? Not on its own: Flâmula animates whenever it is visible. The THM Componentes prompt asks your AI for a static version for people who turn on reduced motion in their system. Here it is simple, because setting the speed prop to zero freezes the ribbons in a fixed pose while keeping the colors and shadows. ## Related components - [Maré](https://vibecode.thmtecnologia.com/en/components/mare/): Five thick, blurred neon light waves rolling nonstop across the middle of a dark background. - [Veludo](https://vibecode.thmtecnologia.com/en/components/veludo/): Dark satin fabric with diagonal folds that ripple slowly, with a cool sheen and a fine woven texture. - [Lusco-fusco](https://vibecode.thmtecnologia.com/en/components/lusco-fusco/): Patches of indigo, cyan and lavender that blend and drift slowly, with a light film grain on top. - [Névoa](https://vibecode.thmtecnologia.com/en/components/nevoa/): A CSS-only animated background with blue and violet light bands drifting slowly, like the northern lights. - [Correnteza](https://vibecode.thmtecnologia.com/en/components/correnteza/): Thousands of fine lines run along curving currents, like silk threads in the wind, over a light background. --- 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).