Diseños gráficos
Diseño de shader de metal líquido
Un campo con apariencia de cromo que cambia solo combina ruido deformado, color iridiscente y reflejos que barren la superficie, bajo una tipografía fija en la esquina inferior izquierda.
Usos del metal líquido
- Dirección de arte en WebGLDa forma a superficies generadas por shaders para estudios visuales expresivos.
- Estudios de movimiento generativoCompara estados cambiantes del material sin recursos de textura.
- Fondos animados para heroExplora tratamientos visuales a lienzo completo para experiencias digitales.
Puntos destacados del shader con efecto cromo
- Material matemáticoUn campo de ruido con deformación de dominio crea la estructura de la superficie.
- Paleta iridiscenteLavanda, cian, verde y magenta cambian entre estados.
- Movimiento especularLos reflejos brillantes hacen que la superficie se lea como metal reflectante.
- Tres estados capturadosFotogramas distintos muestran cómo cambia la composición con el tiempo.
Tres estados del campo metálico
1 / 3
Una superficie tipo cromo sin texturas de imagen
Liquid Metal es un ejemplo gráfico oficial de OpenDesign centrado en una sola composición de shader a lienzo completo. Su titular, “Molten chrome, zero textures.”, establece la restricción central: la superficie se presenta como un estudio de material y no como una ilustración construida con imágenes.
La línea de apoyo describe un campo de ruido con deformación de dominio sombreado como metal, con un reflejo especular que barre la superficie y una paleta iridiscente de película delgada. Esa descripción coincide con lo que muestran las capturas: bandas plegadas y fluidas, reflejos blancos nítidos y un color que pasa de lavanda y violeta a cian, verde y magenta.
Dónde encaja este diseño
El artefacto resulta más útil cuando la superficie visual debe aportar atmósfera sin competir con un modelo de interacción más amplio. Su lienzo continuo puede servir de referencia para tratamientos hero en WebGL, estudios de arte generativo o trabajos de identidad visual basados en el movimiento.
La ausencia de controles propios mantiene la atención en el campo renderizado. Eso facilita estudiar la muestra, pero también implica que una adaptación a producto tendría que definir su propio modelo de interacción, su tratamiento de accesibilidad y su relación con el contenido, en lugar de dar por resueltas esas decisiones.
Referencia de shader
Usa el diseño para estudiar cómo la distorsión del ruido y las bandas especulares crean una lectura líquida sin imágenes de textura.
Dirección de movimiento
Usa los estados capturados para comparar cómo la paleta y el flujo alteran el carácter emocional de una misma composición.
Aporte al sistema visual
Traduce las relaciones entre lavanda, cian, verde y magenta en una dirección controlada para una interfaz más amplia.
Cómo cambia la composición
Los tres fotogramas conservan un pequeño rótulo verde LIQUID METAL, un titular mucho más grande “Molten chrome, zero textures.”, su descripción de apoyo y una insignia WebGL2 en la esquina superior derecha. El shader cambia bajo esa jerarquía fija. Un ruido de seis capas da forma a un campo de alturas; las muestras de altura cercanas estiman las normales de la superficie, mientras que una luz en movimiento, un término especular nítido y una paleta iridiscente crean el aspecto cromado.
En view-1 dominan el lavanda pálido y el blanco, con canales estrechos azules y violetas que cruzan el campo. View-2 se desplaza hacia bandas verdes y azules más oscuras, y la superficie resulta más direccional y alargada. View-3 introduce magenta, oliva y zonas de gris ahumado más marcados. Son estados capturados distintos, no prueba de una paleta seleccionable por el usuario ni de un modo de rendimiento medido.
View-1
Dominan el lavanda y el violeta, con reflejos blancos densos que producen un aspecto cromado suave.
View-2
Los canales verdes y azul profundo se hacen más visibles y crean bandas direccionales más largas.
View-3
El magenta, el oliva y el gris ahumado aumentan la sensación de variación cromática.
Tipografía estable, campo variable
El gran título blanco se sitúa en la parte baja del campo visual, precedido por la breve etiqueta verde LIQUID METAL. Este orden permite identificar el tema antes de leer la descripción más larga del material. A cambio, el texto ocupa una parte considerable de la obra y reduce la superficie de shader despejada disponible para inspeccionar.
Contraste reflectante
Reflejos brillantes y estrechos delinean una y otra vez las formas deformadas. Crean la señal visual de metal pulido, mientras que los canales más oscuros dan a esos reflejos bordes que seguir. Como el efecto depende del contraste, una paleta más calmada o una menor intensidad de los reflejos probablemente haría el material menos legible, aunque mejorase el contraste del texto en algunas zonas.
Comportamiento visible y límites
El código fuente implementa renderizado automático en WebGL2, animación basada en el tiempo transcurrido y cambio de tamaño del lienzo. No registra controles de puntero, clic ni teclado. Una estimación local de la tasa de fotogramas se actualiza aproximadamente cada medio segundo en la insignia WebGL2; describe esta sesión de renderizado, no un rendimiento de GPU garantizado. El efecto es una aproximación visual procedimental del cromo, no una simulación física de metal fundido.
En el marcado estático no aparecen controles propios, y las pruebas aportadas no establecen servicios conectados, datos de usuario almacenados, despliegue en producción, entradas de interacción ni el modelo de generación original. Una recreación puede proponer esas capacidades, pero quedan fuera de lo que este diseño verifica por sí mismo.
Mantén el lienzo en local
Trata el shader como una capa visual autónoma y define por separado cualquier comportamiento de la aplicación externa.
Separa las capturas de las métricas
Usa los tres fotogramas para hablar de variación visual y mide el rendimiento en ejecución de forma independiente, en el entorno previsto.
Cómo crear un diseño de shader de metal líquido en OpenDesign
Define el lienzo y la tipografía
Empieza con una única superficie de shader a lienzo completo y respeta el orden de la referencia: la etiqueta pequeña LIQUID METAL, el titular grande Molten chrome, zero textures. y después la descripción de apoyo. Mantén la tipografía legible sobre los reflejos más brillantes.
Prompt sugeridoCrea un estudio de shader de metal líquido en WebGL2 a lienzo completo, con un bloque de texto estable en la esquina inferior izquierda que diga LIQUID METAL, Molten chrome, zero textures. y una descripción breve sobre ruido con deformación de dominio, reflejos especulares y una paleta iridiscente de película delgada. Usa solo renderizado local; no añadas texturas, servicios externos, controles ni afirmaciones de rendimiento.
Ajusta el aspecto del material
Refina juntos el campo con deformación de dominio, la respuesta especular y la paleta. Compara las direcciones lavanda-violeta, verde-cian y magenta-oliva como estados visuales y comprueba si las bandas reflectantes siguen describiendo una superficie líquida coherente.
Revisa los estados capturados
Revisa varios fotogramas al tamaño de lienzo previsto. Confirma que el título sigue siendo legible, que el shader sigue siendo el protagonista visual y que cualquier etiqueta de GPU, WEBGL2 o FPS se presenta como información local de pantalla y no como un benchmark verificado.
Exportar y obtener un enlace para compartir
Exporta tu diseño terminado y luego usa Compartir en OpenDesign para obtener un enlace. Abre el enlace en una ventana del navegador independiente y comprueba que la versión prevista y sus recursos estén disponibles antes de enviarlo.
Diseño de póster editorial sobre flujos de trabajo con IA
El diseño de póster editorial sobre flujos de trabajo con IA presenta seis afirmaciones sobre los flujos de trabajo, con capítulos numerados, ejemplos concretos de prompts y acentos tipográficos color óxido sobre un fondo crema.
Diseños gráficos
Diseño de carrusel social sobre flujos de trabajo con IA
Siete tarjetas verticales utilizan encabezados chinos sobredimensionados, hábitos numerados, campos de color cambiantes y una declaración final para explicar los flujos de trabajo de edición con IA.
Diseños gráficos
Diseño de shader Aurora Field
Un campo de ruido azul verdoso animado automáticamente aporta atmósfera a un hero WebGL, mientras un titular fijo y una pequeña insignia local de frecuencia de fotogramas anclan la escena.
Diseños gráficos
Diseño de shader Aurora Veil
Aurora Veil es una composición de shader interactiva que convierte la luz en capas, las estrellas y el movimiento del cursor en un hero atmosférico de WebGL.
Diseños gráficos