# Lusco-fusco

Manchas de índigo, ciano e lavanda que se misturam e derivam devagar, com um grão leve de filme.

> Lusco-fusco é um componente exclusivo do THM Componentes que anima um gradiente em malha com quatro cores que derivam devagar pela tela. A mistura acontece em espaço OKLab, o que evita tons barrentos entre as cores, e um grão de filme sutil dá textura. É Leve, roda em WebGL e serve para heros, chamadas e capas.

- Categoria: Fundos e atmosferas
- Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo
- Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível
- Tecnologia: Vue 3, TypeScript, WebGL
- Interação: Nenhuma: o efeito roda sozinho
- URL: https://vibecode.thmtecnologia.com/componentes/lusco-fusco/

## Como ele é

Lembra luz colorida atravessando uma cortina de seda, fora de foco. Quatro manchas de cor, índigo, ciano, lavanda e um quase branco, ficam perto dos cantos e passeiam em órbitas lentas, enquanto o plano se dobra como água e faz as fronteiras ondularem. As transições ficam limpas, sem tons barrentos, e um grão fino de filme cintila por cima, como numa foto analógica. Não reage ao mouse: é um fundo ambiente e calmo, que preenche o elemento pai e deixa o conteúdo por cima.

## Você pode estar procurando isto se pediu algo assim

- “fundo com cores se misturando devagar, tipo degradê vivo”
- “aquele gradiente colorido com granulado de foto antiga”
- “degradê em movimento para o topo do site sem pesar”
- “fundo de cores suaves como o papel de parede de celular novo”
- “gradiente que muda sozinho para a capa da apresentação”
- “fundo elegante azul e lilás para a seção de chamada”
- “mancha de cor fluida atrás do título, bem discreta”

## Também chamado de

mesh gradient, gradiente em malha, degradê animado, animated gradient background, fundo com granulado, grain gradient, OKLab gradient

## Quando usar

- Hero de SaaS, fintech ou produto digital que quer clima sofisticado
- Seção de chamada para ação com título curto
- Capa de apresentação, relatório ou página de evento
- Páginas em que um efeito 3D pesado seria exagero

## Quando evitar

- Quem procura interação: o gradiente não reage ao mouse nem ao toque
- Blocos de texto longo sobre as áreas mais escuras, sem conferir o contraste

## Como pedir para a sua IA

```text
Crie um fundo de mesh gradient em WebGL para o hero: quatro cores da minha marca derivando devagar, mistura em OKLab sem tons barrentos, grão de filme sutil, pausa fora da tela, versão parada para movimento reduzido e bom contraste com o título.
```

Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar.

## Perguntas sobre Lusco-fusco

### Lusco-fusco deixa o site lento?

Não costuma deixar. Lusco-fusco é Leve no THM Componentes: desenha um único shader por quadro, limita a densidade de pixels a 2 e pausa quando sai da tela. É uma boa escolha quando você quer cor em movimento sem o custo de uma simulação. Teste o LCP no celular antes e depois.

### Como colocar as cores da minha marca em Lusco-fusco?

Lusco-fusco tem quatro props de cor, uma para cada ponto da malha, e o prompt do THM Componentes orienta a IA a usar os tokens do seu projeto. Como a mistura acontece em OKLab, as transições ficam limpas, sem tons barrentos. Warp, suavidade, velocidade e grão também são ajustáveis.

### Lusco-fusco respeita quem prefere menos movimento?

Sim. Lusco-fusco lê a preferência de movimento reduzido a cada quadro: quando ela está ativa, as cores param onde estão e o grão de filme cai pela metade e fica imóvel, deixando um gradiente estático. Se a pessoa desligar a preferência, a animação volta sem recarregar a página.

## Componentes relacionados

- [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.
- [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.
- [Maré](https://vibecode.thmtecnologia.com/componentes/mare/): Cinco ondas de luz neon, grossas e desfocadas, ondulando sem parar no meio de um fundo escuro.
- [Tarrafa](https://vibecode.thmtecnologia.com/componentes/tarrafa/): Reflexos de luz dançando como no fundo de uma piscina ao sol, com bordas levemente coloridas.
- [Nanquim](https://vibecode.thmtecnologia.com/componentes/nanquim/): Tinta colorida que escorre e gira na tela atrás do conteúdo, empurrada pelo movimento do mouse.

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