Peças gráficas
Design de Shader Voronoi
Células coloridas irregulares deslizam por um canvas WebGL2, com bordas claras e luminosas, distorção suavizada pelo ponteiro e tipografia fixa em tamanho exagerado.
Casos de uso da arte Voronoi
- Fundos WebGL interativosCampos visuais em tela cheia que respondem ao movimento local do ponteiro.
- Estudos de arte generativaComposições guiadas por shader, construídas com cor, movimento e divisão espacial.
- Landing pages experimentaisTelas de abertura atmosféricas em que a tipografia fica sobre gráficos em evolução.
Destaques da rede de células
- Rede em tela cheiaAs células Voronoi preenchem a viewport por trás da sobreposição.
- Células coloridas por paletaRegiões azuis, verdes, roxas, azul-petróleo e marrons separam o campo.
- Bordas luminosasBordas claras tornam legíveis as células vizinhas.
- Influência do cursorO movimento do ponteiro é apresentado como uma interação de empurrão local.
Três momentos do campo Voronoi
1 / 3
Um campo Voronoi em tela cheia
O Design de Shader Voronoi é um exemplo gráfico oficial do OpenDesign, centrado em um único canvas WebGL animado. O título autoral diz “VORONOI CELLS”, enquanto a linha de apoio descreve “drifting feature points, palette-keyed cells, glowing boundaries”. Juntos, esses rótulos estabelecem a premissa visual antes de o espectador interagir com ela.
A composição usa o canvas como a própria superfície da página, em vez de colocar a arte em um painel emoldurado. Grandes células irregulares se estendem além da viewport, e por isso o campo parece contínuo nas bordas. A contrapartida é que a arte fornece atmosfera e escala, mas o design deixa pouco espaço para conteúdo secundário ou navegação convencional.
Estrutura visível
Bordas claras compartilhadas dividem regiões poligonais de cores diferentes, permitindo ler a adjacência e a escala.
Ordem de leitura
Os rótulos superiores identificam a prévia, o título gigante no canto inferior esquerdo nomeia o assunto e a indicação no canto inferior direito introduz a interação.
Onde este design se encaixa
Este design é adequado a contextos em que a descoberta visual importa mais do que informação densa: a abertura de uma landing page experimental, um estudo de arte generativa ou uma demonstração de WebGL. A expressão “WEBGL PREVIEW” identifica o trabalho como uma prévia visual, enquanto “REAL-TIME · GPU” apresenta a técnica de renderização na interface.
Como a fonte mostra um único canvas em tela cheia e nenhum controle autoral na marcação estática, o melhor uso é um momento visual focado, e não uma ferramenta repleta de controles. Adicionar menus, métricas ou seções de conteúdo exigiria uma nova arquitetura de informação e poderia competir com a arte deliberadamente superdimensionada.
Tela de abertura
Use a composição como primeiro campo visual quando a página precisar de presença gráfica imediata e de uma declaração curta.
Estudo de interação
Use a indicação do ponteiro para explorar a distorção local de coordenadas no campo animado, sem tratar as células como objetos físicos simulados.
Referência visual
Use a paleta e o tratamento das bordas como estudo para fundos baseados em shader, não como prova de desempenho em produção.
Tipografia sobre geometria em movimento
A tipografia é intencionalmente grande e ancorada na parte inferior esquerda. “VORONOI” ocupa a linha dominante, com “CELLS” logo abaixo, e a frase explicativa fica embaixo, em texto menor. Essa escala deixa o assunto legível sobre um campo movimentado, mas também significa que a arte precisa manter contraste suficiente atrás das letras.
O fragment shader verifica uma vizinhança de três por três de pontos característicos, que se deslocam com o tempo decorrido. O ponto mais próximo identifica a paleta de cada célula, enquanto a diferença entre as distâncias do ponto mais próximo e do segundo mais próximo destaca as bordas compartilhadas. Uma deformação do ponteiro ponderada por gaussiana altera as coordenadas amostradas; ela não move uma malha de física nem simula colisões entre células.
Escala do título
O título superdimensionado em duas linhas mantém o assunto identificável mesmo quando a geometria das células muda atrás dele.
Rótulos de borda
Pequenos rótulos em caixa alta definem o contexto da prévia e o conceito de renderização sem competir com o título principal.
Posicionamento da sobreposição
O rótulo “OPENDESIGN · WEBGL PREVIEW” no canto superior esquerdo e o rótulo “REAL-TIME · GPU” no canto superior direito criam uma moldura ampla em torno do canvas. A indicação “MOVE THE CURSOR ↗” no canto inferior direito equilibra o grande título inferior esquerdo e aponta para a interação sem adicionar um fluxo convencional de botões.
Movimento visível e limites de capacidade
As três capturas mostram uma única composição em tela cheia em momentos diferentes, não telas separadas. A fonte implementa deslocamento contínuo dos pontos característicos e distorção local pelo ponteiro. As duas coordenadas normalizadas do ponteiro se aproximam do alvo a cada quadro em uma quantidade igual à diferença restante multiplicada por 0,06 antes de influenciar o shader. O selo do cursor no canto inferior direito é uma indicação estática, não um botão, e não é necessário clique, arrasto nem painel de configuração.
As evidências não estabelecem serviços conectados, dados armazenados, desempenho medido nem implantação em produção. Também não estabelecem que toda afirmação de renderização representada se aplique a todos os dispositivos. Leia este artefato como um exemplo de design e implementação, cuja força visível está na relação entre geometria do shader, cor, tipografia sobreposta e entrada local.
Separe observação de comportamento
Registre o campo de polígonos visível, as bordas claras, as regiões de cor e o texto sobreposto como decisões de design; trate a resposta ao cursor e a animação como comportamento comprovado localmente, e não como capacidade de um serviço.
Preserve a contrapartida
Mantenha o canvas visualmente dominante ao adaptar a composição, mas teste se o título e o texto de apoio continuam legíveis conforme as bordas das células e os campos de cor se movem por baixo deles.
Como criar um design de shader Voronoi no OpenDesign
Defina o canvas e a sobreposição
Crie um único canvas WebGL em tela cheia (viewport inteira). Em seguida, posicione um pequeno rótulo de prévia no canto superior esquerdo, um rótulo de renderização no canto superior direito e um título grande em duas linhas, com texto de apoio, perto do canto inferior esquerdo.
Modele o sistema de células
Refine o campo Voronoi em torno de regiões poligonais irregulares, bordas compartilhadas claras e uma paleta que inclua áreas azuis, verdes, roxas, azul-petróleo e marrons. Verifique se o título continua legível sobre a geometria mais movimentada.
Adicione movimento local do ponteiro
Suavize as duas coordenadas normalizadas do ponteiro em direção ao alvo e use uma deformação ponderada pela distância para influenciar o campo amostrado. Mantenha estática a indicação no canto inferior direito e descreva o efeito como distorção local, não como física de células. Não adicione serviços conectados, estado armazenado nem afirmações de desempenho medido.
Prompt sugeridoCrie um design de Células Voronoi em WebGL em tela cheia, com pontos característicos à deriva, células nas cores azul, verde, roxo, azul-petróleo e marrom conforme a paleta, bordas claras e luminosas, um rótulo no canto superior esquerdo “OPENDESIGN · WEBGL PREVIEW”, um rótulo no canto superior direito “REAL-TIME · GPU”, um título grande no canto inferior esquerdo “VORONOI CELLS”, texto de apoio sobre pontos característicos à deriva e movimento guiado pelo cursor, e uma indicação no canto inferior direito “MOVE THE CURSOR”. Use apenas influência local do ponteiro e não invente serviços de backend, dados armazenados, métricas de desempenho nem controles extras.
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