Como ele é
Parece coral crescendo num aquário visto de cima, ou a pelagem de um animal se formando. Sobre um fundo quase branco, pontos índigo com bordas ciano se espalham sozinhos, se ramificam e se dividem até cobrir a área com um desenho orgânico, com leve relevo, como tinta grossa sobre papel. No estilo coral surgem ramos; no labirinto, linhas sinuosas; nas manchas, pintas separadas. O padrão aparece já formado em poucos instantes. Ao passar o mouse ou tocar na tela, o cursor planta novos focos, que crescem e se encaixam no desenho.
Você pode estar procurando isto se pediu algo assim
- fundo com manchas que crescem sozinhas tipo coral
- padrão orgânico que se espalha como pele de onça
- efeito de células se multiplicando para site de biotecnologia
- fundo que desenha labirintos sozinho e reage ao mouse
- algo que pareça crescimento natural para a página da clínica
- textura viva tipo microscópio para um laboratório
- fundo em que eu passo o mouse e nasce um desenho orgânico
Também chamado de
- reação-difusão
- reaction diffusion
- Gray-Scott
- padrões de Turing
- Turing patterns
- padrão orgânico generativo
- coral pattern shader
Quando usar
- Sites de biotecnologia, laboratório ou pesquisa científica
- Marcas de saúde, dermatologia ou cosméticos que falam de regeneração
- Páginas que comunicam crescimento orgânico ou sustentabilidade
- Fundo interativo para portfólio de design generativo
Quando evitar
- Páginas que já rodam outro efeito pesado em WebGL
- Áreas com texto longo, porque o padrão cobre todo o espaço com contraste forte
- Público com aparelhos antigos, já que exige WebGL2 com texturas de ponto flutuante
Como pedir para a sua IA
Crie um fundo de reação-difusão Gray-Scott em WebGL2 para a seção de pesquisa: padrão de coral nas cores da minha marca, novos focos semeados pelo cursor, pausa fora da tela, padrão congelado para movimento reduzido e fallback estático no Nuxt.
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 Reaction Diffusion
O Reaction Diffusion funciona em qualquer navegador?
Ele precisa de WebGL2 com suporte a texturas de ponto flutuante. Sem isso, o Reaction Diffusion mostra só a cor de fundo com um aviso curto em texto. Por ser Pesado no THM Componentes, o prompt orienta a IA a envolver o efeito em ClientOnly no Nuxt, com um fallback estático, e a carregar o componente sob demanda.
Dá para escolher o tipo de padrão do Reaction Diffusion?
Sim. A prop preset do Reaction Diffusion tem três estilos, coral, labirinto e manchas, e trocar de estilo reinicia a simulação. As cores das regiões densas, das bordas e do fundo são props, assim como a velocidade, o tamanho do pincel do cursor e a resolução da grade, que ajuda a aliviar celulares mais fracos.
O Reaction Diffusion respeita quem prefere menos movimento?
Sim. Com a preferência de menos movimento ativa, o Reaction Diffusion desenvolve o padrão de uma vez e congela a imagem. Quando o cursor passa por cima, a simulação volta a rodar bem devagar, só para que a pessoa possa semear novos focos. Fora da tela, o efeito pausa.
