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