Diseños gráficos
Diseño de shader de líquido iridiscente
Un vivo aspecto de aceite sobre agua fluye bajo una tipografía fija, mientras la entrada suavizada del puntero deforma un campo de color procedural sin texturas.
Usos del shader iridiscente
- Experimentos WebGL generativosExplora el movimiento basado en shaders sin depender de texturas importadas.
- Fondos visuales interactivosEstudia campos de color a pantalla completa moldeados por la entrada local del puntero.
- Referencias de programación creativaExamina cómo la tipografía enmarca un lienzo expresivo.
Aspectos destacados del campo de color líquido
- Superficie guiada por matemáticasLas ondas se presentan como cálculo visual sin texturas.
- Respuesta al cursorLa posición del puntero curva el flujo por el lienzo.
- Paleta iridiscenteCorrientes violeta, cian, rosa y rosado intenso crean contraste.
- Capa editorialLa tipografía grande ancla un campo visual por lo demás continuo.
Tres estados del campo iridiscente
1 / 3
Un aspecto de aceite sobre agua construido con matemáticas
Iridescent Liquid es un ejemplo oficial de OpenDesign construido en torno a una única vista previa WebGL, y no a un conjunto de pantallas de aplicación. El título del diseño, «LIQUID IRIDESCENCE», aparece sobre un campo saturado de formas fluidas violeta, cian, rosa y rosado intenso. La composición convierte el lienzo en protagonista y mantiene el texto explicativo cerca del recorrido de lectura inferior izquierdo.
El texto de apoyo describe el efecto como un «living oil-on-water field». La implementación renderiza un triángulo a pantalla completa con ruido procedural, en lugar de una malla esférica o una textura fotográfica. Así sugiere un material fluido sin representar un objeto literal. El lenguaje material es una metáfora visual, no una prueba de una simulación físicamente exacta de aceite o agua.
Arriba, «OPENDESIGN · WEBGL PREVIEW» identifica el contexto y «REAL-TIME · GPU» enmarca el enfoque de renderizado. Estas etiquetas orientan al espectador antes de leer el título mayor, pero deben tratarse como texto descriptivo de la interfaz, no como prueba de una tasa de fotogramas medida ni del rendimiento en producción.
Lienzo continuo
El campo visual llena la composición, así que el movimiento sigue siendo el contenido principal y no un fondo para paneles separados.
Contraste con textura
Las letras blancas grandes separan el mensaje editorial del denso campo de color, aunque su posición debe seguir estable cuando cambia el fondo.
Dónde encaja el diseño
Este trabajo es muy útil como referencia para fondos visuales interactivos, estudios de arte generativo y demostraciones de programación creativa. Muestra cómo una página puede comunicar un experimento visual con solo una descripción breve, un título grande y una indicación directa de interacción. Es menos adecuado para interfaces con mucha información, porque la superficie animada compite con etiquetas pequeñas y contenido detallado.
La indicación «MOVE THE CURSOR ↗» convierte al espectador de observador pasivo en participante. Los estados suministrados muestran el mismo lienzo con distintos límites de color y disposiciones de ondas, mientras la capa superpuesta se mantiene igual. Esa combinación hace legible el cambio de estado: cambia la composición, pero no el marco de lectura.
Demostración visual
Usa esta disposición cuando el comportamiento mismo sea el tema y una capa editorial estable pueda explicar el experimento.
Sección de apertura con ambientación
Adapta el campo para una sección de apertura centrada, aceptando que el contenido denso debe quedar fuera de la región animada.
Estudio de shader
Usa la premisa sin texturas para comparar superficies procedurales con materiales basados en imágenes sin cambiar el marco de la página.
Composición y movimiento
El diseño usa un fuerte orden de lectura vertical: etiquetas de contexto arriba, el encabezado sobredimensionado «LIQUID IRIDESCENCE» cerca de la parte inferior izquierda, el texto explicativo debajo y la instrucción del cursor abajo a la derecha. Esto distribuye la atención por el lienzo ancho y mantiene el mensaje principal agrupado en un bloque legible.
Las capturas muestran tres estados del mismo lienzo de shader, no pantallas independientes. En ellas, el encabezado y la frase de apoyo permanecen en su sitio mientras las corrientes circundantes pasan de regiones con predominio cian a pasajes más magenta, rosa, verde azulado y ocre. La capa estable da al movimiento un punto de referencia; la contrapartida es que el fondo puede reducir el contraste detrás de partes del texto.
El fragment shader usa ruido de seis capas mediante dos campos de deformación encadenados. Una atracción ponderada por la distancia desde el puntero curva las coordenadas de muestreo, y una paleta de coseno junto con términos de cresta brillantes crea las corrientes iridiscentes. En cada fotograma, ambas coordenadas del puntero se acercan a sus objetivos en una cantidad igual a la diferencia restante multiplicada por el coeficiente 0.06 del código, mientras el tiempo transcurrido sigue alterando el campo. La instrucción inferior derecha es texto fijo, no un control en el que se pueda hacer clic.
El color como estructura
La paleta no es un único degradado. Se organiza en amplias corrientes de color bordeadas por contornos pálidos y luminosos. El cian y el verde azulado aportan interrupciones más frías dentro del campo dominante magenta y violeta, mientras las líneas rosa pálido revelan la dirección del flujo. Esta variación ayuda a que el lienzo parezca tener dimensión sin añadir geometría literal.
Marco de lectura estable
La capa repetida demuestra un patrón práctico de interacción: conservar el título y la instrucción mientras la obra varía. Una recreación debe mantener esa relación intacta y luego comprobar si la paleta elegida deja contraste suficiente bajo el texto.
Límite de capacidades
Este artefacto es un ejemplo de diseño y renderizado. La evidencia aportada respalda estados visibles del lienzo WebGL, gestión local de la respuesta al puntero, redimensionado y un bucle de animación. No verifica servicios conectados, almacenamiento, despliegue en producción, tasas de fotogramas medidas ni el modelo original de generación. Por tanto, las tres capturas deben leerse como estados visuales de una composición, no como prueba de flujos de trabajo separados ni de rendimiento probado.
Cómo adaptarlo
Para una versión nueva, conserva la relación entre movimiento procedural y marco editorial, y cambia una variable cada vez: paleta, escala de las ondas, posición del título o influencia del puntero. Haz que el cambio sea observable en el lienzo y describe el comportamiento propuesto como propuesto, no como una capacidad existente.
Cómo crear un diseño de shader de líquido iridiscente en OpenDesign
Define el lienzo y el marco de lectura
Empieza con un único lienzo WebGL a pantalla completa, etiquetas de contexto arriba, un bloque de título abajo a la izquierda y una instrucción para el cursor abajo a la derecha. Mantén el título legible sobre las zonas más claras y más oscuras.
Define la superficie procedural
Construye un campo procedural sin texturas con corrientes amplias de violeta, magenta, cian, rosa y verde azulado, y líneas de cresta luminosas. Reproduce el movimiento local, guiado por el tiempo y sensible al puntero, de la fuente; mantén aparte cualquier afirmación sobre exactitud física del material o rendimiento en producción.
Prompt sugeridoCrea una composición de shader WebGL a pantalla completa titulada LIQUID IRIDESCENCE. Usa un campo procedural de aceite sobre agua sin texturas, con corrientes violeta, magenta, cian, rosa y verde azulado. Añade OPENDESIGN · WEBGL PREVIEW arriba a la izquierda, REAL-TIME · GPU arriba a la derecha, un título grande abajo a la izquierda, texto de apoyo sobre ondas matemáticas y MOVE THE CURSOR ↗ abajo a la derecha. Permite que el movimiento local del puntero influya en el campo, pero no afirmes servicios conectados, almacenamiento, rendimiento medido ni capacidades de vídeo o audio.
Refina el movimiento y el contraste
Compara varias posiciones del puntero y tamaños de viewport. Comprueba que la capa superpuesta permanece anclada mientras cambia el campo, que los contornos pálidos no borran el texto explicativo y que los estados alternativos siguen leyéndose como una sola composición.
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