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
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.
