Peças gráficas
Design de shader de metal líquido
Um campo com aparência de cromo em transformação automática combina ruído distorcido, cor iridescente e realces em varredura sob uma tipografia fixa no canto inferior esquerdo.
Casos de uso do metal líquido
- Direção de arte em WebGLModele superfícies guiadas por shader para estudos visuais expressivos.
- Estudos de movimento generativoCompare estados de material em evolução sem ativos de textura.
- Fundos animados para heroExplore tratamentos visuais em tela cheia para experiências digitais.
Destaques do shader com aparência cromada
- Material matemáticoUm campo de ruído com distorção de domínio cria a estrutura da superfície.
- Paleta iridescenteLavanda, ciano, verde e magenta se alternam entre os estados.
- Movimento especularRealces brilhantes fazem a superfície parecer metal reflexivo.
- Três estados capturadosQuadros distintos mostram como a composição muda ao longo do tempo.
Três estados do campo metálico
1 / 3
Uma superfície com aparência de cromo sem texturas de imagem
Liquid Metal é um exemplo gráfico oficial do OpenDesign centrado em uma única composição de shader em tela cheia. Seu título, “Molten chrome, zero textures.”, estabelece a restrição central: a superfície é apresentada como um estudo de material, e não como uma ilustração construída com imagens.
A linha de apoio descreve um campo de ruído com distorção de domínio sombreado como metal, com um realce especular em varredura e uma paleta iridescente de filme fino. Essa descrição corresponde diretamente ao que as capturas mostram: faixas fluidas e dobradas, reflexos brancos nítidos e uma cor que passa de lavanda e violeta para ciano, verde e magenta.
Onde este design se encaixa
O artefato é mais útil quando a superfície visual deve criar atmosfera sem competir com um modelo de interação mais amplo. Sua tela ininterrupta pode servir de referência para tratamentos hero em WebGL, estudos de arte generativa ou trabalhos de identidade visual guiados por movimento.
A ausência de controles autorais mantém a atenção no campo renderizado. Isso facilita o estudo do exemplo, mas também significa que uma adaptação para produto precisaria definir seu próprio modelo de interação, tratamento de acessibilidade e relação com o conteúdo, em vez de presumir que essas decisões já estão resolvidas.
Referência de shader
Use o design para estudar como a distorção de ruído e as faixas especulares criam uma leitura líquida sem imagens de textura.
Direção de movimento
Use os estados capturados para comparar como paleta e fluxo alteram o caráter emocional de uma mesma composição.
Insumo para sistema visual
Traduza as relações entre lavanda, ciano, verde e magenta em uma direção controlada para uma interface mais ampla.
Como a composição muda
Os três quadros mantêm um pequeno rótulo verde LIQUID METAL, um título “Molten chrome, zero textures.” muito maior, sua descrição de apoio e um selo WebGL2 no canto superior direito. O shader muda sob essa hierarquia fixa. Um ruído de seis camadas forma um campo de alturas; amostras de altura próximas estimam as normais da superfície, enquanto uma luz em movimento, um termo especular nítido e uma paleta iridescente criam a aparência cromada.
Na view-1, predominam lavanda claro e branco, com canais estreitos de azul e violeta cortando o campo. A view-2 se desloca para faixas mais escuras de verde e azul, deixando a superfície mais direcional e alongada. A view-3 traz áreas mais fortes de magenta, oliva e cinza esfumaçado. Esses são estados capturados distintos, não evidência de uma paleta selecionável pelo usuário nem de um modo de desempenho medido.
View-1
Lavanda e violeta predominam, com realces brancos densos produzindo uma aparência suave de cromo.
View-2
Canais verdes e azul-escuros ficam mais visíveis, criando faixas direcionais mais longas.
View-3
Magenta, oliva e cinza esfumaçado aumentam a sensação de variação cromática.
Tipografia estável, campo variável
O grande título branco fica baixo sobre o campo visual, precedido pelo curto rótulo verde LIQUID METAL. Essa ordem permite que o espectador identifique o assunto antes de ler a descrição mais longa do material. Em contrapartida, o texto ocupa uma área considerável da arte, reduzindo a superfície de shader desobstruída disponível para inspeção.
Contraste reflexivo
Realces brilhantes e estreitos contornam repetidamente as formas distorcidas. Eles criam a pista visual de metal polido, enquanto os canais mais escuros dão a esses realces bordas a seguir. Como o efeito depende de contraste, uma paleta mais calma ou uma intensidade de realce menor provavelmente tornaria o material menos legível, mesmo que melhorasse o contraste do texto em algumas áreas.
Comportamento visível e limites
O código-fonte implementa renderização WebGL2 automática, animação baseada no tempo decorrido e redimensionamento da tela. Ele não registra controles de ponteiro, clique ou teclado. Uma estimativa local da taxa de quadros é atualizada aproximadamente a cada meio segundo no selo WebGL2; ela descreve esta sessão de renderização, não um desempenho garantido de GPU. O efeito é uma aproximação visual procedural de cromo, não uma simulação física de metal fundido.
Nenhum controle autoral aparece na marcação estática, e as evidências fornecidas não estabelecem serviços conectados, dados de usuário armazenados, implantação em produção, entradas de interação nem o modelo de geração original. Uma recriação pode propor essas capacidades, mas elas estão fora do que este design verifica.
Mantenha a tela local
Trate o shader como uma camada visual autônoma e defina separadamente qualquer comportamento externo da aplicação.
Separe capturas de métricas
Use os três quadros para discutir a variação visual e meça o desempenho em tempo de execução de forma independente, no ambiente pretendido.
Como criar um design de shader de metal líquido no OpenDesign
Defina a tela e a tipografia
Comece com uma única superfície de shader ocupando toda a tela e preserve a ordem da referência: o pequeno rótulo LIQUID METAL, o título grande Molten chrome, zero textures. e, por fim, a descrição de apoio. Mantenha a tipografia legível sobre os realces mais brilhantes.
Prompt sugeridoCrie um estudo de shader de metal líquido em WebGL2 em tela cheia, com um bloco de texto estável no canto inferior esquerdo contendo LIQUID METAL, Molten chrome, zero textures. e uma breve descrição de ruído com distorção de domínio, realces reflexivos e uma paleta iridescente de filme fino. Use apenas renderização local; não adicione texturas, serviços externos, controles nem alegações de desempenho.
Ajuste os elementos da aparência do material
Refine em conjunto o campo com distorção de domínio, a resposta especular e a paleta. Compare as direções lavanda-violeta, verde-ciano e magenta-oliva como estados visuais, verificando se as faixas reflexivas ainda descrevem uma superfície líquida coerente.
Verifique os estados capturados
Revise vários quadros no tamanho de tela pretendido. Confirme que o título continua legível, que o shader segue como o principal elemento visual e que qualquer rótulo de GPU, WEBGL2 ou FPS é apresentado como informação local de exibição, e não como um benchmark verificado.
Exportar e obter um link de compartilhamento
Exporte seu design finalizado e, em seguida, use Compartilhar no OpenDesign para obter um link de compartilhamento. Abra o link em uma janela separada do navegador e verifique se a versão desejada e seus assets estão disponíveis antes de enviá-lo.
Design de Pôster Editorial de Fluxo de Trabalho com IA
O design de pôster editorial de fluxo de trabalho com IA apresenta seis propostas em capítulos numerados, com exemplos concretos de prompts, fundo creme e acentos tipográficos em ferrugem.
Peças gráficas
Design de Carrossel Social sobre Fluxo de Trabalho com IA
Sete cards verticais usam títulos chineses superdimensionados, hábitos numerados, campos de cor variáveis e uma declaração final para explicar fluxos de trabalho de edição com IA.
Peças gráficas
Design de Shader Aurora Field
Um campo de ruído azul-esverdeado animado automaticamente dá atmosfera a um hero em WebGL, enquanto um título fixo e um pequeno indicador local de taxa de quadros ancoram a cena.
Peças gráficas
Design de Shader Aurora Veil
Aurora Veil é uma composição interativa de shader que transforma luz em camadas, estrelas e movimento do cursor em um hero atmosférico em WebGL.
Peças gráficas