# Flâmula Cinco fitas coloridas em camadas, com sombras suaves, ondulando devagar de um lado a outro da tela. > Flâmula é um fundo animado do THM Componentes em que cinco fitas coloridas, sobrepostas e com sombras suaves, ondulam devagar de um lado a outro, como papel recortado em camadas. Roda num shader WebGL2, pausa por conta própria fora da tela e aceita cores, ângulo e velocidade por props. Funciona bem em heros de marcas com identidade colorida. - Categoria: Fundos e atmosferas - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Médio: canvas ou animação contínua; bom para uma seção - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4, WebGL, OGL - Interação: Nenhuma: o efeito roda sozinho - URL: https://vibecode.thmtecnologia.com/componentes/flamula/ ## Como ele é Lembra tiras de papel colorido recortadas e sobrepostas, como numa colagem em camadas, ondulando devagar como uma bandeira ao vento. Cinco fitas largas atravessam a área de ponta a ponta: azul-ardósia, ameixa, rosa antigo, coral e pêssego, sobre um fundo cinza-chumbo. Sombras suaves entre as camadas dão relevo, e a largura e a distância entre as fitas mudam o tempo todo. Dá para girar e deslocar o conjunto, acelerar o movimento ou deixar o fundo transparente. O componente ocupa o contêiner pai inteiro, e o conteúdo fica por cima. ## Você pode estar procurando isto se pediu algo assim - “fundo com fitas coloridas ondulando atrás do título” - “ondas de papel recortado em camadas, tipo colagem” - “faixas onduladas com sombra que se mexem devagar no hero” - “fundo colorido e moderno para o topo da página da marca” - “aquele fundo de ondas sobrepostas em tons de pôr do sol” - “fitas de cetim balançando no fundo escuro do site” - “deixar o hero com mais identidade visual sem usar foto” ## Também chamado de fundo de fitas, ondas em camadas, fitas animadas, shader de ondas, papel recortado em camadas, layered waves, paper cut waves ## Quando usar - Hero de marca com identidade colorida e forte - Página de lançamento de produto criativo, música ou evento - Capa de portfólio ou de agência com fundo escuro - Seção de chamada para ação que precisa de presença visual ## Quando evitar - Páginas que já têm outro efeito em WebGL rodando - Marcas sóbrias, como escritórios jurídicos ou financeiros, em que as fitas parecem informais - Áreas com texto longo, em que as faixas atrás das linhas atrapalham a leitura ## Como pedir para a sua IA ```text Crie um fundo de fitas onduladas em camadas com shader WebGL2 no hero da marca: cinco faixas nas cores da minha paleta com sombras suaves, pausa fora da tela, versão parada para movimento reduzido e um fallback estático enquanto carrega no Nuxt. ``` Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar. ## Perguntas sobre Flâmula ### Como trocar as cores de Flâmula? A prop colors de Flâmula recebe cinco cores em hexadecimal, uma por fita, e backgroundColor define o fundo. Com transparent ligado, o fundo some e as fitas ficam sobre a cor da sua página. O prompt do THM Componentes pede à IA para trocar a paleta padrão, do azul ao pêssego, pelos tokens de cor do projeto. ### Flâmula funciona no celular? Funciona em navegadores com WebGL2, o que inclui a maioria dos celulares atuais. Flâmula não reage ao toque nem trava a rolagem, e pausa por conta própria quando sai da tela ou quando a aba fica em segundo plano. Sem WebGL2, o shader não inicia e aparece só o fundo do contêiner, por isso o prompt pede um fallback estático. ### Flâmula respeita quem prefere menos movimento? Não por conta própria: Flâmula anima sempre que está visível. O prompt do THM Componentes pede à IA uma versão estática para quem ativa a redução de movimento no sistema. Neste componente é simples, porque zerar a prop speed congela as fitas numa pose fixa, mantendo cores e sombras. ## Componentes relacionados - [Maré](https://vibecode.thmtecnologia.com/componentes/mare/): Cinco ondas de luz neon, grossas e desfocadas, ondulando sem parar no meio de um fundo escuro. - [Veludo](https://vibecode.thmtecnologia.com/componentes/veludo/): Tecido de cetim escuro com dobras diagonais que ondulam devagar, com brilho frio e textura de trama fina. - [Lusco-fusco](https://vibecode.thmtecnologia.com/componentes/lusco-fusco/): Manchas de índigo, ciano e lavanda que se misturam e derivam devagar, com um grão leve de filme. - [Névoa](https://vibecode.thmtecnologia.com/componentes/nevoa/): Fundo animado em CSS com faixas de luz azul e violeta que deslizam devagar, como uma aurora boreal. - [Correnteza](https://vibecode.thmtecnologia.com/componentes/correnteza/): Milhares de linhas finas correm em correntes curvas, como fios de seda ao vento, sobre um fundo claro. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.