# Onça Manchas e ramos índigo crescem sozinhos como coral ou pele de animal, e o cursor planta novos focos. > Onça é um componente exclusivo do THM Componentes que roda na GPU uma simulação de reação-difusão de Gray-Scott, um modelo químico que gera desenhos parecidos com coral e manchas de animais. O padrão cresce sozinho em índigo e ciano com leve relevo, em três estilos: coral, labirinto ou manchas. O cursor planta novos focos. - Categoria: Fundos e atmosferas - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Pesado: WebGL ou simulação; um por página, carregado sob demanda - Tecnologia: Vue 3, TypeScript, WebGL - Interação: Mouse, Toque - URL: https://vibecode.thmtecnologia.com/componentes/onca/ ## 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 ```text 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 Onça ### Onça funciona em qualquer navegador? Precisa de WebGL2 com suporte a texturas de ponto flutuante. Sem isso, Onça mostra só a cor de fundo com um aviso curto em texto. Como é um efeito Pesado no THM Componentes, o prompt orienta a IA a usar ClientOnly no Nuxt, com um fallback estático, e a carregar o componente sob demanda. ### Dá para escolher o tipo de padrão de Onça? Sim. A prop preset de Onça 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. ### Onça respeita quem prefere menos movimento? Sim. Com a preferência de menos movimento ativa, Onça 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. ## Componentes relacionados - [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. - [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. - [Orvalho](https://vibecode.thmtecnologia.com/componentes/orvalho/): Gotas brilhantes de cor índigo que se juntam e se separam como líquido, e uma delas segue o cursor. - [Micélio](https://vibecode.thmtecnologia.com/componentes/micelio/): Fios finos de luz azul se ramificam a partir de nós brilhantes sobre fundo preto, como neurônios acesos no escuro. - [Limalha](https://vibecode.thmtecnologia.com/componentes/limalha/): Centenas de milhares de grãos finos correm em filamentos, como tinta no papel, e giram em volta do cursor. --- 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.